Eine Zeitleiste macht aus einer Liste von Terminen etwas, das die Leute tatsächlich lesen: die Firmengeschichte, eine Produkt-Roadmap, ein Projektplan, ein Schritt-für-Schritt-Prozess Die Zeitleiste 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 einem Datum, einem Titel, etwas Text und einem optionalen Bild, und die Zeile verläuft zwischen den Karten mit einer Punktmarkierung für jede.
Es gibt zwei Möglichkeiten, es zu füllen. Post-zeitleiste Zieht Ihre WordPress-Beiträge in der Reihenfolge ihres Datums, sodass sich die Zeitleiste während der Veröffentlichung 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.
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 #
Set Zeitleisten-typ zu Post-zeitleiste 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: Beiträge pro Seite, Post Order und Offset Post Count steuern, wie viele Beiträge in welcher Reihenfolge erscheinen.
Benutzerdefinierte Zeitleiste: Fügen Sie Ihre eigenen Artikel hinzu #
Set Zeitleisten-typ zu Benutzerdefinierte Zeitleiste und ein Gegenstände Repeater erscheint Jedes Element ist ein Eintrag auf der Timeline, mit eigenem Datum, Titel, Inhalt und Bild 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 Datum, Überschrift, Beschreibungstext und ein optionales Bild für die Karte festzulegen.
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, eine Bildlaufleiste oder keine.
- 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.
- Pfeil auf Mobilgeräten ausblenden: Kleiner Bildschirme aufräumen, indem man die Pfeile dort versteckt.
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, Titel, Text und optionalem Bild Sie können es aus Ihren Blogbeiträgen oder benutzerdefinierten Elementen erstellen und als vertikales, horizontales oder Karusselllayout anzeigen.
Kann die Timeline Einträge aus meinen Blogbeiträgen ziehen?
Ja. 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, wenn 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 die benutzerdefinierte Zeitleiste und verwenden Sie den Items-Repeater, um Einträge von Hand hinzuzufügen. Jedes Element hat sein eigenes Datum, seinen eigenen Titel, seinen eigenen Inhalt und sein eigenes Bild, was ideal für die Unternehmensgeschichte, 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& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
