So erstellen Sie Modulüberlappungen beim Scrollen mit Divis Scroll-Effekten

Die Verwendung von Überlappungen in Ihrem Design hat in den letzten Jahren an Popularität gewonnen. Es verleiht Ihrem Design ein abstrakteres Aussehen und Gefühl. Gleichzeitig hilft es Ihnen, Platz zu sparen, was wiederum das erforderliche vertikale Scrollen einschränkt. Innerhalb von Divi gibt es mehrere Möglichkeiten, Modulen mühelos Überlappungen hinzuzufügen. Sie können auch die Extrameile gehen und eine Scroll-Interaktion hinzufügen! Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie mit negativem Rand und dem vertikalen Bewegungs-Scroll-Effekt von Divi subtile Modulüberlappungen beim Scrollen erstellen. Das Design, das wir neu erstellen, enthält eine schöne Bildüberlagerung und 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 Modul Overlaps on Scroll Layout KOSTENLOS herunter

Um die kostenlosen Modulüberlappungen im Scroll-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!

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Abstand

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und fügen Sie einige benutzerdefinierte obere und untere Abstände ein.

• Obere Polsterung: 10%
• Untere Polsterung: 10%

Zeile 1 hinzufügen

Spaltenstruktur

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

Abstand

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie den Abstandseinstellungen einen unteren Rand hinzu.

• Unterer Rand: 100px

Textmodul Nr. 1 zur Spalte hinzufügen

H2-Inhalt hinzufügen

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

Überschrift 2 Texteinstellungen

Ändern Sie die H2-Texteinstellungen des Moduls wie folgt:

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textgröße: 100px (Desktop), 70px (Tablet), 60px (Telefon)

Trennmodul zur Spalte hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Registerkarte Design und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #333333
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 6px
• Breite: 10 % (Desktop), 20 % (Tablet), 30 % (Telefon)

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Das letzte Modul, das wir in dieser Zeile benötigen, ist ein weiteres Textmodul mit einigen Beschreibungsinhalten.

Texteinstellungen

Passen Sie die Texteinstellungen des Moduls entsprechend an:

• Textschriftart: Karla
• Textgröße: 18px
• Textzeilenhöhe: 2.2em

Zeile 2 hinzufügen

Spaltenstruktur

Weiter zur nächsten Zeile, die die folgende Spaltenstruktur verwendet:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

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

Bildmodul zu Spalte 1 hinzufügen

Overlay hochladen

In Spalte 1 benötigen wir als erstes Modul ein Image-Modul. Laden Sie die Overlay-Bilddatei hoch, die Sie im Download-Ordner finden, den Sie am Anfang dieses Beitrags herunterladen konnten.

Hintergrundbild

Laden Sie dann ein Hintergrundbild Ihrer Wahl hoch.

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

Größe

Erzwinge als nächstes die volle Breite des Bildmoduls.

• Volle Breite erzwingen: Ja

Textmodul zu Spalte 1 hinzufügen

H3- und Beschreibungsinhalt hinzufügen

Weiter zum nächsten Modul, das ein Textmodul ist, das einige H3- und Beschreibungsinhalte Ihrer Wahl enthält.

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe des Moduls.

• Hintergrundfarbe: #333333

Texteinstellungen

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

• Textschriftart: Karla
• Textgröße: 18px
• Textzeilenhöhe: 2.2em
• Textfarbe: Hell

H3-Texteinstellungen

Nehmen Sie auch einige Änderungen an den H3-Texteinstellungen vor.

• Überschrift 3 Schriftart: Abril Fatface
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textgröße: 50px

Größe

Gehen Sie als Nächstes zu den Größeneinstellungen und ändern Sie die Breite über verschiedene Bildschirmgrößen.

• Breite: 70 % (Desktop), 80 % (Tablet), 100 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Wir verwenden auch einige benutzerdefinierte Margin- und Padding-Werte.

• Höchste Marge: -26%
• Obere Polsterung: 15%
• Untere Polsterung: 15%
• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Horizontaler Bewegungs-Scroll-Effekt

Und wir vervollständigen die Moduleinstellungen, indem wir den Bildlaufeffekten auf der Registerkarte "Erweitert" eine horizontale Bewegung hinzufügen.

• Vertikale Bewegung aktivieren: Ja
• Startversatz: 4
• Mittlerer Offset: 4 (bei 5%)
• End-Offset: 0 (bei 10%)
• Bewegungseffekt-Trigger: Mitte des Elements

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Als Nächstes gestalten wir die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #333333
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 1px

• Button-Schriftart: Karla
• Schriftstärke der Schaltfläche: Fett

Abstand

Und wir vervollständigen die Moduleinstellungen, indem wir den Abstandseinstellungen des Moduls einige benutzerdefinierte Rand- und Abstandswerte hinzufügen.

• Höchste Marge: -4%
• Obere Polsterung: 2%
• Untere Polsterung: 2%
• Linke Polsterung: 7%
• Rechte Polsterung: 7%

Module in Spalte 1 klonen und Duplikate in Spalte 2 platzieren

Nachdem Sie die Module in Spalte 1 abgeschlossen haben, können Sie alle Module klonen und die Duplikate in die zweite Spalte der Zeile einfügen.

Hintergrundbild und Inhalt ändern

Stellen Sie sicher, dass Sie das Hintergrundbild und den Inhalt ändern.

Ganze Zeile klonen

Klonen Sie dann die gesamte Zeile so oft Sie möchten.

Hintergrundbilder und Inhalte ändern

Ändern Sie auch hier die Hintergrundbilder und den Inhalt und Sie sind fertig!

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 den neuen Scroll-Effekten von Divi subtile Modulüberlappungen beim Scrollen erzeugen. Wir haben den negativen oberen Rand effektiv mit Divis integriertem Scroll-Effekt mit vertikaler Bewegung kombiniert, um das Gesamtbild und die Haptik unseres Designs zu verbessern. Das von uns neu erstellte Design beinhaltete eine schöne Bildüberlagerung und 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.