Extension de glassmorphisme d'élémenteur libre : effet de verre givré en un seul basculeur
Le glassmorphisme est le look de verre dépoli : un panneau semi-transparent qui brouille tout ce qui se trouve derrière lui L'extension gratuite Glassmorphism dans Master Addons l'ajoute à l'onglet Avancé de tout widget, colonne, section ou conteneur Elementor. Allumez-le, définissez le flou et une couleur de fond transparente, arrondissez les coins, et l'élément devient une carte de verre Il convient aux superpositions de héros, aux cartes de prix, aux témoignages et aux en-têtes collants.
Contrôles de teinte floue et verre
Blur Value va de 0 à 100 px et commence à 20 px. Background Color définit la teinte du verre : choisissez une couleur RGBA et abaissez son opacité pour que le contenu derrière s'affiche toujours. Border Radius arrondit les coins en px, % ou em, et Border Width ajoute un bord blanc fin et semi-transparent allant jusqu'à 10 px.
- Valeur de flou de 0 à 100 px, 20 px par défaut.
- Couleur de fond RGBA pour la teinte Une couleur HEX ou RVB est convertie en 30 % d'opacité pour vous.
- Border Radius par coin, plus un bord de verre de 0 à 10 px.
Corrigez le débordement lorsque le flou ne s'affiche pas
Le flou provient de la propriété CSS background-filter, et le débordement : caché est la raison la plus courante pour laquelle il manque Le commutateur Fix Overflow met le débordement de l'élément en évidence, de sorte que vous pouvez le corriger sans ouvrir de feuille de style.
- Un interrupteur dans le panneau Glassmorphisme, pas de CSS personnalisé.
- Utilisez-le lorsque l'effet est activé mais que rien ne semble flou.
- Vérifiez également que l'élément se trouve sur une photo, un dégradé ou un autre fond occupé Sur blanc uni, il n'y a rien à brouiller.
Glassmorphisme CSS vs l'extension Glassmorphisme
Les filtres CSS d'Elementor brouillent l'élément lui-même, texte inclus Une carte en verre a besoin d'un filtre de fond à la place, ce qui brouille uniquement ce qui se trouve derrière l'élément, et Elementor n'a aucun contrôle pour l'écrire à la main, le CSS ressemble à ceci :
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| CSS manuscrit | Extension Glassmorphism | |
|---|---|---|
| Où vous l'avez réglé | Un champ CSS personnalisé ou votre feuille de style | Contrôles dans l'onglet Avancé |
| Préfixe Safari | Ajoutez-vous - webkit-backdrop-filtrez-vous | Inclus |
| Couleurs HEX ou RVB | Restez solide à moins d'ajouter de l'opacité | Converti en 30 % d'opacité |
| Flou bloqué par débordement : caché | Trouvez-le et remplacez-le vous-même | Correction du commutateur de débordement |
| Fonctionne sur | Quelles que soient les cibles de votre sélecteur | Widgets, colonnes, sections et conteneurs |
le filtre de toile de fond fonctionne dans Chrome, Edge, Safari et Firefox actuels Les navigateurs plus anciens affichent l'arrière-plan semi-transparent sans le flou Le verre est plus beau en termes de mouvement ou de couleur, alors essayez-le par-dessus Particules ou un Fond de dégradé animé (Pro).Pour les effets que le panneau ne couvre pas, ajoutez vos propres règles avec Css personnalisé.
Questions fréquemment posées sur le glassmorphisme
Pourquoi mon effet de flou ne se manifeste-t-il pas ?
Activez Fix Overflow dans le panneau Glassmorphisme Il met le débordement de l'élément à visible pour que le filtre de fond puisse fonctionner Assurez-vous également qu'il y a une image ou un arrière-plan coloré derrière l'élément.
Puis-je utiliser des couleurs unies avec effet verre ?
Oui. Une couleur HEX ou RVB est convertie en RGBA à 30 % d'opacité, donc le verre reste transparent. Pour un contrôle exact, choisissez une couleur RGBA et définissez vous-même l'opacité.
Est-ce que ça marche avec un thème quelconque ?
Oui. L'effet est défini sur les éléments Elementor, il fonctionne donc avec n'importe quel thème qui exécute Elementor. Les visiteurs ont besoin d'un navigateur prenant en charge le filtre de toile de fond, qui couvre les versions actuelles de Chrome, Edge, Safari et Firefox.
L'extension Glassmorphism est-elle gratuite ?
Oui. Glassmorphism est l'une des extensions gratuites de Master Addons for Elementor. Allumez-le dans le tableau de bord Master Addons et il apparaît dans l'onglet Avancé de chaque élément.
Explorez plus de fonctionnalités pour créer plus rapidement et concevoir plus intelligemment
Pourquoi s'arrêter à un effet ? la suite Master Addons fournit tout ce dont vous avez besoin : des widgets uniques, une personnalisation plus profonde et des outils spécialisés qui fonctionnent ensemble de manière transparente. Transformez Elementor en votre centrale de conception ultime.
Extras de conteneurs
Modèles
Duplicateur de messages/pages
Barre de progression de lecture
