So kombinieren Sie mühelos Scroll-Effekte und Sticky-Optionen in Ihrem Divi-Design

Je mehr Sie sich mit Divi vertraut machen, desto mehr erkennen Sie, wie weit die integrierten Funktionen gehen können. Manchmal kann es sogar verlockend sein, sie zu kombinieren. Aber wie bei allem im Design sollte Harmonie im Vordergrund stehen. Die Verwendung von Funktionen wie Bildlaufeffekten und Sticky-Optionen funktioniert am besten, wenn sie das Design nicht überfordern. In diesem Tutorial verwenden wir nun sowohl die Scroll-Effekte von Divi als auch die Sticky-Optionen, um ein müheloses Design und Benutzer-Scrolling-Erlebnis zu schaffen. Die Effekte, die wir anwenden, wurden aufeinander abgestimmt, um gut zusammenzuarbeiten und dem Design einen Mehrwert zu verleihen. 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 erstellen

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Bevor wir uns auf die Scroll-Effekte und Sticky-Optionen konzentrieren, beginnen wir mit dem Erstellen des Designs. Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und fügen Sie den folgenden Verlaufshintergrund ein:

• Farbe 1: #78998c
• Farbe 2: rgba(120,153,140,0,13)
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Startposition: 10%
• Endposition: 10%

Sichtweite

Gehen Sie zum erweiterten Tab des Abschnitts und blenden Sie beide Überläufe aus.

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

Neue Zeile 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 und ändern Sie die Größeneinstellungen entsprechend:

• Breite: 100%
• Maximale Breite: 2580px

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Unterer Rand: 50px

Spalte 2 Abstand

Öffnen Sie dann die Einstellungen von Spalte 2 und wenden Sie die folgenden Padding-Werte an:

• Obere Polsterung: 5vh
• Untere Polsterung: 5vh
• Linke Polsterung: 8%
• Rechte Polsterung: 8%

Textmodul zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu.

Hintergrund mit Farbverlauf

Fügen Sie als nächstes den folgenden Verlaufshintergrund ein:

• Farbe 1: rgba(8,45,18,0.52)
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Linear
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Laden Sie dann ein Hintergrundbild Ihrer Wahl hoch.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen entsprechend:

• Überschrift 3 Schriftart: Prata
• Überschrift 3 Schriftstil: Großbuchstaben
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 42px
• Überschrift 3 Zeilenhöhe: 1,2em

Abstand

Vervollständigen Sie die Moduleinstellungen mit den folgenden Abstandswerten:

• Obere Marge: 20vh
• Unterer Rand: 20vh
• Obere Polsterung: 48vh
• Untere Polsterung: 48vh

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H4-Inhalt hinzufügen

Weiter zu Spalte 2. Dort brauchen wir als erstes Modul ein Textmodul mit H4-Inhalten.

H4-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H4-Texteinstellungen wie folgt:

• Überschrift 4 Schriftart: Prata
• Überschrift 4 Schriftstil: Großbuchstaben
• Überschrift 4 Textfarbe: #155100
• Überschrift 4 Textgröße:
  • Desktop: 45px
  • Tablet: 40px
  • Telefon: 35px
• Überschrift 4 Zeilenhöhe: 1,3em

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Fügen Sie direkt unter dem Textmodul ein Trennmodul hinzu und vergewissern Sie sich, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

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

• Linienfarbe: #e8ddc9

Größe

Ändern Sie dann die Größeneinstellungen.

• Teilergewicht: 5px
• Höhe: 5px

Textmodul #2 zu Spalte 2 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie direkt unter dem Trennmodul ein weiteres Textmodul hinzu. Fügen Sie einen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschriftart: Lato
• Textfarbe: #155100
• Textgröße:
  • Desktop: 20px
  • Tablet & Telefon: 16px
• Text Buchstabenabstand: -0.5px
• Textzeilenhöhe: 1.8em

Größe

Wir ändern auch die Breite in den Größeneinstellungen.

• Breite:
  • Desktop: 72 %
  • Tablet & Telefon: 100%

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in Spalte 2 benötigen, ist ein Button-Modul.

Tasteneinstellungen

Stylen Sie die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #155100
• Schaltfläche Hintergrund mit Farbverlauf
  • Farbe 1: rgba(43,135,218,0)
  • Farbe 2: rgba(224,198,159,0.48)
  • Startposition: 50%
  • Endposition: 50%
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Schaltflächenschrift: Prata
• Schaltflächenschriftart: Großbuchstaben

2. Klebeeffekte hinzufügen

Öffne Spalte 2 Einstellungen

Nachdem unsere erste Reihe nun vorhanden ist, können wir mit dem Anwenden der Sticky- und Scroll-Effekte beginnen. Wir beginnen mit den Sticky-Optionen, indem wir die Einstellungen von Spalte 2 öffnen.

Spalte klebrig machen

Wechseln Sie zum erweiterten Tab der Spalte und wenden Sie die folgenden Sticky-Einstellungen an:

• Klebrige Position: Bleiben Sie oben
• Sticky Top-Offset:
  • Desktop: 50px
  • Tablet & Telefon: 80px
• Unteres Sticky-Limit: Reihe
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Spalten-Sticky-Einstellungen

Klebriger Rand

Nachdem wir nun die Spalte Sticky gemacht haben, können wir damit beginnen, Sticky-Stile auf die Spalte selbst und die darin enthaltenen Module anzuwenden. Wir beginnen mit Spalte 2, indem wir zu den Rahmeneinstellungen gehen und den folgenden Sticky-Rahmen anwenden:

• Breite des klebrigen linken Rands: 2px
• Farbe des linken Rands: #799a8d

Transformieren Übersetzen

Als Nächstes ändern wir die Übersetzungswerte der Transformation in einen Standard- und Sticky-Zustand.

• Unten: 10vw

• Klebriger Boden: 0vw

Textmodule & Schaltflächenmodul Sticky Opacity

Wir ändern auch die Deckkraft in einem Standard- und einem klebrigen Zustand.

• Deckkraft: 0%

• Klebrige Deckkraft: 100%

Sticky-Einstellungen des Teilermoduls

Größe

Öffnen Sie als Nächstes das Trennmodul in Spalte 2. Wechseln Sie zum Design-Tab und ändern Sie die Standard- und Sticky-Breite in den Größeneinstellungen.

• Breite: 0px

• Klebrige Breite: 21%

Übergang

Erhöhen Sie auch die Übergangsdauer im erweiterten Tab.

• Übergangsdauer: 800ms

3. Scroll-Effekte hinzufügen

Textmodul in Spalte 1 öffnen

Als nächstes haben wir die Scroll-Effekte. Wir wenden diese Effekte auf das Textmodul in Spalte 1 an. Öffnen Sie zunächst die Einstellungen des Moduls.

Horizontale Bewegung hinzufügen

Wechseln Sie zur Registerkarte Erweitert und fügen Sie die folgenden horizontalen Bewegungseinstellungen hinzu:

• Horizontale Bewegung aktivieren: Ja
  • Startversatz: -5
  • Mittlerer Offset: 0 (bei 72 %)
  • End-Offset: 0

Hinzufügen eines Ein- und Ausblenden-Scroll-Effekts

Vervollständigen Sie die Bildlaufeffekte, indem Sie die folgenden Fading In- und Out-Einstellungen auf dasselbe Modul anwenden:

• Ein- und Ausblenden aktivieren: Ja
  • Anfangsdeckkraft: 0%
  • Mittlere Deckkraft: 0% (bei 46%)
  • Endopazität: 100 % (bei 52 %)

4. Zeile wiederverwenden

Klonen Sie die Zeile so oft wie gewünscht

Jetzt, da sowohl die Scroll-Effekte als auch die Sticky-Optionen vorhanden sind, können wir die gesamte Zeile beliebig oft wiederverwenden, indem wir sie klonen.

Doppelten Inhalt ändern

Stellen Sie sicher, dass Sie alle doppelten Inhalte ändern und das war's!

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 Scroll-Effekten und Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie beide Effekte in einem eleganten Design ausgleichen können. Dies führte zu einem schönen Scroll-Erlebnis über alle Bildschirmgrößen hinweg. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

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.