Divi Tutorial – Milchglas-Hintergrund erstellen
Diese Anleitung zeigt dir 3 Methoden, wie du in Divi einen Milchglas-Hintergrund erstellen kannst.
Diese Anleitung basiert auf einem Tutorial von Jason Champagne auf Elegant Themes (Englisch).
Folgende Designs können mit diesem Tutorial erstellt werden
Methode 1: CSS
Diese Methode lässt sich einfach umsetzen und arbeitet mit einer CSS Filter-Funktion. Der Nachteil ist allerdings, dass diese Hintergrund-Filter-Funktion nicht von allen Browsern unterstützt wird (z.B. Firefox, IE) und somit nicht immer funktioniert.
1. Füge eine einspaltige Zeile in deine Sektion ein.
2. Füge in den Einstellungen der Sektion ein Hintergrundbild hinzu.
3. Füge in den Einstellungen der Zeile eine halbtransparente Hintergrundfarbe hinzu.
Hintergrundfarbe: rgba(255,255,255,0.3)
4. Ändere bei den Zeileneinstellungen unter Design die Angaben für Größe und Zwischenraum folgendermaßen:
Breite: 90%
Maximale Breite: 900px
Innenabstand (Padding): 5% oben, 5% unten, 5% links, 5% rechts
5. Füge bei den Zeileneinstellungen unter „Erweitert“ folgenden CSS Code zum Hauptelement hinzu:
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
Der Grad der Unschärfe des Filters kann durch das Ändern der 10px angepasst werden.
6. Füge zur Zeile ein Textmodul hinzu.
Lösche den Inhalt des Textfeldes und füge unter dem Text-Tab den folgenden html-Code hinzu:
6. Passe die Einstellungen des Textmoduls unter Design folgendermaßen an:
- Text Schriftstärke: Semi Bold
- Text Schriftfarbe: #33345b
- Text Schriftgröße: 16px
- Text Zeilenhöhe: 2em
- Überschrift H2 Schriftart: Poppins
- Überschrift H2 Schriftstärke: Fetter Text
- Überschrift H2 Schriftstil: TT
- Überschrift H2 Textausrichtung: Links
- Überschrift H2 Schriftfarbe: #33345b
- Überschrift H2 Schriftgröße: 70px
- Überschrift H2 Zeichenabstand: 2px
- Überschrift H2 Zeilenhöhe: 1.3em
Geschafft!
So sieht dein Milchglas-Hintergrund jetzt aus:
Methode 2: Parallax und überlagernde Ebenen
Diese Methode ist etwas schwieriger als die erste, hat aber den Vorteil, dass sie in allen Browsern unterstützt wird.
1. Erstelle unterhalb des mit Methode 1 erstellten Abschnitts einen neuen regulären Abschnitt und füge eine ein-spaltige Zeile hinzu.
2. Füge bei den Zeileneinstellungen ein Hintergrundbild mit Parallax-Effekt und als Parallax-Methode CSS hinzu.
3. Kopiere das Textmodul aus Methode 1 und füge es in die Zeile ein.
4. Ändere unter den Einstellungen der Spalte der Zeile den Innenabstand unter Zwischenraum folgendermaßen:
- Innenabstand: 10% oben, 10% unten, 10% links, 10% rechts
5. Mache folgende Einstellungen bei der Spalte der Zeile unter erweiterte Einstellungen und Sichtbarkeit:
- Horizontaler Überlauf: Versteckt
- Vertikaler Überlauf: Versteckt
6. Als nächstes fügst du 2 Textmodule hinzu, welche den Milchglas-Hintergrund erzeugen.
Dazu fügst du als erstes ein neues Textmodul unter dem bereits bestehenden Textmodul hinzu. Entferne den Inhalt des Textmoduls und verschiebe es über das bestehende Modul mit Text.
7. Füge bei den Einstellungen des leeren Textmoduls das Hintergrundbild mit Parallaxeffekt und Parallax-Methode CSS hinzu.
8. Bei den Einstellungen des Textmoduls stellst du unter Design den Unschärfe-Filter auf 10px.
9. Bei den Einstellungen des Textmoduls stellst du unter Erweitert die Arbeitsstelle auf Absolut.
10. Bei den Einstellungen des Textmoduls stellst du unter Design die Größe auf:
- Breite: 100%
- Höhe: 100%
11. Als nächstes duplizierst du das eben erstellte „Blurred Text Modul“. Du kannst es in „Blurred Text Overlay“ umbenennen.
12. Öffne in dem kopierten Textmodul („Blurred Text Overlay“) die Einstellungen, lösche das Hintergrundbild und füge die folgende Hintergrundfarbe hinzu:
rgba(255,255,255,0.5)
13. Setze im Design-Tab der Einstellungen des Textmoduls („Blurred Text Overlay“) den Unschärfefilter auf 0px zurück.
Geschafft! So sieht dein Milchglas-Hintergrund jetzt aus:
Methode 3: Bilder mit „actual size“ Bildern und überlagernden Ebenen
1. Dupliziere die Sektion von Methode 2.
2. Sektions-Einstellungen: Lösche das Hintergrundbild und trage folgende Hintergrundfarbe ein:
Hintergrundfarbe: #33345b
3. In den Spalten-Einstellungen der Zeile: Lade das Bild als Hintergrundbild hoch und stelle unter Größe „actual size“ ein.
3. In den Spalten-Einstellungen der Zeile: Stelle bei Zwischenraum den Innenabstand (Padding) folgendermaßen ein:
10% oben, 10% unten, 15% links, 15% rechts
4. In dem Text-Modul „Blurred Image“ das Bild als Hintergrundbild einfügen, dabei keinen Parallax-Effekt einstellen und die Größe auf „actual size“ stellen.
5. Ändere in den Settings für das Modul „blurred image“ unter Größe die Breite und Höhe auf 80% und stelle bei den erweiterten Einstellungen die Arbeitsstelle auf zentriert.
5. Ändere in den Settings für das Modul „overlay image“ unter Größe die Breite und Höhe auf 80% und stelle bei den erweiterten Einstellungen die Arbeitsstelle auf zentriert.
Geschafft!!!!
Das ist das Ergebnis:
Mit dieser Methode kannst du den Milchglas-Hintergrund auch in mehreren Spalten nutzen.
Dafür musst du dann lediglich noch die Größe der Überschrift anpassen (hier 30px) sowie den Innenabstand (Padding) der Spalte (hier 5px).
Viel Spaß beim Ausprobieren!