So erstellen Sie eine Zeitleiste mit dem Blurb-Modul von Divi

In diesem Beitrag zeigen wir Ihnen, wie Sie mit Ihren Blurb-Modulen von Divi ganz einfach eine einfache, aber elegante Zeitleiste erstellen können. Wir kombinieren die verschiedenen Optionen, die Module und Zeilen bieten, um das Ergebnis zu erzielen, das Sie unten sehen können. Das Beispiel, das wir teilen, basiert nur auf den integrierten Divi-Optionen, was bedeutet, dass Sie keinen zusätzlichen CSS-Code hinzufügen müssen! Wir sorgen auch dafür, dass es sowohl auf dem Desktop als auch auf dem Handy gut aussieht.

Ergebnis

Das Erscheinungsbild einer Zeitleiste wird durch zwei Gestaltungselemente erreicht; die Linie, die alle drei Blurb-Module kreuzt, und die Zahlen. Die Desktop-Version sieht so aus:

Und die mobile Version sieht so aus:

Lass uns anfangen!

So erstellen Sie eine Zeitleiste mit dem Blurb-Modul von Divi

Abonnieren Sie unseren Youtube-Kanal

Standardabschnitt hinzufügen

Abschnitt Hintergrundfarbe

Beginnen Sie damit, einen neuen Standardabschnitt hinzuzufügen und 'rgba(0,0,0,0.12)' als Hintergrundfarbe zu verwenden.

Abschnittspolsterung

Gehen Sie zur Registerkarte Design und verwenden Sie eine obere Auffüllung von '300px'.

Dreispaltige Zeile hinzufügen (Zeitleiste)

Spaltenhintergründe

Nachdem Sie den Abschnitt erstellt haben, fügen Sie ihm eine dreispaltige Zeile hinzu. Verwenden Sie auf der Registerkarte Inhalt dieser Zeile „#e09900“ als Hintergrundfarbe für Spalte 1, „#0c71c3“ als Hintergrundfarbe für Spalte 2 und „#8300e9“ als Hintergrundfarbe für Spalte 3.

Größe

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Dimensionierung:

• Machen Sie diese Zeile FulldWidth: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Benutzerdefinierter Rand und Auffüllung

Fügen Sie als Nächstes die folgende benutzerdefinierte Auffüllung und den folgenden benutzerdefinierten Rand zur Zeile hinzu:

• Obere Polsterung: 1px
• Untere Polsterung: 0px
• Unterer Rand: -200px

Und fügen Sie '3px' zum oberen und unteren Abstand jeder Spalte hinzu.

Auf Tablet und Telefon deaktivieren

Deaktivieren Sie schließlich die Zeile sowohl auf dem Tablet als auch auf dem Telefon.

Hinzufügen einer weiteren dreispaltigen Zeile (Blurb-Module)

Spaltenverlaufshintergrund

Sobald Sie die erste dreispaltige Zeile erstellt haben, können Sie direkt darunter die zweite erstellen (sie teilen sich denselben Abschnitt). Jede der Spalten benötigt einen Verlaufshintergrund mit den gleichen Einstellungen, aber mit einer anderen ersten Farbe:

• Erste Farbe: #e09900 (Spalte 1), #0c71c3 (Spalte 2), #8300e9 (Spalte 3)
• Zweite Farbe: rgba (255, 255, 255, 0)
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 73%
• Endposition: 92%

Zeile in voller Breite machen

Gehen Sie dann zur Registerkarte Design und aktivieren Sie die Option "Diese Zeile in voller Breite erstellen".

Benutzerdefinierte Zeilenpolsterung

Öffnen Sie die Unterkategorie „Abstand“ und verwenden Sie die folgenden benutzerdefinierten Padding & Custom Margin für die Zeile:

• Obere Polsterung: 0px
• Rechte Polsterung: 60px
• Untere Polsterung: 100px
• Linke Polsterung: 60px
• Oberer Rand: -100px

Fügen Sie auch '5px' zum oberen Abstand jeder Spalte hinzu.

Blurb-Modul

Nachdem Sie die Zeileneinstellungen vorgenommen haben, können Sie der ersten Spalte der gerade erstellten Zeile ein Blurb-Modul hinzufügen. Aktivieren Sie in der Unterkategorie „Bild & Symbol“ der Registerkarte „Inhalt“ die Option „Symbol verwenden“ und wählen Sie ein gewünschtes Symbol aus.

Scrollen Sie auf derselben Registerkarte nach unten und verwenden Sie '#f4f4f4' als Hintergrundfarbe.

Gehen Sie zur Registerkarte Design und nehmen Sie die folgenden Anpassungen an der Unterkategorie Bild & Symbol vor:

• Symbolfarbe: #e09900
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 50px

Stellen Sie in der Unterkategorie Text sicher, dass die linke Textausrichtung aktiviert ist.

Die Optionen für die Unterkategorie Kopfzeilentext sind die folgenden:

• Header-Schriftart: Crete Round
• Ausrichtung des Kopfzeilentextes: Links
• Header-Schriftgröße: 32px
• Höhe der Kopfzeile: 1em

Öffnen Sie dann die Unterkategorie Textkörper und verwenden Sie die folgenden Einstellungen:

• Ausrichtung des Textkörpers: Links
• Schriftgröße des Körpers: 12px
• Körperlinienhöhe: 1.7em

Wir werden auch einen Rahmen mit den folgenden Einstellungen verwenden:

• Rand verwenden: Ja
• Randfarbe: #000000
• Randbreite: 2px
• Rahmenstil: Gepunktet

Öffnen Sie als Nächstes die Unterkategorie Größenanpassung und verwenden Sie '279px' für die Inhaltsbreite und '100%' für die Breite.

Schließlich fügen Sie '30px' zum oberen, rechten, unteren und linken Abstand hinzu.

Textmodul

Nachdem Sie das Blurb-Modul hinzugefügt und geändert haben, fügen Sie direkt darunter ein Textmodul hinzu. Das Textmodul benötigt ebenfalls einen Hintergrund mit Farbverlauf:

• Erste Farbe: #e09900
• Zweite Farbe: rgba (255, 255, 255, 0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 20%
• Endposition: 24%

Wechseln Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Schriftgröße des Textes: 21px
• Textfarbe: #FFFFFF
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Öffnen Sie die Unterkategorie Dimensionierung, verwenden Sie eine Breite von '48 %' und wählen Sie die richtige Modulausrichtung aus.

Verwenden Sie zuletzt einen oberen Rand von '-100px' und fügen Sie '50px' zum oberen und unteren Abstand hinzu.

Blurb- und Textmodul klonen

Sobald Sie die erste Spalte ausgefüllt haben, können Sie beide Module klonen und in die anderen beiden Spalten platzieren. Die einzigen Dinge, die Sie ändern müssen, sind das Klappensymbol, die Klappenfarbe und die erste Verlaufsfarbe des Textmoduls in '#0c71c3' für die zweite Spalte und '#8300e9' für die letzte Spalte.

Auf Tablet und Telefon deaktivieren

Nachdem Sie diese zweite Zeile ausgefüllt haben, stellen Sie sicher, dass Sie sie auch für Telefon und Tablet deaktivieren.

Dreispaltige Zeile klonen (Tablet und Telefon)

Die Timeline-Version auf Tablet und Telefon unterscheidet sich geringfügig. Klonen Sie die Zeile mit Klappentexten, die Sie im vorherigen Teil dieses Beitrags erstellt haben, und befolgen Sie die nächsten Schritte, um sie auf Telefon und Tablet anzupassen.

Zeilenverlaufshintergrund hinzufügen

Die Zeile auf Tablet und Telefon benötigt den folgenden Verlaufshintergrund:

• Erste Farbe: rgba(0,0,0,0.7)
• Zweite Farbe: rgba (255, 255, 255, 0)
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Startposition: 1%
• Endposition: 0%

Zeilenpolsterung

Löschen Sie alle benutzerdefinierten Abstände und Ränder, die in der Desktop-Version verwendet wurden, und fügen Sie '100px' zum oberen Abstand hinzu.

Auf dem Desktop deaktivieren

Schließlich, anstatt die Zeile auf dem Telefon und Tablet zu deaktivieren, deaktivieren Sie sie stattdessen auf dem Desktop.

Ergebnis

Nachdem Sie alle Schritte im Beitrag befolgt haben, sollten Sie auf dem Desktop das folgende Ergebnis erzielen können:

Und folgendes Ergebnis auf Tablet und Telefon:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine einfache Zeitleiste Ihres Blurb-Moduls erstellen können, indem Sie nichts anderes als die integrierten Divi-Optionen verwenden. Zwei Faktoren, die helfen, die Blurb-Module als Zeitleiste zu identifizieren, sind die Linie, die alle drei Blurb-Module verbindet, und die Nummern. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!