Dans un précédent tutoriel, je vous expliquais comment ajouter une « section » DIVI avec son contenu, au sein d’un autre module.

Cela impliquait l’ajout de code à votre fichier functions.php et forcément quand on n’est pas particulièrement amateur de code php ça peut refroidir.

Aujourd’hui j’ai créé un petit plugin pour aider ceux qui ne veulent pas avoir à toucher au code, il s’agit de Simple Divi Shortcode que vous pouvez trouver dans la rubrique plugins. Il s’agit de la version payante de l’outil, qui ajoute une colonne dans la bibliothèque ainsi qu’un système de copie du shortcode en un clic.

Une version plus basique (gratuite) est à votre disposition sur le repository wordpress : Simple Divi Shortcode, cette version ajoute le shortcode mais vous devez chercher et ajouter l’id de l’élément à insérer.

Comme expliqué dans la version initiale du tutoriel, pour trouver l’id : Au sein de la bibliothèque Divi se trouve une liste des modèles existants. Au survol du nom d’un modèle de la liste, une url s’affiche en bas à gauche de l’écran. Au sein de cette url se trouve le numéro du post sous la forme post=xxxx où xxxx est l’id à utiliser avec le shortcode. Ainsi, si vous voyez post=5286 dans l’url en bas à gauche, le shortcode à utiliser sera :

[showmodule id="5286"]

L’id du modèle peut aussi être trouvée dans l’url affichée dans le navigateur lorsque le modèle est en cours d’édition (cherchez post=xxxx, où xxxx est l’id à utiliser dans le shortcode)

La version payante de l’outil affichera un Shortcode pour chaque élément existant de la bibliothèque Divi, aussi bien sur la page qui liste les éléments existants que dans la page de l’élément lui même :

Il vous suffira de copier le shortcode affiché et de le coller là où vous souhaitez utiliser le modèle.

Vous pourrez insérer n’importe quel modèle de la bibliothèque DIVI dans la zone contenu d’un module Divi (comme par exemple une carte google, un formulaire de contact et autres dans un module onglets, accordéon…)

En résumé : vous pouvez insérer un contenu de votre choix, là où habituellement vous ne pouvez pas 🙂

Le module onglets ci après a été créé dans la bibliothèque DIVI et je l’ai appelé au moyen de cette technique de shortcode (juste un showmodule avec l’id de mon modèle onglets pour l’insérer dans cet article.)

Capture d’écran du texte de mon article, où la ligne showmodule sera remplacée par mon module d’id correspondante au moment du rendu par le navigateur :

A présent je vous montre comment construire ces onglets. Ici j’affiche une carte dans le premier, et un témoignage dans le second. Ces deux modèles on été construits au sein de la bibliothèque DIVI.

Création d’un module onglets contenant d’autres modules :

On ajoute un nouvel onglet

Au sein de notre onglet, on peut insérer directement (copier/coller) notre shortcode d’appel au module créé et sauvegardé dans la bibliothèque (ici la carte) :

Ensuite on sauvegarde et on insère le shortcode du témoignage dans l’onglet suivant.

Une fois nos onglets créés notre module onglet se présente ainsi :

Souvenez vous que dans mon cas il s’agit d’un élément de la bibliothèque DIVI. Je vais donc récupérer son shortcode pour l’insérer directement dans cet article. Pour ça, il me suffit de copier/coller ce dernier depuis la metabox SHORTCODE qui apparaît en bas à droite dans l’écran de construction de mon élément (ou encore dans la liste des éléments de la bibliothèque)

J’espère que cette technique vous sera utile pour ajouter des éléments là où vous ne pouviez pas avant.

Vous pouvez par exemple ajouter une section contenant plusieurs colonnes dans un seul module texte, dans un onglet… les possibilités sont nombreuses quand on a compris comment utiliser la technique.

N’hésitez pas à poser des questions si vous n’arrivez pas à mettre cette solution en pratique.

Si ce tutoriel vous a été utile, vous pouvez me soutenir en m’offrant un café 🙂