So erstellen Sie eine Zeitleiste in WordPress mit Elementor

Zeitpläne bieten eine visuelle Möglichkeit, Ereignisse, Meilensteine ​​oder Schritte in chronologischer Reihenfolge anzuzeigen. Sie helfen dabei, Informationen in einem linearen Fluss zu präsentieren, der es Besuchern und Benutzern erleichtert, die Abfolge von Ereignissen oder Prozessen zu verstehen. Mit ihnen können Sie die Reise Ihres Unternehmens, eine Projekt -Roadmap oder eine persönliche Geschichte mit Klarheit präsentieren.

Das Hinzufügen einer Zeitleiste zu WordPress kann die Benutzererfahrung verbessern, indem Inhalte ansprechender und einfacher zu befolgen sind. Aus diesem Grund ist die Verwendung von Timelines auf vielen Websites zu einem Trend geworden. Elementor ist ein so benutzerfreundliches Plugin, mit dem Sie Ihren WordPress-Posts und Seiten mit extremem Anpassungsniveau Timelinen erstellen und hinzufügen können.

In diesem Artikel zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung zum Erstellen einer Zeitleiste in WordPress mit Elementor. Vorher werden wir ein paar theoretische Teile bezüglich des heutigen Themas abdecken.

Arten von Zeitlinien und deren Anwendungsfälle

Es gibt zwei Arten von Zeitlinien - horizontal und vertikal. Jeder hat spezifische Anwendungsfälle, die einer Website unterschiedlich Mehrwert verleihen. Erforschen wir sie und ihre Anwendungsfälle in der folgenden Diskussion.

1. Vertikale Zeitleiste

Eine vertikale Zeitleiste zeigt Ereignisse und Informationen von oben nach unten, normalerweise in der linken oder in der Mitte der Seite. Es ist ein scrollfreundliches Format, das sowohl auf Desktop- als auch auf mobilen Geräten nahtlos funktioniert. Wenn Benutzer auf der Seite scrollen, folgen sie der chronologischen Reihenfolge in einem sauberen und lesbaren Layout.

Anwendungsfälle für vertikale Zeitpläne:

• Unternehmensgeschichte oder Wachstumsreise
• Lebenslauf oder Karriere -Highlights
• Blog -Postserie oder Artikelentwicklung
• Schritt-für-Schritt-Prozesserklärungen
• Produktentwicklungsmeilensteine

2. Horizontale Zeitleiste

Eine horizontale Zeitleiste zeigt Ereignisse von links nach rechts an und folgt einem Side-Scrolling- oder Sliding-Format. Es wird in der Regel dort verwendet, wo der Raum breiter ist als groß. Dieses Format eignet sich am besten für kürzere Zeitpläne oder wenn Sie nur ein paar wichtige Ereignisse in einem breiten, leicht zuständigen Layout zeigen möchten.

Anwendungsfälle für horizontale Zeitpläne:

• Projektroadmaps oder Planungsphasen
• Veranstaltungspläne
• Marketingkampagnen oder Produkteinführungen
• Portfoliopräsentationen
• Bildungszeitpläne oder historische Übersichten

So erstellen Sie eine Zeitleiste in WordPress mit Elementor

Wie bereits erwähnt, ist Elementor ein Drag-and-Drop-Page Builder-Plugin. Die traurige Nachricht ist jedoch, dass es kein Widget enthält, um Zeitpläne zu erstellen. Das Plugin verfügt jedoch über viele Addons, mit denen Sie die Funktionen des Core -Elementor -Plugins erweitern können.

Happyaddons ist einer von ihnen. Es wird mit über 130 Widgets und über 22 Funktionen geliefert, die viele Mängel des Elementors überwinden können. Durch die Installation des Happyaddons -Plugins können Sie mehr Designfunktionen auf Ihrer Website aktivieren. In vielen Fällen brauchen Sie nicht einmal Elementor Pro, wenn Sie Happyaddons haben.

Lassen Sie uns nun untersuchen, wie Sie Zeitpläne in WordPress mit Elementor und Happyaddons erstellen.

So erstellen Sie eine horizontale Zeitleiste in WordPress

Ich hoffe, Sie wissen bereits, was die horizontale Zeitleiste ist. Happyaddons hat ein horizontales Timeline -Widget , das völlig kostenlos zu bedienen ist. Sie müssen also die folgenden Plugins zuerst auf Ihrer Website installiert und aktiviert werden.

• Elementor
• Happyaddons

Sobald die Plugins auf Ihrer Website installiert und aktiviert sind, folgen Sie den Schritten im folgenden Tutorial.

Schritt 01: Erstellen Sie einen Abschnitt auf der Elementor -Leinwand

Öffnen Sie einen Beitrag oder eine Seite mit Elementor. Erstellen Sie einen Abschnitt mit dem gewünschten Flexbox-Spaltenstruktur, um eine Zeitleiste zu erstellen.

Schritt 02: Fügen Sie das horizontale Timeline -Widget der Leinwand hinzu

Suchen Sie das horizontale Timeline -Widget im Elementor -Feld. Sobald Sie es gefunden haben, ziehen Sie das Widget auf die Leinwand.

Sie sehen, dass das Horizontal -Timeline -Widget der Leinwand mit einem Standardlayout hinzugefügt wurde.

Schritt 03: Wählen Sie eine Voreinstellung für das Widget aus

Ein Voreinsatz ist ein vordefinierter Designstil oder Layout, das Sie sofort auf ein Widget anwenden können, um eine schnelle Anpassung zu erhalten. Wenn Sie das Widget nicht von Grund auf neu entwerfen möchten, können Sie eine Voreinstellung auswählen. Das horizontale Timeline -Widget verfügt über sechs Voreinstellungen.

Wählen Sie eine Voreinstellung aus, die Ihnen für das Widget gefällt.

Schritt 04: Fügen Sie dem horizontalen Timeline -Widget Inhalte hinzu

Erweitern Sie den Abschnitt Timeline . Hier erhalten Sie Optionen, um dem Widget Inhalte hinzuzufügen. Standardmäßig erhalten Sie vier Registerkarten. Klicken Sie auf eine Registerkarte , um es zu erweitern. Dadurch wird viele Felder geöffnet, auf denen Sie Ihre gewünschten Informationen platzieren und hinzufügen können.

Sobald eine Registerkarte erweitert ist, können Sie der jeweiligen Registerkarte Ereignisdatum, Symbol, Bild, Bildauflösung, Titel und Beschreibung hinzufügen.

Sie können sehen, dass wir dem jeweiligen Abschnitt des horizontalen Widgets Inhalte hinzugefügt haben.

Fügen Sie gleich in den Registerkarten Timeline Inhalte hinzu. Sie können sehen, dass wir es in dem unten angehängten Bild gemacht haben.

Um dem Widget weitere Registerkarten hinzuzufügen, klicken Sie unter der Registerkarte "Timeline" auf die Schaltfläche + Element hinzufügen .

Schritt 05: Konfigurieren Sie Einstellungen für das Horizontal Timeline -Widget

Erweitern Sie nach Abschluss des Inhaltsparts den Abschnitt Einstellungen auf der Registerkarte Inhalt. Sie können die Registerkarte "Title HTML", "Inhaltsausrichtung", "Inhaltspfeil ausblenden", Lightbox, Animationsgeschwindigkeit, Anzahl der Folien für die Anzeige, das Symbol und vieles mehr konfigurieren.

Diese sind so einfach zu konfigurieren. Wir hoffen, Sie können sie selbst alleine machen.

Schritt 06: Stylize das horizontale Timeline -Widget

Um das Widget zu stylieren, gehen Sie auf der Registerkarte "Stil" im Elementor -Bereich.

Erweitern Sie zunächst den Timeline -Abschnitt.

Sie erhalten Optionen, um die Dicke, Linienfarbe, Datumsabstand, Datum Typografie, Farbe, Symbol, Randradius, Randtyp, Randbreite, Hintergrundfarbe usw. anzupassen.

Erkunden Sie sie und führen Sie die erforderlichen Anpassungen durch.

Sie können sehen, dass wir einige Änderungen an der horizontalen Zeitleiste vorgenommen haben.

Erweitern Sie dann den Abschnitt der Pfeile . Von hier aus können Sie die Pfeilsymbole, ihre Positionen, Größen, Grenzbreiten, Radius und vieles mehr anpassen .

Erweitern Sie gleich den Inhaltsabschnitt der Registerkarte Stil. Sie können den Randradius, die Polsterung, den Raum zwischen Inhalt, Randtyp, Randbreite, Farbe, Schatten, Typografie und mehr Widget anpassen .

Führen Sie die notwendigen Veränderungen vor.

Schritt 07: Vorschau des horizontalen Timeline -Widgets

Gehen Sie zur Vorschau -Seite und überprüfen Sie, ob alles einwandfrei funktioniert oder nicht. Sie können sehen, dass unsere horizontale Demo -Timeline ohne Fehler gut funktioniert.

So erstellen Sie eine vertikale Zeitleiste in WordPress

Während Happyaddons Sie ermöglichen, kostenlos eine horizontale Zeitleiste zu erstellen, müssen Sie auf die Premium -Version des Plugins ein Upgrade durchführen, um eine vertikale Zeitleiste zu erstellen. Stellen Sie also sicher, dass die folgenden Plugins auf Ihrer Website verfügbar sind.

• Elementor
• Happyaddons
• Happyaddons Pro

Sobald sie auf Ihrer Website verfügbar sind, folgen Sie dem unten erläuterten Tutorial.

Schritt 01: Drag & drop das Timeline-Widget in die Elementor Canvas

Geben Sie die Zeitleiste in das Suchfeld ein. Wählen Sie das andere Timeline -Widget als die horizontale Zeitleiste aus. Drag & Drop es auf der Elementor-Leinwand.

Auf der Leinwand wird eine vertikale Zeitleiste mit einem Standardlayout erstellt.

Schritt 02: Wählen Sie eine Voreinstellung für das vertikale Timeline -Widget aus

Ich hoffe, Sie wissen bereits, was ein Voreingang ist, wie wir es bereits oben besprochen haben. Wählen Sie eine Voreinstellung aus, wenn Sie die vertikale Zeitleiste nicht von Grund auf neu entwerfen möchten.

Schritt 03: Fügen Sie der vertikalen Zeitleiste Inhalte hinzu

Erweitern Sie den Abschnitt Timeline . Standardmäßig sehen Sie zwei Registerkarten. Erweitern Sie eine Registerkarte, indem Sie darauf klicken, wie wir Ihnen oben gezeigt haben.

Ich hoffe, Sie müssen hier nicht viel reden. Weil Sie der Branchenzeitleiste fast den gleichen Inhaltsart hinzufügen können, wie Sie es bei horizontaler Zeitleiste tun können.

Sie können ein Symbol hinzufügen, den Symboltyp ändern, Zeit definieren, einen Titel einstellen, ein Bild usw. für jeden Zeitplanabschnitt hinzufügen . Machen Sie die neuesten Dinge selbst.

Füllen Sie die Timeline hinzufügen. Sie können sogar weitere Elemente zur Zeitleiste hinzufügen, indem Sie auf das Element + wie oben gezeigt klicken .

Schritt 04: Konfigurieren Sie Einstellungen für das vertikale Timeline -Widget

Erweitern Sie den Abschnitt "Einstellungen" . Sie können konfigurieren, ob Datum, Uhrzeit, Inhaltspfeil und Scrollenbaum angezeigt werden sollen. Sie können auch das Titel -Tag, die Icon Box -Ausrichtung, die Baumausrichtung und die Hintergrundfarbe ändern.

Machen Sie die geborenen Einstellungen selbst. Aber für uns sieht die Standardausrichtung gut aus. Also bleiben wir für das Tutorial daran.

Schritt 05: Stift das vertikale Timeline -Widget

Kommen Sie auf der Registerkarte "Stil" auf dem Elementor -Panel. Sie können alle Arten von Inhalten und visuellen Elementen auf dem Widget auf dieser Registerkarte anpassen.

Erweitern Sie zunächst die Inhaltsbox . Sie können die Typografie, Farbe, Pfeilfarbe, Hintergrundtyp, Randtyp und Randbreite von hier anpassen. Mach das.

Erweitern Sie gleich den Abschnitt Icon Box . Sie können die Breite, Höhe, Boxraum und andere Optionen für die Symbole des Widgets von hier aus ändern. Wenn Sie mit der Standardstilisierung zufrieden sind, berühren Sie nichts.

Stylieren Sie den Titel des Widgets, wenn es sich notwendig anfühlt. Sie können sehen, dass wir unsere Typografie geändert haben.

Passen Sie das Erscheinungsbild der Zeit und des Datums auf die gleiche Weise an. Wir haben seine Farbe, Gewicht und Typografie verändert.

Erweitern Sie schließlich den Schaltflächenabschnitt . Sie können seine Hintergrundfarbe, die Typografie und andere kopieren.

Schritt 06: Vorschau des vertikalen Timeline -Widgets

Kommen Sie zur Vorschauderseite und überprüfen Sie, ob die Timeline der Branche einwandfrei funktioniert oder nicht. Tun Sie es, indem Sie das Widget scrollen. Wir hoffen, es wird gut an Ihrem Ende als unseres funktionieren.

Daher können Sie verschiedene Arten von Timeline -Abschnitten auf Ihrer Website erstellen, um verschiedene Inhalte wunderbar zu präsentieren.

Dinge, die Sie mit Happyaddons mehr machen können

Happyaddons ist ehrlich gesagt ein umfassendes Plugin. Sie werden sich sicher in dieses Plugin verlieben, kurz nachdem Sie es einmal benutzt haben. Schauen Sie sich die folgenden Dinge an, die Sie mit dem Plugin machen können.

A. Verwenden Sie einen kostenlosen Themenbauer

Elementor hat auch einen Themenbauer. Aber es ist nur den Premium -Nutzern reserviert. Aber bei Happyaddons ist es völlig frei zu verwenden. Mit dem Happyaddons -Themenbauer können Sie Header, Fußzeilen, Blog -Post -Vorlagen und Archivseiten erstellen. Überprüfen Sie, wie Sie kostenlos eine Blog -Post -Vorlage mit Happyaddons erstellen.

B. Woocommerce-freundlich

Happyaddons verfügt über neun leistungsstarke WooCommerce-freundliche Widgets, um Ihre E-Commerce-Website zu verbessern. Diese Widgets sind Produktgitter, Produktkarousel, Produktkategorie, Produktkategorie Karussell, Einzelprodukt, Mini -Karren, Karren, Checkout und Versandleiste.

C. Cross-Domänen-Kopierpaste

Mit dieser Funktion können Sie die gleichen Widgets, Abschnitte und Seiten direkt von einer Website auf eine andere Domain kopieren. Dies kann Ihnen wertvolle Zeit sparen, da Sie nicht immer von vorne anfangen müssen. Das folgende Video erläutert die Cross-Domänen-Kopie-Paste-Funktion des Plugins.

D. Entwerfen Sie kreative Inhalte

Mit seinen Widgets wie Image Hover, animierter Link, lustiger Faktor, Bildstapelgruppe, Fotostapel, kreativer Schaltfläche, Text -Scroll und Lord -Symbol können Sie kreative Inhalte erstellen, um Benutzer zu haken.

e. Statistische Informationen anzeigen

Im Gegensatz zu vielen anderen Elementor-Add-Ons bietet dieses Plugin mehrere Diagramm-Widgets, mit denen Sie statistische Informationen präsentieren und Infografik-Beiträge und Seiten erstellen können. Erfahren Sie, wie Sie eine Infografik -Seite mit Elementor erstellen.

Zusätzlich zu all diesen gibt es noch viele weitere Dinge, die Sie mit dem Happyaddons -Plugin machen können.

Letzte Gedanken!

Das Erstellen von Zeitleisten ist für alle Websites keine obligatorische Sache. Sie können jedoch notwendig werden, da sie eine ideale Option sein könnten, um bestimmte Informationen und Inhalte zu präsentieren. Wenn Sie also eine Zeitleiste erstellen müssen, hoffen wir, dass dieser Tutorial -Beitrag zu Ihrer Verwendung kommt.

Wenn Sie diesen Beitrag geliebt haben, fordern wir Sie auf, uns über das Kommentarfeld unten zu informieren. Außerdem können Sie eine Nachricht in der Chatbox hinterlassen, wenn Sie Fragen zum Happyaddons -Plugin haben. Unser Live -Support -Agent wird so schnell wie möglich auf Sie reagieren.

Danke, dass du bis zum Ende bei uns bist. Wir wünschen Ihnen einen schönen Tag vor uns.