4 animierte Bildlaufschaltflächen für den Heldenbereich Ihrer Divi-Site (und wie Sie sie erstellen)

Animierte Scroll-Buttons haben eine einfache, aber wichtige Aufgabe, die Aufmerksamkeit eines Benutzers zu erregen und ihn auf Ihrer Webseite zu führen. Diese Art von Schaltflächen befinden sich normalerweise oberhalb der Falte, sodass ein Besucher einfach auf die Schaltfläche klicken kann, ohne zum nächsten wichtigen Abschnitt der Webseite scrollen zu müssen. Tatsächlich hat Divi diese Scroll-Button-Funktion in das Header-Modul mit voller Breite integriert.

In diesem Tutorial zeige ich Ihnen, wie Sie in Divi vollständig benutzerdefinierte animierte Bildlaufschaltflächen erstellen. Wenn Sie also nach einer kreativen Alternative zu Divis integriertem Scroll-Button im Header-Modul mit voller Breite suchen, helfen Ihnen diese animierten Scroll-Button-Designs (wörtlich) in die richtige Richtung.

Vorgeschmack

Hier ist ein kurzer Blick auf die Designs, die wir zusammen bauen werden.

Laden Sie das animierte Layout der Bildlauftasten KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Abonnieren Sie unseren Youtube-Kanal

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Bilder, die für simulierte Inhalte verwendet werden sollen

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen des Kopfbereichs

Bevor wir mit dem Entwerfen der animierten Bildlaufschaltflächen beginnen, müssen wir unseren Mock-Header-Bereich einrichten. Da wir uns mehr darauf konzentrieren werden, die animierten Scroll-Button-Designs zu erhalten, werden wir das Header-Design mit einem dunklen Hintergrund einfach halten. Sobald dies erledigt ist, können wir den Abschnitt duplizieren, um jedes neue Design der Scroll-Schaltfläche anzugehen.

Erstellen Sie zunächst einen regulären Abschnitt mit einer einspaltigen Zeile.

Bevor Sie dann ein Modul hinzufügen, öffnen Sie die Abschnittseinstellungen und fügen Sie wie folgt einen dunklen Hintergrund hinzu:

Hintergrundfarbe: #222222

Jeder dunkle Hintergrund funktioniert.

Kopfzeilentext hinzufügen

Um den falschen Kopfzeilentext zu erstellen, fügen Sie der einspaltigen Zeile ein neues Textmodul hinzu.

Aktualisieren Sie dann den Textkörperinhalt mit einem h1-Header direkt über dem Standardabsatztext.

<h1>scroll button animation</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Textschriftart: Karla
Text Textausrichtung: Mitte
Überschrift Textgröße: 5vw
Textfarbe: Hell

Dies ist das grundlegende Abschnittsdesign, das wir für unsere verschiedenen animierten Bildlaufschaltflächen verwenden werden.

Animiertes Scroll-Button-Design Nr. 1: Vertikaler Text mit Slow-Bounce-Animation

Mit unserem grundlegenden Abschnittsdesign sind wir bereit, unseren ersten animierten Scroll-Button hinzuzufügen. Diese Scroll-Schaltfläche besteht aus einem Klappenmodul mit einem Symbol auf der rechten Seite. Dann werden Text und Symbol vertikal gedreht, sodass das Pfeilsymbol nach unten zeigt. Danach fügen wir die Bounce-Animation mit einer langsamen Dauer hinzu.

So geht's.

Fügen Sie zunächst eine neue einspaltige Zeile direkt unter unserer Zeile mit dem Kopfzeilentext hinzu.

Fügen Sie dann der Zeile ein Klappenmodul hinzu.

Löschen Sie in den Klappentexteinstellungen den Standardtextkörperinhalt und fügen Sie Folgendes hinzu:

Titel: scrollen
Symbol verwenden: JA
Symbol: Pfeil nach rechts (siehe Screenshot)

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Symbolfarbe: #ffffff
Bild-/Symbolplatzierung: Links
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 50px
Titelschriftart: TT
Titeltextfarbe: #ffffff
Titeltextgröße: 14px
Abstand der Titelbuchstaben: 3px
Höhe der Titelzeile: 50px (entspricht der Schriftgröße des Symbols)

Als nächstes müssen wir unserem Klappentext eine festgelegte Breite geben und ihn wie folgt vertikal drehen:

Breite: 132px
Modulausrichtung: Mitte
Transformieren Z-Achse drehen: 90deg

Jetzt müssen wir nur noch die Inhaltsreihenfolge des Klappentextes umkehren, sodass sich das Pfeilsymbol rechts und nicht links im Klappentext befindet. Dadurch wird der Pfeil wie vorgesehen unter dem vertikalen Text angezeigt. Dazu müssen wir das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:

direction: rtl;

Hinzufügen der Slow-Puls-Animation

Um die Animation hinzuzufügen, aktualisieren Sie Folgendes:

Animationsstil: Bounce
Animationsrichtung: Unten
Animationsdauer: 5000 ms
Animationsverzögerung: 400ms
Bild-/Symbolanimation: von links nach rechts

Endergebnis

Schauen wir uns nun das Endergebnis für Design Nr. 1 an.

Animiertes Scroll-Button-Design #2: Vertikale Marquee-Textanimation

Dieses nächste Design baut auf Design Nr. 1 auf, indem wir die vertikale Text-Scroll-Schaltfläche beibehalten, die mit dem Klappenmodul erstellt wurde. Der Unterschied wird die Animation sein. Für dieses Design fügen wir eine Folienanimation hinzu, die damit beginnt, dass die Bildlaufschaltfläche über dem Zeilencontainer verborgen ist und dann damit endet, dass die Schaltfläche unter der Zeile verborgen wird. Wenn die Animation in Schleife läuft, erzeugt dies einen Text-Marquee-Animationseffekt, der die Aufmerksamkeit des Benutzers auf sich zieht.

So geht's.

Dupliziere zuerst den gesamten Abschnitt des Designs Nr. 1.

Einstellungen für Zeile 2 aktualisieren

Aktualisieren Sie als Nächstes die Abschnittszeile, die das Klappenmodul/die Bildlaufschaltfläche enthält, wie folgt:

Horizontaler Überlauf: versteckt
Vertikaler Überlauf: versteckt

Einstellungen des Blurb-Moduls aktualisieren

Um die Marquee-Animation zu erstellen, müssen wir zuerst transform translate verwenden, um den Klappentext unter den Zeilencontainer zu verschieben (aus der Ansicht ausgeblendet). Dies ist die Position, an der sich der Text am Ende der Animation befindet. Aktualisieren Sie Folgendes:

Transformieren Y-Achse übersetzen: 115px

Fügen Sie als Nächstes die folgenden Animationseinstellungen hinzu:

Animationsstil: Folie
Animationsrichtung: Unten
Animationsdauer: 4000 ms
Animationsintensität: 195%
Anfangsdeckkraft der Animation: 100 %
Animationsgeschwindigkeitskurve: Linear
Animationswiederholung: Schleife

Endergebnis

Schauen wir uns nun das Endergebnis für Design Nr. 3 an.

Animiertes Scroll-Button-Design #3: Pfeil-Tab mit verzögerter Slide-Down-Animation

Für dieses nächste Design werden wir ein Textmodul und ein Klappenmodul kombinieren, um ein einzigartiges Pfeil-Tab-Design zu erstellen.

Für dieses Design beginnen wir mit dem grundlegenden Header-Sektion-Design. Sie können also den Abschnitt von Design Nr. 3 duplizieren und dann das Klappenmodul in Zeile 2 löschen.

Fügen Sie dann direkt unter der ersten Zeile einen Textbaustein in die einspaltige Zeile ein.

Aktualisieren Sie dann den Body-Inhalt mit dem Wort „scrollen“.

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Hintergrundfarbe: #ffffff
Text Textfarbe: #222222
Textausrichtung: Mitte
Breite: 50px
Modulausrichtung: Mitte
Rand: 0px unten
Polsterung: 20px oben, 20px unten
Abgerundete Ecken 5px unten links, 5px unten rechts

Fügen Sie das Blurb-Symbol hinzu

Nachdem das Textmodul nun vorhanden ist, müssen wir das Klappensymbol direkt darunter erstellen, um das Design der Pfeilregisterkarte abzuschließen. Fügen Sie dazu unter dem Textmodul ein neues Klappenmodul hinzu.

Löschen Sie dann den Standardtitel und den Haupttext. Fügen Sie dann folgendes Update hinzu:

Symbol verwenden: JA
Symbol: unteres Pfeildreieck (siehe Screenshot)

Aktualisieren Sie dann die Einstellungen wie folgt:

Symbolfarbe: #ffffff
Rand: -36px oben, 0px unten

Dieser negative Rand fügt den Pfeil an das Textmodul an, um ein schönes Pfeil-Tab-Design zu erhalten.

Fügen Sie dann das folgende CSS zum Klappenbild hinzu, um einen unnötigen Rand unter dem Symbol zu entfernen.

Blurb-Bild-CSS:

margin-bottom: 0px;

Zeile 2 Einstellungen und Animation

Da wir beiden Modulen, aus denen das Design der Bildlaufschaltfläche besteht, dieselbe Animation hinzufügen möchten, müssen wir die Animation der Zeile hinzufügen, die sie enthält. Aktualisieren Sie die Einstellung für die Zeile wie folgt:

Maximale Breite: 100px
Padding: 0px oben, 0px unten

Animationsstil: Folie
Animationsrichtung: Unten
Animationsdauer: 1200 ms

Zeile 1 Hintergrundfarbe und Boxschatten

Der letzte Schliff dieses Designs besteht darin, der ersten Reihe direkt über der Bildlauftastenreihe eine Hintergrundfarbe hinzuzufügen. Und indem wir den Z-Index dieser Zeile aktualisieren, lassen wir die Animation der Bildlaufschaltfläche so erscheinen, als würde sie durch die Kopfzeile brechen.

Öffnen Sie die Einstellungen für Zeile 1 wie folgt:

Hintergrundfarbe: #222222

Z-Index: 10

Box Shadow: siehe Screenshot
Vertikale Position des Kastenschattens: 80px
Stärke der Box-Schattenunschärfe: 22px
Stärke der Box-Schattenausbreitung: -70px
Schattenfarbe: #222222 (stellen Sie sicher, dass dies mit der Hintergrundfarbe übereinstimmt)

Endergebnis

Sehen Sie sich nun das Endergebnis an.

Animiertes Scroll-Button-Design #4: Maus-Scrolling-Animation

Für diese letzte animierte Scroll-Schaltfläche erstellen wir eine Maus-Scroll-Animation, indem wir ein Textmodul und ein Klappenmodul kombinieren.

So geht's.

Um zu beginnen, können Sie den grundlegenden Header-Abschnitt verwenden. Fügen Sie dann eine neue Zeile unter Zeile 1 hinzu.

Fügen Sie das Blurb-Modul hinzu

Als nächstes fügen Sie der Zeile ein Klappenmodul hinzu. Löschen Sie dann den Standardtitel und den Haupttext.

Aktualisieren Sie danach das Symbol wie folgt:

Symbol verwenden: JA
Symbol: Kreis (siehe Screenshot)

Aktualisieren Sie dann die Klappendesign-Einstellungen wie folgt:

Symbolfarbe: #ffffff
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 15px
Animationsstil: Folie
Animationsrichtung: Unten
Animationsdauer: 1200 ms
Animationswiederholung: Schleife
Bild-/Symbolanimation: Keine Animation

Fügen Sie dann das folgende benutzerdefinierte CSS zum Blurb-Image hinzu:

margin-bottom: 0px;

Fügen Sie das Textmodul hinzu

Fügen Sie als Nächstes ein neues Textmodul direkt unter dem Klappenmodul hinzu. Aktualisieren Sie dann den Fließtext mit dem Wort „scrollen“.

Aktualisieren Sie dann die folgenden Texteinstellungen:

Text Textfarbe: #ffffff
Textausrichtung: Mitte
Breite: 90px
Rand: 10 Pixel oben, -30 Pixel links

Einstellungen für Zeile 2 aktualisieren

Aktualisieren Sie nun die Zeileneinstellungen wie folgt:

Breite: 30px
Höhe: 60px
Abgerundete Ecken: 16px
Randbreite: 1px
Rahmenfarbe: #ffffff
Rahmenstil: Solid
Horizontaler Überlauf: sichtbar
Vertikaler Überlauf: sichtbar

Das Endergebnis

Schauen wir uns nun das Endergebnis an:

Hinzufügen der Ankerlink-Funktionalität

Ankerlinks sind Links, die zu verschiedenen Abschnitten einer Seite springen. Sie werden häufig in Websites mit einer Seite verwendet. Wir können das gleiche Konzept verwenden, um unseren Bildlaufschaltflächen einen Anker-Link hinzuzufügen, damit sie auf der Seite nach unten zum gewünschten Abschnitt springen. Um die Ankerlink-Funktionalität zu Ihren animierten Bildlaufschaltflächen hinzuzufügen, müssen Sie im Wesentlichen zwei Dinge tun.

1. Sie müssen dem Abschnitt oder der Zeile, zu der Sie springen möchten, eine CSS-ID hinzufügen
2. Sie müssen Ihrem Scroll-Button einen Anker-Link mit derselben CSS-ID hinzufügen

So würde das funktionieren. Erstellen Sie zunächst einen neuen Abschnitt unter dem Kopfzeilenabschnitt, der die Bildlaufschaltfläche enthält. Geben Sie dann dem neuen Abschnitt eine CSS-ID unter der Registerkarte "Erweitert" ein.

Suchen Sie dann den Element-/Scroll-Button, den Sie in Ihren Anker-Link verwandeln möchten, und fügen Sie eine URL hinzu, die mit einem Hashtag (oder einem Pfund-Symbol) beginnt und direkt gefolgt von der CSS-ID des Elements, zu dem Sie springen.

Wenn die CSS-ID des Abschnitts beispielsweise „section-2“ lautet, würden Sie „#section-2“ als Link-URL hinzufügen.

Denken Sie daran, dass Sie mit Divi jedem Element in Divi Link-URLs hinzufügen können. Sie können also der gesamten Zeile mit der animierten Bildlaufschaltfläche Links hinzufügen.

Weitere Informationen finden Sie in einigen coolen Dingen, die Sie mit Ankerlinks machen können.

Werde kreativ!

Scheuen Sie sich nicht, verschiedene Module zu kombinieren und auf unterschiedliche Weise zu animieren. Als ich mit Divi neue Möglichkeiten zum Entwerfen von Scroll-Buttons erforschte, habe ich eine lustige Daumen-Scroll-Animation erstellt, die für Mobilgeräte verwendet werden kann. Ich habe es oben in den kostenlosen Download aufgenommen, falls Sie es ausprobieren möchten.

Abschließende Gedanken

Animierte Scroll-Buttons wie diese lassen sich mit Divi ganz einfach erstellen. Und sie können an mehr Stellen als der Kopfzeile verwendet werden, wenn Sie sie wie Ankerlinks behandeln. Ich hoffe, diese Designs werden Sie dazu inspirieren, einen brandneuen Scroll-Button für Ihr nächstes Projekt zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!