So führen Sie Besucher mit den integrierten Animationseinstellungen von Divi überzeugend durch die Seite

Einer der Hauptzwecke von Heldenabschnitten besteht darin, die Leute davon zu überzeugen, auf der Seite weiter nach unten zu scrollen und mehr Inhalte und Informationen zu entdecken, die Sie geteilt haben. Mit den integrierten Animationsoptionen von Divi können Sie Ihrer Seite interaktive Animationen hinzufügen, die Ihnen helfen, die Besucher überzeugend auf der Seite zu führen. In diesem Tutorial werden wir Besucher dazu motivieren, mithilfe von Pfeilsymbolen, die sie zum Servicebereich führen, nach unten zum Abschnitt „Dienste“ zu scrollen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Beginnen wir mit dem Erstellen!

Abonnieren Sie unseren Youtube-Kanal

Abschnitt 1 hinzufügen

Hintergrundfarbe

Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #0f0f0f

Unterteiler

Fahren Sie fort, indem Sie dem Abschnitt einen unteren Teiler hinzufügen.

• Teilerstil: In Liste suchen
• Teilerfarbe: #ffffff
• Teilerhöhe: 30px
• Teiler Horizontale Wiederholung: 10x (Desktop), 4x (Tablet & Telefon)

Abstand

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

• Obere Polsterung: 269px (Desktop), 100px (Tablet & Telefon)
• Untere Polsterung: 674px (Desktop), 200px (Tablet & Telefon)

Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zu den Größeneinstellungen und aktivieren Sie die Option 'Diese Zeile in voller Breite erstellen'.

• Machen Sie diese Zeile in voller Breite: Ja

Textmodul hinzufügen

Inhalt hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul. Fahren Sie fort und fügen Sie H1-Inhalte Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Ändern Sie als Nächstes die Texteinstellungen für die Überschrift.

• Überschrift Schriftart: Didact Gothic
• Schriftstärke der Überschrift: Fett
• Ausrichtung des Überschriftentextes: Mitte
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 170px (Desktop), 50px (Tablet & Telefon)
• Höhe der Überschriftslinie: 0.8em

• Vertikale Länge des Überschrifttextschattens: 1.5em
• Überschriftstextschattenfarbe: rgba(0,0,0,0.11)

Abschnitt 2 hinzufügen

Hintergrundfarbe

Fahren Sie fort, indem Sie der Seite den zweiten Abschnitt hinzufügen. Ändern Sie die Hintergrundfarbe in den Abschnittseinstellungen.

• Hintergrundfarbe: #0f0f0f

Oberteiler

Fügen Sie dem Abschnitt auch einen oberen Teiler hinzu.

• Teilerstil: In Liste suchen
• Teilerfarbe: #ffffff
• Teilerhöhe: 30px
• Teiler Horizontale Wiederholung: 10x (Desktop), 4x (Tablet & Telefon)

Abstand

Und erhöhen Sie die Abstandswerte in den Abstandseinstellungen.

• Obere Polsterung: 245px
• Untere Polsterung: 245px

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, gehen Sie zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2

Blurb-Modul hinzufügen

Symbol auswählen

Das erste Modul, das wir in der ersten Spalte benötigen, ist ein Blurb-Modul. Der einzige Teil des Elements des Blurb-Moduls, den wir benötigen, ist das Symbol. Wählen Sie das nach unten zeigende Pfeilsymbol aus.

Symboleinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Symboleinstellungen.

• Symbolfarbe: #4ffcff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 150px

Abstand

Um die Reichweite des Symbols zu erhöhen, müssen wir einen negativen oberen Rand hinzufügen. Dadurch kann das Blurb-Modul den vorherigen Abschnitt überlappen und die Animation zwischen zwei Abschnitten reibungslos ablaufen. Um den benutzerdefinierten Rand auszugleichen, fügen wir auch benutzerdefinierte obere Polsterung hinzu. Dadurch wird sichergestellt, dass das Symbol an der exakt gleichen Position wie zuvor bleibt. Es ändert sich lediglich die Größe und Reichweite des gesamten Moduls.

• Oberer Rand: -550px
• Obere Polsterung: 550px

Animation

Zu guter Letzt fügen Sie dem Blurb-Modul eine Animation mit den folgenden Einstellungen hinzu:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsdauer: 3000ms
• Animationsverzögerung: 1200 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Bild-/Symbolanimation: Keine Animation

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in der ersten Spalte benötigen, ist ein Textmodul. Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Fahren Sie fort, indem Sie die Texteinstellungen ändern.

• Textschriftart: Didact Gothic
• Schriftstärke des Textes: Fett
• Textfarbe: rgba(255,255,255,0.03)
• Textgröße: 350px
• Textausrichtung: Mitte

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie der ersten Spalte ein zweites Textmodul mit H3-Inhalten Ihrer Wahl hinzu.

Überschriftstexteinstellungen

Und ändern Sie die Einstellungen für den Überschriftentext auf der Registerkarte Design.

• Überschrift 3 Schriftart: Didact Gothic
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 40px (Desktop), 30px (Tablet & Telefon)
• Überschrift 3 Buchstabenabstand: -1px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste Modul, das in der ersten Spalte benötigt wird, ist ein Teilermodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Fahren Sie fort, indem Sie die Teilerfarbe im Design-Tab ändern.

• Farbe: #ffffff

Größe

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

• Breite: 59%
• Modulausrichtung: Mitte

Animation

Und fügen Sie dem Modul auch eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Zentrum
• Animationsdauer: 2000 ms
• Animationsintensität: 10%
• Animationsgeschwindigkeitskurve: Ease-In-Out

Textmodul #3 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in Spalte eins benötigen, ist ein weiteres Textmodul. Fügen Sie einen Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Fahren Sie fort, indem Sie die Texteinstellungen ändern.

• Text Schriftart Gewicht: Leicht
• Textfarbe: #b7b7b7
• Textgröße: 18px
• Textzeilenhöhe: 1.8em
• Textausrichtung: Mitte

Animation

Und fügen Sie dem Modul eine Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsintensität: 20%
• Animationsgeschwindigkeitskurve: Ease-In-Out

Module dreimal klonen und Duplikate in verbleibende Spalten platzieren

Nachdem wir nun alle Module in Spalte 1 geändert haben, können wir alle Module in Spalte eins dreimal klonen und die Duplikate in die verbleibenden Spalten einfügen.

Modulinhalt ändern

Ändern Sie den Inhalt der Duplikate.

Hinzufügen einer Animationsverzögerung zu Teilermodulen von Duplikaten

Fügen Sie auch jedem der Duplikate des Divider-Moduls eine Animationsverzögerung hinzu.

• Teilermodul in Spalte 2: 400ms
• Teilermodul in Spalte 3: 800ms
• Teilermodul in Spalte 4: 1200ms

Animationsverzögerung zu Duplikaten von Textmodul Nr. 3 hinzufügen

Machen Sie dasselbe für das letzte Textmodul in jeder Spalte.

• Letztes Textmodul in Spalte 2: 400ms
• Letztes Textmodul in Spalte 3: 800ms
• Letztes Textmodul in Spalte 4: 1200ms

Anpassen des Blurb-Symbols #2

Symbolfarbe

Wir ändern auch die Farbe und Animation des Klappensymbols für jedes der Duplikate. Öffnen Sie das Blurb-Modul in Spalte 2 und ändern Sie die Symbolfarbe.

• Symbolfarbe: #ff6b86

Animation

Ändern Sie auch die Animationseinstellungen.

• Animationstyp: Folie
• Animationsrichtung: Unten
• Animationsdauer: 2000 ms
• Animationsverzögerung: 800 ms
• Animationsintensität: 62 %
• Anfangsdeckkraft der Animation: 100 %
• Bild-/Symbolanimation: Keine Animation

Anpassen des Blurb-Symbols #3

Symbolfarbe

Fahren Sie fort, indem Sie das Blurb-Modul in Spalte 3 öffnen und die Symbolfarbe ändern.

• Symbolfarbe: #ffe500

Animation

Ändern Sie auch die Animationseinstellungen.

• Animationstyp: Folie
• Animationsrichtung: Unten
• Animationsdauer: 1000ms
• Animationsverzögerung: 600ms
• Animationsintensität: 69 %
• Anfangsdeckkraft der Animation: 100 %
• Bild-/Symbolanimation: Keine Animation

Anpassen des Blurb-Symbols #4

Symbolfarbe

Öffnen Sie das letzte Blurb-Modul in Spalte 4 und ändern Sie die Symbolfarbe.

• Symbolfarbe: #00ff9d

Animation

Und beenden Sie das Design, indem Sie die Animationseinstellungen auf der Registerkarte Design ändern.

• Animationstyp: Folie
• Animationsrichtung: Unten
• Animationsdauer: 3000ms
• Animationsverzögerung: 400ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %
• Bild-/Symbolanimation: Keine Animation

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Besucher mit den Animationseinstellungen von Divi überzeugend auf die Seite führen. Die Grundidee ist, dass Sie Blurb-Module für ihre Symbole verwenden und ihre Animationsreichweite auf den Heldenbereich erhöhen. Sie können diesen Ansatz auf jede Art von Website anwenden, die Sie erstellen, und so kreativ werden, wie Sie möchten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!