Eine Wand aus Daten und Absätzen klebt selten. Legen Sie dieselben Ereignisse jedoch auf eine Zeitleiste, mit einer zentralen Linie, datierten Markierungen und aufgeräumten Karten, und die Geschichte beginnt sich selbst zu lesen. Meilensteine des Unternehmens funktionieren auf diese Weise. Das gilt auch für eine Produkt-Roadmap, eine persönliche Reise oder Ihre neuesten Blog-Beiträge in der Reihenfolge Datum Die Sequenz erledigt das schwere Heben.
Und man braucht nicht für jeden Stil einen Custom Code oder ein anderes Plugin Die Master Addons Zeitleisten-widget Handelt das alles von einer Stelle aus, wir bauen eine vertikale Zeitleiste, drehen sie in die Horizontale, ziehen automatisch Pfosten ein, stylen das Ganze dann, wenn man weiß, wo die Einstellungen wohnen, sind es ein paar Minuten Arbeit.
Was das Elementor-Zeitleisten-Widget tut
Eine Zeitleiste ist eine chronologische Liste, die in ein visuelles Layout umgewandelt wurde Jeder Eintrag sitzt auf einer zentralen Linie, markiert durch einen Punkt (einen Punkt oder ein Symbol), mit einer Karte, die das Datum, den Titel und Ihren Inhalt enthält Das Master Addons Timeline Widget gibt Ihnen zwei Möglichkeiten, diese Einträge zu füllen und zwei Möglichkeiten, sie zu legen.
Die beiden Zeitleistenarten Custom Timeline und Post Timeline sind Custom bedeutet, dass Sie jeden Eintrag von Hand eingeben, was zu festen Inhalten wie einer Firmengeschichte oder einer Roadmap passt Post Timeline zieht Ihre WordPress-Beiträge automatisch ein, sodass ein neuer Beitrag zu einem neuen Timeline-Eintrag ohne manuelle Arbeit wird.
Die beiden Zeitleistenstile Vertikal und horizontal sind Vertikale Stapel Einträge in einem abwechselnden Links/Rechts-Muster die Seite runter Horizontal legt sie nebeneinander als scrollbares Karussell mit Navigationspfeilen aus Du drehst zwischen all diesen von einem einzigen Dropdown, was der Grund ist, dass dieses Widget neben dem anderen in meinem Kit bleibt 80+ Widgets und Erweiterungen In Master Addons.
Bevor Sie starten: Installieren Sie Master-Add-ons
Das Timeline-Widget wird mit den kostenlosen Master-Addons für Elementor ausgeliefert. Benutzerdefinierte Zeitleiste und beide Layoutstile sind kostenlos. Post Timeline, weiter unten behandelt, benötigt Master-Addons Pro.
- Gehen Sie in Ihrem WordPress-Dashboard auf Plugins > Neues hinzufügen.
- Suchen Sie nach “Master Addons for Elementor” und klicken Sie auf Jetzt installierenDann Aktivieren. Kann man auch Master Addons herunterladen Direkt von WordPress.org.
- Öffnen Sie mit Elementor eine beliebige Seite und suchen Sie im Widget-Panel nach “Timeline.”
Widget nach Aktivierung fehlt? überprüfen, dass es unter eingeschaltet ist Master-Addons > Elemente. Dort kann jedes Widget umgeschaltet werden, und das ist ein Teil davon, wie das Plugin leicht bleibt Das Laden nur der tatsächlich verwendeten Widgets ist eine der einfacheren Möglichkeiten Beschleunigen Sie Ihre Elementor-Site.
So fügen Sie eine Zeitleiste in Elementor hinzu (Schritt für Schritt)
Wir starten mit einer benutzerdefinierten vertikalen Zeitleiste, am schnellsten geht es mit dem Kopf um, und alles andere zweigt davon ab.
Schritt 1: Ziehen Sie das Timeline-Widget auf die Seite
Bearbeiten Sie Ihre Seite mit Elementor, suchen Sie im Widget-Panel nach “Timeline”, und ziehen Sie sie in einen Abschnitt, Sie fällt mit drei bereits gefüllten Beispieleinträgen ein, sodass Sie statt eines leeren Kästchens sofort eine funktionierende Zeitleiste sehenKleine Sache, aber es erspart Ihnen das Erraten, was jedes Feld macht.
Schritt 2: Legen Sie den Timeline-Typ und -Stil fest
In der Inhalt Tab, öffnen Sie den Abschnitt Zeitleiste Zwei Dropdowns erledigen hier die meiste Arbeit: Zeitleisten-typ (Zoll oder Post) und Zeitleistenstil (Vertikal oder Horizontal).Typ auf “Benutzerdefinierte Zeitleiste” und Stil auf “Vertikale Zeitleiste” vorerst lassen.
Schritt 3: Bearbeiten Sie Ihre Zeitleistenelemente
Unter Gegenstände2, jeder Eintrag wird als Repeater-Zeile angezeigt (die Samples sind datiert auf den 2. Februar 2014, den 10. Mai 2015, und den 21. Juni 2016) Klicken Sie auf eine Zeile, um sie zu erweitern und das Datum (oder eine benutzerdefinierte Beschriftung), den Inhalt, das Bild und den Link zu bearbeitenEs gibt kein separates Titelfeld, also fügen Sie eine Überschrift oben im Inhaltsfeld hinzu. Artikel hinzufügen Erstellt einen neuen Eintrag, das doppelte Symbol kopiert einen vorhandenen und Sie ordnen ihn durch Ziehen der Zeilen neu an.
Das ist eine komplette benutzerdefinierte Zeitleiste Ein paar Klicks von “Element hinzufügen,” jeweils ein Datum und ein Satz, und Sie haben eine Firmengeschichte oder eine Projekt-Roadmap dokumentiert.
Benutzerdefinierte Zeitleiste vs. Post-Zeitleiste
Beim Dropdown Timeline Type verdient dieses Widget seinen Platz Wechseln Sie von Benutzerdefiniert nach Post-zeitleiste (eine Pro-Funktion) und das gesamte Panel ändert sich: Anstatt Elemente von Hand zu bearbeiten, teilen Sie dem Widget mit, welche Beiträge angezeigt werden sollen, und es erstellt die Zeitleiste aus Ihren Inhalten.
Greifen nach Benutzerdefinierte Zeitleiste Wenn der Inhalt festgelegt und redaktionell: ist
- Unternehmensgeschichte und Gründungsmeilensteine
- Produkt - oder Feature-Roadmaps
- Eine Biografie oder Karrierereise
- Veranstaltungspläne und Programmpläne
Greifen nach Post-zeitleiste Wenn der Inhalt dein Blog ist und sich aktuell halten soll:
- Ein chronologisches Archiv von Artikeln
- Ein News - oder Ankündigungsfeed
- Fallstudien oder Portfolioeinträge als Beiträge veröffentlicht
Erstellen einer Post-Zeitleiste aus Ihrem Blog
Setzen Sie den Zeitleisten-Typ auf Post-zeitleiste und das Content-Panel füllt sich mit Post-Controls. Es ist der gleiche dynamische Ansatz, den Sie verwenden würden Erstellen Sie eine Blogseite in Elementor„Nur es erscheint als Zeitleiste und nicht als Raster.
Die wissenswerten Einstellungen:
- Titel / Titel anzeigen Link: Beitragstitel anzeigen und optional mit dem Beitrag verknüpfen.
- Überschrift-Tag: Legen Sie das HTML-Tag des Titels (H2, H3 usw.) fest, damit Ihre Überschriftenstruktur für SEO sauber bleibt.
- Bild- und Bildauflösung anzeigen: Ziehen Sie das vorgestellte Bild als Miniaturbild in der von Ihnen gewählten Größe.
- Links aktivieren: ganze Karten anklickbar machen, wenn dein Postinhalt schon Links drin hat, lass das weg, denn Links innerhalb von Links sind nicht erlaubt.
- Datumsformat und Zeitformat: Kontrollieren Sie, wie das Datum jedes Eintrags in der Zeile angezeigt wird.
- Beiträge pro Seite, Offset und Postbestellung: Entscheiden Sie, wie viele Beiträge angezeigt werden, wo die Liste beginnt und ob der Neueste oder der Älteste an erster Stelle steht.
Sie können Beiträge auch nach Kategorie, Tag oder Autor filtern und bestimmte Beiträge ausschließen. Eine Zeitleiste zeigt möglicherweise „Alles in Nachrichten“eine andere ein handverlesenes Set. Da es direkt aus Ihren Beiträgen liest, befindet es sich gut in einem Themenbauer Archiv oder einzelne Vorlage, wo es jedes Mal aktualisiert wird, wenn Sie auf publish treffen.
Wechseln zu einer horizontalen Zeitleiste
Veränderung Zeitleistenstil Zu “Horizontale Zeitleiste” und das Layout dreht sich Diese Option ist für Benutzerdefinierte Zeitleisten, da Post-Zeitleisten vertikal bleiben Einträge sitzen nun nebeneinander entlang einer horizontalen Mittellinie, jeweils mit ihrer Punktmarkierung über der Karte, und Pfeile links/rechts lassen die Besucher wie ein Karussell durch sie hindurch scrollen.
Horizontal verdient seinen Keep, wenn man eine Handvoll starker Meilensteine hat und diese über dem Falz haben will, sagt eine Produktstartsequenz auf einer Landingpage Vertical ist die sicherere Wahl für längere Listen oder textlastige Einträge, da sich das Lesen von oben nach unten auf einem Telefon natürlich anfühlt Eines bin ich schon angefahren: Ein horizontales Karussell und ein vertikaler Stapel verhalten sich auf kleinen Bildschirmen nicht gleich, also schauen Sie sich beides vor Reaktionshaltepunkte Bevor Sie versenden.
Styling der Timeline
Die Stil Tab hat einen Abschnitt für jeden Teil der Zeitleiste: Layout, Karten, Pfeil, Daten, Linie, Punkte, Navigation und Muster Hier verwandelt sich ein generisches Muster in etwas, das zu Ihrer Marke passt.
Zentrale Linie und Punkte
Unter LinieFarbe und Dicke der Mittellinie einstellen. Unter PunkteEntscheiden Sie, ob jede Markierung ein einfacher Punkt oder ein ist Symbol, dann wählen Sie das Symbol, seine Größe, die Hintergrundfarbe, und die Punktfarbe Der Icon-Picker öffnet eine vollständige Bibliothek, so dass ein Kalender für Veranstaltungen oder ein Flag für Meilensteine einen Klick entfernt ist.
Standard-, Schweb- und fokussierte Zustände
Der Punktes-Abschnitt trägt drei Zustandsregisterkarten: Standard, Schweben, und Fokussiert. Standard ist der Ruhe-Look, Hover ist der Mouse-Over-Look, und Focused hebt den aktiven Gegenstand hervor, dass letzterer am wichtigsten ist in einem horizontalen Karussell, wo es den Besuchern sagt, welcher Eintrag gerade zentriert ist Das Styling aller drei ist es, was die Timeline interaktiv statt flach wirken lässt.
Karten, Daten und Typografie
Die Karten Abschnitt kontrolliert den Hintergrund, die Grenze, den Schatten und den Abstand jedes Eintrags. Termine Plus die Einstellungen für Titel und Inhaltstypografie lassen Sie die Schriftarten Ihrer Seite abgleichen Halten Sie die Kartenauffüllung konsistent und Ihren Kontrast lesbar, denn eine Zeitleiste lebt oder stirbt daran, ob Menschen sie scannen können.
Praktische Anwendungsfälle
Ein paar Möglichkeiten, wie ich das Timeline-Widget in echte Projekte einbeziehe:
- Über Seiten: Eine vertikale benutzerdefinierte Zeitleiste der Meilensteine des Unternehmens, gepaart mit einem Gegen-Up-Widget Für Schlagzeilenstatistiken wie Geschäftsjahre.
- Produktseiten: Eine horizontale Roadmap, die zeigt, was versendet wurde und was als nächstes kommt.
- Blog und News: Eine Post-Timeline als chronologisches Archiv, neben einem sitzend Changelog-widget Freigabescheine.
- Portfolios: Fallstudien als datierte Einträge mit vorgestellten Bildern.
Tipps für einen besseren Zeitplan
- Eintragsinhalt kurz halten Zwei oder drei Sätze pro Karte lesen sich weit besser als ein vollständiger Absatz.
- Verwenden Sie Symbole, die etwas bedeuten: einen Kalender für Termine, eine Flagge für Starts, einen Stern für Auszeichnungen.
- Gehen Sie für lange Geschichten vertikal. Horizontales Scrollen wird nach fünf oder sechs Elementen dünn.
- Legen Sie einen sinnvollen Heading Tag auf Post-Timelines fest, damit die Titel nicht mit dem H1 Ihrer Seite konkurrieren.
- Überprüfen Sie das Ergebnis mobil und gegen Ihre SEO-einrichtungDa die Bilder angezeigt wurden und die Überschrift sowohl die Feed-Suche als auch die Überschriftreihenfolge anordnet.
Für jedes Steuerelement und den ungeraden Kantenfall gilt die Zeitleisten-Widget-Dokumentation Tiefer geht, als ich hier kann Und wenn Sie Premium-Layouts, White-Label, und den Rest der Bibliothek, wollen Master Addons Pro Schaltet sie frei.
Häufig gestellte Fragen
Ist das Elementor Timeline Widget kostenlos?
Ja. Das Master Addons Timeline Widget ist Teil des kostenlosen Plugins, einschließlich benutzerdefinierter Timelines in vertikalen und horizontalen Stilen Der Post Timeline Typ, der Ihre Blogbeiträge einzieht, benötigt Master Addons Pro.
Kann ich eine Timeline in Elementor ohne Plugin erstellen?
Nicht einfach. Der Kern von Elementor hat kein Zeitleistenelement, also würden Sie eines von Hand mit Spalten, Trennwänden und benutzerdefiniertem CSS erstellen. Ein Widget wie Master Addons Timeline verwaltet die zentrale Zeile, Markierungen, Wechselkarten und Reaktionsfähigkeit mit wenigen Klicks für Sie.
Was ist der Unterschied zwischen einer benutzerdefinierten und einer Post-Timeline?
Eine benutzerdefinierte Timeline verwendet Einträge, die Sie von Hand eingeben, ideal für feste Inhalte wie die Unternehmensgeschichte. Eine Post-Timeline zieht Ihre WordPress-Beiträge automatisch, sodass aus neuen Beiträgen neue Einträge werden. Wählen Sie benutzerdefiniert für redaktionelle Inhalte und posten Sie für alles, was sich selbst aktualisieren sollte.
Kann ich eine horizontale Zeitleiste in Elementor erstellen?
Ja. Legen Sie im Inhaltsregister des Timeline-Widgets den Timeline-Stil auf “Horizontale Zeitleiste” fest. Einträge werden nebeneinander entlang einer horizontalen Linie mit Navigationspfeilen angeordnet und funktionieren wie ein Karussell. Sie können jederzeit vom selben Dropdown zurück in die Vertikale wechseln.
Wird die Zeitleiste auf dem Handy gut aussehen?
Das Widget ist responsive, und Sie können Größen pro Gerät einstellen Vertikale Zeitleisten passen sich am natürlichsten an kleine Bildschirme an, wenn Sie horizontal verwenden, sehen Sie sich das auf Mobilgeräten an und passen Sie Ihre Haltepunkte an, da sich Side-by-Side-Karten anders verhalten als ein Top-to-Bottom-Stack.
Einwickelnd
So erstellen Sie also eine Zeitleiste in Elementor Ende an Ende: Ziehen Sie das Widget hinein, wählen Sie Ihren Typ und Stil aus, füllen oder filtern Sie die Einträge und stylen Sie dann die Linie, Punkte und Karten so, dass sie zu Ihrer Marke passen Benutzerdefinierte Zeitleisten halten Ihre festen Geschichten fest Die Zeitleisten des Beitrags halten sich selbst auf dem neuesten Stand Der vertikale und horizontale Schalter deckt sowohl lange Historien als auch enge Roadmaps ab.
Installieren Sie Master-Addons, legen Sie ein Timeline-Widget auf Ihre nächste About- oder Produktseite und verwandeln Sie eine Liste von Daten in etwas, das die Leute tatsächlich lesen.
Verwandte Lektüre: Erstellen Sie eine Blogseite mit Elementor · So beschleunigen Sie Elementor-Websites · Durchsuchen Sie alle Master Addons Widgets
