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

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

Dans ce tutoriel, nous allons vous montrer comment ajouter un calendrier d'événements. Elementor en utilisant FooEvents en 2024. Les calendriers affichent plusieurs événements dans différents onglets et selon 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.

Calendrier d'événements Elementor

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.

Capture d'écran des paramètres de l'événement de la page et de l'article du calendrier de 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.

La capture d'écran montre qu'un titre de page est en train d'être défini

É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 pour tous les événements

Capture d'écran d'Elementor utilisé pour ajouter un calendrier à l'élément onglet

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

Capture d'écran d'Elementor utilisé pour ajouter un calendrier à l'élément d'onglet qui affiche les activités

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

Capture d'écran d'Elementor utilisé pour ajouter un calendrier à l'élément d'onglet qui affiche tous les événements de la semaine en cours.

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

Capture d'écran de l'utilisation d'Elementor pour ajouter un calendrier à l'élément d'onglet qui affiche toutes les occurrences des réservations de visites en bus.

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

    Panier