Wichtige Erkenntnisse
- Elementor und Elementor Pro haben kein Timeline-Widget, daher benötigt eine horizontale Elementor-Timeline ein Addon-Widget oder eine handgefertigte Reihe von Containern mit benutzerdefiniertem CSS.
- Das Master Addons Timeline Widget wechselt von vertikal in horizontal mit einem Steuerelement, Timeline Style, das sich in der Inhaltsregisterkarte unter dem Abschnitt Timeline befindet.
- Eine horizontale Zeitleiste im Master Addons-Widget ist ein Karussell und die Navigationskontrolle bietet sechs Optionen: Pfeile und Punkte, Pfeile und Brüche, Pfeile, Punkte, Fortschritt und keine.
- Zu den Karusselleinstellungen im Timeline-Widget gehören ein Karussell- oder Coverflow-Layout, Autoplay mit einer Standardgeschwindigkeit von 5000 ms, Pause im Mauszeiger, Folien zum Scrollen, Mittelschlitten und Schleife.
- Das horizontale Layout funktioniert nur mit benutzerdefinierten Zeitleistenelementen, da eine aus Blogbeiträgen erstellte Beitragszeitleiste vertikal bleibt.
Eine horizontale Elementor-Zeitleiste legt Ihre Daten von links nach rechts dar, mit einem Punkt auf der Linie über jeder Karte und Pfeilen, die sich entlang dieser bewegen. Elementer Hat kein eigenes Timeline-Widget, daher verwendet diese Anleitung die Zeitleisten-Widget in Master-Addons, wobei das horizontale Layout ein einzelner Dropdown ist.
Die sechs Schritte darunter gehen von einer gewöhnlichen vertikalen Zeitleiste aus und enden mit einem funktionierenden Karussell, jeder Screenshot stammt von Elementor 4.3 mit dem Widget auf einer Testseite Wenn Sie noch keine Zeitleiste platziert haben, wird die Vollständiges Timeline-Tutorial Erst einmal die Grundlagen behandelt.
Inhaltsverzeichnis
Wenn eine horizontale Zeitleiste die bessere Wahl ist
Verwenden Sie eine horizontale Zeitleiste, wenn Sie eine kurze Reihe von Schritten und begrenzten vertikalen Raum haben Eine vertikale Zeitleiste mit drei Karten kann mehr als einen vollständigen Bildschirm des Scrollens benötigen Die gleichen drei Karten nebeneinander passen in einer Reihe, weshalb horizontale Layouts auf Homepages und Landingpages angezeigt werden, während vertikale lange Seiten über Seiten.
| Faktor | Horizontale Zeitleiste | Vertikale Zeitleiste |
|---|---|---|
| Beste Länge | 3 bis 8 Artikel | Beliebige Länge |
| Platz, den es braucht | Eine Reihe | Wächst mit jedem Artikel |
| Wie sich Besucher bewegen | Pfeile, Punkte oder Wischen | Scrollen der Seite |
| Typische Verwendung | Prozessschritte, Produkt-Roadmap, jährliche Highlights | Firmengeschichte, Changelog, lange Geschichte |
| Quelle in Master Addons | Benutzerdefinierte Zeitleistenelemente | Benutzerdefinierte Artikel oder Blogbeiträge |
Eine horizontale Zeitleiste ist eine Art Karussell, wenn Sie unsicher sind, welcher der beiden Begriffe zu Ihrem Design passt, ist Karussell vs. Schieber in Elementor Unterschied erklärt.
So erstellen Sie eine horizontale Zeitleiste in Elementor
Sie benötigen Elementor und Master Addons installiert, dann sechs Schritte im Editor Nichts unten braucht benutzerdefiniertes CSS.
Schritt 1: Fügen Sie das Timeline-Widget hinzu
Öffnen Sie Ihre Seite mit Elementor, durchsuchen Sie das Widget-Panel nach Zeitleiste Und auf die Seite ziehen Es kommt als vertikale Zeitleiste mit drei Beispiel-Items anLassen Zeitleisten-typ Auf Benutzerdefinierte Zeitleiste(denn das horizontale Layout wird nur für benutzerdefinierte Artikel angeboten.
Schritt 2: Wechseln Sie den Zeitleistenstil in den horizontalen
Öffnen Sie im Reiter Inhalt die Zeitleiste Abschnitt und Änderung Zeitleistenstil Von Vertical Timeline bis Horizontale Zeitleiste. Die Karten ziehen in eine Reihe, die Linie verläuft über die Oberseite, und jeder Punkt sitzt über seiner Karte mit dem Datum darüber Zwei neue Abschnitte erscheinen im Panel: Navigation und Karusselleinstellungen.
Schritt 3: Bearbeiten Sie die Elemente
Klicken Sie auf eine Zeile unter Gegenstände Um es zu öffnen Jeder Artikel hat drei kleine Registerkarten: Inhalt, Medien und Stil.
- zeugen von Entscheidet, was über dem Punkt steht: ein Datum oder ein benutzerdefiniertes Etikett wie “Phase 1”.
- Datum und Datumsformat Datum und Schreibweise festlegen.
- zusammenfügen Macht die ganze Karte anklickbar.
- Der Inhaltseditor hält die Überschrift und die Beschreibung, es gibt kein eigenes Titelfeld, daher ist die erste Zeile die Überschrift.
- Die Medien Tab fügt der Karte ein Bild hinzu.
Breite Bilder funktionieren hier besser als große Drei große Fotos schieben den Text weit nach unten auf den Bildschirm.
Schritt 4: Wählen Sie die Navigation
Öffnen Sie die Schifffahrt Abschnitt und wählen Sie aus, wie sich Besucher durch die Zeitleiste bewegen Der Navigation-Dropdown bietet sechs Optionen.
| Navigationsmöglichkeit | Was Besucher sehen | Gut für |
|---|---|---|
| Pfeile und Punkte | Vorherige und nächste Pfeile plus ein Punkt pro Folie | Die meisten Zeitleisten |
| Pfeile und Bruch | Pfeile plus Zähler wie 2 / 6 | Lange Zeitlinien, in denen die Punkte überfüllt sind |
| Pfeile | Nur Pfeile | Saubere Layouts |
| Punkte | Nur Punkte | Touch-first-designs |
| Fortschritte | Eine Bar, die sich füllt, während das Karussell voranschreitet | Prozessschritte |
| Keine | Nur wischen oder automatisch abspielen | Zierleisten |
Unterhalb des Dropdowns können Sie einschalten Dynamische Kugeln?Fügen Sie eine Bildlaufleiste hinzu Scrollbar anzeigen?Stellen Sie die Position ein und tauschen Sie das nächste und das vorherige Symbol aus. Pfeil auf Mobilgeräten ausblenden? Standardmäßig aktiviert ist, sodass Telefonbesucher Wisch und Punkte haben.
Schritt 5: Stellen Sie das Karussellverhalten ein
Offen Karusselleinstellungen Zeitleiste zu steuern, wie sich diese bewegt.
- Grundriss: Karussell für eine flache Reihe, oder Coverflow für einen 3 D-Effekt mit Dreh, Dehn - und Tiefensteuerung.
- Autowiese und Autoplay-geschwindigkeit: die Standardgeschwindigkeit beträgt 5000 ms, also alle fünf Sekunden eine neue Folie.
- Halten Sie bei Hover an: Stoppt die automatische Wiedergabe, während sich der Zeiger über der Zeitleiste befindet.
- Folien zum Scrollen: wie viele Karten sich pro Klick bewegen, pro Gerät einstellen.
- Mittelrutsche, Schnapp Cursor und Freier Modus ziehen Für das Gefühl der Schlepp.
- Schleife: kehrt zum ersten Element nach dem letzten zurück.
- Animationsgeschwindigkeit (ms): wie lange dauert jeder Folienübergang, standardmäßig 500.
Für eine echte Zeitleiste überlege dir zweimal, ob du autoplay hast Termine haben eine Reihenfolge, und eine Karte, die wegrutscht, während jemand sie liest, nervt Autoplay mit Pause auf Hover ist ein fairer Mittelweg.
Schritt 6: Die Pfeile, Punkte und Karten stylen
Wechseln Sie zum Tab Stil Es hat zehn Abschnitte: Karussell-Artikel, Layout, Bilder, Beiträge, Karten, Pfeil, Termine, Linie, Punkte und Navigation.
- Karten: Polsterung, Randradius, Titel - und Inhaltsfarben, dazu ein separater Look für die fokussierte Karte.
- Termine: Typografie und Farbe des Datums oder Etiketts über jedem Punkt.
- Linie: die Spurfarbe und - dicke.
- Punkte: ein einfacher Punkt, ein Symbol oder ein Bild mit Größe und Farben.
- Schifffahrt: Farben und Größen für Pfeile, Punkte und die Bildlaufleiste.
Veröffentlichen Sie die Seite und testen Sie sie auf einem Telefon Karten pro Reihe fallen auf kleineren Bildschirmen, also überprüfen Sie, ob der Text noch passt.
Möchten Sie auch das vertikale Layout? Die Elementor-Zeitleisten-Widget Seite listet jede Layout, Ausrichtung und Stiloption an einer Stelle auf.
Video-tutorial
Dieses Video erstellt eine Zeitleiste aus einer leeren Seite und schaltet sie um 3:44 Uhr auf das horizontale Karussell um.
Vier Dinge, die schiefgehen
Die meisten Probleme mit einer horizontalen Zeitleiste entstehen dadurch, dass man sie wie eine vertikale behandelt.
- Zu viele Artikel. Nach etwa acht Jahren hören die Besucher auf zu klicken. Verwenden Sie eine vertikale Zeitleiste oder teilen Sie die Geschichte nach Jahren auf.
- Ungleiche Kartenhöhen. Eine lange Beschreibung spannt die Reihe Trimmen Sie den Text oder schalten Sie Auto Height in Karusselleinstellungen ein.
- Pfeile über die erste Karte. Wenn die Pfeile oben auf dem Inhalt sitzen, ändern Sie die Position im Abschnitt Navigation.
- Erwartet Blogbeiträge. Der Typ Post Timeline ist vertikal Für Beiträge in einer Reihe verwenden Sie die Blog-widget Im Karussellmodus.
Lesen Sie auch: 20 Elementor-Slider-Vorlagen, die ein Zeitleisten-Slider-Design enthalten.
Häufig gestellte Fragen
Kann ich eine horizontale Zeitleiste in Elementor ohne Elementor Pro erstellen?
Ja. Elementor Pro enthält auch kein Timeline-Widget, daher macht Pro hier keinen Unterschied Fügen Sie ein Timeline-Widget aus einem Addon wie Master-Addons hinzu, setzen Sie Timeline Style auf Horizontale Timeline, und die Elemente werden zu einem Karussell.
Wie füge ich Pfeile zu einer horizontalen Zeitleiste in Elementor hinzu?
Öffnen Sie den Abschnitt Navigation in der Registerkarte Inhalt und wählen Sie Pfeile und Punkte, Pfeile und Bruch oder Pfeile Sie können dann die Pfeilposition festlegen und das Symbol Weiter und Vorherige aus demselben Abschnitt ersetzen.
Kann eine horizontale Zeitleiste automatisch abgespielt werden?
Ja. Autoplay unter Karusselleinstellungen einschalten und Autoplay-Geschwindigkeit in Millisekunden einstellen Standardmäßig ist 5000, das sind fünf Sekunden pro Folie Pause bei Hover stoppt es, während ein Besucher liest.
Ist eine horizontale Zeitleiste responsiv?
Ja. Es ist ein Karussell, also zeigt es weniger Karten auf Tablets und Telefonen und Besucher wischen, um sich zu bewegen Folien zum Scrollen hat separate Werte pro Gerät.
Kann ich Blogbeiträge in einer horizontalen Zeitleiste anzeigen?
Nicht mit dem Post Timeline-Typ, der nur vertikal ist Fügen Sie die Beiträge von Hand als benutzerdefinierte Timeline-Elemente hinzu oder verwenden Sie ein Postkarussell.
Letzte Gedanken
Eine horizontale Elementor-Zeitleiste umfasst eine Einstellung und zwei Abschnitte: Zeitleistenstil auf horizontale Zeitleiste eingestellt, dann Navigation mit ihren sechs Optionen und Karusselleinstellungen für Autoplay, Schleife und Geschwindigkeit. Halten Sie es auf drei bis acht kurze Karten und testen Sie es auf einem Telefon.
Die Zeitleisten-Widget-Seite Live-Demos beider Layouts hat, darunter ein Horizontale Roadmap-Demo.
Verwandte Lektüre
2 Antworten
Der Punkt, dass das horizontale Layout nur mit benutzerdefinierten Timeline-Elementen funktioniert, nicht mit der Post-Timeline, ist leicht zu übersehen und würde einen Build spät brechen. Bevor Sie den Timeline-Stil ändern, bestätigen Sie, dass jedes Element ein benutzerdefiniertes Element ist, da Blog-postgesteuerte Timelines vertikal bleiben. Eine praktische Optimierung: Stellen Sie die Navigation auf Pfeile und Punkte ein, testen Sie dann auf einer schmalen Telefonbreite, da die Karussellpfeile die Karten durchdrücken können und die Punkte das Wischen für die Leser klarer machen.
Vielen Dank, dass Sie diese hilfreichen Tipps geteilt haben! ' Sie haben völlig Recht, dass die Überprüfung des Timeline-Elementtyps und das Testen des Layouts auf kleineren Bildschirmen dazu beitragen können, unerwartete Probleme zu vermeiden. Wir freuen uns, dass Sie darauf hinweisen und anderen Master Addons-Benutzern dabei helfen, bessere, reaktionsschnellere Zeitleisten zu erstellen Danke, dass Sie Teil unserer Community sind!