Wie man mit Divi . animierte Bartheken mit Scroll-Funktion entwirft

Balkenzähler werden im gesamten Web verwendet, um Daten oder Metriken mit subtilen Farbanimationen, die einen bestimmten Wert darstellen, effektiv zu veranschaulichen. Divi verfügt über ein spezielles Barthekenmodul, mit dem sich ganz einfach animierte Bartheken erstellen lassen. Sie sind beliebte Ergänzungen zu Infoseiten, Serviceseiten und Fallstudien

Die meisten Bartheken scheinen zu animieren, wenn sie in Sicht kommen, und können schwer anzupassen sein. In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie vollständig anpassbare Barzähler (von Grund auf neu) erstellen, die mit Divi beim Scrollen animieren. Dazu nutzen wir die Positionsoptionen und Scroll-Effekte von Divi und setzen sie auf einzigartig präzise Weise ein.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Bartheken, die wir in diesem Tutorial bauen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Bartheken mit Scroll-Effekt-Layout 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!

Um das Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und importieren Sie die JSON-Datei aus der Divi-Bibliothek.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

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

Teil 1: Optimieren von Abschnitt, Zeile und Spalte

Zeile hinzufügen

T0 start, fügen Sie dem Abschnitt eine zweispaltige Zeile hinzu.

Abschnittseinstellungen

Öffnen Sie dann die Abschnittseinstellungen und fügen Sie wie folgt eine Hintergrundfarbe hinzu:

• Hintergrundfarbe: #000545

Geben Sie dem Abschnitt dann einen temporären Spielraum, um die Scroll-Effekte und einige Auffüllungen wie folgt zu testen:

• Rand: 80vh oben, 80vh unten
• Polsterung 10vw oben, 10vw unten

Reihenbreite

Öffnen Sie als Nächstes die Zeileneinstellungen und fügen Sie die folgende Breite hinzu:

• Breite: 90%
• Maximale Breite: 700px

Spaltenüberlauf

Achten Sie darauf, den Überlauf der beiden Spalten innerhalb der Zeile auszublenden. Öffnen Sie dazu die Einstellungen für jede der Spalten und aktualisieren Sie Folgendes:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Teil 2: Erstellen eines Taktzählers mit Scroll-Effekten

Der Barzähler besteht aus drei Elementen: einem Balkenhintergrund (Teilermodul), einem Farbbalken (auch Teilermodul) und einem Balkeninhalt (Blurb-Modul). Das farbige Balkenelement wird mit horizontalen Bewegungs-Scroll-Effekt-Offsets animiert.

Beginnen wir mit dem Balkenhintergrund.

Erstellen des Balkenhintergrunds

Trennmodul hinzufügen

Fügen Sie in Spalte 1 ein neues Trennmodul hinzu.

Teilereinstellungen

Teiler anzeigen: NEIN

• Hintergrundfarbe: rgba(255,255,255,0.1)

• Breite: 300px
• Höhe: 70px

Bartheke erstellen

Teilermodul duplizieren

Um den farbigen Balken für die Bartheke zu erstellen, duplizieren Sie das vorherige Trennmodul, mit dem wir den Balkenhintergrund erstellt haben.

Teiler-Hintergrund

Aktualisieren Sie dann den Hintergrund mit einer neuen Verlaufshintergrundfarbe wie folgt:

• Verlaufshintergrund links Farbe: #fe7e1f
• Farbverlauf Hintergrund rechts: #ffbc48
• Verlaufsrichtung: 90deg

Teilerposition

Damit der farbige Balken über dem Balkenhintergrund sitzt, müssen wir ihm eine absolute Position mit einem Z-Index von 1 zuweisen:

• Position: Absolut
• Z-Index: 1

Teiler-Scroll-Effekte

Jetzt können wir die Bewegung der Bartheke hinzufügen. Dazu verwenden wir einen horizontalen Scroll-Effekt, der das Teilermodul von links nach rechts bewegt. Da der Spaltenüberlauf ausgeblendet ist, sehen wir den Balken nicht, da er über die linke Seite der Spalte hinausragt. Aber wir werden sehen, wie es in Sichtweite kommt, wenn es sich nach rechts bewegt.

Verwenden der Offset-Werte zum Ermitteln von Prozentwerten für den Balkenzähler

Bevor wir dem Teiler/Balken die horizontale Bewegung hinzufügen, müssen wir verstehen, wie man einen Prozentwert bestimmt, der auf dem Balkenzähler angezeigt werden soll. Mit anderen Worten, wenn wir 25 % auf dem Balkenzähler darstellen möchten, müssen wir wissen, welcher horizontale Bewegungsversatz den Balken um genau 25 % der Hintergrundbreite des Balkens nach rechts verschiebt.

Wir können eine einfache Mathematik machen, um dies herauszufinden.

Die Gesamtbreite der Leiste beträgt 300px.

Jeder horizontale Versatzwert ist relativ zu 100px (1 entspricht 100px, -2 entspricht -200px usw.)

Um den Balken nach links (außerhalb der Ansicht) zu verschieben, müssen wir einen Startversatz von -3 (-300px) hinzufügen. Dadurch wird es 300px nach links aus dem Sichtbereich verschoben.

Dann müssen wir den Balken über 25% von 300px (das sind 75px) verschieben, um die Scroll-Animation abzuschließen.

Um den Balken über 75px nach rechts zu verschieben, wenn der Balken die vertikale Mitte der Seite erreicht, müssen wir einen mittleren Versatz von -2,25 einstellen (da -300 plus 75 gleich -225). Dies erinnert Sie wahrscheinlich an die Zahlenreihen, die wir in der Grundschule verwendet haben.

25% mit horizontaler Bewegung anzeigen

Um 25 % mit horizontaler Bewegung anzuzeigen, wählen Sie die Registerkarte horizontale Bewegung aus und aktualisieren Sie Folgendes:

• Horizontale Bewegung aktivieren: JA
• Startversatz: -3
• Mittenversatz: -2,25
• Endversatz: -2,25

Inhalt für Bartheken erstellen

Um den Balkeninhalt zu erstellen, verwenden wir ein Klappenmodul. Blurbs ermöglichen es uns, einfach ein linksbündig ausgerichtetes Symbol zusammen mit einem Titel und einem Fließtext hinzuzufügen, der perfekt für die Bartheke ist.

Fügen Sie unter dem farbigen Balkenteilermodul ein Klappenmodul hinzu.

Inhalt anzeigen

Aktualisieren Sie dann den Inhalt wie folgt:

• Titel: 25%
• Körper: Optimierung
• Symbol: siehe Screenshot

Klappendesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 40px

• Textfarbe: Hell
• Körperschriftart: Rubik
• Körperschriftart: TT
• Körperbuchstabenabstand: 0.2em
• Körperlinienhöhe: 1em

• Inhaltsbreite: 100%
• Breite: 300px
• Höhe: 70px
• Polsterung: 15px oben, 15px links

• Position: Absolut
• Z-Index: 2

Teil 3: Erstellen zusätzlicher Bartheken

In diesem nächsten Teil werden wir mit der gleichen Technik weitere Bartheken herstellen. Wir erstellen eine 50 %, 75 % und eine 100 % Bartheke, um die Gestaltung des Layouts abzurunden. Dies sollte Ihnen gute Arbeitsbeispiele geben, um selbst mehr zu machen.

Erstellen einer 50% Bartheke

Spalte duplizieren mit Barzähler

Sobald Sie den ersten Barzähler in Spalte 1 erstellt haben, können wir die gesamte Spalte duplizieren oder die drei Module, aus denen der Barzähler besteht, kopieren und in Spalte 2 einfügen. Jetzt sollten Sie zwei Spalten mit jeweils identischen Barzählern haben.

Balkentrenner-Einstellungen aktualisieren

Hintergrund

Öffnen Sie in Spalte 2 die Einstellungen für den farbigen Balkenteiler und aktualisieren Sie die Hintergrundfarben des Farbverlaufs:

• Farbverlauf Hintergrund links: #4c75f8
• Farbverlauf Hintergrund Rechte Farbe: #57a1ff

Scroll-Effekte

Aktualisieren Sie dann den horizontalen Bewegungs-Scroll-Effekt, sodass er beim Scrollen 50 % des Balkens ausfüllt:

• Mittenversatz: -1,5
• Endversatz: -1.5

Blurb-Inhalte aktualisieren

Öffnen Sie dann die Einstellungen für den Klappentext in Spalte 2 und aktualisieren Sie den Inhalt:

• Titel: 50%
• Symbol: siehe Screenshot

Erstellen einer 75% Bartheke

Duplizieren Sie die Reihe

Um das Design unserer nächsten beiden Bartheken zu starten, duplizieren Sie die gesamte Reihe, um eine weitere identische Reihe darunter zu erstellen.

Balkenhintergrund und Bildlaufeffekte aktualisieren

Öffnen Sie die Einstellungen für das Modul Farbbalkentrenner und aktualisieren Sie die folgenden Hintergrundfarben:

• Farbverlauf Hintergrund links: #4c75f8
• Farbverlauf Hintergrund Rechte Farbe: #57a1ff

Aktualisieren Sie dann die horizontalen Bewegungsoffsets wie folgt:

• Mittenversatz: -.075
• Endversatz: -0,75

Inhalt anzeigen

Öffnen Sie die Klappeneinstellungen und aktualisieren Sie den Inhalt wie folgt:

• Titel: 75%
• Symbol: siehe Screenshot

Erstellen eines 100 %-Barzählers

Balkenfarbe und Bildlaufeffekte aktualisieren

Um einen 100 %-Balkenzähler zu erstellen, gehen Sie zu Spalte 2 und aktualisieren Sie die Hintergrundfarbe des farbigen Balkenteilermoduls wie folgt:

• Farbverlauf Hintergrund links: #f449b4
• Farbverlauf Hintergrund rechts: #fc845b

Aktualisieren Sie dann die horizontalen Bewegungsoffsets wie folgt:

• Mittenversatz: 0
• End-Offset: 0

Blurb-Inhalte aktualisieren

Aktualisieren Sie abschließend den Inhalt des Klappentexts:

• Titel: 100%
• Symbol: siehe Screenshot

Endergebnis

Hier ist ein Screenshot des Endergebnisses. Als letzten Schliff habe ich ein benutzerdefiniertes Hintergrundbild aus unserem fünften Theme-Builder-Paket hinzugefügt.

Nun, was die Scroll-Bewegung in Aktion ist.

Abschließende Gedanken

Hoffentlich werden diese animierten Balkenzähler für ein zukünftiges Projekt nützlich sein. Der Nachteil eines solchen benutzerdefinierten Designs ist, dass Sie ein wenig rechnen müssen, um zu berechnen, wie weit der farbige Balken um einen bestimmten Prozentsatz verschoben werden muss. Aber der Vorteil ist, dass Sie mehr Möglichkeiten für noch einzigartigere und kreativere Designs haben.

Wenn Sie interessiert sind, lesen Sie unseren Beitrag zum Erstellen von benutzerdefinierten Kreiszählern, die auch beim Scrollen animiert werden.

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

Danke schön!