So erstellen Sie eine klebrige Hintergrundmaske mit Divi

Mit den Sticky-Optionen von Divi können Sie eine Menge verschiedener Designs für Ihre Websites erstellen. Der heutige Beitrag fügt der Liste der Dinge, die Sie erreichen können, ein weiteres Tutorial hinzu und wird hoffentlich dazu beitragen, die Kreativität zu entfachen. Wir zeigen Ihnen, wie Sie eine klebrige Hintergrundmaske erstellen und diese Maske dem Besucher beim Scrollen bis zum Ende des Abschnitts folgen lassen. Dieses Tutorial kombiniert die Sticky-Optionen von Divi mit den Filter-Mischmodi. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Design in Divi . erstellen

Neuen Abschnitt hinzufügen

Hintergrundbild

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Laden Sie ein Hintergrundbild Ihrer Wahl hoch.

• Hintergrundbildgröße: Cover

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände in den Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Überläufe

Blenden Sie die Überläufe des Abschnitts als nächstes auf der Registerkarte "Erweitert" aus.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne Module hinzuzufügen, und ändern Sie die Größeneinstellungen entsprechend:

• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Filter

Wir fügen dieser Zeile auch einen Mischmodus hinzu. Dieser Mischmodus hilft uns später im Tutorial, eine Maske zu erstellen.

• Mischmodus: Bildschirm

Z-Index

Um sicherzustellen, dass diese Zeile unter der zweiten Zeile bleibt, die wir dem Abschnitt hinzufügen, ändern wir den Z-Index auf der Registerkarte "Erweitert".

• Z-Index: 9

Spalteneinstellungen

Als Nächstes öffnen wir die Spalteneinstellungen.

Hintergrundfarbe

Wir verwenden eine komplett weiße Hintergrundfarbe. Jede andere Farbe, die Sie hier verwenden, wird durch das Hintergrundbild des Abschnitts hindurchscheinen, daher ist es wichtig, bei einer vollständig weißen Farbe zu bleiben.

• Hintergrundfarbe: #ffffff

Hauptelement-CSS

Außerdem fügen wir dem Hauptelement auf der Registerkarte "Erweitert" einen Höhenwert hinzu. Sobald wir die Zeile klebrig gemacht haben, stellt diese Höhe sicher, dass die Spalte jederzeit das gesamte Hintergrundbild des Abschnitts bedeckt.

height: 100vh;

Textmodul zu Zeile hinzufügen

Inhaltsbox leer lassen

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, fügen Sie seiner Spalte ein Textmodul hinzu. Lassen Sie das Inhaltsfeld leer. Stattdessen verwenden wir dieses Modul, um eine Form zu erstellen, die einen Teil des Hintergrundbilds des Abschnitts zeigt.

Hintergrundfarbe

Damit der Mischmodus einen Teil des Hintergrundbilds des Abschnitts anzeigen kann, verwenden wir für dieses Modul eine dunklere Hintergrundfarbe.

• Hintergrundfarbe: #0b3835

Größe

Dann navigieren wir zum Design-Tab und ändern die Größeneinstellungen wie folgt:

• Breite:
  • Desktop: 20vw
  • Tablet & Telefon: 70vw
• Höhe:
  • Desktop: 30vh
  • Tablet & Telefon: 10vh

Abstand

Wir fügen auch etwas obere Marge hinzu.

• Obere Marge: 3vh

Grenze

Und wir fügen einige abgerundete Ecken hinzu.

• Alle Ecken: 15px

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine weitere Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und nehmen Sie die folgenden Änderungen an den Größeneinstellungen vor:

• Breite: 100%
• Maximale Breite: 100%

Z-Index

Erhöhen Sie auch den Z-Index der Zeile. Dadurch wird sichergestellt, dass der Inhalt der Zeile über der vorherigen Zeile bleibt.

• Z-Index: 12

Textmodul zu Zeile hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul mit H2-Inhalten Ihrer Wahl.

H2-Texteinstellungen

Stylen Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Playfair Display
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #0b3835
• Überschrift 2 Textgröße:
  • Desktop: 150px
  • Tablet & Telefon: 45px
• Überschrift 2 Zeilenhöhe: 1.2em

Größe

Navigieren Sie dann zu den Größeneinstellungen und wenden Sie die folgenden Einstellungen an:

• Maximale Breite: 980px
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch einen negativen oberen Rand hinzu.

Schaltflächenmodul zu Zeile hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in dieser Reihe benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tastenausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Schaltflächenausrichtung.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Gehen Sie dann zu den Schaltflächeneinstellungen und wenden Sie die folgenden Stile an:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 15px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

• Button-Schriftart: Montserrat
• Tastenschriftstärke: Halbfett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Wir fügen den Abstandseinstellungen auch einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Unterer Rand: 60vh
• Obere Polsterung: 15px
• Untere Polsterung: 15px
• Linke Polsterung: 40px
• Rechte Polsterung: 40px

2. Klebeeffekte anwenden

Offene Reihe #1

Nachdem wir nun die Grundlage für unser Design geschaffen haben, ist es an der Zeit, die Sticky-Styles anzuwenden. Öffnen Sie die Einstellungen der ersten Zeile.

Sticky-Optionen anwenden

Navigieren Sie zur Registerkarte Erweitert und wenden Sie die folgenden Sticky-Einstellungen an:

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Sticky-Optionen für Textmodule

Nachdem die Zeile nun klebrig geworden ist, können wir dem Textmodul innerhalb der Zeile klebrige Stile zuweisen. Öffnen Sie die Einstellungen des Moduls.

Sticky Sizing

Navigieren Sie dann zu den Größeneinstellungen und wenden Sie die folgenden Sticky-Sizing-Werte an:

• Klebrige Breite: 80vw
• Klebrige Höhe: 90vh

Übergangszeit

Navigieren Sie zu guter Letzt zur Registerkarte Erweitert und erhöhen Sie die Übergangsdauer. Das ist es!

• Übergangsdauer: 500ms

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen noch einmal gezeigt, wie Sie mit Divis Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie die Filtereinstellungen von Divi und die Sticky-Optionen kombinieren, um eine Sticky-Hintergrundmaske zu erstellen. Sie konnten die JSON-Datei auch kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.