Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Ajouter un module ou une section DIVI dans un autre module

par | 1 Août,2016 | DIVI, Tutoriels, WORDPRESS

Dans ce tutoriel je vais vous montrer comment ajouter une “section” DIVI avec son contenu, au sein d’un autre module

Ainsi vous pourrez ajouter des modules (cartes google, formulaires de contact et autres dans un module onglets, accordéon…

Encore une fois la méthode repose sur l’utilisation de la bibliothèque DIVI et l’ajout d’un shortcode pour insérer le contenu directement dans le module.

La première chose que nous allons faire est ajouter une fonction à functions.php car nous aurons besoin d’un SHORTCODE pour insérer notre SECTION/MODULE

Pour celles et ceux qui ne veulent rien avoir à faire avec le code, j’ai préparé un nouveau tutoriel pour arriver au même résultat en utilisant un plugin que j’ai réalisé.

Pour ceux qui préfère coder par eux-même, copiez le code ci dessous dans le fichier functions.php de votre thème enfant

//Info propriété intellectuelle : dans la mesure où j'ai créé un plugin basé sur ce code, et comme stipulé dans les mentions légales
//vous êtes autorisés à utiliser ce code pour des projets personnels mais n'êtes pas autorisés à le vendre ni à en faire un plugin

//Shortcode pour appeler le module
function showmodule_shortcode($moduleid) {
extract(shortcode_atts(array('id' =>'*'),$moduleid)); 
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
add_shortcode('showmodule', 'showmodule_shortcode');

Ce SHORTCODE recevra l’id du module à insérer en paramètre.

Nous allons créer le contenu à insérer. On pourrait le faire depuis n’importe quelle page en cours de création, il suffit d’avoir accès au DIVI builder, mais on peut tout aussi bien le faire directement depuis la bibliothèque DIVI

On ouvre la bibliothèque DIVI par le biais de la barre d’outils latérale :

ajoutsectiondivi1

On clique ensuite sur “Ajouter Nouveau”

ajoutsectiondivi2

La fenêtre d’ajout de module va s’ouvrir

ajoutsectiondivi3

Vous pouvez rendre cette section Globale, mais ce n’est pas une obligation. Cliquez ensuite sur ENVOYER

ajoutsectiondivi6

Le DIVI Builder apparaît avec une section vierge

On insère une colonne

ajoutsectiondivi8

Puis un module formulaire

formulaire

Et on doit avoir la vue suivante dans le builder

formulaire2

Dans le DIVI Builder :

vuebuilder

Dans la barre d’adresse du navigateur on peut apercevoir l’ID de la SECTION/MODULE que nous sommes en train de créer. Ceci est très important car cet identifiant sera utilisé par la suite pour “appeler” notre SECTION/MODULE

Notez bien le numéro du post, ici 378. Nous allons à présent insérer notre MODULE dans un autre module.

Pour cela nous allons créer une page au sein de laquelle nous ajouterons un module ONGLETS.

page

On utilise le générateur DIVI et on ajoute notre module

inserermodule moduleonglet

On ajoute un nouvel onglet

ajoutonglet

Au sein de notre onglet, on peut insérer directement notre shortcode d’appel au module créé et sauvegardé dans la bibliothèque :

Le SHORTCODE que l’on insère est du format suivant :

[showmodule id="378"]

où vous devez remplacer 378 par l’id de votre SECTION/MODULE créé(e) dans la bibliothèque DIVI

Et voilà le résultat, mon formulaire apparait dans un onglet.

resultat

Ici j’ai ajouté une section dans un premier volet d’accordéeon et un formulaire dans le deuxième :

ajoutaccordeonettest accordeon2

Notez que vous pouvez aussi insérer ce type de shortcode dans vos template PHP pour appeler un objet de la bibliothèque DIVI. Le code à utiliser à cet effet est le suivant :

<?php echo do_shortcode('[showmodule id="378"]'); ?>

J’espère que cette technique vous sera utile.

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