Point culminant du plugin Divi : module de calendrier des événements Divi

Le calendrier des événements est le calendrier des événements de référence pour WordPress. Cela fonctionne bien avec Divi, mais pour l'ajouter à vos mises en page Divi, vous devez utiliser un shortcode. Le style se fait à partir de son onglet Paramètres dans le tableau de bord WordPress. Cela rend difficile l'intégration du style à votre mise en page Divi. Un plugin tiers appelé Divi Events Calendar Module résout ce problème en affichant The Events Calendar en tant que module Divi. Dans cet article, nous examinerons le module de calendrier des événements Divi et verrons ce qu'il peut faire.

Installation du module de calendrier des événements Divi

Tout d'abord, installez le plugin The Events Calendar. Si ce plugin n'est pas installé, vous obtiendrez un message d'erreur qui vous dit qu'il doit être installé et fournit un lien vers la page WordPress du plugin (devinez comment je le sais). Pour plus d'informations sur le calendrier des événements, consultez l'article Le calendrier des événements : un aperçu détaillé de la version gratuite ici même dans le blog ET.

Ensuite, téléchargez et activez le plugin Divi Events Calendar Module et activez-le.

Pour mes exemples, j'ai créé un ensemble d'événements pour Divi et WordPress avec différentes catégories, organisateurs, lieux et dates.

Module Calendrier des événements Divi

Deux nouveaux modules sont ajoutés au Divi Builder. Le premier, appelé Calendrier des événements Divi, affiche les événements sous forme de cartes dans une liste un peu comme les articles de blog. La seconde, appelée Divi Event Calendar View, affiche les événements sur un calendrier. Le module d'affichage du calendrier est toujours en version bêta. Il a actuellement des fonctionnalités limitées. Nous allons examiner les deux modules.

Pour le premier, j'utilise le pack de mise en page Meetup de la page Meetup Schedule. J'ai remplacé les événements de cette page par le module Calendrier des événements Divi.

Onglet Contenu

Le module affiche automatiquement les événements. Il comprend les onglets Divi standard. L'onglet Contenu ajoute du contenu et des éléments. Il ajoute un fond bleu par défaut.

Teneur

La section Contenu vous permet de saisir le nombre d'événements à afficher, les catégories à inclure, le format de la date, la longueur de l'extrait et le numéro de décalage. Dans cet exemple, j'ai limité les événements à 2 dans la catégorie Événements Divi. J'ai mis le décalage à 1.

Éléments

Éléments vous permet de choisir les éléments qui s'affichent. Cela inclut l'image présentée, l'organisateur du spectacle, l'URL du site Web, la date, l'heure, le lieu, l'emplacement, l'extrait, la catégorie, le bouton Plus d'informations et les événements passés (ce qui limite le module à afficher uniquement les événements passés). Je l'ai configuré pour masquer l'image en vedette et l'organisateur du spectacle.

Onglet Conception

L'onglet Conception ajoute des options pour la mise en page, la vignette, le texte du titre, le texte des détails, le texte d'extrait et le bouton Afficher plus. Le texte fonctionne de la même manière que le module de texte normal. Nous examinerons de plus près la mise en page, la vignette et le bouton Afficher plus. Les bordures et les ombres de la boîte fonctionnent pour les cartes individuelles. C'est quelque chose que j'ai voulu voir dans plein de modules Divi.

Disposition

La disposition vous permet de choisir le nombre de colonnes (1-4), l'alignement de l'image (gauche ou haut), la couleur d'arrière-plan, la marge et le remplissage. J'ai placé l'image en haut et changé l'arrière-plan en blanc. Le bleu apparaît toujours entre les cartes d'événement.

Pour cet exemple, j'ai défini les colonnes sur 2 et ajouté une marge et un rembourrage pour que les cartes s'intègrent dans l'arrière-plan bleu, créant ainsi une bordure.

Voici l'exemple avec 3 colonnes. Je peux ajuster le texte de l'URL pour qu'il s'adapte. À 3 colonnes, le placement de l'image n'est pas une option.

Celui-ci a 2 colonnes avec les images sur la gauche.

La vignette

Les paramètres de vignette incluent la marge, le remplissage, la largeur, les coins, les styles de bordure, la largeur de bordure, la couleur de bordure et le style de bordure. Dans cet exemple, j'ai réglé le remplissage sur 75 pour amener l'image au centre de la carte et la largeur à 100.

Pour cet exemple, j'ai défini les coins sur 36px et lui ai donné une largeur de bordure de 9px. J'ai stylisé les couleurs de la bordure et lui ai donné un style incrusté.

Texte

J'ai ajusté le texte du titre pour qu'il corresponde à la mise en page, avec Roboto avec un poids léger et des majuscules. J'ai laissé l'extrait et le texte des détails par défaut.

Bouton Afficher plus

Dans cet exemple, j'ai utilisé le style de la mise en page pour le bouton. J'ai défini la taille sur 14px, ajusté la couleur d'arrière-plan, modifié la largeur et le rayon de la bordure et sélectionné Roboto bold en majuscules. J'ai laissé l'effet de survol par défaut, ce qui augmente la taille du bouton comme vous pouvez le voir dans le bouton du haut. J'ai également laissé le texte par défaut, qui dit VIEW.

Pour cet exemple, j'ai utilisé la plupart des paramètres des exemples précédents, mais avec quelques modifications. J'ai supprimé le fond bleu, modifié le rayon de la bordure et supprimé la bordure. J'ai également limité les catégories pour n'afficher que les événements Divi (l'un des deux exemples de catégories que j'ai créés). La limite est fixée à 2 événements.

Pour cet exemple, j'ai défini la mise en page pour afficher 3 colonnes. J'ai supprimé la bordure du bouton et centré l'alignement du bouton. J'ai également supprimé l'URL, modifié la couleur du texte détaillé, modifié le texte du bouton et donné une ombre aux cartes afin qu'elles se démarquent de l'arrière-plan.

Module de visualisation du calendrier des événements Divi

Voici un aperçu du deuxième module. Il fournit une vue du calendrier de vos événements. Le calendrier comprend le mois, l'année, la navigation et il met en évidence la date du jour. Il s'agit de la page Événements du pack de mise en page Galerie d'art. Survoler un événement affiche une fenêtre contextuelle avec les informations. Il s'agit de la vue par défaut.

L'onglet Conception ajoute des paramètres pour le texte du module. Il inclura éventuellement des paramètres pour le titre, le mois, etc. Dans cet exemple, j'ai ajusté le poids, la couleur et la taille du texte. Cela ajuste les dates sur le calendrier.

Pour cet exemple, j'ai changé la famille de polices en Roboto et ajusté la couleur, la taille, l'espacement des lettres et la hauteur des lignes. J'ai également donné une ombre au texte pour l'aider à se démarquer. Tout le texte, à l'exception du bouton « aujourd'hui », est affecté par la taille, l'espacement et la hauteur.

Vous pouvez également ajuster la bordure, les arrière-plans, les ombres de la boîte, etc. Dans cet exemple, j'ai défini le texte du module en majuscules. Cela inclut le texte du mois et du jour. J'ai également ajusté l'arrière-plan, donné une bordure au module (en utilisant le style double bordure) et lui ai donné une ombre de boîte. La bordure est de la même couleur que le texte.

Pour celui-ci, j'ai inclus les couleurs et les paramètres d'ombre de la boîte de la mise en page. J'aime la façon dont cela fonctionne avec la conception de la mise en page. Même avec son nombre limité d'ajustements, le module d'affichage du calendrier vaut la peine d'être utilisé avec vos mises en page Divi.

Prix ​​et documentation

Vous pouvez obtenir le module de calendrier des événements sur le site Web du développeur pour 35 $. Il comprend une utilisation illimitée du site Web, une assistance et des mises à jour à vie et une garantie de remboursement de 30 jours.

La documentation est gérée avec une vidéo et un court article pour vous guider tout au long de l'installation, et quelques courts articles pour montrer comment l'utiliser et comment effectuer les mises à jour. J'ai eu la chance de ne pas avoir besoin de consulter la documentation (les modules sont très intuitifs), mais je suis content de voir qu'elle est disponible quand c'est nécessaire.

Mettre fin aux pensées

C'est notre regard sur le plugin Divi Events Calendar Module pour Divi. Les modules fonctionnent comme n'importe quel module Divi, il est donc facile de styliser vos événements pour qu'ils fonctionnent avec vos mises en page Divi. Le module de calendrier principal inclut même des ajustements de remplissage, de marge et de bordure pour les éléments individuels du module. Cela vous permet de contrôler leur style en tant que cartes individuelles.

Il vous permet de saisir les catégories à afficher si vous souhaitez avoir plus de contrôle. C'est la seule chose qui fonctionne différemment des autres modules qui vous permettent de sélectionner vos options dans une liste déroulante. Je préfère l'option de liste déroulante. C'est quelque chose que j'aimerais voir changer à l'avenir. J'aimerais aussi pouvoir choisir des événements en fonction des lieux, des organisateurs d'événements, etc.

Le calendrier des événements lui-même est un excellent outil pour tout site Web. Il est utile pour les séances photo, les concerts, les salons de produits, les événements commerciaux, les rencontres et bien plus encore. Si vous souhaitez utiliser le plugin The Events Calendar avec votre site Web Divi, le plugin Divi Events Calendar Module vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé le module Calendrier des événements Divi ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via VectorKnight / shutterstock.com