Kostenloses Elementor-Zeitleisten-Widget: Vertikale und horizontale Zeitleisten
Timeline ist ein kostenloses Master Addons Widget für Elementor, das Daten und Ereignisse entlang einer Verbindungslinie aufstellt Erstellen Sie eine benutzerdefinierte Timeline von Hand, mit einem Datum oder Etikett, reichhaltigem Inhalt, einem Bild und einem Link für jedes Element, und zeigen Sie es vertikal oder als horizontales Karussell mit Master Addons Pro können Sie auch direkt aus Ihren Blogbeiträgen eine Post Timeline erstellen Es passt zu Firmengeschichten, Roadmaps, Veranstaltungsplänen und Nachrichtenarchiven.
So fügen Sie eine Zeitleiste in Elementor hinzu
Diese Schritte erstellen eine kostenlose benutzerdefinierte Zeitleiste Das Widget beginnt mit drei Beispielelementen, sodass Sie das Layout sehen können, bevor Sie etwas ändern.
- Durchsuchen Sie in Elementor das Widget-Panel nach “Timeline” und ziehen Sie das Master Addons Widget auf die Seite.
- Behalten Sie den Zeitleisten-Typ auf der benutzerdefinierten Zeitleiste bei und wählen Sie Vertikale Zeitleiste oder Horizontale Zeitleiste.
- Öffnen Sie jede Zeile unter Elemente und legen Sie das Datum oder eine benutzerdefinierte Beschriftung, den Inhalt, ein Bild und einen Link fest.
- Klicken Sie auf Element hinzufügen für weitere Meilensteine und ziehen Sie die Zeilen, um sie neu zu ordnen.
- Für eine horizontale Zeitleiste legen Sie die Navigations - und Karusselleinstellungen fest.
- Gestalten Sie die Karten, Daten, Linien und Punkte im Register Stil und veröffentlichen Sie sie dann.
Unser Timeline-tutorial jede Einstellung mit Screenshots durchläuft, und das Video oben auf dieser Seite zeigt die gleichen Schritte.
Verfügt Elementor oder Elementor Pro über ein Timeline-Widget?
Nein. Weder Elementor noch Elementor Pro enthalten ein Timeline-Widget, daher benötigen Sie ein Addon oder ein handgefertigtes Layout aus Containern, Rändern und benutzerdefiniertem CSS. Das Master Addons Timeline-Widget funktioniert mit Elementor allein, und Sie benötigen dafür kein Elementor Pro. Hier ist, was das Widget abdeckt.
| Zeitleisten-widget | |
|---|---|
| Grundriss | Vertikal oder ein horizontales Karussell |
| Kartenausrichtung | Links, Mitte, Overlay oder rechts |
| Inhaltsquellen | Elemente, die Sie von Hand hinzufügen, oder Ihre Blogbeiträge (Zeitleiste posten, Pro) |
| Jeder Artikel | Datum oder benutzerdefiniertes Etikett, reichhaltiger Inhalt, ein Bild und ein Link für die gesamte Karte |
| Punkttypen | Punkte, Symbole, Bilder, Zahlen oder Buchstaben |
| Horizontale Navigation | Pfeile, Punkte, Bruch - oder Fortschrittsbalken, mit optionaler Bildlaufleiste |
| Stilabschnitte | 10, einschließlich Karten, Daten, Linie und Punkte |
| Bedürfnisse | Elementor- und Master-Addons |
Benutzerdefinierte Zeitleiste (kostenlos) oder Post-Zeitleiste (Pro)
Custom Timeline ist die kostenlose Option Jeder Artikel bekommt ein Datum, das Sie gegen ein benutzerdefiniertes Label wie “Phase 1”, einen Rich-Text-Inhaltsbereich, ein Bild und einen optionalen Link für die ganze Karte austauschen können Artikel können auch eigene Punkt - und Farbeinstellungen haben Post Timeline, Teil von Pro, erstellt die Timeline aus Ihren Beiträgen: Filter nach Kategorie, Tag oder Autor, schließen Sie bestimmte Beiträge aus, legen Sie die Reihenfolge und den Offset fest, und wählen Sie, ob Sie den Titel, das vorgestellte Bild und den Auszug anzeigen möchten.
- Benutzerdefinierte Zeitleiste: ein Datum oder eine benutzerdefinierte Beschriftung, ein Inhalt, ein Bild und ein Link für jedes Element.
- Pro-Item-Styling für die Farben Punkt, Karte und Datum.
- Post Timeline (Pro): Kategorie, Tag - und Autorenfilter, ausgeschlossene Beiträge, Offset und Bestellung.
- Postkarten können den Titel, das Beitragsbild, einen Auszug und einen Link zum Weiterlesen zeigen.
Vertikale Zeitleiste in Elementor
Die Vertical Timeline stapelt Karten entlang einer Mittellinie, Richten Sie sie nach links, in der Mitte, rechts oder als Overlay aus und kehren Sie die Kartenpositionen mit einem Schalter um Horizontal Spacing and Vertical Spacing setzen die Lücken Auf Tablets und Telefonen bewegen sich die Karten auf eine Seite der Linie.
- Horizontal Ausrichtung: Links, Mitte, Überlagerung oder rechts.
- Umgekehrte Kartenpositionen drehen sich um, welche Seite zuerst kommt.
- Vertikal Ausrichten und zwei Abstandsschieber für die Karten.
- Karten bewegen sich auf Tablets und Telefonen zur Seite.
Horizontale Zeitleiste in Elementor (Karussell)
Setzen Sie den Zeitleistenstil auf die horizontale Zeitleiste und eine benutzerdefinierte Zeitleiste wird zu einem Karussell, mit den Punkten auf einer Linie über den Karten Wählen Sie unter Navigation Pfeile und Punkte, Pfeile und Brüche, Pfeile, Punkte, Fortschritt oder Keine, und fügen Sie eine Bildlaufleiste hinzu, wenn Sie eine Karusselleinstellungen haben ein Standard - oder Coverflow-Layout, Autoplay mit eigener Geschwindigkeit, Pause auf Hover, Schleife und Dias zum Scrollen.
- Sechs Navigationsoptionen sowie eine optionale Bildlaufleiste.
- Karussell- oder Coverflow-Layout.
- Automatisches Abspielen, Pause beim Schweben, Schleife und Mittelrutsche.
- Verfügbar für benutzerdefinierte Zeitleisten.
Sehen Sie es live in der Horizontale Roadmap-Demo.
Post Timeline: Erstellen Sie eine Timeline aus Ihren Blogbeiträgen (Pro)
Post Timeline ist Teil von Master Addons Pro. Timeline Type in Post Timeline wechseln und das Widget listet Ihre veröffentlichten Beiträge entlang der Zeile auf, standardmäßig die neuesten, sodass die Timeline jedes Mal wächst, wenn Sie veröffentlichen Stellen Sie Beiträge pro Seite, Post Order und Order By ein, filtern Sie nach Kategorie, Tag oder Autor, überspringen Sie Beiträge mit Posts to Exclude und verwenden Sie Offset Post Count, um weiter unten in der Liste zu beginnen Post Timelines sind vertikal.
- Abfrage: Beiträge pro Seite, Post-Order, Order By und Offset Post Count.
- Filter: Kategorie, Tag, Autor und Beiträge zum Ausschließen.
- Titel, Bild, Ausschnitt und Read More Button ein - oder ausblenden.
- Links aktivieren macht jede Karte Link zu ihrem Beitrag.
Für ein Raster oder eine Liste von Beiträgen verwenden Sie die Blog-widget.
Linien - und Punktstyling
Style die Linie mit einer Hintergrundfarbe, einer Fortschrittsfarbe, Dicke und einem Rand Punkte können einfache Punkte, Symbole, Bilder, Zahlen oder Buchstaben sein, und jeder hat Standard, Hover - und Fokussierte Stile für Größe, Hintergrundfarbe, Punktfarbe und Textschatten So hebt sich der Meilenstein, den ein Besucher betrachtet, vom Rest ab.
- Linienhintergrund, Fortschrittsfarbe, Dicke und Rand.
- Fünf Punkttypen: Punkte, Symbole, Bilder, Zahlen oder Buchstaben.
- Standard-, Hover- und fokussierte Zustände für jeden Punkt.
Karten - und Datumsgestaltung mit Animationen
Karten erhalten Polsterung, Rand, Inhaltsauffüllung, Randradius und separate Titel - und Inhaltstypografie Ihre Farbe, Hintergrund, Box-Schatten und Text-Schatten können sich über die Standard, Hover - und Focused-Zustände ändern Schalten Sie Animate-Karten ein, um jede Karte beim Scrollen in Sichtweite zu zeigen Datumsangaben haben ihre eigene Typografie, Auffüllung, Rand, Text-Schatten und Farben für alle drei Zustände.
- Steuerelemente für Kartenabstand, Radius und Typografie.
- Standard-, Hover- und Fokussierte Stile für Karten und Datumsangaben.
- Animieren Sie Karten, um Gegenstände beim Scrollen in die Ansicht zu enthüllen.
Benutzerdefinierte Zeitleiste vs. Post-Zeitleiste
So vergleichen sich die beiden Timeline-Typen.
| Benutzerdefinierte Zeitleiste | Post-zeitleiste | |
|---|---|---|
| Preis | Kostenlos | Master Add-dons Pro |
| Inhalt | Elemente, die Sie im Panel hinzufügen | Ihre veröffentlichten Beiträge |
| Aktualisierungen | Wenn Sie die Elemente bearbeiten | Jedes Mal, wenn Sie einen Beitrag veröffentlichen |
| Grundriss | Vertikales oder horizontales Karussell | Vertikal |
| Jeder Eintrag zeigt | Datum oder Etikett, Inhalt, Bild, Link | Titel, Beitragsbild, Datum, Auszug, weiterlesen |
| Am besten für | Historien, Roadmaps, Zeitpläne | Nachrichtenarchive, Veröffentlichungsnotizen |
Für ein vollständiges Postgitter neben Ihrer Timeline verwenden Sie das kostenlose Blog-widget. Um die Zahlen hinter Ihren Meilensteinen anzuzeigen, fügen Sie hinzu Gegen auf.
Zeitleistenbeispiele
Der Betrachter unten hat 16 fertige Designs Öffnen Sie eines davon, um es live zu sehen.
- Meilensteine für eine Unternehmensgeschichte.
- Dark Changelog für Release Notes.
- Horizontale Roadmap für Produktphasen.
- Post Timeline Blog für Beiträge in der Reihenfolge des Datums.
- Case Study Bilder für Projektphasen mit Fotos.
- Überlagern Sie Schritte für einen Prozess.
- Veranstaltungsagenda für einen Zeitplan.
Häufig gestellte Fragen zur Zeitleiste
Soll ich die Post-Timeline oder benutzerdefinierte Timeline verwenden?
Verwenden Sie die benutzerdefinierte Zeitleiste, die kostenlos ist, wenn Sie jedes Datum und jeden Eintrag steuern möchten, wie eine Seite zu unserem Verlauf oder eine Roadmap. Verwenden Sie die Post-Zeitleiste, die Teil von Master Addons Pro ist, wenn sich die Zeitleiste von Ihren Blogbeiträgen aus aktualisieren sollte, wie ein Nachrichtenarchiv.
Wie funktioniert der "Fokussierte" Staat?
Der Focused-State stilisiert das Element, das gerade aktiv ist, wenn Besucher durch die Zeitleiste scrollen oder sich durch das Karussell bewegen Geben Sie ihm einen anderen Kartenhintergrund, eine andere Datumsfarbe oder einen größeren Punkt, damit der aktuelle Meilenstein hervorsticht.
Kann ich eine Timeline in Elementor ohne Plugin erstellen?
Ja, ein einfacher. stapeln Sie Container in einer Spalte, geben Sie jedem einen linken Rand für die Zeile und platzieren Sie ein Symbol-Widget am Rand mit Position auf Absolute für den Punkt gesetzt Abwechselnde Seiten, ein horizontales Layout und eine Scroll-Animation benötigen benutzerdefiniertes CSS oder ein Timeline-Widget.
Wie füge ich eine horizontale Zeitleiste in Elementor hinzu?
Fügen Sie das Timeline-Widget hinzu, behalten Sie den Timeline-Typ auf der benutzerdefinierten Zeitleiste bei und setzen Sie den Timeline-Stil auf die horizontale Zeitleiste. Wählen Sie dann die Pfeile oder Punkte unter Navigation aus und stellen Sie die automatische Wiedergabe und Schleife unter den Karusselleinstellungen ein.
Ist das Elementor Timeline Widget kostenlos?
Ja. Timeline ist ein kostenloses Widget, inklusive des Typs Benutzerdefinierte Zeitleiste und sowohl vertikaler als auch horizontaler Layouts Der Typ Post Timeline, der Einträge aus Ihren Blogbeiträgen erstellt, benötigt Master Addons Pro.
Kann ich eine ganze Timeline-Karte mit einer Seite verknüpfen?
Ja. Jedes Custom Timeline-Element hat ein Link-Feld, das die ganze Karte anklickbar macht Post Timelines hat einen Enable Links-Schalter, der jede Karte mit ihrem Beitrag verknüpft Vermeiden Sie andere Links innerhalb einer verlinkten Karte, da Links innerhalb von Links nicht erlaubt sind.
Kann die Timeline Blogbeiträge automatisch ziehen?
Ja, mit dem Post Timeline-Typ in Master Addons Pro. Es liest Ihre veröffentlichten Beiträge und Sie steuern die Reihenfolge, die Anzahl der Beiträge und die Kategorie-, Tag- oder Autorenfilter.
Warum sehen die Karten leer aus, bis ich scrolle?
Animate Cards ist an Jede Karte bleibt versteckt, bis sie in Sicht rollt, dann rutscht sie hinein Animate Cards schalten Sie im Bereich Karten des Style-Registers aus, wenn Sie jede Karte von Anfang an sichtbar haben möchten.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
