Sélectionner une page


Trouvez-le sur le Divi Marketplace

Module de calendrier d’événements Divi est disponible sur le Divi Marketplace! Cela signifie qu’il a passé notre test et répond à nos normes de qualité. Vous pouvez visiter Créatif Pee-Aye sur le marché pour voir tous les produits disponibles. Les produits achetés sur Divi Marketplace sont livrés avec une utilisation illimitée du site Web et une garantie de remboursement de 30 jours (tout comme Divi).

Achat sur la marketplace Divi

Le calendrier des événements est le calendrier des événements par excellence 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 via l’onglet « Paramètres » du tableau de bord WordPress. Cela rend difficile l’intégration du style dans votre mise en page Divi. Un plugin tiers appelé Module de calendrier d’événements Divi Résout ce problème en affichant le calendrier des événements sous forme de module Divi. Dans cet article, nous allons jeter un œil au module Calendrier des événements Divi et voir ce qu’il peut faire.

Installer le module de calendrier des événements Divi

Installer le module de calendrier des événements Divi

Installez d’abord Le calendrier des événements Brancher. Si ce plugin n’est pas installé, vous recevrez un message d’erreur indiquant qu’il doit être installé et comprend un lien vers la page WordPress pour le 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 dans le blog ET.

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

Installer le module de calendrier des événements Divi

Pour mes exemples, j’ai créé une série d’événements pour Divi et WordPress avec différentes catégories, organisateurs, lieux et dates.

Module de calendrier d’événements Divi

Module de calendrier d'événements Divi

Deux nouveaux modules sont ajoutés au Divi Builder. Le premier, appelé le calendrier des événements Divi, affiche les événements sous forme de cartes dans une liste, un peu comme des articles de blog. La seconde, appelée vue du calendrier des événements Divi, montre les événements dans un calendrier. Le module « Vue du calendrier » est toujours en version bêta. Il a actuellement des fonctionnalités limitées. Nous examinerons les deux modules.

Tout d’abord, j’utiliserai le package de mise en page Meetup sur la page Calendrier Meetup. J’ai remplacé les événements de cette page par le module Calendrier des événements Divi.

Onglet Contenu

Languette

Le module affiche les événements automatiquement. Il contient les onglets standard de Divi. Le contenu et les éléments sont ajoutés dans l’onglet Contenu. Un fond bleu est ajouté par défaut.

contenu

Contenu du module calendrier des événements Divi

Dans la section Contenu, vous pouvez entrer le nombre d’événements à afficher, les catégories à inclure, le format de la date, la longueur du résumé et le numéro de décalage. Dans cet exemple, j’ai limité les événements de la catégorie Divi Events à 2. J’ai mis le décalage à 1.

éléments

Éléments du module calendrier des événements Divi

Avec Elements, vous pouvez sélectionner les éléments affichés. Cela inclut l’image sélectionnée, l’organisateur du salon, l’URL du site Web, la date, l’heure, le lieu, l’emplacement, l’extrait, la catégorie, le bouton Plus d’infos et les événements passés (ce qui permet au module d’afficher uniquement les événements passés). Je l’ai configuré pour masquer l’image en vedette et l’organisateur du spectacle.

Onglet Conception

Languette

L’onglet Conception ajoute des options pour la mise en page, la vignette, le texte du titre, le texte détaillé, le texte d’extrait et le bouton Afficher plus. Le texte fonctionne exactement comme le module de texte normal. Nous examinerons de plus près la mise en page, la vignette et le bouton Plus. Les ombres de bord et de boîte fonctionnent pour les cartes individuelles. C’est quelque chose que je voulais voir dans beaucoup de modules Divi.

disposition

Disposition du module calendrier des événements Divi

Avec Mise en page, vous pouvez choisir le nombre de colonnes (1 à 4), l’orientation de l’image (à gauche ou en haut), la couleur d’arrière-plan, la bordure et l’espacement. J’ai mis l’image ci-dessus et changé l’arrière-plan en blanc. Le bleu est toujours visible entre les cartes d’événement.

Disposition du module calendrier des événements Divi

Dans cet exemple, j’ai défini les colonnes sur 2 et ajouté une marge et un espacement pour permettre aux cartes de s’adapter à l’arrière-plan bleu et de créer une bordure.

Disposition du module calendrier des événements Divi

Voici l’exemple avec 3 colonnes. Je peux personnaliser le texte de l’URL. Avec 3 colonnes, le placement de l’image n’est pas une option.

Disposition du module calendrier des événements Divi

Celui-ci a 2 colonnes avec les images à gauche.

Vignette

Vignette du module de calendrier Divi Events

Les vignettes incluent la bordure, l’espacement, la largeur, les coins, les styles de bordure, la largeur de la bordure, la couleur de la bordure et le style de la bordure. Dans cet exemple, j’ai défini le remplissage sur 75 pour amener l’image au centre de la carte et la largeur sur 100.

Vignette du module de calendrier Divi Events

Dans cet exemple, j’ai défini les coins sur 36 pixels et spécifié une largeur de bordure de 9 pixels. J’ai stylisé les couleurs de la bordure et lui ai donné un style inséré.

texte

Texte du module Calendrier des événements Divi

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

Afficher plus de bouton

Module de calendrier des événements Divi 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 du cadre et sélectionné Roboto en majuscules et en gras. J’ai laissé l’effet de survol au réglage par défaut, ce qui agrandit le bouton comme vous pouvez le voir dans le bouton ci-dessus. J’ai également laissé le texte au réglage par défaut, qui dit VUE.

Module de calendrier des événements Divi Bouton Afficher plus

Dans 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 du cadre et supprimé la bordure. J’ai également limité les catégories à l’affichage uniquement des événements Divi (l’une des deux catégories d’échantillon que j’ai créées). La limite est fixée à 2 événements.

Module de calendrier des événements Divi Bouton Afficher plus

Dans 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, changé la couleur du texte de détail, changé le texte du bouton et ombré les cartes pour les faire ressortir sur l’arrière-plan.

Module d’affichage du calendrier des événements Divi

Module d'affichage 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 et la navigation, et met en évidence la date du jour. Voici la page Événements du pack de mise en page de la galerie d’art. Lorsque vous survolez un événement, une fenêtre contextuelle s’affiche avec les informations. C’est la vue standard.

Module d'affichage du calendrier des événements Divi

Les paramètres du texte du module sont ajoutés dans l’onglet Conception. Il peut contenir des paramètres pour le titre, le mois, etc. Dans cet exemple, j’ai ajusté l’épaisseur, la couleur et la taille du texte. Cela ajustera les dates dans le calendrier.

Module d'affichage du calendrier des événements Divi

Dans cet exemple, j’ai changé la famille de polices dans Roboto et ajusté la couleur, la taille, l’espacement des lettres et la hauteur de la ligne. J’ai également donné une ombre au texte pour le faire ressortir. Tout le texte, à l’exception du bouton Aujourd’hui, est affecté par la taille, l’espacement et la hauteur.

Module d'affichage du calendrier des événements Divi

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

Dans ce cas, j’ai pris les paramètres pour les couleurs et les ombres 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. Malgré le nombre limité de personnalisations, il vaut la peine d’utiliser le module d’affichage du calendrier avec vos mises en page Divi.

Prix ​​et documentation

Vous pouvez télécharger le module de calendrier des événements à partir du 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.

Documentation est couvert avec une vidéo et un court article pour vous guider à travers l’installation et quelques courts articles montrant comment l’utiliser et comment effectuer des mises à jour. J’ai eu la chance de ne pas avoir à consulter la documentation (les modules sont très intuitifs), mais je suis content de voir qu’elle est disponible quand c’est nécessaire.

Quitter les pensées

Voici notre aperçu du plugin Divi Events Calendar Module pour Divi. Les modules fonctionnent comme n’importe quel module Divi, il est donc facile de concevoir vos événements pour qu’ils fonctionnent avec vos mises en page Divi. Le module de calendrier principal contient même des ajustements de remplissage, de bordure et de cadre pour les éléments individuels du module. De cette façon, vous pouvez les concevoir comme des cartes individuelles.

Vous pouvez entrer les catégories à afficher si vous souhaitez plus de contrôle. C’est la seule chose qui fonctionne différemment des autres modules qui vous permettent de choisir vos options dans une liste déroulante. Je préfère l’option de liste déroulante. C’est quelque chose que j’aimerais changer à l’avenir. Je souhaite également pouvoir choisir des événements en fonction des lieux, des organisateurs, etc.

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

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

Image sélectionnée via VectorKnight / shutterstock.com





Source link

Recent Posts