Erweiterung des freien Elementorglasmorphismus: Frosted Glass Effect in One Toggle
Glassmorphism ist der Milchglas-Look: eine halbtransparente Platte, die verwischt, was auch immer dahinter sitzt Die kostenlose Glassmorphism-Erweiterung in Master Addons fügt sie der erweiterten Registerkarte eines beliebigen Elementor-Widgets, einer Säule, eines Abschnitts oder eines Behälters hinzu. Schalten Sie sie ein, setzen Sie die Unschärfe und eine durchsichtige Hintergrundfarbe, runden Sie die Ecken ab, und das Element wird zu einer Glaskarte Es passt zu Heldenüberlagerungen, Preiskarten, Testimonials und klebrigen Kopfzeilen.
Steuerung der Unschärfe und Glasfärbung
Blur Value läuft von 0 bis 100 px und beginnt bei 20 px Hintergrundfarbe stellt die Tönung des Glases ein: Wählen Sie eine RGBA-Farbe und senken Sie ihre Deckkraft, so dass der Inhalt dahinter immer noch durchscheint Der Grenzradius rundet die Ecken in px, % oder em ab, und die Grenzbreite fügt einen dünnen, halbtransparenten weißen Rand von bis zu 10 px hinzu.
- Unschärfewert von 0 bis 100 px, standardmäßig 20 px.
- RGBA Hintergrundfarbe für die Tönung Eine HEX - oder RGB-Farbe wird für Sie auf 30% Deckkraft umgestellt.
- Randradius pro Ecke, plus eine 0 bis 10 px Glaskante.
Beheben Sie Überlauf, wenn die Unschärfe nicht angezeigt wird
Die Unschärfe kommt von der CSS-Kulissenfiltereigenschaft, und Überlauf: Versteckt ist der häufigste Grund, warum sie fehlt Der Fix Overflow-Schalter stellt den Überlauf des Elements auf sichtbar, sodass Sie ihn beheben können, ohne ein Stylesheet zu öffnen.
- Ein Schalter im Glassmorphism-Panel, kein benutzerdefiniertes CSS.
- Verwenden Sie es, wenn der Effekt an ist, aber nichts verschwommen aussieht.
- Überprüfen Sie auch, ob das Element über einem Foto, einem Farbverlauf oder einem anderen belebten Hintergrund sitzt. Über einfarbigem Weiß gibt es nichts zu verwischen.
Glassmorphism CSS vs. Glassmorphism-Erweiterung
Die CSS-Filter von Elementor verwischen das Element selbst, Text enthalten. Eine Glaskarte benötigt stattdessen einen Hintergrundfilter, der nur verwischt, was hinter dem Element sitzt, und Elementor hat keine Kontrolle darüber. Geschrieben von Hand, sieht das CSS wie folgt aus:
.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;
}| Handgeschriebenes CSS | Glassmorphie-erweiterung | |
|---|---|---|
| Wo man es einstellt | Ein benutzerdefiniertes CSS-Feld oder Ihr Stylesheet | Steuerelemente im Reiter Erweitert |
| Safari-präfix | Hinzufügen - webkit-backdrop-filter selbst | Inbegriffen |
| HEX - oder RGB-Farben | Bleiben Sie solide, es sei denn, Sie fügen Deckkraft hinzu | Umgerechnet auf 30% Deckkraft |
| Unschärfe durch Überlauf blockiert: versteckt | Finden und selbst außer Kraft setzen | Überlaufschalter beheben |
| Arbeitet an | Was auch immer Ihr Selektor anstrebt | Widgets, Spalten, Abschnitte und Container |
Hintergrundfilter funktioniert in den aktuellen Chrome, Edge, Safari und Firefox Ältere Browser zeigen den halbtransparenten Hintergrund ohne Unschärfe. Glas sieht bei Bewegung oder Farbe am besten aus, also probieren Sie es obendrein Partikel oder ein Hintergrund des animierten Gradienten (Pro).Für Effekte, die das Panel nicht abdeckt, fügen Sie Ihre eigenen Regeln mit hinzu Benutzerdefiniertes CSS.
Häufig gestellte Fragen zu Glasmorphie
Warum zeigt sich mein Unschärfeeffekt nicht?
Schalten Sie den Fix Overflow im Glassmorphism-Panel ein. Dadurch wird der Überlauf des Elements sichtbar, sodass der Hintergrundfilter funktionieren kann. Stellen Sie außerdem sicher, dass sich hinter dem Element ein Bild oder ein farbenfroher Hintergrund befindet.
Kann ich Volltonfarben mit Glas-Effekt verwenden?
Ja. Eine HEX - oder RGB-Farbe wird bei 30% Deckkraft in RGBA umgewandelt, das Glas bleibt also durchsichtig, zur exakten Kontrolle wählen Sie eine RGBA-Farbe und stellen Sie die Deckkraft selbst ein.
Funktioniert es mit irgendeinem Thema?
Ja. Der Effekt ist auf Elementor-Elemente eingestellt, funktioniert also mit jedem Theme, auf dem Elementor ausgeführt wird Besucher benötigen einen Browser, der den Hintergrundfilter unterstützt, der aktuelle Versionen von Chrome, Edge, Safari und Firefox abdeckt.
Ist die Glassmorphism-Erweiterung kostenlos?
Ja. Glassmorphism ist eine der kostenlosen Erweiterungen in Master Addons for Elementor Schalten Sie es im Master Addons Dashboard ein und es wird auf der Registerkarte Erweitert jedes Elements angezeigt.
Entdecken Sie weitere Funktionen, um schneller zu bauen und intelligenter zu gestalten
Warum bei einem Effekt aufhören? die Master Addons Suite bietet alles andere, was Sie brauchen: einzigartige Widgets, tiefere Anpassung und spezielle Tools, die nahtlos zusammenarbeiten Verwandeln Sie Elementor in Ihr ultimatives Design-Kraftpaket.
Container-extras
Muster
Post-/Seitenduplikator
Fortschrittsanzeige lesen
