So erstellen Sie eine Ereignis-Timeline in WordPress

Eine WordPress-Event-Timeline kann a sehr effektives visuelles Mittel zur Übermittlung von Daten, was Ihrer Seite eine einzigartige Ästhetik und interaktive Note verleiht. Eine Zeitleiste ist meistens verwendet, um eine Abfolge von Ereignissen anzuzeigen, daher ist es mehr als geeignet für die Geschichte Ihres Unternehmens (oder Ihrer Band oder Beziehung), persönliche Erfolgsmeilensteine ​​oder Veröffentlichungstermine für Inhalte. Es kann auch nützlich sein, wenn Sie eine Website für eine Veranstaltung erstellen – es könnte sein eine neue Art, Ihren Zeitplan anzuzeigen. Sie müssen nur sicherstellen, dass Ihre gewählte Methode mit Ihrem Event-Management-Plugin kompatibel ist, falls Sie eines verwenden.

Es gibt mehrere Möglichkeiten, eine WordPress-Ereigniszeitleiste zu erstellen. Unser erster Vorschlag, wie immer, ein Theme zu verwenden, das bereits über eine Timeline-Funktionalität verfügt. Wenn Sie mit einem Budget arbeiten oder Ihr Thema nicht ändern möchten, nur weil es keine Zeitleiste verwendet, können Sie dennoch eine Zeitleiste erstellen. Wir zeigen Ihnen zwei Möglichkeiten: mit einem Gutenberg-Block und mit einem speziellen Plugin.

So erstellen Sie eine Event-Timeline mit einem Gutenberg-Block

Sie können mit dem Gutenberg-Editor eine Ereignis-Timeline erstellen, aber der speziell dafür benötigte Block ist nicht im Lieferumfang enthalten – Sie müssen ihn installieren Gutenberg-Blöcke – Ultimative Addons für Gutenberg. Dieses Plugin bietet Ihnen eine Vielzahl neuer Blöcke, mit denen Sie arbeiten können, darunter der Ereignis-Timeline-Block, dessen Verwendung wir hier für Sie demonstrieren. Wenn Sie nicht wissen, wie Sie ein Plugin installieren, sind wir für Sie da.

Sobald Sie das Plugin installiert und aktiviert haben, können Sie eine Zeitleiste in einem Beitrag oder einer Seite erstellen, indem Sie auf das Pluszeichen um einen Block hinzuzufügen und den Inhalts-Timeline-Block zu finden. Es wird in der Ultimative Addon-Blöcke Menü, aber am einfachsten finden Sie es über die Suchleiste.

Sie sehen nun eine Platzhalter-Zeitleiste. Wenn dieser Block ausgewählt ist, sehen Sie auf der rechten Seite mehrere Menüs. Die standardmäßig geöffnete ist Anzahl der Teile. Wir werden es erhöhen auf 6.

Der nächste ist Datumseinstellungen. Sie können wählen, ob die Daten angezeigt werden sollen oder nicht, indem Sie die Veröffentlichungsdatum anzeigen Umschalten. Im Datum Untermenü Format können Sie das Datumsformat ändern. Wir lassen beide Steuerelemente unverändert, aber Sie können sie nach Ihren Wünschen einstellen. Wir werden unsere Termine in chronologischer Reihenfolge ändern. Das Datumsformat im Datumseinstellungen Felder ist TT/MM/JJJJ. Unten im Menü befinden sich die Einstellungen, mit denen Sie verschiedene Farben auswählen und die Typografieoptionen für den Datumstext ändern können, aber wir belassen dies als Standard.

Als nächstes haben wir die Layout Untermenü. Diese beschäftigen sich mit Orientierung der Zeitleiste selbst, Pfeilausrichtung in Bezug auf die Ereignisbox und wie die Zeitleiste gestapelt ist (Stapeln auf), was für die Reaktionsfähigkeit und das Aussehen der Timeline auf Tablet- und mobilen Plattformen relevant ist. Wir belassen die Standardwerte.

Der Abstand Das Untermenü enthält Optionen für das Verhalten der einzelnen Timeline-Boxen. Sie können sie nach Belieben anpassen, aber wir finden den Abstand zwischen den Boxen gut, also werden wir nicht daran herumspielen. Im Zeitachsenelement Untermenü können Sie die Typografieeinstellungen für die Timeline-Elemente auswählen. Wir lassen die Haupteinstellung an H4, erhöhe die Abgerundete Ecken Einstellung auf 10, wodurch unsere Boxen weicher erscheinen, und die Polsterung bis 30, um die Timeline ein wenig zu dehnen. Wir werden das nicht ändern Üerschrift oder Inhalt Einstellungen, aber Sie können dies tun, indem Sie auf das Schlüssel Symbol. Diese Einstellungen betreffen das Aussehen des Textes in den Kästchen.

Endlich im Verbinder Untermenü können Sie die Einstellungen zur Verbindungslinie zwischen den Boxen ändern. Wir ändern das Symbol in einen Bierkrug, ändern jedoch nicht die anderen Symboleinstellungen (Größe, Hintergrundgröße, Rahmenbreite und Verbinderbreite). Der Verbinder Untermenü enthält ein eigenes Untermenü – Farbeinstellungen. Wir werden dies verwenden, um die Farbe des Steckers in Mauve (#aa86a6) zu ändern, um die Farbe des zu ändern Linie, Grenze und Hintergrund wenn sie drin sind Fokus, sodass es im Normalmodus hellgrau bleibt. Alle Farben der Elemente sind jedoch anpassbar, sodass Sie sie an das Design Ihrer Website anpassen können. Wir werden das nicht ändern Farbeinstellungen. Dieses Untermenü enthält die Farboptionen für Ihre Boxen und den darin enthaltenen Text. Wir werden auch keine der Einstellungen in der Fortschrittlich Untermenü, da sie für diese Demonstration nicht benötigt werden. Wir werden unseren Veranstaltungen auch einige Texte hinzufügen, um sie zu konkretisieren. Sie können einfach klicken, um jede Überschrift und Beschreibung in einem beliebigen Feld zu bearbeiten.

Und Ihre Event-Timeline mit einem benutzerdefinierten Gutenberg-Block ist fertig!

So erstellen Sie eine Ereignis-Timeline mit einem spezialisierten Plugin

Für diese Demonstration verwenden wir Coole Zeitleiste. Dies ist nur eine unserer bevorzugten Lösungen. Wenn Sie nach einem Plugin suchen, haben wir eine Liste mit WordPress-Timeline-Plugins zusammengestellt, aus denen Sie auswählen können. Sie müssen zuerst das Cool Timeline-Plugin installieren und aktivieren. Wenn Sie nicht wissen, wie man ein Plugin installiert und aktiviert, haben wir auch dafür ein Tutorial.

Nachdem wir das Plugin installiert und aktiviert haben, müssen wir es nun konfigurieren. Finde die coole Timeline Einstellungen von deiner Plugins Bildschirm. In Allgemeine Einstellungen, die die Standardeinstellungen für alle Stories regeln, die Sie verwenden werden Coole Zeitleiste denn, wir ändern die Timeline-Titel zu Unsere Geschichte, wir lassen die Titelüberschrift-Tag wie H1, aber Sie können Überschriften von H1 bis H6 wählen. Wir werden die einstellen Anzahl der anzuzeigenden Geschichten bis 6, während wir die verlassen Inhaltslänge bei 50 Wörtern. Wir werden auch das verlassen Geschichten Beschreibung und Geschichten bestellen bei den Standardwerten von Kurz und DESCEnde.

Wir laden auch ein kostenloses Foto als Timeline-Standardbild und lass die Anzeige mehr lesen an ja, der Standardwert. Wir werden dann Änderungen speichern.

Als nächstes in der Stileinstellungen Registerkarte, wir verlassen die Container-Hintergrund an AUS. Wir werden einige Farben für auswählen Hintergrund der Geschichte, Kreis, Linie, Zuerst und Zweite was besser zu unserem Gesamtthema passt. Wir werden die nicht anfassen Benutzerdefinierte Stile Sektion. Wir werden auch nicht mit den Typografie-Einstellungen, die die Schrifteinstellungen für . betreffen Überschrift, Story-Titel und Inhalt posten, mit der zusätzlichen Option von Kleinbuchstaben, Großbuchstaben, und groß geschrieben (Ursprünglich) Stil des Story-Titels. Ähnlich, Erweiterte Einstellungen sind für uns uninteressant, da sie bei der kostenlosen Version, mit der wir arbeiten, nur eine Übersicht der Premium-Features enthalten.

Nachdem wir unsere Einstellungen gespeichert haben, navigieren wir zu Timeline-Geschichten/Neu hinzufügen aus dem linken Seitenmenü.

Wir werden jedes Story-Item separat generieren, indem wir ihm a Titel, Auswahl a Bier Symbol im Story-Symbole-Menü, ein Datum, mit dem Datumsauswahl, und etwas zufällig generierter Text als Füllmaterial. Wir werden dies sechsmal wiederholen und sechs Geschichten erstellen. Sie können auch wählen a Ausgewähltes Bild für jeden von diesen. Wir werden es für diese Demonstration klar lassen.

Sobald Sie Ihre Geschichten alle in einer Reihe aufgereiht haben, ist dies Ihr Zeitleistengeschichten/Alle Geschichten Bildschirm aussehen sollte.

Das Cool Timeline-Plugin funktioniert am besten für Seiten. Um eine Story-Seite zu erstellen, navigieren Sie zu Seiten/Neu hinzufügen über das Menü auf der linken Seite. Stellen Sie sicher, dass Sie den klassischen Editor verwenden. Wir werden unserer Story-Seite einen Titel hinzufügen und unser neues verwenden Cooler Timeline-Shortcode Generator zu Coolen Timeline-Shortcode hinzufügen.

Das Zeitleistenmenü wird angezeigt. Wir werden das verlassen Zeitleisten-Layout stellen Sie standardmäßig die Zeitachsendaten zu Ymd, lass die Timeline-Skin wie Standard, wählen JA für die Story-Symbol, setze die Anzahl der Geschichten zu 6, wählen Keiner Pro Geschichten Animationseffekt, Zusammenfassung Pro Story-Beschreibung, und DESCEnde für Story-Reihenfolge. Beachten Sie, dass diese Einstellungen die Allgemein Einstellungen in den Plugin-Konfigurationsoptionen. Wenn Sie fertig sind, klicken wir auf OK.

Dadurch wird ein Shortcode erstellt, wo immer sich unser Cursor im Haupttextfeld befand. Und jetzt haben Sie eine auffällige Zeitleiste für Ihre Besucher.

Abschließend

Jetzt kennen Sie zwei Möglichkeiten, eine Ereigniszeitleiste in WordPress anzuzeigen. Nützlich für Unternehmensgeschichten, Zeitleisten für persönliche Leistungen, Projektzeitpläne und ähnliches, aber wir können sie auch als neuartige Möglichkeit zur Anzeige von Veranstaltungsplänen oder als pädagogisches Instrument zur Darstellung historischer Ereignisse oder Entwicklungsstadien von Organismen sehen – jedes Thema, das Fortschritte impliziert. Eine Ereigniszeitleiste ist nur ein Werkzeug zur Datenvisualisierung, und mit ein wenig Vorstellungskraft können Sie viele verschiedene Dinge damit machen. Egal, ob Sie ein Plugin, einen Gutenberg-Block oder eine Themenfunktion verwenden, Ereigniszeitleisten sind ein nützliches Werkzeug, um sich zurechtzufinden.