Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Ajouter une section DIVI où vous voulez

par | 11 Juil,2016 | DIVI, Tutoriels, WORDPRESS

Dans ce tutoriel je vais vous montrer comment ajouter une « section » DIVI avec son contenu, où bon vous semble dans les pages de votre site web créé avec DIVI.

Quel intérêt me direz-vous, puisqu’on peut utiliser le DIVI Builder pour ajouter du contenu à nos pages DIVI…

Nous allons ajouter du contenu au sein des modèles PHP, dans les endroits où le builder ne nous permet pas d’aller « normalement ». Je veux parler par exemple d’insérer un contenu avant le menu principal, juste avant le footer, juste avant le contenu d’un article… Les possibilités sont nombreuses et les applications multiples. Comme par exemple la possibilité de répéter un contenu sur toutes les pages sans avoir à l’intégrer depuis le builder. Mais revenons à nos moutons 🙂

La méthode n’est pas très compliquée et repose sur l’utilisation de la bibliothèque DIVI et l’ajout d’une instruction d’appel au sein des modèles php pour insérer le contenu préalablement créé et sauvegardé.

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

Dans la mesure où je traiter ici de l’ajout d’une SECTION, on donne un titre à notre section et on séléctionne  SECTION comme type de modèle.

ajoutsectiondivi4

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

ajoutsectiondivi7

On insère une colonne

ajoutsectiondivi8

ajoutsectiondivi9

Puis un module Texte

ajoutsectiondivi10

On ajoute un titre pour notre test

ajoutsectiondivi11

Et on doit avoir la vue suivante dans le builder

ajoutsectiondivi12

Dans la barre d’adresse du navigateur on peut apercevoir l’ID de la SECTION 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

ajoutsectiondivi13

Notez bien le numéro du post, ici 198. Nous allons à présent insérer notre SECTION dans un modèle php existant.

Pour cet exemple, nous allons insérer la SECTION fraichement crée juste avant le menu de navigation principal. ATTENTION, pour qu’un élément quelconque puisse être inséré avant le menu, il faut d’abord désactiver le menu fixe dans les options de DIVI.

ajoutsectiondivi16

puis on clique sur le bouton relatif à la barre de navigation fixe

ajoutsectiondivi17

Une fois la navigation fixe désactivée on clique sur « sauvegarder les changements »

ajoutsectiondivi18

Comme nous avons choisi d’insérer notre contenu avant le menu de navigation, il va falloir trouver la position à laquelle placer notre instruction php.

Le menu est inséré dans le modèle header.php, on édite donc ce fichier (je vous recommande d’utiliser un thème enfant)

On recherche à présent la ligne qui « appelle » le menu principal car nous allons insérer notre code juste avant.

La ligne que nous cherchons dans header.php est la suivante :

codeheader

Notre ligne de code sera donc positionnée juste avant

<?php echo do_shortcode('[et_pb_section global_module="198"][/et_pb_section]'); ?>

Notez que l’on retrouve ici l’identifiant de la SECTION (198) et que l’on fait appel à « global_module » indépendamment du fait que nous ayons coché global ou non au moment de la création de la SECTION.

Ainsi notre header.php avec le code inséré ressemble à ceci :

codeinsere

Une fois le code inséré, on sauvegarde header.php et on vérifie notre résultat

ajoutsectiondivi15

Nous venons d’ajouter une section, juste avant le menu de navigation.

Pour ajouter une section dans le footer, on éditera footer.php. On peut également éditer les modèles de pages page.php ou d’articles single.php ainsi que n’importe quelle page personnalisée. Vous pouvez par exemple ajouter un module « appel d’action » sur toutes vos pages sans avoir besoin de l’ajouter via le builder.

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