So erstellen Sie eine Zeitleiste für Ihren Hochzeitsplan mit Divi und dem Divi Timeline Module Plugin

Dieser Beitrag ist Teil 5 von 5 in unserer Miniserie Wie man mit Divi eine elegante Hochzeitswebsite erstellt. In dieser Serie führen wir Sie durch die wichtigsten Schritte beim Erstellen einer Hochzeitswebsite für sich selbst oder einen Kunden mit Divi.

In den ersten vier Teilen der Miniserie haben wir Ihnen gezeigt, wie Sie Folgendes erstellen:

• eine elegante Hochzeitsankündigungsseite
• eine Galerieseite
• eine Geschenklistenseite
• und wie Sie das Plugin Automatic Divi Testimonials auf Ihrer Hochzeitswebsite verwenden.

Die von uns erstellten Layouts waren im Stil konsistent und einfach zu erstellen.

In diesem letzten Teil der Miniserie zeigen wir Ihnen, wie Sie mit dem Divi Timeline Module-Plugin von Elegant Marketplace eine Zeitleiste für Ihre Hochzeitswebsite erstellen. Wir geben Ihnen ein Beispiel, wie Sie eine gut aussehende vertikale Zeitachse erstellen können, die Ihre Hochzeitsgäste über den großen Tag des Hochzeitspaares auf dem Laufenden hält.

Beispiel für eine vertikale Zeitachse

Das von uns erstellte Layout sieht wie im folgenden Beispiel aus. Wir sprechen über die wichtigsten Schritte, die Ihnen helfen, sich in der Timeline zurechtzufinden. Nachdem Sie diesen Beitrag gelesen haben, können Sie schnell loslegen, einen eigenen erstellen und Ihrer Hochzeitswebsite den zusätzlichen Touch verleihen.

Kauf des Plugins

Wenn Sie das Divi Timeline Module-Plugin noch nicht besitzen, müssen Sie es auf der Website von Elegant Marketplace kaufen. Das Plugin kostet 11 US-Dollar. Nachdem Sie das Plugin auf ihrer Website gekauft haben, erhalten Sie die ZIP-Datei, die das neue Modul enthält, das Sie Ihrer Website hinzufügen.

Installieren des Plugins

Melden Sie sich bei Ihrer WordPress-Website an und gehen Sie im Plugin-Bereich auf „Neu hinzufügen“.

Laden Sie die ZIP-Datei hoch, die Sie beim Kauf erhalten haben.

Aktivieren Sie das Plugin und Sie können loslegen. Das Plugin fügt Ihrem Divi-Builder nun automatisch Timeline-Module hinzu.

Zwei verschiedene Möglichkeiten, das Divi Timeline-Modul auf Ihrer Website zu verwenden

Den Hochzeitsplan anzeigen

Eine Zeitleiste auf Ihrer Hochzeitswebsite kann Ihrer Website wirklich einen zusätzlichen Mehrwert verleihen. Sie können die Zeitleiste verwenden, um zu zeigen, wie der Hochzeitstag aussehen wird. Diese Online-Transparenz hilft Ihren Gästen, sich im vollen Terminkalender der Hochzeit zurechtzufinden.

Sie müssen nur daran denken, den Link zu Ihrer Hochzeitswebsite im Voraus mit Ihren Gästen zu teilen. Auf diese Weise können sie jederzeit und überall auf die Informationen zugreifen.

Sie können eine separate Seite für die Zeitachse erstellen oder sie in eine Ihrer anderen Seiten einfügen. Da eine Zeitleiste viel Platz auf einem Bildschirm einnimmt, empfehlen wir Ihnen, der Zeitleiste eine ganz neue Seite zu widmen.

Die Beziehungs-Timeline des Hochzeitspaares anzeigen

Neben der Erstellung eines Hochzeitsplans mit dem Plugin können Sie auch das Zeitleistenmodul verwenden, um die Beziehungszeitleiste des Hochzeitspaares anzuzeigen. Indem Sie die Art und Weise einbeziehen, wie sich das Paar kennengelernt hat und die verschiedenen Phasen, die sie in ihrer Beziehung erlebt haben, können Sie sich ein wenig mehr auf die Gäste einlassen und die Geschichte bekannt machen.

Die verschiedenen Arten von Testimonial-Modulen

Wenn Sie das Plugin herunterladen, werden Sie feststellen, dass in Ihrer Modulliste vier zusätzliche Module erscheinen. Alle von ihnen sind Zeitleisten, aber mit einem anderen Fokus.

Sie haben eine für Beiträge, Inhalte, vorgestellte Bilder, Beitragstitel und nur eine normale vertikale. Für das Timeline-Beispiel, das wir in diesem Beitrag erstellen, verwenden wir nur die Timeline – Vertical. Dieses Modul ermöglicht es uns, Informationen sofort in die Inhaltsbox zu schreiben, ohne mit etwas anderem auf der Website wie Ihren Beiträgen verlinkt zu sein.

Loslegen

Wir zeigen Ihnen Schritt für Schritt, wie Sie die folgende Zeitachse erstellen:

Das Modul ist reaktionsschnell und wird sowohl auf Ihrem Desktop als auch auf Ihrem Telefon oder Tablet gut aussehen. Lass uns anfangen!

Fügen Sie die Zeitachsen- und Zeitachsenelemente hinzu

Da das Timeline-Modul ein Drittanbieter-Plugin ist, können wir mit dem Visual Builder keine visuellen Änderungen vornehmen. Aus diesem Grund werden wir nur im Backend-Bereich der Website bleiben, um die erforderlichen Änderungen vorzunehmen.

Beginnen Sie damit, eine neue Seite hinzuzufügen, die Sie Ihrer Chronik widmen. Auf dieser Seite benötigen Sie natürlich einen Heldenabschnitt. Abgesehen davon benötigen Sie jedoch nur einen Standardabschnitt für die Timeline. Fügen Sie der Seite einen neuen Standardabschnitt mit einer Zeile in voller Breite hinzu. Platzieren Sie als Nächstes die Timeline – Vertical Module in dieser Reihe mit voller Breite.

Jetzt können Sie in den Einstellungen des Moduls Zeitachse – Vertikale verschiedene Zeitachsenelemente zu der von Ihnen erstellten Zeitachse hinzufügen.

Es gibt einen Standardablauf, der normalerweise während einer Hochzeit befolgt wird. Wir werden für jedes der folgenden Ereignisse neue Zeitachsenelemente erstellen:

• Haare und Make-up der Braut
• Hochzeitsshooting
• Vorzeremonie
• Zeremonie
• Cocktailstunde
• Beginn des Abendessens
• Toasts
• Erster Tanz
• Tanzzeit
• Wüste
• Letztes Dankeswort

Dies hängt natürlich davon ab, wie Sie Ihren Hochzeitstag geplant haben. Sie können beliebig viele Timeline-Elemente hinzufügen.

Änderungen des Timeline-Moduls

Bevor Sie jedoch die Timeline-Elemente hinzufügen, nehmen wir die Änderungen vor, die auf alle Timeline-Elemente über das Modul Timeline – Vertical angewendet werden müssen. Gehen Sie zur Registerkarte Inhalt Ihres Timeline-Vertikalmoduls und ändern Sie die Farbe der zentralen Linie in der Unterkategorie Hintergrund in '#fae4de'. Diese Farbe wird auf alle Linien innerhalb des Timeline-Moduls angewendet, die die verschiedenen Timeline-Elemente miteinander interagieren lassen.

Wechseln Sie als Nächstes zur Registerkarte Design. Öffnen Sie zunächst die Unterkategorie Text und nehmen Sie folgende Änderungen vor:

• Textschriftart: Raleway Light
• Textschriftart: Fett
• Schriftgröße des Textes: 14px
• Textfarbe: #9b857b
• Textzeilenhöhe: 1em

Scrollen Sie auf derselben Registerkarte nach unten und nehmen Sie die folgenden Änderungen an der Unterkategorie „Artikelbezeichnungstext“ vor:

• Schriftart der Artikelbezeichnung: Raleway Light
• Schriftstil der Artikelbezeichnung: Fett
• Schriftgröße für Artikeletiketten: 39px
• Textfarbe der Artikelbezeichnung: #9b857b
• Höhe der Artikeletikettenlinie: 1,5 em

Nehmen Sie außerdem folgende Änderungen an der Unterkategorie Überschriftentext vor:

• Überschriften Schriftart: Tangerine
• Überschriften Schriftgröße: 70px (Desktop & Tablet), 60px (Tablet)
• Textfarbe für Überschriften: #9b857b
• Überschriftenzeilenhöhe: 1.5em

Alle oben genannten Änderungen gelten für jedes Zeitachsenelement. Klicken Sie auf Speichern und beenden.

Änderungen an Zeitachsenelementen

Wenn Sie sich das bisherige Ergebnis ansehen, können Sie feststellen, dass die Änderungen am Gesamtbild vorgenommen wurden. Jetzt müssen wir einzelne Änderungen an den Timeline-Elementen vornehmen. Beginnen Sie damit, nur ein Zeitachsenelement hinzuzufügen. Wechseln Sie dann zur Registerkarte Inhalt dieses Timeline-Elements. Fahren Sie fort, indem Sie Ihrem Timeline-Element in der Unterkategorie "Hintergrund" einen Titel hinzufügen.

Fügen Sie als Nächstes den Inhalt hinzu, der im Inhaltsfeld angezeigt werden soll (einschließlich der Uhrzeit in Kursivschrift) und schreiben Sie die Uhrzeit in das Feld Zeitachsenbeschriftung. Sie können den Standort auch in demselben Feld hinzufügen, wenn Sie möchten.

Inhalt der Timeline-Elemente

Der in das Feld eingetragene Inhalt wird auf der gegenüberliegenden Seite der Zeitleiste angezeigt, wenn jemand Ihre Website mit einem Desktop besucht. Dieses Label wird nicht angezeigt, wenn jemand auf seinem Telefon auf Ihre Chronik schaut. Aus diesem Grund empfehlen wir, die praktischen Informationen, die Sie teilen möchten, auch im Artikeletikett in der Inhaltsbox zu platzieren. Auf diese Weise können auch Personen, die die Website per Telefon besuchen, die Informationen sehen.

Scrollen Sie auf derselben Registerkarte nach unten und suchen Sie in der Liste der Artikelsymbole nach dem Herzsymbol, ändern Sie die Symbolfarbe in '#9b857b' und die Symbolhintergrundfarbe in '#fae4de'.

Klicken Sie auf Speichern und das Zeitachsenelement wird Ihrer Zeitachse hinzugefügt. In dem von uns erstellten Beispiel haben wir für alle Timeline-Elemente dieselben Einstellungen verwendet. Aus diesem Grund empfehlen wir Ihnen, einfach das erste Timeline-Element zu klonen und weitere Anpassungen entsprechend vorzunehmen.

Erstellen Sie so viele Timeline-Elemente wie Sie benötigen, um Ihren Hochzeitsplan für die Hochzeitsgäste so klar wie möglich zu gestalten. Jedes Mal, wenn Sie ein neues Timeline-Element hinzufügen, wird es automatisch auf der gegenüberliegenden Seite des vorherigen Timeline-Elements platziert, ohne dass Sie manuelle Anpassungen vornehmen müssen.

Einpacken

Dies war der letzte Teil der Miniserie How to Create a Elegant Wedding Website with Divi . Wir hoffen, dass dies eine wertvolle Reihe von Beiträgen war, die Ihnen helfen wird, eine elegante und atemberaubende Hochzeitswebsite für sich selbst oder Ihre Kunden zu erstellen. Wenn Sie Fragen zu diesem Tutorial haben oder Anfragen für zukünftige Tutorials/Miniserien haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich dieses Blogbeitrags hinterlassen, damit wir uns mit Antworten bei Ihnen melden können!

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!