Créer un calendrier d'événements Elementor en utilisant FooEvents (2024)

Comment faire, Marketing, Mises à jour / 1er janvier 2024 / Par Robin Pietersen

Dans ce tutoriel, nous allons vous montrer comment ajouter un calendrier d'événements Elementor en utilisant FooEvents en 2024. Les calendriers afficheront plusieurs événements qui seront affichés dans différents onglets en utilisant différents modes d'affichage.

Étape 1 : Installer les plugins Elementor et FooEvents Calendar

Vous devez d'abord vous assurer que vous disposez de la Elementor installé. Il se trouve sur wordpress.org et installé directement depuis la section des plugins de votre site web.

Connectez-vous à votre tableau de bord d'administration WordPress et naviguez vers Plugins > Ajouter un nouveau. Rechercher ensuite Elementor et installer le Constructeur de site web Elementor plugin.

Ensuite, recherchez FooEvents et installer le Calendrier des événements pour FooEvents FooEvents propose deux façons de créer des événements sur votre site WordPress. La première option consiste à ajouter les détails de l'événement à un article ou à une page standard de WordPress à l'aide de la fonction FooEvents Calendrier plugin. Cette opération s'effectue lors de l'édition de l'article ou de la page. Le plugin FooEvents Calendar ajoute un formulaire de base pour les paramètres de l'événement au bas de l'article, des pages et des types d'articles personnalisés. Ce formulaire vous permet de définir la date et l'heure de l'événement. Une fois définies, elles s'afficheront dans les calendriers générés par le plugin de calendrier FooEvents.

La seconde option, plus sophistiquée, consiste à utiliser la fonction FooEvents pour WooCommerce et des extensions pour ajouter des fonctionnalités d'événements et de billetterie à vos produits WooCommerce. FooEvents pour WooCommerce permet de vendre un nombre illimité de billets directement à partir de votre site web et de gérer les check-ins à l'aide de l'application gratuite FooEvents Applications d'enregistrement. Les FooEvents Réservations Le plugin peut également être utilisé pour vendre l'accès à des plages horaires réservables, ce qui sera illustré plus loin dans ce tutoriel.

Une fois que vous avez mis en place quelques événements tests, passez à l'étape suivante.

Étape 2 : Créer une nouvelle page

Créez une nouvelle page et définissez le titre de la page. Ensuite, allez dans le constructeur de pages Elementor en appuyant sur le bouton Modifier avec Elementor bouton.

Étape 3 : Ajouter l'élément Elementor Tabs

Une fois la page chargée, ajoutez un élément Tabs à la section principale de la page. Par défaut, Elementor crée deux onglets. Supprimez le deuxième onglet et développez les options d'édition du premier onglet.

Étape 4 : Ajouter un calendrier d'événements Elementor à l'aide de FooEvents

Modifiez le premier onglet et changez le titre en "Tous", avant d'ajouter le champ "Tous". FooEvents Code court pour le calendrier à la section contenu de l'onglet.

[fooevents_calendar id="1"]

Lorsque vous ajoutez plusieurs calendriers à une page, il est important de spécifier un identifiant unique pour chaque calendrier (par exemple id="1″). Vous pouvez ensuite prévisualiser le calendrier, qui affichera tous les événements se déroulant pendant le mois en cours.

Étape 5 : Ajouter un calendrier pour des catégories d'événements spécifiques

Ensuite, dupliquez l'onglet que nous venons de créer et changez le titre en activités. Ce calendrier doit ensuite afficher tous les événements qui sont des activités. Lorsque vous créez des événements à l'aide du plugin FooEvents pour WooCommerce, vous pouvez les organiser en utilisant la fonction de catégories de WooCommerce. Pour cette démo, nous avons ajouté la visite en bus à la catégorie des activités. En utilisant le paramètre include_cat du shortcode, nous pouvons ensuite filtrer le calendrier pour n'afficher que les événements qui ont été catégorisés comme des activités. Nous pouvons également reproduire ce processus pour les événements classés dans la catégorie "Conférences".

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

Étape 6 : Ajouter des calendriers pour des périodes spécifiques

Créez un calendrier qui n'affiche que les événements se déroulant le jour courant en utilisant le paramètre defaultview avec la valeur listday. Vous pouvez également utiliser ce paramètre en combinaison avec d'autres paramètres tels que le paramètre include_cat si nécessaire. Suivez le même processus et créez un onglet de vue Semaine dans lequel nous spécifions que la vue par défaut est listWeek. Cette vue affichera alors tous les événements qui se déroulent pendant la semaine en cours.

Créez un onglet de vue mensuelle qui affiche tous les événements se déroulant au cours du mois calendaire actuel à l'aide de listMonth et du paramètre defaultdate pour spécifier le mois à afficher. Créer un onglet pour afficher tous les événements se déroulant dans l'année en cours en utilisant la valeur listYear.

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

Étape 7 : Ajouter un calendrier pour des événements spécifiques à répéter

Créez un calendrier pour les événements répétitifs spécifiques. Par exemple, la visite en bus utilise le plugin de réservation FooEvents et se répète à différents créneaux de date et d'heure. Vous pouvez créer un calendrier qui n'affiche que ces créneaux en spécifiant l'identifiant du produit. Il vous suffit d'obtenir l'ID, de créer un onglet appelé Bus Tour et de définir l'ID du produit pour le paramètre post. Le calendrier n'affichera alors que les réservations pour cet événement.

Voilà, c'est fait ! Vous savez maintenant comment utiliser FooEvents et Elementor pour ajouter des calendriers d'événements à votre site web qui affichent plusieurs événements dans divers onglets en utilisant différents modes d'affichage. Chacun de ces calendriers peut être filtré à l'aide d'un certain nombre de paramètres du shortcode. Vous pouvez en savoir plus sur ces paramètres en visitant le centre d'aide de FooEvents et en naviguant jusqu'à la section calendrier shortcodes help doc.

Ce contenu de notre partenaire pourrait également vous intéresser FooSales WooCommerce POS:

S'abonner à notre lettre d'information

Soyez le premier à recevoir les mises à jour des produits et les offres spéciales