Wie man schöne Event-Zeitleisten in WordPress hinzufügt (2 Methoden)

Sie kennen das Gefühl, wenn Sie auf einer WordPress-Website landen und unerwartet die gesamte Unternehmensgeschichte lesen? Das ist die Macht des visuellen Storytellings.

Ereignis-Zeitleisten sind eine fantastische Möglichkeit, Ihre Geschichte hervorzuheben oder wichtige Momente auf eine Weise zu präsentieren, die Ihr Publikum wirklich fesselt.

Anstatt Textwände zu überfliegen, werden die Besucher in eine visuelle Reise hineingezogen, die sie durch jeden Meilenstein führt.

Nach dem Testen vieler Zeitleistenlösungen für WordPress haben wir zwei gefunden, die beide einfach zu bedienen sind und professionell aussehende Ergebnisse liefern. In diesem Leitfaden zeigen wir Ihnen, wie Sie schöne Zeitleisten erstellen, die Besucher interessieren und zum Scrollen anregen. 🚀

Warum eine schöne Ereignis-Zeitleiste in WordPress hinzufügen

Ereigniszeitleisten heben wichtige Meilensteine mit einer klaren, chronologischen Struktur hervor. Durch die Verwendung einer solchen kann die erzählerische Komponente Ihres Inhalts verbessert werden.

Über Meilensteine hinaus ermöglichen Zeitleisten die visuelle Darstellung von Fortschritten, Phasen und der Verflechtung von Ereignissen. Dies kann Ihre Inhalte ansprechender gestalten.

Was Anwendungsfälle angeht, verwenden viele WordPress-Websites Zeitleisten, um zusammenhängende Ereignisse auf organisierte und visuell ansprechende Weise darzustellen.

Unternehmen und Organisationen nutzen Zeitleisten auch oft, um ihre Geschichte zu zeigen.

Wenn Sie eine Portfolio-Website haben, wie z. B. ein Online-Fotografie-Portfolio, können Sie Ihre Fotografien in einer schönen vertikalen Zeitleiste anzeigen, die Ihre Reise um die Welt zeigt.

Dies kann ansprechender sein, als Ihre Geschichte zu schreiben und sie als Seite mit einfachem Text auf Ihrer Website hinzuzufügen.

So fügen Sie eine Ereigniszeitleiste in WordPress hinzu

Der einfachste Weg, eine Ereigniszeitleiste in WordPress hinzuzufügen, ist die Verwendung des Cool Timeline-Plugins. Dieses kostenlose, benutzerfreundliche Plugin ermöglicht es Ihnen, beeindruckende Zeitleisten schnell und einfach zu erstellen.

Nach der Aktivierung sehen Sie einen neuen Bereich Timeline Addons in Ihrem WordPress-Dashboard.

Mit diesem Plugin können Sie Event-Timelines auf 2 Arten erstellen.

Der erste Weg ist, indem Sie auf die Schaltfläche „Neue Story hinzufügen“ im Dashboard der Timeline-Add-ons klicken.

Dies öffnet den Editor, in dem Sie einen Titel und eine Beschreibung eingeben, ein Beitragsbild festlegen und andere wichtige Informationen hinzufügen können.

Sobald Sie Events hinzugefügt haben, zeigt Cool Timeline all diese Event-Geschichten auf derselben Zeitleiste an. Sie können die Zeitleiste dann zu jeder beliebigen Seite oder jedem Beitrag hinzufügen.

Diese Methode eignet sich perfekt, um dieselbe Zeitleiste mehrmals auf Ihrer Website anzuzeigen. Sie ermöglicht jedoch nur die Erstellung einer einzigen Zeitleiste.

Die andere Option ist die Verwendung des Cool Timeline Blocks, um eine visuelle Zeitleiste im Block-Editor von WordPress zu erstellen.

Das Hinzufügen mehrerer Cool Timeline-Blöcke zu Ihrer Website ermöglicht es Ihnen, verschiedene Zeitleisten auf verschiedenen Teilen Ihrer Website anzuzeigen.

Diese Methode erlaubt es Ihnen jedoch nicht, dieselbe Zeitleiste auf Ihrer gesamten Website wiederzuverwenden, es sei denn, Sie speichern sie selbst als Blockmuster.

In dieser Anleitung behandeln wir beide Methoden. Unabhängig davon, wie Sie Ihre Zeitleiste erstellen, müssen Sie das Cool Timeline-Plugin installieren und aktivieren. Wenn Sie weitere Details benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Sobald Sie fertig sind, können Sie Ihre Zeitleiste entweder über das Menü "Timeline Addons" oder den Block-Editor erstellen. Wenn Sie lieber direkt zu einer bestimmten Methode springen möchten, können Sie die folgenden Links verwenden:

• Methode 1. So erstellen Sie eine wiederverwendbare Ereigniszeitleiste mit dem Menü „Timeline Addons“
• Methode 2. So erstellen Sie mehrere Event-Zeitleisten in WordPress mit dem Timeline-Block
• Bonustipp: Event-Schema in WordPress hinzufügen
• FAQs: Fügen Sie Ihrer WordPress-Website eine schöne Ereigniszeitleiste hinzu
• Verwandte Anleitungen zur Verwaltung von WordPress-Events

Bereit? Legen wir los.

Methode 1. So erstellen Sie eine wiederverwendbare Ereigniszeitleiste mit dem Menü „Timeline Addons“

Um Ihr erstes Ereignis zu erstellen, können Sie in Ihrem WordPress-Dashboard zu Timeline Addons » Neue Story hinzufügen gehen.

Sie können dem Ereignis dann einen Titel geben, indem Sie ihn in das Feld 'Titel hinzufügen' eingeben.

Im Haupteditor können Sie den gesamten Text eingeben, den Sie auf Ihrer Zeitleiste anzeigen möchten. Dies ist in der Regel eine Beschreibung des Ereignisses.

Sobald Sie das getan haben, ist es an der Zeit, auf den Link 'Featured Image festlegen' zu klicken.

Sie können nun das Bild auswählen, das die Veranstaltung auf Ihrer Zeitleiste darstellen soll. Sie können entweder auf „Bild auswählen“ klicken, um ein Bild aus der WordPress-Mediathek auszuwählen, oder eine neue Bilddatei von Ihrem Computer hochladen.

Als Nächstes scrollen Sie nach unten zum Abschnitt „Timeline Story Settings“. Hier können Sie auf das Feld „Story Date / Year“ klicken und das Kalender-Popup verwenden, um die Zeit und das Datum auszuwählen, an dem das Ereignis stattgefunden hat.

Sie können auch zwischen einem „Full“ oder „Small“ Bild für das Ereignis wählen.

Im folgenden Bild sehen Sie ein Beispiel für ein „Full“-Bild.

Größere Bilder lenken die Aufmerksamkeit des Besuchers auf die wichtigsten Ereignisse in der Zeitleiste. Allerdings nehmen „Voll“-Bilder mehr Platz ein.

Das folgende Bild zeigt dasselbe Ereignis, diesmal jedoch mit einem „kleinen“ Bild.

Wenn Sie viele verschiedene Ereignisse zu Ihrer Zeitleiste hinzufügen möchten, sollten Sie die Einstellung „Klein“ verwenden.

Dies kann verhindern, dass Ihre Zeitleiste überladen wirkt.

Nachdem Sie diese Änderungen vorgenommen haben, scrollen Sie zum oberen Rand der Seite und klicken Sie auf die Schaltfläche „Veröffentlichen“.

Und das war's – Sie können diese Schritte nun wiederholen, um weitere Ereignisse zu erstellen.

Möchten Sie alle bisher erstellten Ereignisse sehen? Gehen Sie dann einfach zu Timeline Addons » Cool Timeline Stories.

Sobald Sie alle Ihre Ereignisse erstellt haben, besteht der nächste Schritt darin, anzupassen, wie die Zeitachse auf Ihrer Website aussehen wird.

Um dies zu tun, können Sie zu Timeline Addons » Timeline Settings » General Settings gehen.

Im Abschnitt „Zeitleistentitel“ können Sie den Titel eingeben, der über Ihrer Zeitleiste angezeigt wird.

Cool Timeline kann auch ein Bild über Ihrer Zeitleiste anzeigen, z. B. Ihr Firmenlogo. Dies kann dazu beitragen, Ihr Branding zu stärken und Besuchern zu zeigen, was die Zeitleiste anzeigt.

Um dieses optionale Bild hinzuzufügen, klicken Sie auf die Schaltfläche „Hochladen“.

Sie können nun entweder ein Bild aus Ihrer WordPress-Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Wenn Sie einer Zeitleiste viel Text hinzufügen, kann diese überladen und abschreckend wirken.

In diesem Sinne möchten Sie vielleicht eine maximale Anzahl von Wörtern festlegen, die auf der Zeitleiste angezeigt werden. Um ein maximales Wortlimit festzulegen, geben Sie einfach eine Zahl in das Feld „Content Length“ ein.

Wenn Sie ein Limit festlegen, ist es eine gute Idee, Links wie „Weiterlesen“ zu Ihrer Zeitleiste hinzuzufügen. Cool Timeline fügt diesen Link dann zu allen Beschreibungen hinzu, die größer als Ihr Wortlimit sind.

Um diesen Link hinzuzufügen, suchen Sie den Abschnitt „Mehr lesen anzeigen?“ und klicken Sie auf die Schaltfläche „Ja“.

Sie können nun entscheiden, ob das Klicken auf den Link 'Weiterlesen' den Rest Ihres Textes in derselben Registerkarte oder in einer neuen Browserregisterkarte anzeigen soll. Um diese Wahl zu treffen, klicken Sie einfach auf die Optionsschaltfläche 'Gleiche Registerkarte' oder 'Neue Registerkarte'.

Standardmäßig zeigt die Timeline das Jahr an, in dem jedes Ereignis stattgefunden hat. Möglicherweise müssen Sie diese Informationen jedoch nicht immer anzeigen. Zum Beispiel, wenn alle Ereignisse im selben Jahr stattgefunden haben.

Um die Jahresbeschriftung auszublenden, klicken Sie einfach auf den Schieberegler 'Year Label', um ihn von 'Show' auf 'Hide' zu stellen.

Standardmäßig wird das erste Ereignis in Ihrer Zeitleiste auf der rechten Seite der vertikalen Linie der Zeitleiste angezeigt.

Möchten Sie dieses Ereignis stattdessen auf der linken Seite der Zeitleiste anzeigen? Klicken Sie dann einfach auf die Schaltfläche „Links“ neben „Vertikale Zeitleisten-Geschichten beginnen von“.

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“, um sie zu speichern.

Nun können Sie zum Tab „Stileinstellungen“ wechseln.

Standardmäßig hat die Zeitleiste keinen Hintergrund.

Wenn Sie möchten, können Sie Ihrer Zeitleiste einen farbigen Hintergrund hinzufügen, indem Sie auf den Schieberegler 'Timeline Background' klicken, um ihn von 'No' auf 'Yes' zu stellen.

Klicken Sie dann auf die Schaltfläche neben 'Hintergrundfarbe der Story'.

Sie sollten nun in der Lage sein, eine Hintergrundfarbe über die Farbwähl-Einstellungen auszuwählen.

Dieser Bildschirm bietet auch ähnliche Farbeinstellungen für alle verschiedenen Teile Ihrer Zeitleiste, einschließlich der vertikalen Linie und der Event-Titel. Um eine dieser Standardfarben zu ändern, klicken Sie einfach auf die Schaltfläche des Abschnitts und verwenden Sie dann den Farbwähler, der erscheint.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken.

Als Nächstes möchten Sie vielleicht zum Tab „Typografie-Einstellungen“ gehen. Hier können Sie die Schriftart ändern und die Größe der verschiedenen Inhalte in Ihrer Zeitleiste anpassen, wie z. B. den Zeitleistentitel und den Story-Titel.

Wenn Sie die Standard-Typografie-Einstellungen ändern, vergessen Sie nicht, Ihre Änderungen durch Klicken auf die Schaltfläche „Speichern“ zu speichern.

Sobald Sie die Zeitleiste angepasst haben, können Sie sie zu Ihrer Website hinzufügen. Öffnen Sie einfach die Seite oder den Beitrag, auf dem Sie sie anzeigen möchten, und klicken Sie dann auf die Schaltfläche „+“.

Geben Sie nun „Cool Timeline“ in die Suchleiste ein. Dieses Plugin hat einige verschiedene Blöcke, stellen Sie also sicher, dass Sie auf den „Cool Timeline Shortcode Block“ klicken.

Sie können Ihre Seite nun wie gewohnt aktualisieren oder veröffentlichen.

Wenn Sie nun Ihre Website besuchen, sehen Sie die Live-Zeitleiste.

Methode 2. So erstellen Sie mehrere Event-Zeitleisten in WordPress mit dem Timeline-Block

Sie können auch eine schöne Veranstaltungszeitleiste in WordPress mit dem Block-Editor und dem 'Cool Timeline Block' erstellen.

Dieser Block enthält viele Platzhalterinhalte. Um Ihre Zeitleiste zu erstellen, müssen Sie einfach jeden Platzhalter durch Ihren eigenen Text und Ihre eigenen Bilder ersetzen. Dies ermöglicht es Ihnen, Ihre Zeitleiste visueller zu gestalten.

Öffnen Sie zunächst einfach die Seite oder Beitrag, auf der Sie eine Timeline hinzufügen möchten.

Sie können dann auf das '+'-Symbol klicken und 'Cool Timeline Block' eingeben. Wenn dieser Block angezeigt wird, klicken Sie darauf, um ihn zur Seite oder zum Beitrag hinzuzufügen.

Der Cool Timeline-Block hat 4 Platzhalterereignisse. Sie können mit der Bearbeitung beginnen, indem Sie auf das erste Ereignis in der Zeitleiste klicken.

Ersetzen Sie im rechten Menü einfach den Platzhalter „Story-Überschrift“ durch die Überschrift, die Sie für dieses Ereignis verwenden möchten.

Als Nächstes können Sie eine Beschreibung in das Feld „Story Description“ eingeben.

Danach möchten Sie das Feld „Primäre Beschriftung (Datum/Schritte)“ finden. Geben Sie hier das Datum ein, an dem dieses Ereignis stattgefunden hat.

Standardmäßig zeigt der Cool Timeline-Block das erste Ereignis auf der rechten Seite der Zeitachse an.

Wenn Sie das Ereignis lieber auf der linken Seite der vertikalen Linie anzeigen möchten, klicken Sie auf die Schaltfläche „Links“.

Jetzt hat der Cool Timeline-Block ein Platzhalterbild für jedes Ereignis. Um diesen Platzhalter durch Ihr eigenes Bild zu ersetzen, klicken Sie einfach auf die Schaltfläche „Entfernen“.

Sobald Sie das getan haben, klicken Sie auf die Schaltfläche „Bild hochladen/auswählen“.

Sie können dann entweder ein Bild aus der WordPress-Mediathek auswählen oder eine neue Datei von Ihrem Computer hochladen.

Der Cool Timeline Block zeigt jedes Bild in voller Größe an. Um stattdessen ein kleineres Bild anzuzeigen, öffnen Sie das Dropdown-Menü „Bildgröße“ und wählen Sie entweder „Mittel“ oder „Miniaturansicht“.

Sobald Sie auf eine der verschiedenen Bildgrößen klicken, wird der Block aktualisiert, um das neue Bild anzuzeigen. So können Sie verschiedene Größen ausprobieren, um zu sehen, was auf Ihrer Website am besten aussieht.

Standardmäßig markiert die Zeitachse jedes Ereignis auf der vertikalen Linie mit einem Punkt. Möglicherweise möchten Sie diesen einfachen Punkt durch ein benutzerdefiniertes Symbol ersetzen.

Sie könnten zum Beispiel verschiedene Symbole für verschiedene Arten von Events verwenden. Dann können Sie die verschiedenen benutzerdefinierten Symbole erkunden, die Sie für Ihre Zeitleiste verwenden können, indem Sie auf die Optionsschaltfläche 'Benutzerdefiniert (Font Awesome Icon)' klicken.

Sobald Sie dies getan haben, erscheint ein Dropdown-Menü mit einem Pfeilsymbol. Sie möchten es erweitern, um durch alle verschiedenen Symbole zu scrollen.

Wenn Sie das perfekte Icon für Ihr Ereignis gefunden haben, können Sie darauf klicken.

Sie können nun die restlichen Platzhalterereignisse nach demselben oben beschriebenen Verfahren anpassen.

Wenn Sie der Zeitleiste weitere Ereignisse hinzufügen möchten, klicken Sie einfach auf das Symbol „Story hinzufügen“. Dadurch wird ein neuer Platzhalter für ein Ereignis hinzugefügt, das Sie anpassen können.

Wenn Sie mit dem Aussehen der Zeitleiste zufrieden sind, können Sie die Seite wie gewohnt aktualisieren oder veröffentlichen. Sobald dies geschehen ist, ist Ihre Zeitleiste auf Ihrer WordPress-Website live.

Bonustipp: Ereignisschema in WordPress hinzufügen

Sobald Sie eine schöne Timeline erstellt haben, um Ihre Ereignisse oder Meilensteine ​​zu präsentieren, können Sie noch einen Schritt weiter gehen, indem Sie Suchmaschinen helfen zu verstehen, worum es geht.

Hier kommt Event-Schema-Markup ins Spiel.

Das Event-Schema ist ein spezieller Code, der im Hintergrund arbeitet. Es gibt Google eine klare Zusammenfassung der wichtigsten Details Ihrer Veranstaltung, wie Datum, Uhrzeit, Ort und möglicherweise Ticketinformationen, in einem strukturierten Format, das es leicht lesen kann.

Außerdem kann das Hinzufügen von Event-Schema dazu beitragen, dass Ihre Inhalte in Rich Snippets oder Google-Event-Listings erscheinen. Egal, ob Sie kommende Events oder die Unternehmensgeschichte teilen, es hilft den richtigen Leuten, Sie zu finden, wenn sie nach verwandten Aktivitäten oder Meilensteinen suchen.

Eine der einfachsten Möglichkeiten, dies zu tun, ist die Verwendung von AIOSEO, dem besten SEO-Plugin für WordPress. Es unterstützt mehrere Schema-Typen, einschließlich Event, um Suchmaschinen zu helfen, Ihre Inhalte besser zu verstehen und hervorzuheben.

Weitere Details finden Sie in unserem Leitfaden zum Hinzufügen von Event-Schema in WordPress.

FAQs: Fügen Sie Ihrer WordPress-Website eine schöne Ereigniszeitleiste hinzu

Haben Sie Fragen zur Anzeige Ihrer Veranstaltungen im Zeitleistenformat auf WordPress? Hier sind einige schnelle Antworten, die Ihnen den Einstieg erleichtern.

Hat WordPress eine integrierte Kalender- oder Zeitleistenfunktion?

WordPress enthält standardmäßig keine integrierte Kalender- oder Zeitleistenfunktion. Sie können jedoch ganz einfach eine mit Plugins wie Cool Timeline oder The Events Calendar hinzufügen.

Ist das Cool Timeline Plugin kostenlos nutzbar?

Cool Timeline bietet eine kostenlose Version im WordPress-Plugin-Repository. Sie enthält Kernfunktionen wie vertikale und horizontale Zeitachsen. Für erweiterte Anpassungen und zusätzliche Layouts können Sie auf die Premium-Version upgraden.

Wie erstelle ich eine Ereignis-Zeitleiste in WordPress?

Der einfachste Weg ist die Verwendung eines Plugins wie Cool Timeline. Nach der Installation können Sie Ereignisse oder Meilensteine als Zeitachsen-Stories hinzufügen, das Layout anpassen und sie mit einem Shortcode oder Block anzeigen.

Kann ich eine Kalenderansicht neben der Zeitleiste hinzufügen?

Ja, das können Sie. Während sich das Cool Timeline-Plugin auf visuelle Zeitleisten konzentriert, bietet es keine traditionelle Kalenderansicht. Wenn Sie Ihre Veranstaltungen im Monats- oder Tageskalenderformat anzeigen möchten, empfehlen wir die Verwendung eines Kalender-Plugins wie Sugar Calendar oder The Events Calendar.

Eine kurze Anleitung finden Sie in unserem Leitfaden zur Erstellung eines einfachen Veranstaltungskalenders mit Sugar Calendar. Oder sehen Sie sich unseren vollständigen Vergleich der besten WordPress-Kalender-Plugins an, um eines zu finden, das Ihren Anforderungen entspricht.

Wie zeige ich das heutige Datum in WordPress an?

Sie können einen Shortcode, ein Widget oder benutzerdefinierten Code verwenden, um das heutige Datum anzeigen. Einige Page-Builder-Widgets und Themes haben diese Funktion ebenfalls integriert.

Verwandte Anleitungen zur Verwaltung von WordPress-Events

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine schöne Event-Timeline zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies hilfreich fanden, möchten Sie vielleicht auch unsere Anleitungen zu folgenden Themen lesen:

• So erstellen Sie einen einfachen Veranstaltungs-Kalender
• So zeigen Sie kommende Events in WordPress an
• Wie man Mitglieder-exklusive Veranstaltungen in WordPress durchführt
• So erstellen Sie eine Veranstaltungsregistrierungsseite in WordPress
• So fügen Sie ein Countdown-Timer-Widget in WordPress hinzu
• Beste WordPress-Kalender-Plugins

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.