Glassmorphism est le look verre dépoli : une carte semi-transparente qui brouille tout ce qui se trouve derrière elle, le style dans lequel Apple et Windows se sont penchés sur leurs interfaces Le construire à la main dans Elementor signifie CSS personnalisé avec filtre de fond et quelques bizarreries de navigateur Le gratuit Extension Glassmorphism dans Modules complémentaires principaux pour Elementor le transforme en une bascule sur l'onglet Avancé de n'importe quel élément.
Vous l'allumez, définissez une valeur de flou et une couleur de fond semi-transparente, arrondissez les coins, et l'élément devient une carte en verre Voici toute la configuration.
Ce que fait l'extension Glassmorphism #
L'extension ajoute un Glassmorphisme section à la Avancé onglet de chaque élément Elementor, des sections complètes jusqu'aux widgets uniques Activez-le et l'élément obtient un flou de fond, de sorte que l'image de fond ou le contenu derrière lui se faufile en verre dépoli tandis que le propre texte de l'élément reste net.
Le look fonctionne mieux lorsque l'élément se trouve au-dessus de quelque chose visuellement occupé, comme un fond photo ou un dégradé Sur une section blanche unie, il n'y a rien à brouiller, donc l'effet n'a rien à montrer.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Glassmorphism est une extension gratuite, donc aucune licence Pro n'est requise.
- Un élément placé sur une image ou un fond coloré, le flou a donc quelque chose avec quoi travailler.
Comment activer l'extension Glassmorphism #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Le glassmorphisme se trouve dans le Widgets d'affichage groupe avec un badge Populaire, à côté de Patterns et Ligne Grille. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications en haut de la page et attendez l'avis vert “Settings enregistré avec succès”.
Où le trouver dans l'éditeur Elementor #
Ouvrez votre page avec Elementor et sélectionnez l'élément que vous souhaitez transformer en verre Dans l'exemple vidéo, il s'agit d'un widget Dual Heading assis sur un fond photo. Aller au Avancé tab, et vous trouverez le Glassmorphisme section avec le badge MA violet, aux côtés des autres extensions Master Addons comme Conditions d'affichage et Effets flottants.
Paramètres de glassmorphisme expliqués #
Retourner Activer Glassmorphisme to Oui et les contrôles apparaissent.
- Valeur floue : avec quelle force l'arrière-plan derrière l'élément smears, de 0 à 100 px (20 px par défaut).Le flou s'applique à l'ensemble du conteneur, et même une petite valeur comme 2 se lit clairement sur une photo.
- Couleur de fond : la teinte du verre La pointe du panneau le dit clairement : utilisez les couleurs RGBA pour un meilleur contrôle Une couleur HEX unie est convertie en RGBA à 30 pour cent d'opacité automatiquement, de sorte que le verre ne devient jamais solide.
- Rayon frontalier : arrondit les coins de la carte en verre, par côté ou lié.
- Largeur de la frontière : ajoute un contour blanc semi-transparent de 0 à 10 px, qui se lit comme le bord d'une vitre La couleur de la bordure n'est pas réglable ici.
- Corriger le débordement (si le flou ne fonctionne pas) : un interrupteur de sauvetage Certaines mises en page transportent overflow : hidden, qui bloque le filtre de fond qui alimente le flou Allumez ceci si vous avez tout activé et ne voyez toujours aucun effet.
Choisissez la teinte de verre avec une couleur RGBA #
Cliquez sur l'échantillon personnalisé à côté de Couleur d'arrière-plan et choisissez une couleur, puis tirez le curseur alpha vers le bas Dans la démo la valeur est un rouge semi-transparent (#DC4C4C8C), qui teinte la carte tandis que les sièges de la photo derrière elle restent visibles à travers le flou.
Rondissez les coins et sauvez un flou manquant #
Définir un Rayon Frontière pour adoucir la carte Quelques pixels suffisent pour le look verre Et si le flou refuse de se montrer, retournez Corriger le débordement to Yes : il supprime la règle de débordement : masqué qui bloque le filtre de toile de fond dans certains conteneurs.
L'effet fini #
Voici le résultat sur le devant : une carte en verre arrondie avec une teinte rouge, la photo floue derrière, et le titre et le texte nets sur le dessus.
Où le verriermorphisme fonctionne bien #
- Superpositions de héros. Un panneau de verre pour le titre et le CTA au-dessus d'une photo pleine largeur.
- Tarification et cartes de caractéristiques. Cartes en verre sur un fond de section dégradée.
- Blocs témoignages. Citations qui flottent sur les images sans les cacher.
- En-têtes collants. Un flou subtil maintient le menu lisible lorsque le contenu défile en dessous.
- Boîtes de connexion ou d'inscription. Le panneau dépoli classique sur une image de marque.
Foire aux questions #
Qu'est-ce que l'extension Glassmorphism dans Master Addons ?
Il s'agit d'une extension gratuite qui ajoute un effet de verre dépoli à n'importe quel élément Élémenteur de l'onglet Avancé Vous obtenez des contrôles pour la force du flou, une couleur de fond semi-transparente, le rayon de bordure et la largeur de bordure, et vous n'avez jamais à écrire le CSS vous-même.
Pourquoi le flou du glassmorphisme ne se manifeste-t-il pas ?
Habituellement, un conteneur parent transporte un débordement : caché, ce qui bloque le filtre de fond derrière l'effet Activez la bascule Fix Overflow au bas de la section Glassmorphisme Vérifiez également que l'élément se trouve sur une image ou un fond coloré, puisque le flou sur blanc uni est invisible.
Quels éléments peuvent utiliser l'effet de glassmorphisme ?
Tout élément Elementor avec un onglet Avancé : sections, colonnes, conteneurs, et widgets individuels Activer l'extension une fois dans le tableau de bord Master Addons, et la section Glassmorphisme apparaît sur l'onglet Avancé de chaque élément de l'éditeur.
Quelle couleur de fond dois-je utiliser pour le glassmorphisme ?
Une couleur RGBA semi-transparente Choisissez n'importe quelle teinte et abaissez le canal alpha afin que l'arrière-plan reste visible à travers la teinte. Si vous entrez dans une couleur HEX unie, l'extension la convertit en RGBA à 30 pour cent d'opacité afin que l'effet verre fonctionne toujours.
L'extension Glassmorphism est-elle gratuite ?
Oui. Il est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Display Widgets de l'onglet Extensions. Le page de tarification répertorie ce que les plans Pro ajoutent au-delà des fonctionnalités gratuites.
Envelopper #
L'extension Glassmorphism transforme une astuce CSS truquée en quelques contrôles sur l'onglet Avancé : activer, flouter, teinte, rayon et bordure Mettez un widget sur une photo, gardez la couleur d'arrière-plan semi-transparente et atteignez Fix Overflow si jamais le flou se cache Page d'extension Glassmorphism compare-le avec l'écriture du CSS vous-même Pour plus de mises à niveau de l'éditeur comme celle-ci, parcourez le Widgets et extensions Master Addons(ou prenez un design prêt à l'emploi du) kits de modèles et ajoutez le verre par-dessus.
