Les modules DIVI à votre disposition Partie 1/3

DIVI propose à ce jour 46 modules, c’est-à-dire 46 objets précodés que vous pouvez ajouter facilement à vos pages et personnaliser à volonté.

1- Accordéon

Ce module permet de présenter votre contenu avec un effet « à tiroir » : chaque élément devient visible lorsque l’internaute clique dessus.

2- Appel à l’action

Permet de construire un bloc comportant un titre, un texte et un bouton, par exemple pour annoncer un événement ou présenter un contenu à mettre particulièrement en valeur.

3- Audio

Permet d’insérer un fichier audio dans votre article et propose de choisir le visuel (exemple : couverture d’un album musical) et le fond coloré.

4- Barre Latérale

La barre latérale (aussi appelée Sidebar dans l’univers de WordPress) est la zone qui apparait traditionnellement en colonne d’un article ou d’une catégorie d’articles. Elle peut contenir des « Widgets » (créés dans votre Tableau de Bord, depuis Apparence > Widgets) tels que : articles récents, commentaires récents, menu de navigation particulier, image, bloc de texte etc…
Grace à Divi, vous pouvez modifier l’emplacement et l’aspect graphique de cette Sidebar à volonté !
Un exemple de barre latérale ? Voyez la colonne à droite de cet article !

5- Bascule

Sensiblement identique à l’Accordéon, le module Bascule ne contient qu’un tiroir.

6- Blog

C’est un module important dans votre univers Divi puisqu’il vous permet d’appeler des articles reliés à une ou plusieurs catégories, voire même à toutes les catégories de votre site. Il offre un grand nombre de personnalisations comme l’affichage en ligne ou en grilles, la présence de l’image à la Une, l’affichage du texte complet ou d’un extrait, et comme pour tout autre module Divi, les effets de couleurs de fonds, de textes ou encore de bordures, l’effet d’ombrages, etc…
L’exemple ci-dessous vous montre un module Blog en grille dans lequel j’appelle les 3 derniers articles de ma catégorie d’articles « Quoi de neuf chez Mirobolus ».

7- Boutique

Ce module est le frère jumeau du module Blog à la différence qu’il appelle des produits de votre boutique Woocommerce. Il fonctionne sur le même principe et vous pouvez, selon vos objectifs, appeler tous les produits ou seulement certaines catégories de produits.

8- Bouton

Inutile d’en dire plus si ce n’est que, comme pour tout module Divi, il est possible de définir un aspect général de vos boutons et des exceptions au niveau de chaque module, pour varier sa couleur de fond et de texte, son alignement, ajouter des effets de bordure, ombre, coins arrondis, icône, animation.

9- Carte

Le module Carte de Divi permet d’intégrer une carte de Google Maps dans n’importe quelle section bleue d’une page web. A noter qu’un autre module Divi vous permet d’intégrer une carte en plein écran (dans une section violette de Divi) : Carte en Plein Écran.

Attention : pour faire fonctionner Google Map, vous devez avoir une adresse de messagerie Gmail pour vous inscrire sur Google Cloud Platform et vous devez obtenir une clé API pour faire fonctionner ce module.
>> Accédez à Google Cloud Platform pour obtenir votre API Key
>> Découvrez la documentation de Divi sur l’obtention d’une API Key (en anglais)
Pour les réfractaires à Google, il existe des extensions qui appellent les cartographies opensource comme OpenStreetMap.
Ci-dessous, une illustration du rendu de Google Maps (non-cliquable)

10- Chercher

Le module Chercher de Divi permet d’intégrer une barre de recherche et de la personnaliser, y compris en filtrant les contenus dans lesquels la recherche doit être effectuée ou exclue.

11- Code

Le module Code permet d’intégrer du code HTML, CSS, Javascript, dans une zone de votre page et qui sera exécuté précisément là où vous l’avez placé. On peut par exemple l’utiliser pour appeler un contenu externe à notre site (vidéo hébergée sur une plateforme de Streaming,  appliquer un style css particulier, ou insérer un contenu externe.
Ci-dessous, j’intègre une vidéo d’un client de Mirobolus, le Vélorail du Morvan, en utilisant le module Code dans lequel j’ai saisi le script suivant :

<div class="youtube_player" videoID="7evNkxF3TyQ" width="795" height="608" theme="theme(dark)" rel="rel(0)" controls="controls(0)" showinfo="showinfo(0)" autoplay="autoplay(0)"></div>

12- Commentaire

Ce module permet d’insérer un formulaire de commentaire dans une page, un produit ou un article. Peu utilisé, il est cependant intéressant lorsque l’on souhaite personnaliser totalement un article de notre blog en créant un patron d’article avec le Theme Builder.
Ci-dessous, un aperçu en image (le site de Mirobolus n’ayant pas activé les commentaires).

13- Compteur Barre

Ce module permet d’insérer un formulaire de commentaire dans une page, un produit ou un article. Peu utilisé, il est cependant intéressant lorsque l’on souhaite personnaliser totalement un article de notre blog en créant un patron d’article avec le Theme Builder.
Ci-dessous, un aperçu en image (le site de Mirobolus n’ayant pas activé les commentaires).

14- Compteur Cercle

Ce module permet d’insérer un formulaire de commentaire dans une page, un produit ou un article. Peu utilisé, il est cependant intéressant lorsque l’on souhaite personnaliser totalement un article de notre blog en créant un patron d’article avec le Theme Builder.
Ci-dessous, un aperçu en image (le site de Mirobolus n’ayant pas activé les commentaires).

15- Compteur Nombre

Ce module permet d’insérer un formulaire de commentaire dans une page, un produit ou un article. Peu utilisé, il est cependant intéressant lorsque l’on souhaite personnaliser totalement un article de notre blog en créant un patron d’article avec le Theme Builder.
Ci-dessous, un aperçu en image (le site de Mirobolus n’ayant pas activé les commentaires).