Wichtige Erkenntnisse
- Diese acht Elementor-Zeitleistenbeispiele sind alle mit einem Widget, dem Master Addons Timeline-Widget, erstellt und jedes verfügt über eine Live-Demoseite, die Sie öffnen können.
- Sechs der acht Zeitliniendesigns sind vertikal und zwei sind horizontale Karussells, was der Verwendung der Layouts entspricht: vertikal für lange Geschichten und horizontal für kurze Sequenzen.
- Die vertikalen Beispiele verwenden drei der vier Ausrichtungen des Timeline-Widgets: Mitte für alternierende Karten, Links für eine einseitige Liste und Rechts für eine gespiegelte einseitige Liste.
- Der größte visuelle Unterschied zwischen den acht Designs ergibt sich aus vier Stilabschnitten im Timeline-Widget: Karten, Daten, Linien und Punkte.
- Elementor und Elementor Pro enthalten kein Timeline-Widget, daher hängt jede Elementor-Timeline-Vorlage von der Installation eines Addons ab.
Beispiele für gute Elementor-Zeitleisten sind schwer zu finden, da es sich bei den meisten Demos um drei graue Karten mit Lorem-Ipsum handelt. Die acht folgenden Designs verwenden echte Geschichten: einen Orgelumbau, eine Brückenspannweite, eine klinische Studie, das erste Jahr einer Bäckerei Alle werden mit dem gebaut Master Addons Timeline Widget Und jeder hat eine Live-Demo.
Für jedes Beispiel bekommt man, wofür es gut ist, was das Design funktioniert, und die Einstellungen dahinter, so kann man es als Vorlage für die eigene Seite verwenden, wenn man vorher keine Timeline gebaut hat, dann fang mit an So erstellen Sie eine Zeitleiste in Elementor.
Inhaltsverzeichnis
Die acht Zeitleistenbeispiele im Überblick
Wählen Sie zuerst nach Layout, dann nach Stimmung Diese Tabelle zeigt, welches Elementor-Timeline-Design zu welchem Auftrag passt.
| # | Entwurf | Grundriss | Bilder | Gut für |
|---|---|---|---|---|
| 1 | Alternierender Wiederaufbau | Vertikal, Mitte | Nein | Projektprotokolle, Restaurierungen |
| 2 | Arch-Bildfeld | Vertikal, eine Seite | Ja, gewölbt | Saisonale oder jährliche Notizen |
| 3 | Richtig ausgerichtete Untersuchung | Vertikal, richtig | Nein | Chronologien, Falldateien |
| 4 | Horizontale Fertigung | Horizontalkarussell | Ja | Produktionsstufen |
| 5 | Split Card Woche | Vertikal, einzeilig | Nein | Wochenpläne |
| 6 | Alternierende Arch Media | Vertikal, Mitte | Ja, gewölbt | Marken - und Gründergeschichten |
| 7 | Light Card-Testversion | Vertikal, eine Seite | Nein | Meilensteine der Forschung und des Prozesses |
| 8 | Horizontales Jahr | Horizontalkarussell | Nein | Geschichte nach Jahr |
1. Zeitleiste für den abwechselnden Wiederaufbau
Dies ist die klassische vertikale Zeitleiste von Elementor: Karten wechseln sich links und rechts einer Mittellinie ab, mit einem nummerierten Punkt und einem Datum für jede Bühne. Das Demo erzählt die Geschichte einer über drei Jahre umgebauten Pfeifenorgel.
Verwenden Sie es für Restaurierungen, Bautagebücher oder jedes Projekt mit klaren Phasen. Die Zahlen geben die Reihenfolge an, noch bevor Sie ein Datum lesen. Verwenden Sie zum Erstellen das auf Mitte eingestellte Horizontal-Align-Set, eine dünne Linie, kleine Punkte und einen Kartenhintergrund, der nur geringfügig leichter als die Seite ist.
Öffnen Sie die Alternating Rebuild-Demo
2. Arch Bildfeld Zeitleiste
Eine einseitige Zeitleiste auf cremefarbenem Hintergrund, wobei jeder Eintrag neben dem Text ein bogenförmiges Foto enthält. Die Demo folgt zehn Wintern Hecken auf einer Farm.
Verwenden Sie es für Feldnotizen, saisonale Arbeiten, Reisetagebücher oder alles, was mit Fotos versehen ist. Der Bogenschnitt lässt gewöhnliche Fotos bewusst aussehen. Um es zu erstellen, verwenden Sie eine einseitige Ausrichtung und einen großen Radius an den oberen Ecken nur in Stil, Bildern, Randradius.
Öffnen Sie die Arch Image Field-Demo
3. Richtig ausgerichteter Untersuchungszeitplan
Hier verläuft die Linie am rechten Rand entlang und die Karten sitzen links davon, mit rechtsbündigem TextEs ist der Spiegel des üblichen LayoutsDie Demo ist die Chronologie einer zweijährigen Informationsanfrage.
Verwenden Sie es für Untersuchungen, Rechts - oder Compliance-Chronologien oder Fallstudien Eine ungewöhnliche Ausrichtung lässt eine reine Text-Zeitleiste so aussehen, als ob sie erstellt werden könnte. Verwenden Sie zum Erstellen den Horizontal-Align-Satz nach rechts, Punkte mit einem Rand und ohne Füllung.
Öffnen Sie die Demo der Right Aligned Investigation
4. Horizontaler Fertigungszeitplan
Das erste von zwei horizontalen Beispielen Monatsbeschriftungen sitzen über lindgrünen Punkten, und Bildkarten gleiten mit runden Pfeiltasten darunter Die Demo behandelt eine Brückenspannweite, die in fünf Stufen hergestellt wurde.
Verwenden Sie es für Fertigungs - oder Produktionsstufen, oder einen fünfstufigen Prozess Fotos tragen jede Stufe, und der Text bleibt auf drei Zeilen Um es zu erstellen, verwenden Sie Timeline Style gesetzt auf Horizontale Zeitleiste, Navigation gesetzt auf Pfeile, und ein Bild in jedem Artikel Medien-Tab.
Öffnen Sie die Demo zur horizontalen Fertigung. Die Karussellsteuerung wird in erläutert So erstellen Sie eine horizontale Zeitleiste in Elementor.
Zeitleiste der Split Card Week 5.
Eine einzige zentrierte Spalte mit weißen Karten Jede Karte ist in zwei Teile geteilt: ein schmaler Streifen mit der Woche links und dem Inhalt rechts Die Demo ist ein Museum, das Woche für Woche neu geplant wird.
Verwenden Sie es für Zeitpläne, Sprintpläne oder Kursumrisse. Die Etikettenspalte richtet sich auf der Seite nach oben, sodass Sie die Wochen scannen können, ohne die Karten lesen zu müssen. Um es zu erstellen, verwenden Sie auf jedem Element ein benutzerdefiniertes Etikett (“Woche 1 · 6. Januar”) anstelle eines Datums, leuchten Sie Karten mit weichem Schatten.
Öffnen Sie die Demo der Split Card Week
6. Alternierende Arch Media Zeitleiste
Wieder abwechselnd Karten, diesmal mit schwarz-weißen Fotos, die oben auf jeder Karte auf einen Bogen zugeschnitten sind Die Demo ist das erste Jahr einer Bäckerei, beginnend mit einem Ofen und einem Bankkredit.
Verwenden Sie es für Über Seiten, Gründergeschichten oder eine Elementor-Geschichte Zeitleiste für ein kleines Unternehmen Ein Akzent Farbe und monochrome Fotos machen Bilder in gemischter Qualität wie ein Set aussehen Um es zu bauen, verwenden Sie Horizontal Align set to Center, ein Bild pro Artikel, der gleiche Akzent in Dates and Points.
Öffnen Sie die Alternating Arch Media Demo
7. Zeitleiste für Light Card-Testspiele
Lichtkarten auf tiefviolettem Hintergrund, alle auf einer Seite der Linie, mit bernsteinfarbenen Spitzen Die Demo verfolgt eine klinische Studie von der Finanzierung bis zu einer Protokolländerung.
Verwenden Sie es für Forschungsmeilensteine, Finanzierungsrunden oder Genehmigungsprozesse. Der Kontrast zwischen Karte und Hintergrund macht die Arbeit, sodass die Karten keinen Rand oder Schatten benötigen. Verwenden Sie zum Erstellen den Horizontal Align-Satz nach links, einen hellen Kartenhintergrund, kleine gefüllte Punkte.
Öffnen Sie die Light Card Trial-Demo
8. Zeitleiste des horizontalen Jahres
Das zweite horizontale Design legt große Jahre über die Linie (1982, 1986, 1989) mit jeweils einer kurzen Karte darunter Die Demo ist sechzehn Jahre Leuchtturmautomatisierung, und sie koppelt die Zeitleiste mit einer Vorher-Nachher-Tabelle.
Verwenden Sie es für die Firmengeschichte nach Jahr, Produktgenerationen oder Jubiläen. Das Jahr ist der größte Text auf dem Bildschirm, nach dem die Leute in einer Geschichte suchen. Um es zu erstellen, verwenden Sie Horizontal Timeline, ein benutzerdefiniertes Etikett, das nur das Jahr enthält, und große Datums-Typografie in einer Akzentfarbe.
Öffnen Sie die Demo zum Horizontalen Jahr
Willst du alle sechzehn? Der Demo-Viewer auf der Elementor-Zeitleisten-Widget Seite enthält diese acht plus acht weitere, darunter ein Changelog, eine Roadmap und eine Veranstaltungsagenda.
Wie man diese als Vorlagen verwendet
Sie können jedes davon neu aufbauen Elementer Zeitleisten Vorlagen in ein paar Minuten, denn die Unterschiede liegen alle in den Einstellungen Für eine ganze Seite, um eine aufzusetzen, siehe die Elementor-Seitenvorlagen.
- Fügen Sie das Timeline-Widget hinzu und geben Sie Ihre eigenen Elemente ein: ein Datum oder Etikett, eine Überschrift, eine kurze Beschreibung und ein optionales Bild.
- Wählen Sie das Layout. Der Zeitleistenstil wählt vertikal oder horizontal aus, und der Stil, das Layout und die horizontalen Ausrichtungsoptionen links, in der Mitte, übereinander oder rechts.
- Passen Sie die Farben an Stellen Sie zuerst den Seiten - oder Containerhintergrund ein, dann Karten, Termine, Linie und Punkte.
- Überprüfen Sie den fokussierten Zustand. Jedes Beispiel gibt dem Eintrag im Blickfeld eine etwas andere Karte oder einen anderen Punkt, sodass der Leser seinen Platz behält.
- Schau es dir auf einem Telefon an Vertikale Zeitleisten bewegen sich auf kleinen Bildschirmen auf eine Seite, und horizontale zeigen weniger Karten.
Das Zeigen von Beiträgen auf einer Zeitleiste hat eine eigene Anleitung: So zeigen Sie Blogbeiträge auf einer Zeitleiste in Elementor an.
Lesen Sie auch: 20 Elementor-Slider-Vorlagen, die einen Zeitleisten-Slider mit realem Abstand zwischen den Jahren enthalten.
Häufig gestellte Fragen
Kommt Elementor mit Timeline-Vorlagen?
Nr. Elementor und Elementor Pro haben kein Timeline-Widget, daher hat ihre Template-Bibliothek auch keine echte Timeline Zeitleisten für Elementor verlassen sich immer auf ein Addon-Widget oder auf benutzerdefiniertes CSS.
Welches Timeline-Layout eignet sich am besten für eine Firmengeschichte?
Eine abwechselnde vertikale Zeitleiste passt zu einer langen Geschichte mit Fotos, wie zum Beispiel 6. Für eine kurze Geschichte mit fünf oder sechs Hauptjahren nimmt eine horizontale Jahreszeitleiste wie Beispiel 8 weniger Platz ein.
Kann ich diese Timeline-Designs mit einem beliebigen Thema verwenden?
Ja. Die Designs werden im Elementor-Editor mit den eigenen Stilsteuerelementen des Timeline-Widgets erstellt, sind also nicht von einem Theme abhängig Schriftarten folgen der globalen Typografie Ihrer Seite, es sei denn, Sie setzen sie im Widget.
Wie viele Artikel sollte eine Timeline haben?
Vier bis acht ist ein komfortabler Bereich Unter vier ist eine einfache Liste klarer Über zehn teilen Sie die Zeitleiste nach Jahr oder Jahrzehnt auf oder kürzen Sie jede Karte auf eine Überschrift und eine Zeile.
Letzte Gedanken
Diese acht Elementor-Zeitleisten-Beispiele decken die Layouts ab, die die meisten Seiten benötigen: zwei abwechselnde Designs, drei einseitige, ein einspaltiger Zeitplan und zwei horizontale Karussells Sie stammen alle von einem Widget, und die Unterschiede bestehen aus vier Stilabschnitten: Karten, Daten, Linie und Punkte.
Öffnen Sie die Demos, wählen Sie die nächstgelegene aus und erstellen Sie Ihre Version mit der Zeitleisten-widget.
Verwandte Lektüre
