Hallo liebe Divi-Freunde!
Heute möchte ich euch einen der heißesten Design-Trends vorstellen, der gerade die Webdesign-Welt im Sturm erobert: Glass Morphism – auch bekannt als „Milchglas-Effekt“.
Stellt euch vor, ihr schaut durch eine matte Glasscheibe, hinter der die Farben und Formen sanft verschwimmen und sich zu einem eleganten, modernen Hintergrund vereinen. Genau diesen zauberhaften Effekt können wir auf unseren Websites umsetzen, um sie auf das nächste Level zu heben. Der „Iced-Effekt“, wie ich ihn gerne nenne, verleiht jedem Design einen Hauch von Magie und Raffinesse.
Was ist Glass Morphism?
Glass Morphism ist ein Designstil, der Elemente verwendet, die wie mattiertes Glas aussehen. Diese Elemente sind halbtransparent und haben oft einen Blur-Effekt, der den Hintergrund durchscheinen lässt, aber trotzdem einen verschwommenen Look erzeugt. Das Ergebnis ist ein einzigartiger, ästhetischer Stil, der modern und zugleich dezent wirkt. Der Blur-Effekt ist eine coole Abwechslung, die Aufmerksamkeit erregt und vielseitig einsetzbar ist.
In diesem Beispiel seht ihr, wie ich diesen Effekt auf einer von mir designten Website (www.yoga-inspiration.at) als Formular-Hintergrund eingesetzt habe.
So setzt du den Blur-Effekt in Divi um
Mit dem Divi Theme von Elegant Themes kannst du den Blur-Effekt relativ einfach umsetzen. Hier ist eine Schritt-für-Schritt-Anleitung:
-
Erstelle eine neue Sektion, Reihe oder Modul: Gehe in den Divi Builder und erstelle eine neue Sektion, eine Reihe oder ein Modul, in dem du den Blur-Effekt anwenden möchtest.
-
Hintergrundbild hinzufügen: Füge ein Hintergrundbild zu deiner Sektion, Reihe oder Modul hinzu. Dies ist wichtig, da der Blur-Effekt den Hintergrund verschwommen darstellt.
-
Transparente Farbe einstellen:
- Gehe zu den Inhalts-Einstellungen deiner Sektion, Reihe oder Modul.
- Wähle den Hintergrund-Tab und füge eine halbtransparente Farbe hinzu (z.B.
rgba(255, 255, 255, 0.3)).
-
Rand hinzufügen:
- Gehe zu den Design-Einstellungen und dann zu Rand.
- Füge einen Rand mit einer Farbe wie
rgba(255, 255, 255, 0.3)hinzu und stelle die Dicke auf 1px ein.
-
Blur-Effekt hinzufügen: Da es für den Blur-Effekt keine direkte Einstellung in Divi gibt, müssen wir hier auf benutzerdefiniertes CSS zurückgreifen:
- Gehe zu den Erweiterten Einstellungen deiner Sektion, Reihe oder Modul.
- Füge im Bereich Benutzerdefiniertes CSS folgendes CSS hinzu:
CSS
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
Hinweis: Ihr müsst dieses CSS direkt in den jeweiligen Sektionen, Reihen, Spalten oder Moduleinstellungen unter „Erweitert“ und „Benutzerdefiniertes CSS“ hinzufügen.
Erklärung der CSS-Zeilen
-webkit-backdrop-filter: blur(10px);
-
- -webkit-: Dies ist ein Präfix, das für WebKit-basierte Browser wie Safari und ältere Versionen von Chrome verwendet wird.
- backdrop-filter: Dies ist die Eigenschaft, die den Blur-Effekt erzeugt.
- blur(10px): Dies gibt an, dass der Hintergrund mit einer Unschärfe von 10 Pixeln angezeigt werden soll.
backdrop-filter: blur(10px);
- backdrop-filter: Dies ist die gleiche Eigenschaft wie oben, jedoch ohne das WebKit-Präfix, sodass sie in allen modernen Browsern funktioniert.
- blur(10px): Auch hier wird der Hintergrund mit einer Unschärfe von 10 Pixeln angezeigt.
Weitere Tipps für dein Design
- Farben und Transparenz: Experimentiere mit verschiedenen Farbtönen und Transparenzgraden, um den besten Effekt für deine Website zu erzielen.
- Abstände: Achte darauf, genügend Abstände zwischen den einzelnen Elementen zu lassen, damit der Blur-Effekt richtig zur Geltung kommt.
- Kontraste: Verwende kontrastreiche Farben für Texte und Schaltflächen, um die Lesbarkeit zu gewährleisten. Warum Kontraste und die richtige Farbwahl so wichtig für deine Website sind, erfährst du in meinem Blogbeitrag Divi Barrierefrei: Plugins und Tricks zur Verbesserung der Accessibility
Verwendest du schon das Divi Theme?
Wenn ihr das Divi Theme von Elegant Themes noch nicht verwendet, wird es höchste Zeit! Mit Divi habt ihr alle Werkzeuge, um atemberaubende Websites zu erstellen.
Über meinen Affiliate-Link könnt ihr euch das Theme sichern und unterstützt gleichzeitig meine Arbeit. Keine Sorge, es kostet euch keinen Cent mehr, aber ihr helft mir sehr damit. Vielen Dank!
Fazit
Glass Morphism ist ein wunderbarer Trend, der eurer Website einen modernen und stilvollen Look verleihen kann. Mit Divi ist es ein Kinderspiel, diesen Effekt zu erreichen. Probiert es aus!
Wenn ihr Fragen habt oder Hilfe benötigt, hinterlasst gerne einen Kommentar. Viel Spaß beim Designen! Und wenn euch der Beitrag gefallen hat, teilt ihn gerne und folgt mir auf Social Media – ich freue mich über jeden neuen Follower!
Eure Alex von CCA Media
0 Kommentare