Je vais vous présenter ici le plugin de Fabrice Esquirol que vous avez déjà du croiser sur le groupe Facebook Support Divi Community.
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.
Par exemple, vous voyez la bannière en page d’accueil sur le plugin Divi Visual Footer ?
Et bien je l’insère dans mon article avec un shortcode généré par le plugin :
Créez un footer personnalisé
directement dans le visual builder
en front-end !
Créez un footer personnalisé
directement dans le visual builder
en front-end !
Plutôt simple et efficace non?
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.
Si vous désirer l’acheter, rendez-vous ici :
N’hésitez pas à nous partager vos utilisations des différents modules en commentaires 😉
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.