Erstellen eines Elementor Event-Kalenders mit FooEvents (2024)

Anleitungen, Marketing, Aktualisierungen / 1. Januar 2024 / Unter Robin Pietersen

In diesem Tutorial zeigen wir Ihnen, wie Sie einen Veranstaltungskalender Elementor mit FooEvents in 2024 hinzufügen können. Die Kalender werden mehrere Ereignisse anzeigen, die in verschiedenen Registerkarten mit verschiedenen Anzeigemodi angezeigt werden.

Schritt 1: Installieren Sie Elementor und FooEvents Kalender-Plugins

Zunächst müssen Sie sich vergewissern, dass Sie über die Elementor Plugin installiert. Es ist zu finden unter wordpress.org und direkt aus dem Bereich Plugins auf Ihrer Website installiert werden.

Loggen Sie sich in Ihr WordPress Admin-Dashboard ein und navigieren Sie zu Plugins > Neu hinzufügen. Dann suchen Sie nach Elementor und installieren Sie die Elementor Website Builder Plugin.

Suchen Sie dann nach FooEvents und installieren Sie die Veranstaltungskalender für FooEvents FooEvents bietet zwei Möglichkeiten zur Erstellung von Veranstaltungen auf Ihrer WordPress-Website. Die erste Möglichkeit ist das Hinzufügen von Ereignisdetails zu einem Standard-WordPress-Beitrag oder einer Seite mit der FooEvents-Kalender Plugin. Dies geschieht bei der Bearbeitung des Beitrags oder der Seite. Das FooEvents-Kalender-Plugin fügt unten im Beitrag, auf den Seiten und in den benutzerdefinierten Beitragstypen ein Formular für grundlegende Ereigniseinstellungen hinzu. Mit diesem Formular können Sie das Datum und die Uhrzeit des Ereignisses festlegen. Sobald sie festgelegt sind, werden sie in den vom FooEvents-Kalender-Plugin generierten Kalendern angezeigt.

Die zweite und anspruchsvollere Option ist die Verwendung der FooEvents für WooCommerce Plugin und Erweiterungen, um Ihren WooCommerce-Produkten Event- und Ticketing-Funktionen hinzuzufügen. FooEvents für WooCommerce ermöglicht den Verkauf einer unbegrenzten Anzahl von Tickets direkt von Ihrer Website aus sowie die Verwaltung von Check-ins mit dem kostenlosen FooEvents Check-ins Anwendungen. Die FooEvents Buchungen Plugin kann auch verwendet werden, um den Zugang zu buchbaren Zeitfenstern zu verkaufen, was später in diesem Lernprogramm erläutert wird.

Sobald Sie einige Testveranstaltungen eingerichtet haben, fahren Sie bitte mit dem nächsten Schritt fort.

Schritt 2: Erstellen Sie eine neue Seite

Erstellen Sie eine neue Seite und legen Sie den Seitentitel fest. Wechseln Sie dann zum Elementor Page Builder, indem Sie die Taste Mit Elementor bearbeiten Taste.

Schritt 3: Fügen Sie das Elementor Tabs Element hinzu

Sobald die Seite geladen ist, fügen Sie ein Tabs-Element in den Hauptbereich der Seite ein. Standardmäßig erstellt Elementor zwei Beispielregisterkarten. Entfernen Sie die zweite Registerkarte und erweitern Sie die Bearbeitungsoptionen der ersten Registerkarte.

Schritt 4: Hinzufügen eines Elementor Event-Kalenders mit FooEvents

Ändern Sie die erste Registerkarte und ändern Sie den Titel in "Alle", bevor Sie die FooEvents Kalender Shortcode in den Inhaltsbereich der Registerkarte.

[fooevents_calendar id="1"]

Wenn Sie mehrere Kalender zu einer Seite hinzufügen, ist es wichtig, für jeden Kalender eine eindeutige ID anzugeben (z. B. id="1″). Sie können dann eine Vorschau des Kalenders anzeigen, in der alle im aktuellen Monat stattfindenden Veranstaltungen angezeigt werden.

Schritt 5: Hinzufügen eines Kalenders für bestimmte Veranstaltungskategorien

Als nächstes duplizieren Sie die soeben erstellte Registerkarte und ändern den Titel in Aktivitäten. Dieser Kalender muss dann alle Ereignisse anzeigen, die Aktivitäten sind. Wenn Sie Ereignisse mit dem Plugin FooEvents für WooCommerce erstellen, können Sie die Ereignisse mithilfe der WooCommerce-Kategorienfunktion organisieren. Für diese Demo haben wir die Bustour zur Kategorie Aktivitäten hinzugefügt. Mit dem Shortcode-Parameter include_cat können wir dann den Kalender so filtern, dass nur Veranstaltungen angezeigt werden, die als Aktivitäten kategorisiert wurden. Wir können diesen Vorgang auch für Veranstaltungen wiederholen, die als "Konferenzen" kategorisiert wurden.

[fooevents_calendar id="2″ include_cat="activities"]

Schritt 6: Hinzufügen von Kalendern für bestimmte Zeiträume

Erstellen Sie einen Kalender, der nur Ereignisse anzeigt, die am aktuellen Kalendertag stattfinden, indem Sie den Parameter defaultview verwenden, dessen Wert auf listday eingestellt ist. Sie können diesen Parameter bei Bedarf auch in Kombination mit anderen Parametern wie dem Parameter include_cat verwenden. Folgen Sie demselben Prozess und erstellen Sie eine Registerkarte "Wochenansicht", für die Sie als Standardansicht den Wert listWeek angeben. In dieser Ansicht werden dann alle Ereignisse angezeigt, die in der aktuellen Woche stattfinden.

Erstellen Sie eine Registerkarte für die Monatsansicht, auf der alle Ereignisse des aktuellen Kalendermonats angezeigt werden, indem Sie listMonth und den Parameter defaultdate verwenden, um anzugeben, welcher Monat angezeigt werden soll. Erstellen Sie eine Registerkarte, die alle Ereignisse des aktuellen Jahres anzeigt, indem Sie den Wert listYear verwenden.

[fooevents_calendar id="3″ defaultview="listDay"]

Schritt 7: Hinzufügen eines Kalenders für bestimmte sich wiederholende Ereignisse

Erstellen Sie einen Kalender für bestimmte wiederkehrende Ereignisse. Die Bustour zum Beispiel verwendet das FooEvents-Buchungsplugin und wird zu verschiedenen Datums- und Zeitfenstern wiederholt. Sie können einen Kalender erstellen, der nur diese Zeitfenster anzeigt, indem Sie die ID des Produkts angeben. Dazu müssen Sie lediglich die ID abrufen, eine Registerkarte mit dem Namen Bustour erstellen und die ID des Produkts für den Postparameter festlegen. Der Kalender zeigt dann nur Buchungen für diese Veranstaltung an.

Das war's! Sie wissen jetzt, wie Sie FooEvents und Elementor verwenden können, um Ihrer Website Veranstaltungskalender hinzuzufügen, die mehrere Veranstaltungen in verschiedenen Registerkarten mit unterschiedlichen Anzeigemodi anzeigen. Jeder dieser Kalender kann mit einer Reihe von Shortcode-Parametern weiter gefiltert werden. Sie können mehr darüber lesen, indem Sie das FooEvents-Hilfezentrum besuchen und zum Abschnitt Kalender Shortcodes Hilfe Dokument.

Diese Inhalte unseres Partners könnten Sie auch interessieren FooSales WooCommerce POS:

Abonnieren Sie unseren Newsletter

Seien Sie der Erste, der Produktaktualisierungen und Sonderangebote erhält