Glassmorphism ist der Milchglas-Look: eine halbtransparente Karte, die verwischt, was auch immer dahinter sitzt, der Stil, in den Apple und Windows sich über ihre Schnittstellen gelehnt haben Bauen Sie es von Hand in Elementor bedeutet benutzerdefiniertes CSS mit Hintergrundfilter und ein paar Browser-Mirks Das gratis Glassmorphie-erweiterung In Master-Addons für Elementor Verwandeln Sie es in einen Umschalter auf der Registerkarte Erweitert eines beliebigen Elements.
Man schaltet es ein, stellt einen Unschärfewert und eine halbtransparente Hintergrundfarbe ein, umrundet die Ecken, und das Element wird zur Glaskarte Hier das ganze Setup.
Was die Glassmorphism-Erweiterung bewirkt #
Die Erweiterung fügt a hinzu Glasmorphie Abschnitt zum Fortgeschritten Tab jedes Elementor-Elements, von Vollabschnitten bis hin zu einzelnen Widgets Aktivieren Sie es und das Element erhält eine Hintergrundunschärfe, sodass das Hintergrundbild oder der Inhalt dahinter in Milchglas verschmiert, während der eigene Text des Elements scharf bleibt.
Der Look funktioniert am besten, wenn das Element auf etwas optisch Beschäftigtem sitzt, wie einem Fotohintergrund oder einem Farbverlauf Über einem schlichten weißen Ausschnitt gibt es nichts zu verwischen, sodass der Effekt nichts zu zeigen hat.
Bevor Sie beginnen #
- Wordpress Mit Elementer Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Glassmorphism ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
- Ein Element, das über einem Bild oder einem bunten Hintergrund platziert wird, sodass die Unschärfe etwas zu verarbeiten hat.
So aktivieren Sie die Glassmorphism-Erweiterung #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master-Addons Und öffnen Sie die Erweiterungen Tab. Glasmorphie sitzt in der Widgets anzeigen Gruppe mit einem beliebten Abzeichen, neben Mustern und Gitterlinie. Klicken Sie auf den Knebel, damit er violett wird, und schlagen Sie dann Änderungen speichern Ganz oben auf der Seite und warten Sie auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Wo findet man es im Elementor-Editor #
Öffnen Sie Ihre Seite mit Elementor und wählen Sie das Element aus, das Sie in Glas verwandeln möchten Im Videobeispiel ist es ein Dual Heading Widget, das auf einem Fotohintergrund sitzt Gehen Sie zu der Fortgeschritten Tab, und Sie werden die finden Glasmorphie Abschnitt mit dem lila MA-Abzeichen, zusammen mit den anderen Master Addons-Erweiterungen wie Anzeigebedingungen und schwebende Effekte.
Glasmorphie-Einstellungen erklärt #
umdrehen Glassmorphismus aktivieren zu Ja und die Steuerung erscheint.
- Unschärfewert: Wie stark der Hintergrund hinter dem Element verschmiert, von 0 bis 100 px (20 px standardmäßig) Die Unschärfe gilt für den gesamten Container, und selbst ein kleiner Wert wie 2 liest sich deutlich über einem Foto.
- Hintergrundfarbe: Die Tönung des Glases Die Plattenspitze sagt es deutlich: Verwenden Sie RGBA-Farben für die beste Kontrolle. Eine einfache HEX-Farbe wird automatisch in RGBA mit 30 Prozent Deckkraft umgewandelt, sodass das Glas nie fest wird.
- Grenzradius: Rundung der Ecken der Glaskarte, pro Seite oder verknüpft.
- Grenzbreite: Fügt einen halbtransparenten weißen Umriss von 0 bis 10 px hinzu, der sich wie der Rand einer Glasscheibe liest Die Randfarbe ist hier nicht einstellbar.
- Überlauf beheben (wenn Unschärfe nicht funktioniert): Ein Rettungsschalter. Einige Layouts tragen overflow:hidden, was den Hintergrundfilter blockiert, der die Unschärfe antreibt Schalten Sie dies ein, wenn Sie alles aktiviert haben und immer noch keine Wirkung sehen.
Wählen Sie den Glasstich mit einer RGBA-Farbe #
Klicken Sie auf den benutzerdefinierten Swatch neben Hintergrundfarbe Und eine Farbe wählen, dann den Alpha-Schieber nach unten ziehen In der Demo ist der Wert ein halbtransparentes Rot (#DC4C4C8C), welches die Karte tönt, während die Sitze auf dem Foto dahinter durch die Unschärfe sichtbar bleiben.
Runden Sie die Ecken ab und retten Sie eine fehlende Unschärfe #
Einstellen Grenzradius Karte weich zu machen Für den Glaslook reichen ein paar Pixel Und wenn die Unschärfe sich weigert zu zeigen, umdrehen Überlauf beheben zu Ja: Es entfernt die Überlauf:versteckte Regel, die den Hintergrundfilter in einigen Containern blockiert.
Der fertige Effekt #
Hier das Ergebnis am Frontend: eine abgerundete Glaskarte mit rotem Farbton, dahinter das Foto unscharf, obendrauf Überschrift und Text scharf.
Wo Glasmorphie gut funktioniert #
- Heldenüberlagerungen. Eine Glasscheibe für die Überschrift und CTA auf einem Foto über die gesamte Breite.
- Preise und Feature-Karten. Glaskarten über einem Farbverlaufsausschnitthintergrund.
- Zeugnisblöcke. Zitate, die über Bildern schweben, ohne sie zu verbergen.
- Klebrige Kopfzeilen. Eine subtile Unschärfe hält das Menü lesbar, während Inhalte darunter scrollen.
- Anmelde- oder Anmeldeboxen. Das klassische mattierte Panel über einem Markenimage.
Häufig gestellte Fragen #
Was ist die Glassmorphism-Erweiterung in Master Addons?
Es handelt sich um eine kostenlose Erweiterung, die jedem Elementorelement von der Registerkarte Erweitert einen Milchglaseffekt hinzufügt. Sie erhalten Steuerelemente für Unschärfe, eine halbtransparente Hintergrundfarbe, einen Randradius und eine Randbreite und müssen das CSS nie selbst schreiben.
Warum zeigt sich die Glasmorphie nicht?
Normalerweise trägt ein übergeordneter Container overflow:hidden, der den Hintergrundfilter hinter dem Effekt blockiert Schalten Sie den Fix Overflow-Kippschalter am unteren Rand des Glassmorphism-Abschnitts ein Überprüfen Sie außerdem, ob das Element über einem Bild oder farbigen Hintergrund sitzt, da Unschärfe über einfachem Weiß unsichtbar ist.
Welche Elemente können den Glassmorphie-Effekt nutzen?
Jedes Elementorelement mit einer Registerkarte Erweitert: Abschnitte, Spalten, Container und einzelne Widgets Aktivieren Sie die Erweiterung einmal im Master Addons-Dashboard, und der Abschnitt Glassmorphism wird auf der Registerkarte Erweitert jedes Elements im Editor angezeigt.
Welche Hintergrundfarbe sollte ich für Glasmorphie verwenden?
Eine halbtransparente RGBA-Farbe Wählen Sie einen beliebigen Farbton und senken Sie den Alphakanal ab, damit der Hintergrund durch die Tönung sichtbar bleibt Wenn Sie eine feste HEX-Farbe eingeben, wandelt die Erweiterung sie in RGBA mit 30 Prozent Deckkraft um, sodass der Glaseffekt immer noch funktioniert.
Ist die Glassmorphism-Erweiterung kostenlos?
Ja. Es wird mit der kostenlosen Version von Master Addons for Elementor ausgeliefert, in der Gruppe Display Widgets des Reiters Erweiterungen Die Preisseite Listet auf, was die Pro-Pläne über die kostenlosen Funktionen hinaus hinzufügen.
Einwickelnd #
Die Glassmorphism-Erweiterung verwandelt einen fummeligen CSS-Trick in ein paar Bedienelemente auf der Registerkarte Erweitert: Aktivieren, Unschärfe, Tönung, Radius und Rand Legen Sie ein Widget über ein Foto, halten Sie die Hintergrundfarbe halbtransparent und greifen Sie nach Fix Overflow, falls sich die Unschärfe jemals verbirgt Die Glassmorphism-Erweiterungsseite Vergleicht es mit dem selbst schreiben des CSS. Für weitere Editor-Upgrades wie dieses, durchsuchen Sie die Master Addons Widgets und Erweiterungen, oder schnappen Sie sich ein fertiges Design aus dem Vorlagenkits Und das Glas oben drauf geben.
