So kombinieren Sie Überlappungen mit Divis Sticky-Optionen, um mühelose Übergänge zu erstellen

Mit der Weiterentwicklung der Technologie entwickelt sich auch das Design. Mehr denn je können Sie auf Websites stoßen, die Sie staunen lassen und sich fragen, wie sie erstellt wurden. Obwohl Websites mit Scroll-Interaktionen nicht für jede Art von Unternehmen geeignet sind, ist es besonders hilfreich zu wissen, wie man die Extrameile geht, um einen guten Eindruck zu hinterlassen. Mit Divi sind viele Dinge bereits möglich, ohne eine einzige Codezeile anfassen zu müssen. Das heutige Tutorial hilft Ihnen, Divi aus einer anderen Perspektive zu verstehen. Wir zeigen Ihnen, wie Sie die Sticky-Optionen von Divi mit anderen integrierten Einstellungen kombinieren, um mühelose Übergänge zu erstellen. 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. Designstruktur neu erstellen

Neuen Abschnitt hinzufügen

Abstand

Im ersten Teil dieses Tutorials konzentrieren wir uns darauf, die Designstruktur in Divi neu zu erstellen. Im zweiten Teil werden wir uns dann die Zeit nehmen, alle Sticky-Optionen durchzugehen, um den Effekt zu erzielen, den Sie in der Vorschau dieses Beitrags bemerken können. Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen, gehen Sie zum Design-Tab und fügen Sie einige untere Polster hinzu.

• Untere Polsterung: 100vh

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen entsprechend:

• Breite: 90%
• Maximale Breite: 100%

Z-Index

Weisen Sie dieser Zeile ebenfalls einen z-Index zu.

• Z-Index: 1

Bildmodul zur Spalte hinzufügen

Bildbox leer lassen

Zeit, Module hinzuzufügen, beginnend mit einem Image-Modul. Lassen Sie das Inhaltsfeld leer.

Stattdessen Hintergrundbild verwenden

Und verwenden Sie stattdessen ein Hintergrundbild Ihrer Wahl.

• Hintergrundbildgröße: Cover

Größe

Ändern Sie als nächstes die Breite des Moduls.

• Breite: 100%

Abstand

Wenden Sie dann einige benutzerdefinierte obere und untere Abstände auf die Abstandseinstellungen an.

• Obere Polsterung: 40vh
• Untere Polsterung: 40vh

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Weiter zum nächsten Modul, einem Textmodul mit H2-Inhalten Ihrer Wahl.

H2-Texteinstellungen

Ändern Sie die H2-Texteinstellungen des Moduls entsprechend:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße:
  • Desktop: 10vw
  • Tablet: 14vw
  • Telefon: 15vw
• Überschrift 2 Buchstabenabstand: -0.5vw

Größe

Stellen Sie sicher, dass das Modul auch "100%" ist.

• Breite: 100%

Position

Und positionieren Sie das Modul im erweiterten Tab neu.

• Position: Absolut
• Ort: Zentrum

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. Verwenden Sie die folgende Spaltenstruktur:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zum Design-Tab und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 100%

Z-Index

Weisen Sie dieser Zeile auch einen z-Index zu.

• Z-Index: 2

Spalte 1 Abstand

Vervollständigen Sie die Zeileneinstellungen, indem Sie die Einstellungen der ersten Spalte öffnen und einen linken und rechten Abstand zuweisen.

• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Textmodul zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Nachdem die Zeileneinstellungen nun vorhanden sind, ist es an der Zeit, Module hinzuzufügen. Fügen Sie in Spalte 1 ein Textmodul mit H3-Inhalten Ihrer Wahl hinzu.

H3-Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die H3-Texteinstellungen entsprechend:

• Überschrift 3 Schriftart: Montserrat
• Überschrift 3 Schriftstil: Unterstreichen
• Überschrift 3 Unterstreichungsfarbe: #ffffff
• Überschrift 3 Unterstreichungsstil: Solid
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße:
  • Desktop: 4vw
  • Tablet & Telefon: 10vw
• Überschrift 3 Buchstabenabstand: -3px

Abstand

Fügen Sie bei kleineren Bildschirmgrößen einige rechte Polster hinzu.

• Rechte Polsterung: 20 % (nur Tablet und Telefon)

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie in Spalte 2 ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl hinzu.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie dann die Texteinstellungen wie folgt:

• Textschrift: Playfair Display
• Textschriftart: Kursiv
• Textgröße:
  • Desktop: 1.6vw
  • Tablet: 3vw
  • Telefon: 4vw
• Textzeilenhöhe: 1.5em

Abstand

Wenden Sie auch einige benutzerdefinierte Füllwerte an.

• Obere Polsterung: 10vh
• Untere Polsterung: 10vh
• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir hinzufügen werden, ist ein Button-Modul zu Spalte 2. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Montserrat

• Schaltflächenschriftart: Unterstreichen
• Farbe der Schaltflächenunterstreichung: #000000
• Schaltflächenunterstreichungsstil: Solid

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Position

Und positionieren Sie das Modul im erweiterten Tab neu.

• Position: Absolut
• Ort: Unten rechts

2. Klebeeffekte anwenden

Bildmodul in Zeile 1

Sticky-Einstellungen

Nachdem wir nun die Grundlage für unser Design geschaffen haben, ist es an der Zeit, die benutzerdefinierten Sticky-Effekte anzuwenden. Öffnen Sie das Bildmodul in Reihe #1 und kleben Sie das Modul wie folgt fest:

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Nein

Sticky Sizing

Sobald die Sticky-Einstellungen angewendet wurden, können wir auch die Sticky-Stile unseres Moduls ändern. Das erste, was wir tun werden, ist die Breite in einem klebrigen Zustand zu ändern.

• Klebrige Breite: 80%

Klebriger Abstand

Als Nächstes ändern wir die klebrige obere und untere Polsterung.

• Sticky Top Polsterung: 50vh
• Klebrige Bodenpolsterung: 50vh

Klebriger Hintergrund mit Farbverlauf

Wir werden auch einen klebrigen Farbverlaufshintergrund auf unser Modul anwenden.

• Farbe 1: #00336b
• Farbe 2: rgba(41,196,169,0)
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Übergang

Und um einen reibungslosen Übergang zu gewährleisten, verlängern wir die Übergangsdauer des Moduls.

• Übergangsdauer: 1500 ms

Spalte 2 in Zeile #2

Spalte 2 Sticky-Einstellungen

Als nächstes werden wir auch die zweite Spalte unserer zweiten Reihe kleben.

• Klebrige Position: Bleiben Sie oben
• Sticky Top Offset: 150px
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Nein
• Übergangsstandard- und Sticky-Stile: Nein

Textmodul in Sticky-Spalte

Klebrige Hintergrundfarbe

Nachdem Spalte 2 von Zeile #2 nun klebrig geworden ist, können wir einige klebrige Stile auf das Textmodul in dieser Spalte anwenden. Beginnen Sie damit, die Hintergrundfarbe in einem klebrigen Zustand zu ändern.

• Klebrige Hintergrundfarbe: #333333

Klebrige Textfarbe

Ändern Sie als Nächstes die Textfarbe in einem klebrigen Zustand.

• Farbe für klebrigen Text: #ffffff

Übergang

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Übergangsdauer auf der Registerkarte Erweitert erhöhen. Das ist es!

• Übergangsdauer: 1000ms

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 gezeigt, wie Sie mit Divis Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Überlappungen mit den Sticky-Optionen von Divi kombinieren, um mühelose Übergänge zu erstellen. Sobald Sie den Ansatz verstanden haben, der in diesem Tutorial verwendet wurde, können Sie endlos viele verschiedene Variationen 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.