So zeigen Sie mit Divis Sticky-Optionen ein zugrunde liegendes Bildraster in Ihrem Helden an

Das Erstellen eines Heldenbereichs, der die Aufmerksamkeit Ihrer Besucher auf sich zieht, kann den Ton für den Rest der Website angeben. Wenn Sie nach einer kreativen Möglichkeit suchen, die Sticky-Optionen von Divi zu verwenden, um dorthin zu gelangen, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie mit den Sticky-Optionen von Divi ein zugrunde liegendes Bildraster in Ihrem Helden sichtbar machen. Wir bieten einen sehr reibungslosen Übergang von Standard zu Sticky 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 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. Heldendesign 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 fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #111111

Abstand

Gehen Sie zum Design-Tab des Abschnitts und fügen Sie etwas untere Polsterung hinzu. Diese untere Polsterung gibt uns genug Platz, um das Scroll-Erlebnis zu schaffen.

• Untere Polsterung: 120vh

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 wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 100%
• Maximale Breite: 2580px

Abstand

Fügen Sie als nächstes einen ansprechenden oberen Rand hinzu.

• Oberer Rand:
  • Desktop: 10vh
  • Tablet & Telefon: 5vh

Z-Index

Und um sicherzustellen, dass diese Zeile unter der zweiten Zeile bleibt, werden wir später diesem Abschnitt hinzufügen, indem wir den az-Index von 10 auf der Registerkarte "Erweitert" verwenden.

• Z-Index: 10

Alle Spalteneinstellungen

Sobald die allgemeinen Zeileneinstellungen vorgenommen wurden, öffnen Sie jede der Spalten einzeln.

Hauptelement-CSS

Wenden Sie in jeder der Spalten die folgenden CSS-Codezeilen auf das Hauptelement auf dem Telefon an:

Nur Telefon:

width: 50% !important;
margin: 0 !important;

Spalte 2 Einstellungen

Öffnen Sie dann die Einstellungen von Spalte 2.

Z-Index

Und erhöhen Sie den Z-Index auf 12. Dadurch wird diese Spalte über der dritten Spalte platziert.

• Z-Index: 12

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Bild Ihrer Wahl hoch.

Abstand

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

• Unterer Rand:
  • Tablet & Telefon: 10px
• Rechter Rand:
  • Tablet & Telefon: 2%

Bildmodul dreimal klonen und Duplikate in verbleibende Spalten platzieren

Nachdem Sie die Moduleinstellungen abgeschlossen haben, können Sie das gesamte Modul dreimal klonen und die Duplikate in die verbleibenden Spalten der Zeile einfügen.

Bilder ändern

Stellen Sie sicher, dass Sie das Bild in jedem duplizierten Modul ändern.

Bildmodul #2 & #4 Abstand ändern

Öffnen Sie dann die Einstellungen der Bildmodule in Spalte 2 und 4 und wenden Sie die folgenden Abstandswerte darauf an:

• Unterer Rand:
  • Tablet & Telefon: 10px
• Linker Rand:
  • Tablet & Telefon: 2%
• Rechter Rand: /

Zeile 2 hinzufügen

Spaltenstruktur

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

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen und wenden Sie den folgenden Farbverlaufshintergrund an:

• Farbe 1: #111111
• Farbe 2: rgba(255,255,255,0)

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Breite: 100%
• Maximale Breite: 2580px

Abstand

Tragen Sie dann eine obere und untere Polsterung auf.

• Obere Polsterung: 20vh
• Untere Polsterung: 20vh

Position

Um diese Zeile über dem Bildraster zu platzieren, verwenden wir die Positionseinstellungen entsprechend:

• Position: Absolut
• Ort: Top Center
• Z-Index: 12

Textmodul zur Spalte hinzufügen

H1-Inhalt hinzufügen

Fügen Sie dieser Zeile ein erstes Textmodul mit H1-Inhalten Ihrer Wahl hinzu.

H1-Texteinstellungen

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

• Überschrift Schriftart: Kumbh Sans
• Schriftstärke der Überschrift: Fett
• Überschrift-Schriftart: Großbuchstaben
• Ausrichtung des Überschriftentextes: Mitte
• Textfarbe der Überschrift: #ffdbaa
• Textgröße der Überschrift:
  • Desktop: 120px
  • Tablet: 60px
  • Telefon: 40px
• Abstand der Überschriftsbuchstaben
  • Desktop: -3px
  • Tablet & Telefon: 0px
• Überschriftstextschatten:
  • Wählen Sie: Dritte Option
  • Überschriftstextschattenfarbe: rgba(0,0,0,0.4)

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Maximale Breite: 900px
• Modulausrichtung: Mitte

Schaltflächenmodul zur Spalte 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 Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie dann die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop: 20px
  • Tablet: 16px
  • Telefon: 14px
• Schaltflächentextgröße: #111111
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

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

Abstand

Und verwenden Sie einige responsive Padding-Werte in den Abstandseinstellungen.

• Obere Polsterung:
  • Desktop & Tablet: 20px
  • Telefon: 15px
• Untere Polsterung:
  • Desktop & Tablet: 20px
  • Telefon: 15px
• Linke Polsterung:
  • Desktop & Tablet: 50px
  • Telefon: 40px
• Rechte Polsterung:
  • Desktop & Tablet: 50px
  • Telefon: 40px

2. Sticky-Einstellungen anwenden

Reihe 1 klebrig machen

Nachdem wir nun alle Elemente eingerichtet haben, können wir uns auf die Sticky-Einstellungen konzentrieren. Öffnen Sie die Einstellungen der ersten Zeile 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

Klebrige Deckkraft

Ändern Sie dann die Deckkraft in den Filtereinstellungen.

• Standard: 20%
• Klebrig: 100%

Bildmodul #1 Sticky-Einstellungen

Abstand

Als nächstes öffnen Sie die Einstellungen des Bildmoduls in Spalte 1. Wechseln Sie zum Design-Tab und fügen Sie etwas klebrigen oberen und rechten Rand hinzu.

• Sticky Top-Marge: -20%
• Klebriger rechter Rand: -20%

Übergang

Erhöhen Sie auch die Übergangsdauer.

• Übergangsdauer: 700ms

Bildmodul #2 Sticky Spacing

Abstand

Wechseln Sie zum Bildmodul in Spalte 2 und verwenden Sie die folgenden Sticky-Spacing-Einstellungen:

• Sticky Top-Marge: 20%
• Klebriger linker Rand: -30%

Übergang

Erhöhen Sie auch hier die Übergangsdauer.

• Übergangsdauer: 1000ms

Bildmodul #3 Sticky Spacing

Abstand

Als nächstes haben wir das Image Module in Spalte 3. Verwenden Sie die folgenden Sticky-Spacing-Werte:

• Sticky Top-Marge: -10%
• Klebriger linker Rand: -25%
• Klebriger rechter Rand: -25%

Übergang

Ändern Sie die Übergangsdauer entsprechend:

• Übergangsdauer: 700ms

Bildmodul #4 Sticky Spacing

Abstand

Öffnen Sie schließlich das Bildmodul in Spalte 4. Wenden Sie die folgenden Sticky-Abstandswerte an:

• Sticky Top-Marge: -20%
• Klebriger linker Rand: -30%

Übergang

Schließen Sie die Moduleinstellungen und dieses Tutorial ab, indem Sie die Übergangsdauer erhöhen. Das ist es! Speichern und verlassen Sie die Seite, um das Ergebnis zu sehen.

• Ü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 Ihrem Heldenbereich in Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie mithilfe der klebrigen Abschnitte von Divi ein Bildraster beim Scrollen sichtbar machen. 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.