Eine Zeitleiste macht aus einer Liste von Terminen etwas, das die Leute tatsächlich lesen: Unternehmensgeschichte, eine Produkt-Roadmap, ein Projektplan, ein Schritt-für-Schritt-Prozess Die kostenlose Zeitleisten-widget In Master-Addons für Elementor Baut all das aufSie können Einträge direkt aus Ihren Blogbeiträgen ziehen oder Ihre eigenen benutzerdefinierten Elemente eingeben und sie dann als vertikale Linie, horizontaler Streifen oder verschiebbares Karussell anzeigen.
Es ist eines der flexibleren Widgets im Set, da der gleiche Inhalt mit einem Dropdown zwischen Layouts wechseln kann. Unten finden Sie einen Spaziergang durch beide Timeline-Typen, alle drei Layouts und die Styling-Steuerelemente für Karten, Daten, Linien und Punkte.
Was das Timeline-Widget tut #
Das Widget ordnet datierte Einträge entlang einer Verbindungszeile an, jeder Eintrag ist eine Karte mit Datum, etwas Inhalt und einem optionalen Bild, und die Zeile verläuft zwischen den Karten mit jeweils einer Punktmarkierung.
Es gibt zwei Möglichkeiten, es zu füllen. Post-zeitleiste (Pro) zieht Ihre WordPress-Beiträge in der Reihenfolge ihres Datums, sodass sich die Zeitleiste beim Veröffentlichen aktualisiert. Benutzerdefinierte Zeitleiste Wir lassen Sie Elemente von Hand für alles hinzufügen, was kein Blog-Beitrag ist, wie Gründungsdaten oder Veröffentlichungsnotizen Das Widget hat drei Registerkarten: Inhalt für die Daten und das Layout, Stil für den Look und Erweitert für die üblichen Elementoroptionen.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Die Daten und Einträge, die Sie anzeigen möchten, oder veröffentlichte Beiträge, wenn Sie die Post-Zeitleiste verwenden, für die Master Addons Pro erforderlich ist.
So fügen Sie das Timeline-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Zeitleiste‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie es auf Ihre Seite Es wird mit Beispieleinträgen geladen, so dass Sie von einem funktionierenden Layout anstelle eines leeren beginnen.
Zeitleiste posten: Einträge aus Ihren Beiträgen ziehen #
Einstellen Zeitleisten-typ zu Post-zeitleiste (Pro) und das Widget baut sich aus Ihren Blogbeiträgen auf Greifen Sie darauf zu, wenn Sie eine Zeitleiste mit Nachrichten, Veröffentlichungen oder Artikeln wünschen, die sich selbst auf dem neuesten Stand hält.
- Sticky ignorieren: Überspringen Sie klebrige Pfosten, damit sie nicht nach oben springen.
- Links aktivieren: Machen Sie jede Karte Link zu seinem Beitrag Schalten Sie es aus, wenn Sie Links innerhalb des Karteninhalts haben, da ein Link innerhalb einer verknüpften Karte nicht funktioniert.
- Titel: Den Titel des Beitrags ein - oder ausblenden, einen Link geben und das Überschriften-Tag setzen (standardmäßig H2).
- Miniaturansicht: Zeigen Sie das vorgestellte Bild an und wählen Sie seine Auflösung.
- Datum: Legen Sie das auf jeder Karte angezeigte Datum und die Uhrzeit fest.
- Abfrage: Posts Per Page, Order By, Post Order und Offset Post Count steuern, wie viele Beiträge in welcher Reihenfolge erscheinen Kategorie, Filter By Tag, Autor und Posts to Exclude schränken ein, welche Beiträge angezeigt werden.
Benutzerdefinierte Zeitleiste: Fügen Sie Ihre eigenen Artikel hinzu #
Einstellen Zeitleisten-typ zu Benutzerdefinierte Zeitleiste und ein Gegenstände Repeater erscheint Jedes Element ist ein Eintrag auf der Timeline, mit eigenem Datum oder benutzerdefiniertem Etikett, Inhalt, Bild und Link. Verwenden Artikel hinzufügen Einträge hinzuzufügen, das Kopiersymbol, um einen zu duplizieren, und das X, um ihn zu entfernen.
Dies ist der Typ für Verlaufsseiten, Roadmaps oder jede Sequenz, die nicht durch Blogbeiträge gesteuert wird Öffnen Sie ein Element, um sein Datum oder eine benutzerdefinierte Beschriftung, den Inhalt, ein optionales Bild und einen Link für die Karte festzulegen. Es gibt kein separates Titelfeld, also legen Sie eine Überschrift oben in die Inhaltsbox, wenn Sie eines wünschen.
Wählen Sie einen Zeitleistenstil #
Mit ausgewählter benutzerdefinierter Zeitleiste ist die Zeitleistenstil Dropdown schaltet zwischen Vertikale Zeitleiste und Horizontale Zeitleiste. Vertikal stapelt die Karten eine Mittellinie hinunter, wobei sich die Daten links und rechts abwechseln Horizontal legt die Einträge quer über die Seite als eine Reihe, durch die man scrollt.
Navigation für horizontale Zeitleisten #
Der horizontale Stil dreht sich auf a Navigation Abschnitt, der steuert, wie sich Besucher durch die Einträge bewegen.
- Navigation: Wählen Sie Pfeile und Punkte, Pfeile und Brüche, Pfeile, Punkte, Fortschritt oder Keine und zeigen Sie optional eine Bildlaufleiste an.
- Position und Platzierung der Pfeile: Stellen Sie ein, wo die Pfeile sitzen und ob sie sich innerhalb oder außerhalb der Zeitleiste befinden.
- Nächstes und vorheriges Symbol: Tauschen Sie Ihre eigenen Symbole gegen die Pfeile aus.
Karusselleinstellungen #
Die horizontale Zeitleiste kann als Schieberegler ausgeführt werden Die Karusselleinstellungen Abschnitt legt fest, wie es sich bewegt, einschließlich eines Coverflow-Layouts, das die Seitenkarten in die Winkel lenkt.
- Layout: Eine Standardrutsche oder den Coverflow-Effekt.
- Autoplay- und Autoplay-Geschwindigkeit: Fahren Sie die Rutschen in einem festgelegten Tempo alleine voran.
- Halten Sie beim Bewegen, Schleifen und Folien an, um zu scrollen: Feinabstimmung, wie sich das Karussell verhält.
- Animationsgeschwindigkeit: Wie schnell jeder Übergang läuft.
Stil die Zeitleiste #
Die Stil Tab zerlegt die Zeitleiste in Teile, die Sie selbst stylen können: Layout, Bilder, Karten, Pfeil, Termine, Linie, Punkte, und Navigation„Plus Muster (eine Pro-Option).
Die Punkte Abschnitt ist ein gutes Beispiel Sie können jeden Punkt als Symbol festlegen, seine Größe auswählen und ihm Standard-, Hover- und fokussierte Farben geben, sodass die Markierung auf der aktiven Karte hervorsticht.
- Layout: Horizontale und vertikale Ausrichtung, Kartenabstand und ein Umschalter für umgekehrte Kartenpositionen.
- Karten: Hintergrund, Rand, Radius, Kastenschatten, Polsterung und Artikellücke.
- Termine und Zeile: Typografie und Farbe für die Daten sowie Hintergrund, Fortschrittsfarbe und Dicke der Linie.
- Punkte: Punkttyp, Größe und Farben für jeden Zustand.
Das Ergebnis auf der Seite #
Veröffentlichen oder Vorschau und die Zeitleiste rendert mit Ihren Karten, Daten, Linien und Punkten an Ort und Stelle Hier ist eine vertikale Zeitleiste mit abwechselnden Karten und einer farbigen Verbindungslinie, das Layout, das zu einem Verlaufs- oder Roadmap-Abschnitt passt.
Häufige Anwendungsfälle #
- Unternehmensgeschichte Mit Gründungsdatum und Meilensteinen entlang einer vertikalen Linie.
- Produkt-roadmaps Vergangene Veröffentlichungen zeigen und was als nächstes kommt.
- Projektpläne Als horizontaler Phasenstreifen angelegt.
- Ein Blog oder Newsfeed Automatisch mit der Post-Timeline erstellt.
- Schritt-für-schritt-prozesse Wo jeder Schritt ein Datum oder eine Phase hat.
Tipps für die Arbeit mit dem Timeline Widget #
- Verwenden Sie die Post-Zeitleiste für alles, was aktualisiert wird. News und Release-Protokolle bleiben aktuell, ohne dass Sie das Widget erneut berühren.
- Kartentext kurz halten. Vor allem im horizontalen Layout lesen sich ein Titel und zwei oder drei Zeilen am besten.
- Ordnen Sie das Layout dem Inhalt zu. Lange Geschichten passen vertikal; Eine Handvoll Phasen funktionieren gut horizontal.
- Legen Sie die Fortschrittsfarbe der Linie fest. Eine andere Fortschrittsfarbe zeigt an, wie weit ein Besucher die Zeitleiste heruntergescrollt hat.
- Schalten Sie Links aktivieren aus, wenn Karten Links enthalten. Ein Link innerhalb einer verknüpften Karte funktioniert nicht, also wählen Sie den einen oder anderen aus. Dieser bringt die Leute oft zum Stolpern.
Häufig gestellte Fragen #
Was ist das Timeline-Widget in Master-Addons?
Es handelt sich um ein Elementor Widget, das datierte Einträge entlang einer Verbindungslinie anordnet Jeder Eintrag ist eine Karte mit Datum, Inhalt und einem optionalen Bild, Baue es kostenlos aus benutzerdefinierten Elementen, oder aus deinen Blogbeiträgen mit Pro, und zeige es vertikal oder als horizontales Karussell.
Kann die Timeline Einträge aus meinen Blogbeiträgen ziehen?
Ja, mit Master Addons Pro. Setzen Sie den Zeitleisten-Typ auf Post Timeline und das Widget baut sich aus Ihren WordPress-Beiträgen in der Reihenfolge des Datums auf Sie steuern die Beitragsanzahl, die Reihenfolge, den Offset, den Titel, die Miniaturansicht und das Datumsformat, und die Zeitleiste aktualisiert sich selbst, während Sie neue Beiträge veröffentlichen.
Unterstützt das Timeline-Widget horizontale Layouts?
Ja. Bei einer benutzerdefinierten Zeitleiste wechselt die Dropdown-Datei des Zeitleistenstils zwischen vertikal und horizontal. Das horizontale Layout legt Einträge auf der Seite fest und fügt Navigations- und Karusselleinstellungen hinzu, darunter Pfeile, eine Bildlaufleiste, Autoplay und einen Coverflow-Slider-Effekt.
Kann ich statt Beiträgen eigene Termine und Inhalte hinzufügen?
Ja. Wählen Sie Benutzerdefinierte Zeitleiste und verwenden Sie den Items-Repeater, um Einträge von Hand hinzuzufügen Jeder Artikel hat sein eigenes Datum oder Etikett, Inhalt, Bild und Link, was ideal für die Firmengeschichte, Roadmaps oder jede Sequenz ist, die nicht durch Blogbeiträge gesteuert wird.
Kann ich die Zeitlinienpunkte und die Linie stylen?
Ja. Die Registerkarte Stil hat separate Abschnitte für die Linie und die Punkte Sie können die Hintergrundfarbe, die Fortschrittsfarbe und die Dicke der Linie festlegen und jeden Punkt zu einem Symbol mit seiner eigenen Größe und Standard-, Hover- und Fokusfarben machen.
Einwickelnd #
Das Timeline-Widget verwandelt eine Reihe von Daten in eine klare visuelle Sequenz, unabhängig davon, ob die Einträge aus Ihren Beiträgen oder Ihren eigenen benutzerdefinierten Elementen stammen. Wählen Sie einen Typ aus, wählen Sie vertikal, horizontal oder Karussell, und stylen Sie dann die Karten, Linien und Punkte so, dass sie zu Ihrer Seite passen. Zu verwandten Layout-Tools siehe die Changelog-widget und die Blog Beiträge WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Zeitleisten-Widget-Seite Für einen Vergleich von Custom und Post Timelines. Post Timeline braucht Pro, also überprüfen Sie die Preisseite Planungen.
