Wie man Divi verwendet, um Menschen durch verschiedene schwierige Schritte zu führen

Wenn Sie versuchen, Besucher davon zu überzeugen, über Ihre Website Kontakt aufzunehmen, ist es entscheidend, ihnen die richtigen Anreize zu geben. Wenn man an Anreize denkt, fallen einem sofort klare und unwiderstehliche Handlungsaufforderungen ein. CTAs sind jedoch in der Regel der letzte Teil des Akquisitionsprozesses. Sie werden Ihren Weg dorthin höchstwahrscheinlich aufbauen, indem Sie den Wert Ihres Unternehmens zeigen. Eine der besten Möglichkeiten, dies zu tun, besteht darin, Ihren Ansatz und Ihr einzigartiges Wertversprechen zu teilen. Wenn Sie nach einem reibungslosen Weg suchen, Ihren Ansatz zu entwerfen, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie verschiedene Sticky Steps einfügen, die sich beim Scrollen und Lesen ändern. 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 Sticky Steps-Layout KOSTENLOS herunter

Um das kostenlose Sticky Steps-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. Schnittdesign erstellen

Regulären Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Einstellungen dieses Abschnitts und wenden Sie einen Verlaufshintergrund an:

• Farbe 1: #ffffff
• Farbe 2: #e5e5e5
• Verlaufstyp: Linear
• Steigungsrichtung: 150deg

Hintergrundbild

Laden Sie als nächstes ein Hintergrundbild hoch. Sie finden diejenige, die wir in diesem Tutorial verwenden, im Download-Ordner, den Sie am Anfang dieses Beitrags finden. Sie können das Hintergrundbild kostenlos und ohne Einschränkungen verwenden.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Oben links

Abstand

Entfernen Sie die standardmäßige untere Auffüllung des Abschnitts, indem Sie „0px“ hinzufügen.

• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur zum Abschnitt hinzufügen:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: rgba(130,100,239,0.09)

Größe

Wechseln Sie zum Design-Tab der Zeile und ändern Sie die Größeneinstellungen entsprechend:

• Spaltenhöhen ausgleichen: Ja
• Zeilenausrichtung: Mitte

Abstand

Wenden Sie auch einige benutzerdefinierte Abstandswerte an.

• Höchste Marge: 5%
• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und verwenden Sie einige abgerundete Ecken.

• Alle Ecken: 10px

Überläufe

Wir ändern auch die Zeilenüberläufe in sichtbar. Dadurch wird sichergestellt, dass nicht alles ausgeblendet wird, was über den Zeilencontainer hinausgeht.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie benutzerdefinierte obere und untere Auffüllung hinzu.

• Obere Polsterung: 5%
• Untere Polsterung: 5%

Spalte 2 Einstellungen

Hintergrund mit Farbverlauf

Im weiteren Verlauf fügen wir Spalte 2 einen Verlaufshintergrund hinzu.

• Farbe 1: #7b47ff
• Farbe 2: #6929aa
• Verlaufstyp: Linear
• Verlaufsrichtung: 158deg

Abstand

Wir werden dieser Spalte auch einige benutzerdefinierte Auffüllungen hinzufügen.

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

Grenze

Zusammen mit einigen abgerundeten Ecken.

• Alle Ecken: 10px

Maßstab transformieren

Und wir erhöhen die Größe der Spalte in den Transformationseinstellungen, indem wir die folgenden Transformationsskalierungswerte anwenden:

• Beide: 107%

Textmodul zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Textmodul in Spalte 1. Geben Sie H3-Inhalte Ihrer Wahl ein.

H3-Texteinstellungen

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

• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Textfarbe: #6929aa
• Überschrift 2 Textgröße: 35px
• Überschrift 3 Buchstabenabstand: -1px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Als nächstes werden wir ein Teilermodul zu Spalte 1 hinzufügen. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

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

• Linienfarbe: #f5ca4e

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 6px
• Breite: 20%
• Höhe: 6px

Grenze

Vervollständigen Sie die Moduleinstellungen, indem Sie einige abgerundete Ecken in die Rahmeneinstellungen aufnehmen.

• Alle Ecken: 20px

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In Spalte 2 benötigen wir als einziges Modul ein Textmodul mit einigen Beschreibungsinhalten.

Texteinstellungen

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

• Textschrift: Playfair Display
• Textgröße: 16px
• Textzeilenhöhe: 2.1em

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Füllwerte hinzufügen.

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

Ganze Zeile so oft wie nötig klonen

Sobald Sie die erste Zeile fertiggestellt haben, können Sie sie beliebig oft klonen, je nachdem, wie viele Informationen Sie über Ihren ersten Schritt teilen möchten.

Alle Kopien ändern

Stellen Sie sicher, dass Sie alle Kopien in doppelten Zeilen ändern.

2. Schrittreihenleiste am unteren Rand des Abschnitts hinzufügen

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem wir nun alle erklärenden Zeilen eingerichtet haben, können wir unsere klebrige Schrittzeilenleiste hinzufügen. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen und verwenden Sie einen Hintergrund mit Farbverlauf.

• Farbe 1: #ffdf51
• Farbe 2: #e5ac49
• Verlaufstyp: Linear
• Steigungsrichtung: 150deg

Größe

Wechseln Sie zur Registerkarte Design der Zeile und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Zeilenausrichtung: Mitte

Abstand

Wenden Sie als nächstes einige benutzerdefinierte Abstandswerte an.

• Höchste Marge: 5%
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und fügen Sie einige abgerundete Ecken hinzu.

• Alle Ecken: 10px

Box Schatten

Wenden Sie auch den folgenden Kastenschatten an:

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.13)

Überläufe

Navigieren Sie dann zur Registerkarte Erweitert und setzen Sie die Überläufe auf sichtbar.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Spalte 2 Abstand

Öffnen Sie als Nächstes die Einstellungen von Spalte 2 und verwenden Sie einige benutzerdefinierte obere und untere Auffüllungen.

• Obere Polsterung: 1%
• Untere Polsterung: 1%

Spalte 3 Abstand

Wir fügen auch Spalte 3 einige benutzerdefinierte obere und untere Auffüllungen hinzu.

• Obere Polsterung: 2%
• Untere Polsterung: 2%

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module zu unserer Sticky-Step-Reihenleiste hinzuzufügen. Fügen Sie in Spalte 1 ein Textmodul hinzu und erwähnen Sie den Schritt im Inhaltsfeld.

Hintergrund mit Farbverlauf

Wenden Sie als Nächstes einen Farbverlaufshintergrund an.

• Farbe 1: #7b47ff
• Farbe 2: #6929aa
• Verlaufstyp: Linear
• Verlaufsrichtung: 158deg

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und formatieren Sie den Text entsprechend:

• Textschriftart: Poppins
• Schriftstärke des Textes: Fett
• Textfarbe: #ffffff
• Textgröße: 27px

Größe

Nehmen Sie auch einige Änderungen an den Größeneinstellungen vor.

• Breite: 60%
• Modulausrichtung: Mitte

Abstand

Fügen Sie dann den Abstandseinstellungen einige benutzerdefinierte obere und untere Auffüllungen hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px

Grenze

Fügen Sie als nächstes einige abgerundete Ecken zu den Randeinstellungen hinzu.

• Alle Ecken: 10px

Box Schatten

Wir verwenden auch einen subtilen Kastenschatten.

• Schattenfarbe: rgba(0,0,0,0.3)

Transformieren Übersetzen

Und wir vervollständigen die Moduleinstellungen, indem wir das Modul mit den Transformationseinstellungen von Divi leicht neu positionieren.

• Rechts: -20px

Textmodul zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

In Spalte 2 fügen wir ein Textmodul mit einigen H2-Inhalten hinzu, die den Schritt beschreiben, in dem wir uns befinden.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und gestalten Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Poppins
• Überschrift 2 Schriftstärke: Mittel
• Überschrift 2 Textausrichtung:
  • Desktop: Links
  • Tablet & Telefon: Mitte
• Überschrift 2 Textfarbe: #6d40ed
• Überschrift 2 Buchstabenabstand: -1px

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 5%
• Untere Polsterung: 5%

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Weiter zur nächsten und letzten Spalte. Fügen Sie ein Textmodul mit Beschreibungsinhalten hinzu.

Texteinstellungen

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

• Textschrift: Playfair Display
• Schriftstärke des Textes: Fett
• Textfarbe: rgba(109,64,237,0,46)
• Textgröße: 20px
• Textausrichtung:
  • Desktop: Links
  • Tablet & Telefon: Mitte

3. Wenden Sie Sticky-Effekte auf die Schrittzeilenleiste an

Sticky Row-Einstellungen

Jetzt, da unser Design für die klebrige Schrittreihenleiste fertiggestellt ist, ist es an der Zeit, es am Boden festzuhalten. Öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Erweitert und wenden Sie die folgenden Einstellungen für die Sticky-Position an:

• Klebrige Position: Nach unten kleben
• Sticky Bottom Offset: 1px
• Oberes Sticky-Limit: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Sticky Row-Filter

In einem Standardzustand möchten wir nicht, dass die Zeilenleiste sichtbar ist. Sobald es jedoch klebrig geworden ist, möchten wir, dass es angezeigt wird. Um dies zu erreichen, ändern wir den Deckkraftfilter in den Filtereinstellungen:

• Standard: 0%
• Klebrig: 100%

4. Den gesamten Abschnitt für die nächsten Schritte wiederverwenden

Abschnitt so oft wie nötig klonen

Nachdem unser erster Abschnitt, der Schritt 1 gewidmet ist, erstellt wurde, können wir den gesamten Abschnitt basierend auf der Anzahl der Schritte, die wir haben, wiederverwenden.

Alle Kopien in doppelten Abschnitten ändern

Stellen Sie sicher, dass Sie alle Kopien in den doppelten Abschnitten ändern. Das ist es!

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 dem Approach-Design Ihrer Website kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie die Sticky-Optionen von Divi verwenden, um verschiedene Sticky-Step-Leisten zu erstellen, die Ihren Besuchern helfen, durch verschiedene Teile Ihres Ansatzes zu navigieren. 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.