Wie man in WordPress schöne Zeitleisten für Veranstaltungen hinzufügt

Event-Timelines eignen sich hervorragend für die visuelle Darstellung Ihrer Veranstaltungen und machen sie für Ihr Publikum interessanter und einfacher zu verfolgen.

Neben Ereignissen können Zeitleisten auch auf Ihrer „Über“-Seite verwendet werden, um Ihre Unternehmensgeschichte und Meilensteine hervorzuheben.

Aber ohne die richtigen Werkzeuge kann die Planung und Darstellung von Zeitleisten für Veranstaltungen auf Ihrer WordPress Website eine Herausforderung sein.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress Website schöne Zeitleisten für Veranstaltungen hinzufügen können.

Warum eine schöne Event Timeline in WordPress hinzufügen

Zeitleisten für Veranstaltungen heben wichtige Meilensteine mit einer klaren, chronologischen Struktur hervor. Die Verwendung eines solchen Zeitstrahls kann dazu beitragen, den erzählerischen Aspekt Ihrer Inhalte zu verbessern.

Neben Meilensteinen können Sie mit Zeitleisten auch Fortschritte, Phasen und die Verknüpfung von Ereignissen visuell darstellen. Dies kann Ihre Inhalte interessanter machen.

Viele Betreiber von WordPress-Websites verwenden Zeitleisten, um zusammenhängende Ereignisse auf organisierte und optisch ansprechende Weise darzustellen. Auch Unternehmen und Organisationen nutzen häufig Zeitleisten, um ihre Geschichte darzustellen.

Wenn Sie eine Portfolio-Website haben, z. B. ein Online-Fotoportfolio, dann können Sie Ihre Fotos in einer schönen vertikalen Zeitleiste zeigen, die Ihre Reise um die Welt darstellt.

Das kann ansprechender sein, als wenn Sie Ihre Geschichte schreiben und sie als einfache Seite auf Ihrer Website einfügen.

Hinzufügen einer Ereignis-Zeitleiste in WordPress

Der einfachste Weg, eine Zeitleiste in WordPress einzufügen, ist die Verwendung des Cool Timeline Plugins. Mit diesem kostenlosen, benutzerfreundlichen Plugin können Sie schnell und einfach beeindruckende Zeitleisten erstellen.

Nach der Aktivierung sehen Sie in Ihrem WordPress-Dashboard einen neuen Bereich für Timeline Add-ons.

Mit diesem Plugin können Sie Zeitleisten für Ereignisse auf 2 Arten erstellen.

Die erste Möglichkeit besteht darin, im Dashboard der Add-ons für die Zeitleiste auf den Button „Neue Story hinzufügen“ zu klicken.

Dadurch wird der Editor geöffnet, in dem Sie einen Titel und eine Beschreibung eingeben, ein Hervorgehobenes Beitragsbild festlegen und andere wichtige Informationen hinzufügen können.

Wenn Sie alle Ereignisse hinzugefügt haben, zeigt Cool Timeline alle diese Ereignisse in einer Zeitleiste an. Sie können die Zeitleiste dann zu jeder Seite oder jedem Beitrag hinzufügen.

Diese Methode eignet sich hervorragend, um dieselbe Zeitleiste mehrfach auf Ihrer Website anzuzeigen. Allerdings können Sie damit nur eine einzige Zeitleiste erstellen.

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

Wenn Sie Ihrer Website mehrere Cool Timeline-Blöcke hinzufügen, können Sie verschiedene Zeitleisten an verschiedenen Stellen Ihrer Website anzeigen.

Mit dieser Methode können Sie jedoch nicht dieselbe Zeitleiste auf Ihrer gesamten Website wiederverwenden, es sei denn, Sie speichern sie selbst als Blockvorlage.

In diesem Leitfaden werden wir beide Methoden behandeln. 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.

Danach können Sie Ihre Zeitleiste entweder über das Menü Timeline Add-ons oder den Block-Editor erstellen. Wenn Sie es vorziehen, direkt zu einer bestimmten Methode zu springen, können Sie die unten stehenden Links verwenden:

Sind Sie bereit? Dann fangen wir an.

Methode 1. So erstellen Sie eine wiederverwendbare Ereigniszeitleiste mit dem Menü „Zeitleistenzusätze

Um Ihr erstes Ereignis zu erstellen, gehen Sie von Ihrem WordPress-Dashboard aus auf Timeline Add-ons “ Add New Story.

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 in Ihrer Zeitleiste anzeigen möchten. In der Regel handelt es sich dabei um eine Beschreibung des Ereignisses.

Wenn Sie das getan haben, klicken Sie auf den Link „Hervorgehobenes Bild festlegen“.

Sie können nun das Bild auswählen, das das Ereignis in Ihrer Zeitleiste darstellen soll. Sie können entweder ein Bild aus der WordPress-Mediathek auswählen oder eine neue Bilddatei von Ihrem Computer hochladen.

Als Nächstes blättern Sie zum Abschnitt „Einstellungen für Zeitleistengeschichten“ hinunter. Hier können Sie auf das Feld „Story-Datum/Jahr“ klicken und mit dem Kalender-Popup die Zeit und das Datum auswählen, an dem das Ereignis stattgefunden hat.

Sie können auch zwischen einem „großen“ oder „kleinen“ Bild für das Ereignis wählen.

In der folgenden Abbildung sehen Sie ein Beispiel für ein „vollständiges“ Bild.

Größere Bilder lenken die Aufmerksamkeit des Besuchers auf die wichtigsten Ereignisse in der Zeitleiste. Vollständige Bilder nehmen jedoch mehr Platz ein.

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

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

Dies kann dazu beitragen, dass Ihre Zeitleiste nicht unübersichtlich aussieht.

Nachdem Sie diese Änderungen vorgenommen haben, scrollen Sie zum oberen Rand der Seite und klicken Sie auf den Button „Veröffentlichen“.

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

Möchten Sie alle Ereignisse sehen, die Sie bisher erstellt haben? Dann gehen Sie einfach zu Timeline Addons “ Cool Timeline Stories.

Wenn Sie alle Ihre Ereignisse erstellt haben, müssen Sie im nächsten Schritt das Aussehen der Zeitleiste auf Ihrer Website individuell anpassen.

Gehen Sie dazu auf Timeline Add-ons “ Timeline Settings “ General Settings.

Im Abschnitt „Titel der Zeitleiste“ können Sie den Titel eingeben, der über Ihrer Zeitleiste erscheinen soll.

Cool Timeline kann auch ein Bild über Ihrer Zeitleiste anzeigen, z. B. Ihr Firmenlogo. Dies kann dazu beitragen, Ihr Branding zu verstärken und Besucher wissen zu lassen, was die Zeitleiste zeigt.

Um dieses optionale Bild hinzuzufügen, klicken Sie auf den ‚Upload‘-Button.

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

Wenn Sie viel Text in eine Zeitleiste einfügen, kann sie unübersichtlich und unpassend wirken.

Aus diesem Grund können Sie eine Höchstzahl von Wörtern festlegen, die in der Zeitleiste angezeigt werden. Um eine maximale Wortanzahl festzulegen, geben Sie einfach eine Zahl in das Feld „Länge des Inhalts“ ein.

Wenn du ein Limit festlegst, ist es eine gute Idee, „Weiterlesen“-Links zu deiner Timeline hinzuzufügen. Cool Timeline fügt dann diesen Link zu allen Beschreibungen hinzu, die größer sind als das Wortlimit.

Um diesen Link hinzuzufügen, suchen Sie den Abschnitt ‚Weitere Informationen anzeigen?‘ und klicken Sie auf den Button ‚Ja‘.

Sie können nun entscheiden, ob der Rest des Textes nach dem Anklicken des Links „Weiterlesen“ in demselben Tab oder in einem neuen Tab des Browsers angezeigt werden soll. Klicken Sie dazu einfach auf den Radio-Button „Same Tab“ oder „New Tab“.

Standardmäßig zeigt die Zeitleiste das Jahr an, in dem das jeweilige Ereignis stattgefunden hat. Es kann jedoch sein, dass Sie diese Information nicht immer anzeigen müssen. Zum Beispiel, wenn alle Ereignisse im selben Jahr stattfanden.

Um die Jahresangabe auszublenden, klicken Sie einfach auf den Schieberegler „Jahresangabe“, um ihn von „Anzeigen“ auf „Ausblenden“ 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 lassen? Dann klicken Sie einfach auf den Button „Links“ neben „Vertikale Zeitleiste – Geschichten starten von“.

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie auf den Button „Speichern“, um Ihre Änderungen 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 Slider „Zeitleistenhintergrund“ klicken und ihn von „Nein“ auf „Ja“ stellen.

Klicken Sie dann auf die Schaltfläche neben „Hintergrundfarbe des Beitrags“.

Sie sollten nun in der Lage sein, eine Hintergrundfarbe mit Hilfe der Einstellungen des Farbwählers zu wählen.

In dieser Ansicht finden Sie auch ähnliche Farbeinstellungen für die verschiedenen Teile Ihrer Zeitleiste, einschließlich der vertikalen Linie und der Ereignistitel. Um eine dieser Standardfarben zu ändern, klicken Sie einfach auf den Button des Abschnitts und verwenden Sie dann den erscheinenden Farbwähler.

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, vergessen Sie nicht, auf den Button „Speichern“ zu klicken.

Als Nächstes sollten Sie den Tab „Typografieeinstellungen“ aufrufen. Hier können Sie die Größe und Schrift für die verschiedenen Inhalte in Ihrer Zeitleiste ändern, z. B. für den Titel der Zeitleiste und den Titel des Beitrags.

Wenn Sie die Standard-Typografieeinstellungen ändern, vergessen Sie nicht, Ihre Änderungen durch Klicken auf den Button „Speichern“ zu speichern.

Sobald Sie die Zeitleiste individuell angepasst haben, können Sie sie zu Ihrer Website hinzufügen. Öffnen Sie einfach die Seite oder den Beitrag, auf der/dem sie angezeigt werden soll, und klicken Sie dann auf den „+“-Button.

Geben Sie nun „Cool Timeline“ in die Suchleiste ein. Dieses Plugin hat einige verschiedene Blöcke. Klicken Sie also unbedingt auf den „Cool Timeline Shortcode Block“.

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 Ereigniszeitleisten in WordPress mit dem Zeitleistenblock

Mit dem Block-Editor und dem „Cool Timeline Block“ können Sie in WordPress auch eine schöne Ereigniszeitleiste erstellen.

Dieser Block enthält eine Menge Platzhalterinhalte. Um Ihre Zeitleiste zu erstellen, müssen Sie einfach jeden Platzhalter durch Ihren eigenen Text und Ihre eigenen Bilder ersetzen. Auf diese Weise können Sie Ihre Zeitleiste visuell besser gestalten.

Öffnen Sie einfach die Seite oder den Beitrag, zu dem Sie eine Zeitleiste hinzufügen möchten.

Klicken Sie dann auf das „+“-Symbol und geben Sie „Cool Timeline Block“ ein. Wenn dieser Block angezeigt wird, klicken Sie darauf, um ihn der Seite oder dem Beitrag hinzuzufügen.

Der Cool Timeline-Block hat 4 Platzhalter-Ereignisse. Sie können sie nacheinander bearbeiten, indem Sie auf das erste Ereignis in der Zeitleiste klicken.

Ersetzen Sie im rechten Menü einfach den Platzhalter „Ü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üssen Sie das Feld „Primäre Bezeichnung (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 Zeitleiste an.

Wenn Sie es vorziehen, das Ereignis auf der linken Seite der vertikalen Linie anzuzeigen, können Sie auf den Button „Links“ klicken.

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 den Button „Entfernen“.

Sobald Sie das getan haben, klicken Sie auf den Button ‚Upload/Choose Image‘.

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 seiner vollen Größe an. Um stattdessen ein kleineres Bild anzuzeigen, öffnen Sie das Dropdown-Menü „Bildgröße“ und wählen Sie entweder „Mittel“ oder „Vorschaubild“.

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

Standardmäßig markiert die Zeitleiste jedes Ereignis auf der vertikalen Linie mit einem Punkt. Vielleicht möchten Sie diesen einfachen Punkt durch ein individuelles Symbol ersetzen.

Sie könnten zum Beispiel verschiedene Symbole für verschiedene Arten von Ereignissen verwenden. Dann können Sie die verschiedenen individuellen Icons für Ihre Zeitleiste erkunden, indem Sie auf den Button „Custom (Font Awesome Icon)“ klicken.

Daraufhin wird ein Dropdown-Menü mit einem Pfeilsymbol angezeigt. Erweitern Sie es, um durch die verschiedenen Symbole zu blättern.

Wenn Sie das perfekte Symbol für Ihre Veranstaltung gefunden haben, können Sie es anklicken.

Sie können nun die übrigen Platzhalterereignisse nach demselben Verfahren wie oben beschrieben anpassen.

Wenn Sie der Zeitleiste weitere Ereignisse hinzufügen möchten, klicken Sie einfach auf das Symbol „Geschichte hinzufügen“. Dadurch wird ein neues Platzhalter-Ereignis hinzugefügt, das Sie individuell anpassen können.

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihrer WordPress-Website eine schöne Zeitleiste für Veranstaltungen hinzufügen können. Vielleicht interessieren Sie sich auch für unsere Anleitungen zum Erstellen eines einfachen Veranstaltungskalenders und zum Hinzufügen eines Countdown-Timer-Widgets in WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.