Tutorial

So fügst du eine Timeline (Zeitstrahl) zu deiner Wix-Website hinzu

Melden

Hier ist ein ausführliches Tutorial, wie du eine Timeline (einen Zeitstrahl) auf deiner Wix-Website erstellen kannst.

Ein Zeitstrahl ist ein hervorragendes Mittel, um die Unternehmensgeschichte, Projektphasen oder einen Veranstaltungsablauf visuell ansprechend darzustellen. In Wix gibt es drei gängige Wege, dies umzusetzen.

Methode 1: Die einfachste Lösung (Wix Listen & Repeater)

Wix bietet vorgefertigte Listen-Layouts, die sich perfekt als Timeline eignen.

  1. Editor öffnen: Logge dich in dein Wix-Konto ein und öffne den Editor deiner Website.
  2. Element hinzufügen: Klicke auf das Plus-Symbol (+) in der linken Menüleiste („Hinzufügen“).
  3. Listen auswählen: Gehe zum Punkt „Liste“ oder „Repeater“.
  4. Layout wählen: Suche nach einem vertikalen Layout, das wie eine Liste aussieht. Oft gibt es unter dem Punkt „Über uns“ oder „Team“ Designs, die bereits wie eine Timeline aufgebaut sind.
  5. Anpassen:
    • Klicke auf die einzelnen Elemente, um Bilder und Texte auszutauschen.
    • Nutze die Funktion „Layout“, um den Abstand zwischen den Punkten anzupassen.
    • Füge eine vertikale Linie (unter Deko -> Linien) hinzu, um die einzelnen Listenpunkte optisch zu verbinden.

Methode 2: Professionelle Apps (Wix App Market)

Wenn du eine interaktive oder besonders komplexe Timeline benötigst, ist der App Market die beste Wahl.

  1. App Market öffnen: Klicke links im Editor auf das Icon für den App Market (sieht aus wie vier kleine Quadrate).
  2. Suchen: Gib in das Suchfeld das Wort „Timeline“ ein.
  3. App wählen: Beliebte Optionen sind:
    • Timeline von 123FormBuilder
    • Number Counter & Timeline
    • Kostenlose Widgets von Drittanbietern (z. B. Elfsight Timeline)
  4. Hinzufügen: Klicke auf „Zu Website hinzufügen“.
  5. Konfigurieren: Klicke auf das App-Element und dann auf „Einstellungen“. Hier kannst du Daten, Texte und Farben ganz einfach in einer Maske eingeben, ohne das Design manuell verschieben zu müssen.

Methode 3: Manuelles Design (Für volle kreative Freiheit)

Für ein individuelles Design kannst du die Timeline komplett selbst bauen.

  1. Mittellinie ziehen: Gehe auf Hinzufügen (+) -> Deko -> Linien und wähle eine vertikale Linie. Ziehe sie über den Bereich, in dem die Timeline erscheinen soll.
  2. Punkte setzen: Füge kleine Kreise oder Icons (unter Deko -> Formen) hinzu und platziere sie direkt auf der Linie.
  3. Inhalt hinzufügen: Platziere links und rechts von der Linie Textfelder für das Datum und die Beschreibung.
  4. Gruppieren: Markiere die Elemente eines Zeitpunktes (Kreis, Datum, Text) und klicke auf „Elemente gruppieren“. So kannst du sie leichter verschieben.
  5. Mobil optimieren: Wichtig! Da manuelle Timelines auf dem Handy oft verrutschen, klicke auf das Handy-Icon oben im Editor, um die mobile Ansicht separat anzupassen. Meistens empfiehlt es sich hier, alle Texte auf die rechte Seite der Linie zu schieben.

Tipps für eine gelungene Timeline

  • Weniger ist mehr: Halte die Texte kurz und knackig. Nutze lieber „Mehr lesen“-Buttons, wenn du viele Informationen hast.
  • Visuelle Hierarchie: Nutze fette Schrift für Jahreszahlen oder Meilensteine, um die Lesbarkeit zu erhöhen.
  • Animationen: Du kannst den einzelnen Punkten der Timeline eine Animation geben (z. B. „Einfliegen“), die aktiviert wird, sobald der Besucher nach unten scrollt. Das wirkt sehr modern.
  • Farben: Achte darauf, dass die Farben der Timeline zu deinem restlichen Branding passen.

Zusammenfassung: Für Anfänger ist Methode 1 (Listen) ideal. Wer es schnell und funktional will, nutzt Methode 2 (Apps). Profis, die ein ganz bestimmtes Design im Kopf haben, wählen Methode 3 (Manuell).

0