Laden Sie einen KOSTENLOSEN Timeline-Abschnitt herunter, der mit den Transformationsoptionen von Divi erstellt wurde

Wenn es um die Strukturierung von Inhalten geht, ist das Erstellen einer Zeitleiste eine großartige Möglichkeit, die Informationen für Ihre Besucher interessant und ansprechend zu halten. Es hilft ihnen auch, die Informationen, die sie lesen, viel schneller zu navigieren und zu verarbeiten. Und wenn Sie ein schönes Design verwenden, verbessert es auch das allgemeine Erscheinungsbild Ihrer Seite. In diesem Beitrag zeigen wir Ihnen, wie Sie mit den Transformationsoptionen von Divi einen atemberaubenden Zeitleistenabschnitt erstellen. Das neu erstellte Design bleibt auch auf kleineren Bildschirmgrößen reaktionsschnell.

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 Timeline-Abschnittslayout KOSTENLOS herunter

Um das kostenlose Layout für den Timeline-Abschnitt 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!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Abstand

Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen, gehen Sie zu den Abstandseinstellungen und fügen Sie benutzerdefinierte obere und untere Abstände hinzu.

• Obere Polsterung: 12vw
• Untere Polsterung: 0vw

Zeile 1 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, ohne noch Module hinzuzufügen. Gehen Sie zu den Größeneinstellungen im Design-Tab und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Sichtweite

Wir verwenden diese Zeile, um in den nächsten Schritten eine Illustration hinzuzufügen. Wir brauchen diese Illustration jedoch nur für den Desktop. Deshalb blenden wir die gesamte Zeile auf Tablet und Telefon aus.

Bildmodul hinzufügen

Illustration hochladen

Wie im vorherigen Schritt dieses Beitrags erwähnt, benötigen wir diese Zeile nur, um die Zeitleistenillustration hinzuzufügen. Sie finden es in dem Ordner, den Sie am Anfang dieses Beitrags heruntergeladen haben. Sobald Sie es gefunden haben, laden Sie es in ein neues Bildmodul hoch.

Größe

Um sicherzustellen, dass alles über alle Bildschirmgrößen hinweg reaktionsschnell bleibt, werden wir die Option „Vollbreite erzwingen“ in den Größeneinstellungen des Bildmoduls aktivieren.

• Volle Breite erzwingen: Ja

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine zweite Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie dann zu den Abstandseinstellungen. Hier möchten wir den Platz begrenzen, der von der Zeile (auf dem Desktop) eingenommen wird, indem alle benutzerdefinierten oberen und unteren Polster entfernt werden. Wir behalten einige obere und untere Polster bei kleineren Bildschirmgrößen bei.

• Obere Polsterung: 0px (Desktop), 15vw (Tablet & Telefon)
• Untere Polsterung: 0px (Desktop), 15vw (Tablet & Telefon)

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der Spalte 1 ein Blurb-Modul hinzu. Geben Sie einen Inhalt Ihrer Wahl ein.

Symbol auswählen

Fahren Sie fort, indem Sie ein Symbol Ihrer Wahl auswählen.

Hintergrund mit Farbverlauf

Fügen Sie auch einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: #a5c4ff
• Farbe 2: #ffffff
• Startposition: 40%
• Endposition: 40%

Symboleinstellungen

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

• Symbolfarbe: #ffffff
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 5vw (Desktop), 17vw (Tablet), 18vw (Telefon)

Einstellungen für Titeltext

Gehen Sie zu den Titeltexteinstellungen und ändern Sie die Optionen entsprechend:

• Titelschrift: Didact Gothic
• Schriftstärke des Titels: Fett
• Ausrichtung des Titeltextes: Mitte
• Titeltextgröße: 1,1 vw (Desktop), 2,7 vw (Tablet), 4 vw (Telefon)
• Höhe der Titelzeile: 2,8 em

Textkörpereinstellungen

Machen Sie dasselbe für die Textkörpereinstellungen.

• Körperschriftart: Open Sans
• Ausrichtung des Textkörpers: Mitte
• Textgröße: 0.7vw (Desktop), 1.5vw (Tablet), 2.1vw (Telefon)
• Körperlinienhöhe: 2em

Abstand

Wir fügen auch einige benutzerdefinierte Rand- und Abstandswerte hinzu, die wir an unterschiedliche Bildschirmgrößen anpassen.

• Linker Rand: 3vw
• Rechter Rand: 3vw
• Unterer Rand: 5vw (Tablet), 7vw (Telefon)
• Obere Polsterung: 2vw (Desktop), 6vw (Tablet & Telefon)
• Untere Polsterung: 2vw (Desktop), 6vw (Tablet & Telefon)
• Linke Polsterung: 3vw (Desktop), 9vw (Tablet & Telefon)
• Rechte Polsterung: 3vw (Desktop), 9vw (Tablet & Telefon)

Grenze

Gehen Sie zu den Randeinstellungen und fügen Sie '20px' zu jeder der Ecken hinzu.

Box Schatten

Zu guter Letzt können Sie der Seite etwas Tiefe verleihen, indem Sie dem Blurb-Modul einen subtilen Kastenschatten hinzufügen.

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

Klonen Sie das Blurb-Modul dreimal und platzieren Sie Duplikate in den verbleibenden Spalten

Nachdem Sie das Blurb-Modul erstellt und angepasst haben, können Sie es dreimal klonen. Platzieren Sie die Duplikate in den verbleibenden Spalten der Zeile.

Farbverlaufshintergrund von Duplikat Nr. 1 ändern

Öffnen Sie das erste Duplikat (Blurb-Modul in Spalte 2) und ändern Sie die erste Farbe des Verlaufshintergrunds.

• Farbe 1: #ffa5ae

Ändern Sie den Farbverlaufshintergrund von Duplikat #2

Machen Sie dasselbe für das Blurb-Modul in Spalte 3.

• Farbe 1: #f7e3a0

Ändern Sie den Farbverlaufshintergrund von Duplikat #3

Und ändern Sie auch den Verlaufshintergrund des letzten Blurb-Moduls.

• Farbe 1: #caa5ff

Hinzufügen von Transformationseinstellungen zu Blurb-Modulen

Transformieren zu Blurb-Modul Nr. 1 hinzufügen

Jetzt, da wir alle Designelemente haben, die wir brauchen, können wir damit beginnen, ihre Position zu verändern! Dazu verwenden wir die Option transform translate. Öffnen Sie das Blurb-Modul in Spalte 1 und ändern Sie die Werte entsprechend:

• Unten: 2vw (Desktop), 0vw (Tablet & Telefon)
• Rechts: -106vw (Desktop), 0vw (Tablet & Telefon)

Transformieren zu Blurb-Modul 2 hinzufügen

Fahren Sie mit dem zweiten Blurb-Modul fort und ändern Sie die Transformationswerte entsprechend:

• Unten: 16,6 vw (unten), 0 vw (Tablet & Telefon)
• Rechts: -78vw (rechts), 0vw (Tablet & Telefon)

Transformieren zu Blurb-Modul 3 hinzufügen

Öffnen Sie als nächstes das Blurb-Modul in Spalte 3 und verwenden Sie die folgenden Transformationswerte:

• Unten: 17vw (Desktop), 0vw (Tablet und Telefon)
• Rechts: -46vw (Desktop), 0vw (Tablet & Telefon)

Transformieren Übersetzen zu Blurb-Modul #4 hinzufügen

Machen Sie dasselbe für das letzte Blurb-Modul mit den folgenden Werten:

• Unten: -66vw (Desktop), 0vw (Tablet & Telefon)
• Rechts: -24vw (Desktop), 0vw (Tablet & Telefon)

Negativen unteren Rand zu Zeile 2 hinzufügen

Die Verwendung der Option „Transform translate“ entfernt nicht den Platz, der anfänglich von den Blurb-Modulen in der Reihe belegt wird. Um diesen Platz loszuwerden, können wir der Zeile einen negativen unteren Rand hinzufügen und fertig!

• Unterer Rand: -15vw (Desktop), 0vw (Tablet & Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den neuen Transformationsoptionen von Divi einen schönen Zeitleistenabschnitt erstellen. Zu Beginn des Tutorials konnten Sie die JSON-Datei und die Illustration kostenlos herunterladen! Dies sollte Ihnen helfen, sofort loszulegen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.