So erstellen Sie eine Zeitleiste in Elementor (vertikale, horizontale und Post-Zeitleiste)

Elementor Hat kein eigenes Timeline-Widget, in der kostenlosen Version oder in Pro. Um eine Timeline auf eine Elementor-Seite zu setzen, fügt man eine aus einem Addon hinzu, Diese Anleitung verwendet das Timeline-Widget im kostenlosen Master Addons Plugin, das vertikale Layouts, horizontale Karussells und Zeitleisten abdeckt, die sich aus Ihren Blogbeiträgen zusammensetzen.

Jeder Screenshot unten stammt von Elementor 4.2.4 mit Master Addons 3.2. Benutzerdefinierte Zeitleisten, beide Layouts und die ganze Registerkarte Stil sind kostenlos Post Timeline braucht Pro, und es wird beschriftet, wo es hochkommt.

Kann man eine Timeline in Elementor ohne Plugin machen?

Technisch gesehen ja, und es ist mehr Arbeit, als es aussieht Man würde Container stapeln, einem einen linken Rand geben, um die zentrale Linie zu fälschen, absolut einen Punkt in jeder Zeile positionieren und abwechselnd links und rechts mit benutzerdefiniertem CSS ausrichten Dann würde man die Responsive-Regeln selbst schreiben, weil dieses alternierende Layout auf Telefonen auf eine einzige Spalte zusammenfallen muss.

Bei der Wartung fällt es um, einen Meilenstein in der Mitte hinzuzufügen bedeutet, jede Zeile darunter von Hand neu zu wechseln Ein Widget behält die Zeile, die Markierungen, die Abwechslung und die Haltepunkte als Einstellungen, sodass das Hinzufügen eines Eintrags einen Klick beträgt.

Durchsuchen Sie das Widget-Panel nach “Timeline” auf einer Stock-Elementor-Installation und genau ein Ergebnis kommt zurück, das Master Addons-Widget.

Installieren Sie das Plugin

Vom WordPress-Dashboard gehen Sie zu Plugins → Plugin hinzufügenSuchen nach Master-Addons für ElementorInstallieren und aktivieren Sie dann. Öffnen Sie eine beliebige Seite mit Elementor und durchsuchen Sie das Widget-Panel nach Zeitleiste.

Wenn nach der Aktivierung nichts mehr dazwischen kommt, überprüfen Master-Addons → Widgets-Bibliothek Und vergewissern Sie sich, dass Timeline eingeschaltet ist Widgets können einzeln deaktiviert werden, um ungenutzten Code vom Frontend fernzuhalten, was sich ohnehin lohnt, wenn Sie sich darum kümmern Elementor-Seitengeschwindigkeit.

So fügen Sie Schritt für Schritt eine Zeitleiste in Elementor hinzu

Schritt 1: Ziehen Sie das Widget auf die Seite

Bearbeiten Sie eine Seite mit Elementor, suchen Sie nach Zeitleiste, und ziehen Sie es in einen Container Es kommt mit drei bereits ausgefüllten Beispieleinträgen, so dass Sie sehen können, was jedes Feld tut, bevor Sie etwas ändern.

Schritt 2: Wählen Sie den Timeline-Typ

Öffnen Sie im Reiter Inhalt die Zeitleiste Abschnitt. Der erste Dropdown ist Zeitleisten-typ.

Benutzerdefinierte Zeitleiste Ist die kostenlose Sie tippen jeden Eintrag selbst, was Sie sich für eine Firmengeschichte, eine Produkt-Roadmap oder einen Veranstaltungsplan wünschen, wo der Inhalt fix und redaktionell ist.

Post-zeitleiste Ist eine Master Addons Pro Funktion. Sie liest deine WordPress Beiträge und baut daraus die Timeline auf, also fügt das Veröffentlichen eines Beitrags einen Eintrag von selbst hinzu, Weiter unten gibt es einen Abschnitt dazu.

Schritt 3: Wählen Sie vertikal oder horizontal

Der zweite Dropdown ist Zeitleistenstil.

Vertikal läuft mit Karten links und rechts einer Mittellinie abwechselnd die Seiten entlang Horizontal legt die Einträge nebeneinander als Karussell mit Pfeilen aus Beide sind frei, und man kann an jeder Stelle zwischen ihnen wechseln, ohne seine Einträge zu verlieren.

Eine Grenze, die es jetzt zu wissen gilt: Timeline Style erscheint nur für benutzerdefinierte Timelines. Post-Timelines sind nur vertikal und der Dropdown verschwindet, wenn Sie den Typ wechseln.

Schritt 4: Bearbeiten Sie Ihre Einträge

Unter Gegenstände, jeder Eintrag ist eine Repeater-Zeile Klicken Sie auf eine, um ihn zu öffnen.

Jede Zeile hat einen Content-Tab und einen Media-Tab. Die Felder, auf die es ankommt:

• Show: Datum oder Benutzerdefiniertes Etikett Datum gibt Ihnen einen Datumsauswahl; Benutzerdefiniertes Etikett lässt Sie alles schreiben, so erhalten Sie “Q3 2026” oder “Founded” auf der Zeile statt eines Kalenderdatums.
• Datumsformat: Presets plus Custom Benutzerdefiniert nimmt eine PHP-Datumszeichenfolge, also F Y “Juni 2019” druckt und eine Meilenstein-Zeitleiste davon abhält, wie ein Changelog auszusehen.
• Link: macht die ganze Karte anklickbar Lass es aus, wenn der Text der Karte bereits einen Link enthält, denn ein Link innerhalb eines Links ist ungültig HTML und Browser lassen einen davon fallen.
• Die Inhaltsbox ist ein voller Editor. Ein eigenes Titelfeld gibt es nichtDie Überschrift des Eintrags geht hier also als Überschrift 3 ein.
• Der Reiter Medien fügt der Karte ein Bild hinzu und stellt ihre Auflösung ein.

Artikel hinzufügen Erstellt eine neue Zeile, das Kopiersymbol dupliziert eine und Zeilen ziehen, um neu zu ordnen.

Schritt 5: Veröffentlichen und anschauen

Vier Einträge, als Monat und Jahr formatierte Daten, Flag-Symbole auf den Markierungen, alles auf dem kostenlosen Plugin.

Die Karten wechseln sich ab und die Daten liegen jeder Seite gegenüber, ohne dass Sie etwas positionieren.

Warum die Karten leer aussehen, bis Sie scrollen

Zeitleistenkarten beginnen ausgeblendet und werden animiert, wenn sie in die Ansicht scrollen, und der Punkt, der Ihrer Bildlaufposition am nächsten liegt, nimmt einen fokussierten Zustand an, den Sie im Punktbereich separat gestalten.

Eine Zeitleiste, die unterhalb der Falte platziert ist, sieht also in einem Screenshot-Tool, in einem PDF-Export oder in einem Seitengeschwindigkeits-Audit, das niemals scrollt, leer aus Scrollen Sie auf der Seite und die Einträge erscheinen.

Erstellen einer horizontalen Zeitleiste in Elementor

Einstellen Zeitleistenstil Zur horizontalen Zeitleiste und das Layout dreht sich: Einträge sitzen nebeneinander, Punkte sitzen über den Karten auf einer horizontalen Linie und Pfeile scrollen durch sie hindurch.

Pfeile werden im Reiter Stil unter Navigation konfiguriert Zwei Bedienelemente, einfach zu verwechseln:

• Platzierung innerhalb oder außerhalb des Karussells liegt.
• Position Dort sitzen sie, von oben links bis unten rechts.

Wenn Sie Position auf einen Wert setzen, der zu Placement gehört, fallen die Pfeile in die obere linke Ecke, oben auf Ihrem ersten Eintrag. Unten in der Mitte mit der Platzierung von außen befindet sich die sichere Paarung, und sie wird im Screenshot verwendet.

Horizontal passt vier bis sechs starke Meilensteine über dem Falz, wie eine Produktstartsequenz auf einer Landingpage Nach sechs Einträgen klickt der Leser wiederholt auf einen Pfeil, um Inhalte zu sehen, die er nicht scannen kann, und vertikal gewinnt Vertikal ist auch die sicherere Wette auf Telefonen, wo das Lesen von oben nach unten das ist, was die Leute erwarten. Was auch immer Sie auswählen, überprüfen Sie es mit Ihrem Reaktionshaltepunkte Bevor Sie versenden, denn die beiden Layouts fallen unterschiedlich zusammen.

Styling der Linie, der Punkte und der Karten

Die Registerkarte Stil besteht aus elf Abschnitten: Karussellelemente, Layout, Bilder, Beiträge, Karten, Pfeil, Daten, Linie, Punkte, Navigation und Muster.

Linie Legt die Farbe und Dicke der Mittellinie fest. Karten Griffe Hintergrund, Bordüre, Schatten und Polsterung. Termine und die Typografie-Steuerelemente stimmen den Eingabetext mit Ihrem Schriftartensystem ab.

Punkte Ist der Abschnitt, in dem es sich lohnt, Zeit zu verbringen. Es Typ Die Steuerung wählt aus, was auf jeder Markierung sitzt, und verfügt über drei Zustandsregisterkarten: Standard, Schweben und Fokussiert. Fokussiert gilt für den Eintrag, der der Bildlaufposition des Lesers am nächsten liegt, so dass es ungestylt bleibt, was eine Zeitleiste als flache Liste lesen lässt, während der Leser daran vorbei scrollt Alle drei stylen.

Einstellen Typ Zu Symbolen und der Marker nimmt ein Symbol, das die Screenshots hier verwenden. Überprüfen Sie es sofort am Frontend: Wenn der Marker als leerer Kreis rendert, wurde das Symbol nicht geladen, und wenn Sie Typ zurück in Standard wechseln, erhalten Sie einen einfarbigen Punkt, der immer funktioniert.

Erstellen einer Zeitleiste aus Ihren Blogbeiträgen

Schalten Sie den Zeitleisten-Typ um Post-zeitleiste Und das Panel ändert sich komplett, statt Einträge einzugeben beschreibt man, welche Beiträge gezogen werden sollen, und das Widget baut daraus die Timeline auf.

Die Kontrollen, die es wert sind, eingestellt zu werden:

• Titel anzeigen, Titellink und Überschrift-tag. Setzen Sie das Überschriften-Tag auf H2 oder H3, damit Post-Titel in der Überschriftenreihenfolge unter dem H1 der Seite stehen. Dies ist die gleiche Überschriftenreihenfolge-Regel, die wichtig ist, wenn Sie Erstellen Sie eine Blogseite in Elementor.
• Bild anzeigen und Bildauflösung Legen Sie das abgebildete Bild auf die Karte.
• Datumsformat und Zeitformat. Die Standardeinstellung gibt die Zeit neben dem Datum aus, die auf einer Meilenstein-Zeitleiste seltsam lautet Zeitformat auf keine einstellen, oder ein benutzerdefiniertes Datumsformat verwenden.
• Beiträge pro Seite, Offset-Postanzahl, Postauftrag und Bestellung von.
• Kategorie, Nach Tag filtern, Autor und Beiträge zum Ausschließen Schränken Sie die Abfrage ein, sodass eine Zeitleiste “alles in News” und eine andere ein handverlesenes Set sein kann.
• Links aktivieren Macht die ganze Karte anklickbar Gleiche Warnung wie bei der benutzerdefinierten Version: Ausschalten, wenn der Karteninhalt eigene Links hat.

Da Beiträge direkt gelesen werden, lässt sich diese Version sauber in eine abwandeln Themenbauer Archiv oder einzelne Vorlage, und es aktualisiert sich selbst, wenn Sie veröffentlichen Post Timeline ist Teil von Master Addons Pro.

Benutzerdefinierte oder Post-Timeline: welche

Wenn die Veröffentlichung eines Beitrags einen Eintrag hinzufügen soll, verwenden Sie Post Timeline Wenn die Einträge eine Geschichte sind, die Sie einmal geschrieben haben, verwenden Sie Benutzerdefiniert.

Wo sich die Verwendung einer Zeitleiste lohnt

• Über Seiten. Eine vertikale Unternehmensgeschichte, mit einem Gegen auf Zeile darüber für die Schlagzeilen.
• Produktseiten. Eine horizontale Roadmap der versendeten Features und was als nächstes kommt Vier bis sechs Einträge, nicht mehr.
• Freigabescheine. Eine Post-Timeline, gefiltert in eine Kategorie, neben a Changelog Widget.
• Portfolios und Fallstudien. Datierte Einträge mit vorgestellten Bildern, hier zahlt sich der Reiter Medien aus.
• Veranstaltungs - und Kurspläne. Benutzerdefinierte Beschriftungen statt Datumsangaben, so dass die Zeile “Tag 1, Tag 2, Tag 3” lautet.

Sieben Dinge, die eine Timeline besser lesen lassen

1. Halten Sie jede Karte auf zwei oder drei Sätze Eine Zeitleiste ist ein Scanformat und vollständige Absätze besiegen sie.
2. Verwenden Sie benutzerdefinierte Beschriftungen für Meilensteine “2019” schlägt “17. Juni 19”, wenn der genaue Tag keine Rolle spielt.
3. Behalten Sie eine Überschriftsebene innerhalb der Karten bei. Das Inhaltsfeld hat kein Titelfeld, also setzen Sie die Überschrift jedes Eintrags auf dasselbe Tag, anstatt H2 und H4 zu mischen.
4. Wechseln Sie nach sechs Einträgen in die Vertikale, da das horizontale Scrollen schnell mühsam wird.
5. Stil den Fokussierten Zustand Es ist derjenige, der dem Leser sagt, wo er sich befindet.
6. Überprüfen Sie Ihre Markierungen auf dem Frontend, nachdem Sie ein Symbol ausgewählt haben. Ein leerer Kreis bedeutet, dass das Symbol nicht geladen wurde, und Standardpunkte sind der sichere Fallback.
7. Überprüfen Sie es auf einem Telefon Das abwechselnde Layout bricht auf eine Spalte zusammen, und lange benutzerdefinierte Etiketten sind das erste, was schlecht umwickelt wird.

Häufig gestellte Fragen

Verwandte Lektüre

• Elementor-Zeitleisten-WidgetDie Feature-Seite mit jedem aufgeführten Steuerelement
• Zeitleisten-Widget-Dokumentation
• So erstellen Sie eine Blogseite mit Elementor
• SEO-Praktiken für Elementor-Seiten
• Master-Addons auf WordPress.org