So erstellen Sie einen schönen spaltenkollidierenden Heldenabschnitt auf Scroll mit Divi

Die Scroll-Effekte von Divi bringen eine Menge neuer Gestaltungsmöglichkeiten für die von Ihnen erstellten Websites. Die subtilen Interaktionen, die Sie hinzufügen, können wirklich dazu beitragen, das allgemeine Erscheinungsbild Ihrer Website zu verbessern. Es wird alles noch besser, sobald Sie Scroll-Effekte synchronisieren. In diesem Tutorial werden wir uns speziell damit befassen, einen schönen spaltenkollidierenden Heldenabschnitt beim Scrollen zu erstellen. Das Design des Heldenabschnitts führt zwei verschiedene Spalten beim Scrollen zusammen, was wiederum dazu beiträgt, die Kopie hervorzuheben. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie das spaltenkollidierende Hero Section Layout KOSTENLOS herunter

Um das kostenlose spaltenkollidierende Heldenbereichslayout 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!

Abschnitts-Layout des Helden-Abschnitts neu erstellen

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #f4f2f7

Abstand

Entfernen Sie auch die standardmäßige obere und untere Auffüllung aller Abschnitte.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Überläufe

Und blenden Sie die Überläufe der Zeile aus.

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

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 15vw
• Untere Polsterung: 10vw
• Linke Polsterung: 5vw
• Rechte Polsterung: 5vw

Z-Index

Erhöhen Sie auch den Z-Index der Spalte.

• Z-Index: 12

Spalte 2 Einstellungen

Hintergrundbild

Fahren Sie fort, indem Sie die Einstellungen von Spalte 2 öffnen und ein Hintergrundbild Ihrer Wahl hochladen.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung
• Hintergrundbild-Mischung: Normal

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H1-Inhalt hinzufügen

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

H1-Texteinstellungen

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

• Überschrift Schriftart: Schatten ins Licht
• Schriftstärke der Überschrift: Fett
• Überschriftstextfarbe: #000000
• Überschriftstextgröße: 6vw (Desktop), 11vw (Tablet), 13vw (Telefon)
• Abstand der Überschriftsbuchstaben: -2px
• Höhe der Überschriftslinie: 1.2em

Abstand

Fügen Sie auch etwas oberen Rand hinzu.

• Oberer Rand: 10vw

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul mit einem beliebigen Beschreibungsinhalt Ihrer Wahl ein.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Open Sans
• Textfarbe: #1e1e1e
• Textgröße: 0,9 vw (Desktop), 1,9 vw (Tablet), 3 vw (Telefon)
• Textzeilenhöhe: 2,4 em

Abstand

Und fügen Sie einige benutzerdefinierte Randwerte für verschiedene Bildschirmgrößen hinzu.

• Obere Marge: 4vw (Desktop), 8vw (Tablet), 12vw (Telefon)
• Unterer Rand: 4vw (Desktop), 8vw (Tablet), 12vw (Telefon)

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

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

Tasteneinstellungen

Ändern Sie die Tasteneinstellungen des Moduls wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

• Schaltflächenschrift: Open Sans

Abstand

Und vervollständigen Sie die Schaltflächeneinstellungen, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte benötigen wir als einziges Modul ein Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Texteinstellungen

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

• Textschriftart: Schatten ins Licht
• Textfarbe: rgba(0,0,0,0.25)
• Textgröße: 9vw (Desktop), 14vw (Tablet & Telefon)
• Text Buchstabenabstand: -3px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte (Desktop), Links (Tablet & Telefon)

Abstand

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

• Obere Polsterung: 5vw (Desktop),
• Untere Polsterung: 60vw (Tablet & Telefon)
• Linke Polsterung: 5vw (Tablet & Telefon)

Scroll-Animationen anwenden

Abschnitt

Skalieren nach oben und unten

Sobald alle Ihre Module vorhanden sind, ist es an der Zeit, die Scroll-Effekte anzuwenden! Öffnen Sie zuerst die Abschnittseinstellungen und verwenden Sie den folgenden Skalierungseffekt:

• Scaling nach oben und unten aktivieren
• Startskala: 100 % (bei 49 %)
• Mittlere Skala:
  • Desktop: 70 % (bei 100 %)
  • Tablet & Telefon: 100 % (bei 100 %)
• Endskala:
  • Desktop: 70%
  • Tablet & Telefon: 100%

Spalte 1

Horizontale Bewegung

Fahren Sie fort, indem Sie die Einstellungen von Spalte 1 öffnen und den folgenden horizontalen Bewegungseffekt verwenden:

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittlerer Versatz:
  • Desktop: 0 (bei 65 %)
  • Tablet & Telefon: 0 (bei 93%)
• Endversatz:
  • Schreibtisch: 6
  • Tablet & Telefon: 0

Skalieren nach oben und unten

Wenden Sie auch einen Skalierungseffekt nach oben und unten auf die Spalte an.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala:
  • Desktop: 10 %
  • Tablet & Telefon: 100%
• Mittlere Skala:
  • Desktop: 90%
  • Tablet & Telefon: 100%
• Endskala: 100%

Spalte 2

Horizontale Bewegung

Öffnen Sie als Nächstes die Einstellungen von Spalte 2 und verwenden Sie die folgenden horizontalen Bewegungseinstellungen:

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittlerer Versatz:
  • Desktop: 0 (bei 53 %)
  • Tablet & Telefon: 0 (bei 56%)
• Endversatz:
  • Desktop: -6 (bei 53 %)
  • Tablet & Telefon: 0 (bei 100%)

Ein- und Ausblenden

Vervollständigen Sie die Spalteneinstellungen, indem Sie einen Ein- und Ausblendeffekt hinzufügen.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 100 % (bei 47 %)
• Mittlere Deckkraft:
  • Desktop: 0 % (bei 47 %)
  • Tablet & Telefon: 100 % (bei 47 %)
• Deckkraft beenden:
  • Desktop: 0 %
  • Tablet & Telefon: 100%

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 Divis Scroll-Effekte kreativ verwenden können, um einen spaltenkollidierenden Heldenabschnitt zu erstellen. Sobald Besucher scrollen, beginnen die beiden verschiedenen Spalten und ihre Elemente zu verschmelzen. Dies wiederum ermöglicht es Ihnen, die Kopie noch mehr hervorzuheben. 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.