Comment ajouter un effet de morphisme en verre dépoli dans Elementor

Votre site internet joue le rôle d’un magasin physique dans une plateforme en ligne. C'est la passerelle la plus cruciale par laquelle votre public interagit et s'engage.

Heureusement, avec la bénédiction des progrès technologiques continus, vous pourrez profiter de temps en temps de nouvelles fonctionnalités dans Elementor. Ici, le morphisme du verre Elementor est une fonctionnalité unique en son genre pour induire de l'élégance dans la conception de votre site Web. Mais savez-vous comment ça marche ?

Ne vous inquiétez pas, si vous ne le faites pas. Dans ce blog, nous démontrerons le guide sans code sur la façon d'ajouter à l'effet d'écran en verre dépoli dans Elementor le long avec ses opportunités. Voyons donc comment améliorer votre interface Web.

Qu'est-ce que l'effet Glass Morphism dans Elementor ?

Le glassmorphisme est une caractéristique unique qui ajoute une apparence de verre dépoli à l’arrière-plan de votre site Web. Il vise à introduire un arrière-plan de site Web éblouissant avec effets de flou, transparence, et points forts.

Avantages de l'affichage de l'effet de morphisme du verre Elementor dans WordPress 

Sais-tu cela 59% du public préfère faire défiler des pages Web magnifiquement conçues plutôt que des pages simples ?

Cela signifie que sans intégrer une interface alléchante, votre site Web ne sera pas attrayant pour près des deux tiers de votre audience Web. C'est pourquoi vous devriez vous concentrer davantage sur des effets et des personnalisations uniques qui redéfiniront votre Interface utilisateur Web. L'une de ces personnalisations est l'effet verre dépoli, car il induira du professionnalisme et rendra les prix ainsi que d'autres pages plus attrayants pour vos visiteurs.

En outre, l’interface utilisateur en verre dépoli contribue à réaliser de nombreuses autres opportunités commerciales. Voici les principaux avantages de la mise en œuvre de l’effet de morphisme du verre dans WordPress :

• Tu peux mettre en évidence certaines sections avec cet effet de verre pour guider votre audience vers des segments importants.
• Cela aide à réussir pages Web dynamiques et uniques en ajoutant un effet de flou à l'arrière-plan d'Elementor.
• Ceci peut améliorer la lisibilité en ajustant le contraste des couleurs de votre texte et de votre arrière-plan.
• Il introduit un sentiment de transparence dans votre conception Web.
• L'effet verre peut renforcer réactivité de l'appareil en le rendant visuellement attrayant pour différentes tailles d'écran.
• Il débloque également portées de marque ajouter des effets de verre multicouche avec des copies Web parfaites.

Guide étape par étape sur l'ajout d'un effet de verre dépoli dans Elementor

Il existe deux méthodes pour ajouter l’effet d’écran en verre dans WordPress. L’un utilise CSS ou le codage et un autre utilise l’addon Elementor pour Glass Morphism. Étant donné que l'addon Elementor est la méthode la plus simple de toutes, nous allons démontrer ici le système complet en utilisant l'un des plugins les plus populaires. Alors, allons-y :

Étape 1 : Installez et activez le plugin glass-morphism

Ajouter morphisme du verre effets dans WordPress, vous aurez besoin d’un plugin qui inclut cette fonctionnalité. Heureusement, il existe de nombreuses options dans l’écosystème WordPress. Cependant, nous utilisons ici ElementsKit, un plugin admiré et utilisé par des millions de personnes compte tenu de la flexibilité d’utilisation et de personnalisation. Puisqu'il s'agit d'un module complémentaire Elementor, vous devez installer Elementor d'abord.

Après avoir installé Elementor, naviguez Plugins >> Ajouter un nouveau Plugin et rechercher ElementsKit. Alors cliquez sur « Installer maintenant » bouton et l'activer après avoir terminé l'installation.

Étape 2 : Activez le module Glassmorphism.

Dans la deuxième étape, vous devez activer le module Glass Morphism. Pour cela, rendez-vous sur ÉlémentsKit >> ÉlémentsKit et cliquez sur "Modules" languette. Alors activer le « Glass Morphism » module et appuyez sur la touche "Sauvegarder les modifications" bouton. Ainsi, tous les effets du Glass Morphism seront actifs pour votre site internet.

Après cela, visitez la page où vous souhaitez ajouter l'effet Glass-morphism à partir de l'onglet Pages et appuyez sur le bouton « Modifier avec Elementor » bouton pour accéder à l’éditeur Elementor. À partir de là, vous pouvez ajouter des effets secondaires attrayants en verre dépoli à n’importe quelle section de votre page Elementor.

Étape 3 : Affichez l'effet verre sur votre site. 

C'est l'étape la plus importante pour ajouter l'effet Elementor Glassmorphism. En cas d'ajout d'un effet Glass Morphism, sélectionner une rubrique et accédez à « Avancé » languette. Faites ensuite défiler vers le bas et appuyez sur « Modifier » icône du morphisme du verre. Vous y verrez les effets suivants qui vous permettront d'ajuster l'arrière-plan du Glassmorphisme selon votre désir :

Se brouiller: Cet effet ajoute un effet multicouche, transparent et semblable à du verre à votre arrière-plan. Plus vous augmentez la valeur « px », plus l'effet de flou sera ajouté à votre section sélectionnée. Alors, ajustez l’effet de flou à partir de cette option.

Luminosité: Cette option vous permet d'éclairer l'arrière-plan de votre effet écran de verre. Insérez une certaine valeur ou ajustez la bascule. Vous pouvez profiter d'une expérience d'édition en temps réel grâce au module Glass Morphism d'ElementsKit.

Contraste: Le contraste des couleurs est le facteur le plus important lors de la conception des éléments de votre site Web. Cela rendra votre conception visuellement attrayante, maintiendra le bon contraste entre les différents éléments et rendra votre conception visuellement attrayante.

Saturation: Cette option vous permet de personnaliser l'intensité des couleurs en faisant glisser le curseur de gauche à droite. Vous pouvez également saisir directement une valeur pour cette section. L'intensité de la couleur sera d'autant plus élevée que vous faites glisser le curseur vers la droite ou que vous insérez une valeur de saturation élevée.

Niveaux de gris : Il définit le degré de gris que vous souhaitez induire dans votre conception. Plus vous augmentez la valeur des pixels, plus cela ajoute un effet de gris à votre design. À partir de là, sélectionnez la valeur pour Niveaux de gris et donnez une apparence appropriée.

Teinte: Vous pouvez également ajuster la teinte de l'effet verre. La teinte fait principalement référence à l'option qui contrôle l'intensité de deux ou plusieurs mélanges de couleurs. Grâce à cette option, vous pouvez augmenter ou diminuer la luminosité de différents mélanges de couleurs.

FAQ

Comment flouter l’arrière-plan dans Elementor ?

Glass-Morphism d'ElementsKit offre un effet de flou ainsi que de nombreuses autres options que vous pouvez ajuster dans une interface d'édition en temps réel. Avec cet outil, vous pouvez ajouter du flou à votre arrière-plan Elementor en faisant glisser le bouton bascule de gauche à droite.

En résumé

L'effet Glass Morphism d'ElementsKit peut insuffler une nouvelle vie à votre interface Web. Que vous soyez un néophyte ou un concepteur de sites Web expérimenté, ce guide présentera une approche simple et conviviale pour afficher un effet fascinant de morphisme de verre sur votre site Web WordPress. De plus, cela ne nécessite aucune expertise en codage. Alors, suivez ce guide et transformez votre conception Web en une conception visuellement attrayante en apportant des effets de morphisme en verre dépoli à Elementor.