Il s’agit de Simple Divi Shortcode, un plugin permettant d’insérer n’importe quel module de Divi dans un autre à l’aide d’un shortcode généré par le plugin.
Le plugin coute 6 € pour une utilisation illimitée. Vous le trouverez ici :
Vous pouvez par exemple ajouter un module carte dans un module onglet, ou encore ajouter n’importe quel module dans un article standard de WordPress très simplement.
On peut même imaginer insérer des modules Résumé (blurbs) dans un header plein écran pour afficher diverses informations. Et là, coté design, ça ouvre de très nombreuses possibilités.
Insérer un module Divi dans un autre avec un shortcode
Pour l’utiliser, rien de compliqué.
Il vous suffit d’enregistrer le module que vous souhaitez insérer dans un autre dans la bibliothèque Divi. Si vous ne savez pas comment faire, je vous invite à suivre notre tutoriel ici.
Une fois votre module enregistré, rendez-vous dans la bibliothèque. Une colonne “Shortcode” est apparue à droite de vos modules enregistrés:
Copiez-collez maintenant le shortcode à insérer.
Voici par exemple celui que j’ai utilisé dans cet article pour afficher le module Divi Visual Footer :
Et c’est tout.
Les possibilités sont quasiment infinies.
J’avais également utilisé ce plugin sur mon site de maintenance WordPress pour afficher un tableau de prix mensuel ou annuel dans un module onglet:
Ça m’a évité d’utiliser pas mal de jQuery pour modifier toutes les prix et liens de souscription et ça m’a pris simplement 3 minutes.
Voila ce que j’avais dans l’administration de mon module Onglet :
Et mes deux tableaux de prix dans ma bibliothèque Divi :
Le plugin a quelques limitations que Fabrice liste sur la page du plugin, je vous les remets ici :
Les cartes Google Maps ne peuvent pas être cachées à l’ouverture de la page où elles ne fonctionneront pas correctement. Vous pouvez utiliser une carte Google Maps uniquement dans le premier onglet d’un module onglet.
Un module carte ne fonctionnera pas dans un module bascule ou accordéon si la carte est cachée au départ.
La façon dont DIVI gère les cartes empêche d’avoir 2 modules carte fonctionnels sur une même page.
Il semblerait qu’il y ait un problème quand on essaie de masquer une section/module contenant un shortcode. Ainsi la fonction cacher sur bureau/tablette ou mobile ne fonctionne pas quand un shortcode se trouve à l’intérieur de la section/module que vous souhaitez masquer.
Vous ne pouvez pas utiliser un module accordéon dans un autre module accordéon, idem pour les modules bascule.
L’éditeur visuel (Visual builder) ne vous permet pas d’interagir sur le contenu du shortcode appelé. Vous devez donc construire et modifier vos modèles directement dans la bibliothèque (avec le divi builder standard en backoffice)
Pour conclure
Un plugin français pour Divi, ça reste assez rare pour le souligner et en parler ici.
Simple Divi Shortcode permet d’ajouter pas mal de nouvelles fonctionnalités et de personnalisations à vos modules le plus simplement du monde pour un tarif très abordable.
Je m’en sers moi-même maintenant sur la plupart de mes sites.
Bonjour, excellent tuto du plugin j’aurais aimé savoir comment avez-vous modifier le module onglet pour que les 2 onglet prennent toute la largeur ?
Merci !
Julien
sur 25 octobre 2018 à 16h53
Hello et merci. Tu peux faire ça avec un peu de CSS:
Tu ajoutes une classe CSS “centrer-onglet” à tes onglets et ensuite tu copies colles ce code CSS dans Apparence->Personnaliser:
.centrer-onglet .et_pb_tabs_controls li {
width: 50%;
text-align: center;
}
Bonne journée
luffie
sur 14 novembre 2018 à 09h39
Super, merci beaucoup !
bonne journée !!
François
sur 27 mars 2020 à 09h56
Bonjour,
Merci pour cet article qui m’ouvre le champ des possibles, mais pas encore assez 😉
Est-il possible d’insérer un shortcode “résumé” à la place du tire de l’onglet ?
L’idée serait d’avoir des onglets plus “sexy”, comme la démo de Fabrice. Je n’ai rien trouvé de tel mais je débute sur le web et divi.
Bonne journée
Julien Guiard
sur 31 mars 2020 à 22h23
Bonjour, tu peux tout essayer. Je ne te garantis pas que le shortcode sera en revanche interprété dans tous les champs Divi.
Sandra
sur 16 février 2021 à 12h56
Bonjour,
je viens d’acheter le plugin. J’ai insérer le shortcode (du module image enregistrer dans ma bibliothèque) dans mon module bascule (emplacement : shortcode collé dans l’onglet texte avant mon contenu texte). Le module image apparaît mais je n’ai pas la main pour modifier l’image (taille etc.) Ai-je fait une mauvaise manip ?
Merci pour votre aide.
Pierre Bichet
sur 3 mars 2021 à 12h19
Pour modifier l’élément inséré, il faut éditer le layout concerné dans la bibliothèque Divi.
Pour plus d’informations sur l’utilisation du plugin, je t’invite à contacter Fabrice son auteur.
Solene
sur 25 mars 2021 à 11h37
Bonjour,
Je n’ai pas la colonne Shortcode dans ma bibliothèque Divi. Savez-vous comment je peux y remédier ?
Merci d’avance !
Pierre Bichet
sur 26 mars 2021 à 15h12
C’est la version pro qui ajoute l’option de la colonne précisant le shortcode. Pour le trouver avec la version gratuite, c’est expliqué ici.
À la recherche d’un plugin permettant d’aller plus loin avec Divi ? Vous êtes au bon endroit ! Aujourd’hui on vous présente l’extension “Divi Essential” qui possède 63 modules avancés et un total de 500 layouts. Tout est très facile à personnaliser et à styliser car...
Le ratio des images mises en avant des modules "blog" et "portefeuille" ainsi que les vignettes du module "galerie" de Divi ne convient pas toujours à la mise en page que l'on souhaite pour son site.Voyons donc comment le modifier avec quelques lignes de CSS. Le...
C'est une fonctionnalité que l'on croise de plus en plus régulièrement depuis quelques temps sur les sites mobiles et les applications : les menus horizontaux scrollables.Finis les menus hamburgers classiques sur lesquels il faut cliquer pour afficher le menu, la...
Bonjour, excellent tuto du plugin j’aurais aimé savoir comment avez-vous modifier le module onglet pour que les 2 onglet prennent toute la largeur ?
Merci !
Hello et merci. Tu peux faire ça avec un peu de CSS:
Tu ajoutes une classe CSS “centrer-onglet” à tes onglets et ensuite tu copies colles ce code CSS dans Apparence->Personnaliser:
.centrer-onglet .et_pb_tabs_controls li {
width: 50%;
text-align: center;
}
Bonne journée
Super, merci beaucoup !
bonne journée !!
Bonjour,
Merci pour cet article qui m’ouvre le champ des possibles, mais pas encore assez 😉
Est-il possible d’insérer un shortcode “résumé” à la place du tire de l’onglet ?
L’idée serait d’avoir des onglets plus “sexy”, comme la démo de Fabrice. Je n’ai rien trouvé de tel mais je débute sur le web et divi.
Bonne journée
Bonjour, tu peux tout essayer. Je ne te garantis pas que le shortcode sera en revanche interprété dans tous les champs Divi.
Bonjour,
je viens d’acheter le plugin. J’ai insérer le shortcode (du module image enregistrer dans ma bibliothèque) dans mon module bascule (emplacement : shortcode collé dans l’onglet texte avant mon contenu texte). Le module image apparaît mais je n’ai pas la main pour modifier l’image (taille etc.) Ai-je fait une mauvaise manip ?
Merci pour votre aide.
Pour modifier l’élément inséré, il faut éditer le layout concerné dans la bibliothèque Divi.
Pour plus d’informations sur l’utilisation du plugin, je t’invite à contacter Fabrice son auteur.
Bonjour,
Je n’ai pas la colonne Shortcode dans ma bibliothèque Divi. Savez-vous comment je peux y remédier ?
Merci d’avance !
C’est la version pro qui ajoute l’option de la colonne précisant le shortcode. Pour le trouver avec la version gratuite, c’est expliqué ici.