Divi-Plugin-Highlight – Divi-Timeline-Modul

Eine der interessantesten Möglichkeiten, chronologische Informationen anzuzeigen, ist eine Zeitleiste. Seien es Schritt-für-Schritt-Anleitungen, eine Liste mit Erfahrungen für einen Lebenslauf, eine Liste von Projekten für ein Portfolio oder sogar Blog-Posts, Zeitleisten können die Informationen visuell ansprechend gestalten. Sie können Ihre eigenen Zeitleisten im Divi Builder erstellen, indem Sie ein Plugin namens Divi Timeline Module verwenden.

Das Divi Timeline Module, ein Drittanbieter-Plugin von Tortoise IT über Elegant Marketplace, fügt dem Divi Builder mehrere neue Module (das Hauptmodul und drei Begleitmodule) hinzu, um zwei verschiedene Arten von reaktionsschnellen Zeitleisten zu erstellen:

1. Eine, in der Sie Inhalte für jeden Punkt auf der Zeitachse erstellen. Jedes Element in der Timeline kann eigene Inhalte, Links, Farben, Schriftarten, Symbole usw. haben.
2. Eine, die Ihre vorhandenen Inhalte von Seiten, Beiträgen, Medien oder Projekten verwendet.

In dieser Übersicht gehe ich durch die Erstellung beider Arten von Zeitleisten und zeige dann ein Beispiel für den Aufbau einer Blog-Seite. Für diese Übersicht verwende ich kostenlose Bilder von Unsplash.com. Lass uns anfangen.

Installieren des Divi Timeline-Modul-Plugins

Die Installation ist einfach. Laden Sie einfach das Plugin hoch und aktivieren Sie es wie jedes andere Plugin. Es ist keine weitere Einrichtung erforderlich.

Erstellen einer Zeitleiste

Es gibt vier Module: (Post) – Vertical , Content , Featured Image und Vertical . Obwohl es mit mehrspaltigen Layouts funktioniert, funktionieren einspaltige Layouts am besten. Timeline – Vertikal oder Timeline (Beiträge) – Vertikal wird innerhalb der Seiten verwendet. Der Rest wird verwendet, um ein Layout zu erstellen.

Zeitachse vertikal

Fügen Sie das Modul Timeline – Vertical zu einer einspaltigen Zeile hinzu.

In den Allgemeinen Einstellungen können wir ein neues Zeitachsenelement hinzufügen, einen Titel für die Zeitachse angeben und die Farbe der Zeitachse auswählen. Klicken Sie auf Neues Zeitachsenelement hinzufügen , um jedes der Zeitachsenelemente zu erstellen.

Wenn Sie auf Neues Zeitachsenelement hinzufügen klicken, wird ein Inhaltseditor mit Text, Medien, Beschriftung, Schaltfläche "Mehr anzeigen", Symbol, Symbolfarbe, Hintergrundfarbe und Bild-/Symbolanimation geöffnet. Es enthält auch alle standardmäßigen erweiterten Designeinstellungen sowie benutzerdefiniertes CSS .

Fügen Sie so viele Zeitleistenelemente hinzu, wie Sie möchten. Sie können hier sehen, dass ich fünf Elemente hinzugefügt und die Farbe der Mittellinie in Grün geändert habe. Innerhalb der Timeline-Elemente habe ich für jedes Element Symbole und Farben ausgewählt.

Vertikales Ergebnis der Zeitachse

Hier ist die schnelle Zeitleiste, die ich erstellt habe. Es hat fünf Elemente – jedes mit eigenem Inhalt und eigenen Symbolen. Die Farbe, die ich für die Linie gewählt habe, wurde auch unten in den Inhaltsfenstern hinzugefügt. Ich habe dem Abschnitt, der das Modul enthält, ein Hintergrundbild hinzugefügt.

Natürlich kann das Modul über die erweiterten Designeinstellungen so gestaltet werden, dass es zur Seite passt, sodass Sie keinen weißen Hintergrund oder diese Schriftarten haben müssen.

Dies ist eine großartige Wahl für nummerierte Schritte von Anweisungen, Lebensläufen, Produktlisten, Portfolios usw.

Zeitleiste des Beitrags

Sie können auch eine Zeitachse aus Ihren Inhalten erstellen. Dazu gehören Beiträge, Seiten, Medien oder Projekte. Wie es funktioniert, kann etwas kompliziert werden, aber es ist einfach zu erstellen.

Sie müssen zwei Dinge tun:

1. Erstellen Sie ein Layout
2. Erstellen Sie die Seite und wählen Sie dieses Layout

Alle Module, die zum Erstellen des Layouts und der Seite benötigt werden, sind enthalten. Lassen Sie uns ein Beispiel mit Beispiel-Blog-Posts erstellen.

Erstellen Sie ein Layout

Erstellen Sie zunächst ein Layout. Gehen Sie im Dashboard zu Divi , Divi-Bibliothek und wählen Sie Neu hinzufügen . Geben Sie dem Layout einen Namen, der für Sie sinnvoll ist (ich habe das Post-Timeline-Layout gewählt). Wählen Sie als Vorlagentyp Layout aus . Lassen Sie Global deaktiviert . Klicken Sie auf Senden .

Das von Ihnen erstellte Layout zeigt die Beiträge (oder den von Ihnen gewählten Beitragstyp) an. Betrachten Sie dies als das Erstellen Ihres eigenen Blog-Moduls, nur Sie können das Layout der Beiträge gestalten. Das ist es nicht, aber dieses Beispiel hat mir geholfen, es leicht zu verstehen. Nun, das ist es irgendwie, aber nicht wirklich. Weiter geht's.

Dieses Layout wird mit den Modulen Timeline Content , Featured Image und Post Title erstellt , die im Plugin enthalten sind.

Um das Layout zu erstellen, wählen Sie ein zweispaltiges Layout und platzieren Sie rechts das Modul Timeline – Featured Image und links die Module Timeline – Post Title und Timeline – Content . Natürlich möchten Sie vielleicht ein wenig mit Layouts herumspielen, z. B. nur das Bild oder den Titel verwenden oder sie in verschiedenen Konfigurationen platzieren, aber lassen Sie uns zuerst das normale Layout erstellen.

Hinweis – Diese Module werden nicht wie die meisten Divi Builder-Module innerhalb einer Seite verwendet. Sie sollen in einem Layout verwendet werden, das vom Modul Timeline (Posts) – Vertical aufgerufen wird.

Dies ist das Layout, wie es im Divi Builder aussieht. Wie erwartet hat jedes dieser Module seine eigenen Optionen, einschließlich Allgemeine Einstellungen , Erweiterte Designeinstellungen und Benutzerdefiniertes CSS .

Ich verwende ein 1/3, 2/3-Layout, aber 1/2, 1/2 funktioniert auch. Dies hängt teilweise von der Größe des vorgestellten Bildes ab, das Sie verwenden möchten, und der Menge an Inhalten, die Sie anzeigen möchten, sowie von anderen Einstellungen wie der Schriftgröße.

Nachdem Sie Ihre Module platziert und alle Einstellungen vorgenommen haben, wählen Sie rechts unter Veröffentlichen Aktualisieren aus .

Schauen wir uns jedes Modul genauer an.

Ausgewähltes Bildmodul

Das Featured Image Module macht genau das, was Sie erwarten – es zeigt das Featured Image eines Beitrags an. Es enthält eine Dropdown-Box, in der Sie die Bildgröße auswählen können. Es enthält auch alternativen Text, Titel, In Lightbox öffnen, Link-URL, In demselben Fenster oder neuem Tab öffnen, Animation, Entfernen des Leerraums unter dem Bild, Ausrichtung, Deaktivieren für Geräte und Admin-Label.

Ich wähle eine mittlere Bildgröße und deaktiviere die Animation.

Beitragstitel-Modul

Mit dem Beitragstitel-Modul können Sie auf den Inhalt verlinken, das Admin-Label ändern und CSS-Einstellungen festlegen. Ich empfehle, die Einstellung Link zum Inhalt auf Ja zu belassen . Den Rest habe ich auf die Standardeinstellungen gesetzt.

Inhaltsmodul

Mit dem Inhaltsmodul können Sie auswählen, ob Experten oder Inhalte angezeigt und eine Schaltfläche " Weiterlesen" angezeigt werden. Ich habe es so eingestellt, dass ein Auszug und die Schaltfläche "Weiterlesen" angezeigt werden.

Erstellen Sie die Seite

Erstellen Sie eine neue Seite mit dem Divi Builder und legen Sie das Modul Timeline (Posts) – Vertical in einem einspaltigen Layout ab.

Timeline (Beiträge) Vertikale Moduleinstellungen

Dieses Modul ruft das von Ihnen erstellte Layout auf. Hier haben Sie viele Optionen, einschließlich Titel, Layout, Farbe der zentralen Linie, Symbol für die Elemente auf der Timeline, Zahlen oder Symbole anzeigen, Symbol-/Nummernfarbe und Hintergrundfarbe, Animation, Paginierung, Beitragstyp, Anzahl der anzuzeigenden Beiträge, post offset (mit welchem ​​Beitrag beginnen soll), Taxonomie und Admin-Label.

Um das von Ihnen erstellte Layout aufzurufen, wählen Sie es aus der Dropdown-Liste Loop Layout aus . Blättern Sie nach unten und wählen Beiträge als Beitrag Typen , um Anzeige Blog - Posts.

Nachdem Sie alle Ihre Auswahl getroffen haben, veröffentlichen Sie die Seite.

Ergebnis der Post-Timeline

Das Ergebnis ist eine Blogseite mit meinen neuesten Beiträgen auf einer Timeline. Ich habe die Timeline über einem Hintergrundbild platziert (das Bild wird dem Abschnitt hinzugefügt). Bei diesem Modul sind die Icons global. Ich habe die Timeline auf Blau mit einem hellbraunen Symbolhintergrund und blauen Symbolen eingestellt. Das Beitragsmodul kann mithilfe der erweiterten Designeinstellungen weiter an die Seite angepasst werden .

Ein Blog-Beispiel

Die Zeitleiste kann in anderen Layouts verwendet werden. Ich wollte ein Blog-Layout erstellen, das oben ein paar Beiträge und dann den Rest innerhalb einer Zeitleiste anzeigt.

Ich habe ein Layout in einer einzigen Spalte mit dem Bild oben, dem Inhalt in der Mitte und dem Titel unten erstellt.

Ich habe dann eine Seite mit einem Blog- Modul und dem Modul Timeline (Posts) – Vertical erstellt . Ich habe das Blog- Modul so eingestellt, dass drei Beiträge in einem Raster angezeigt werden. Ich habe das Timeline - Modul auf eine von 3 versetzt habe , damit er die Beiträge ignoriert , dass die Blog - Modul angezeigt , und beginnt bei Postnummer 4. ich ein Textmodul zwischen ihnen mit einer Nachricht platziert , dass Warnungen der Besucher , dass der Inhalt unter dem Blog Beiträge sind immer noch Teil des Blogs.

Ergebnis der Blogseite

Hier ist die Blogseite. Das Ergebnis ist ein sauberes Layout, das den Leser durch den Inhalt führt. Natürlich muss dies nicht nur eine Blogseite sein. Dies könnte auch verwendet werden, um Projekte für eine Portfolioseite, Kunstwerke, Dienstleistungen usw. anzuzeigen.

Abschließende Gedanken

Zeitleisten sind großartige Gestaltungselemente, um chronologische oder numerische Daten anzuzeigen. Das Divi Timeline Module fügt dem Divi Builder diese Funktionalität hinzu und bietet eine einfache Möglichkeit, benutzerdefinierte Zeitachsen zu erstellen oder Ihre Inhalte wie Seiten, Beiträge, Medien oder Projekte zu verwenden, um chronologische Zeitachsen zur Anzeige in Ihren Layouts zu erstellen.

Das Plugin ist einfach zu bedienen und alle Designeinstellungen, die Sie von einem Divi-Modul erwarten würden, sind hier. Das Erlernen dauert nicht lange und das Erstellen der Layouts und Seiten ist so schnell und einfach wie mit dem Divi Builder. Wenn Sie Ihrer Website eine Timeline hinzufügen möchten, ist das Divi Timeline Module eine gute Wahl.

Wir würden gerne von Ihnen hören. Haben Sie das Divi Timeline-Modul verwendet? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Ollie The Designer / shutterstock.com