Comme prévu, Divi 4.0 est arrivé ce 17 octobre 2019 et comme tous les utilisateurs, j’avais hâte de le tester. Je vous propose de découvrir rapidement comment fonctionne le Divi Theme Builder. Histoire que vous ne soyez pas trop perdu lorsque vous ferez la mise à jour du thème 😉 …

Perdu(e) ? J’avoue avoir été un peu déroutée lorsque j’ai installé un nouveau WordPress avec Divi 4 en local.

Par habitude, j’ai activé le Visual Builder sur une page existante et là, surprise, rien n’a l’air d’avoir changé !

Oui et non en fait :

  • Le Visual Builder fonctionne comme avant, pas de modifications à ce niveau-là (ouf !).
  • Mais toute la puissance du Divi Theme Builder se trouve dans son onglet éponyme, en backoffice. C’est ici que vous pourrez créer le design de vos modèles de page. Vous pourrez également importer et exporter ces « templates de thème ».
layout global par défaut
Exemple de layout global par défaut
layout pour la page Blog
Exemple de layout pour la page Blog
layout pour la page d'archive de catégorie
Exemple de layout pour la page d’archive de catégorie

Voyons ensemble comment le Theme Builder fonctionne…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Construire la template par défaut (globale)

Pour commencer à profiter pleinement des fonctionnalités du nouveau Divi Theme Builder, vous devez vous rendre à l’onglet Divi > Theme Builder.

Si vous êtes nouveau sur WordPress, voici comment installer Divi.

Depuis cet onglet, vous pouvez construire des « parties » de layout (Header, Body et Footer) afin de créer un ensemble de templates.

En cliquant sur Add Global Header, vous pouvez commencer à construire l’en-tête de votre site qui s’affichera sur toutes les pages de votre site. Il s’agit bien d’un design global.

Build Global Header
Cliquez sur Add Global Hedaer puis sur Build Global Header (ou ajouter de la bibliothèque)

Vous obtiendrez 2 choix :

  • Build Global Header : vous construirez le design de votre header
  • Ajouter de la Bibliothèque : vous téléchargerez un élément déjà présent dans votre Bibliothèque Divi.
Templates via l'onglet Theme Builder
Icône du crayon pour éditer le « morceau de template ».

En cliquant sur l’icône du crayon, une fenêtre d’édition s’ouvre :

Éditer la template et commencer à créer
Éditer la template et commencer à créer

Vous pouvez créer votre layout comme à votre habitude : ajoutez des sections, des lignes, des modules et effectuez les paramétrages que vous souhaitez.

Sauvegarder et fermer l'édition
Sauvegarder et fermer l’édition de la template

Dès que vous êtes satisfait du design de votre layout, n’oubliez pas de sauvegarder et de cliquer sur la croix (en haut, à droite) pour sortir de l’édition.

Sauvegarder le design créé.
Sauvegarder le design créé.

De retour dans l’onglet « Theme Builder », pensez à cliquer sur « Sauvegarder les changements ». Sans cette action, votre création ne sera pas encore prise en compte.

construire le body avec le Theme Builder
Cliquez sur la template à modifier : construire le body

Renouvelez ces actions pour les autres parties de la template par défaut : Global Body et Global Footer.

construire le footer avec le Theme Builder
Cliquez sur la template à modifier : construire le footer

Notez que cette template par défaut va s’appliquer à toutes les pages de votre site : c’est le design global. Et qu’il n’est pas obligatoire de l’utiliser. Vous pourriez très bien créer des templates uniques pour certains types de page sans avoir à créer un design par défaut.

2 – Ajouter et gérer de nouvelles templates

Une fois que vous avez paramétré le design global de votre site (facultatif), vous pourrez passer aux choses sérieuses : créer de nouvelles templates et les affecter à certains types de post.

construire une nouvelle template avec le Divi Theme Builder
Ajouter et construire une nouvelle template

Pour cela, il vous suffit de cliquer sur « + Add New Template ». Une popup apparaît et vous propose d’attribuer cette template à un type de page.

À lire : comment créer un modèle de fiche produit avec WooCommerce et Divi ?

Les choix sont nombreux et peuvent varier en fonction de votre installation. Ils sont classés par typologie :

  • Pages : All Pages – Homepage – Specific Pages – Children of Specific Pages
  • Articles : All Articles – Blog – Articles in Specific Catégories – Articles with Specific Étiquettes – Specific Articles
  • Archive Pages : All Archive Pages – All Author Pages – All Catégorie De Projet Pages – All Catégorie Pages – All Date Pages – All Projet Tags Pages – All Étiquettes Pages – Specific Author Page – Specific Catégorie De Projet Pages – Specific Catégorie Pages – Specific Projet Tags Pages – Specific Étiquettes Pages
  • Projets : All Projets – Projets Archive Page – Projets in Specific Catégories De Projets – Projets with Specific Projet Tags – Specific Projets
  • Other : Search Results – 404 Page

Avec toutes ces pages que vous pouvez éditer et construire avec le Divi Theme Builder, impossible que votre site ressemble à celui du voisin !

À lire absolument : comment importer/exporter des templates de thème ?

désactiver global
Important : ne pas oublier de cliquer sur « désactiver global »

Attention : notez que lorsque vous ajoutez une nouvelle template, par défaut, le Global Header, Global Body et Global Footer sont copiés automatiquement.

Cela signifie que si vous les modifiez, tous les autres modules synchronisés (de couleur verte) se modifieront également : c’est la fonctionnalité d’élément global.

Cela peut être intéressant pour le footer par exemple, qui est généralement identique sur toutes les pages d’un site.

Mais si ce n’est pas votre intention, veillez donc à cliquer sur les 3 petits points pour faire apparaître le menu connexe et cliquez sur « Désactiver Global ».

Éditer chaque partie de la nouvelle template
Éditer chaque partie de la nouvelle template : Header – Body – Footer

Une fois que vos parties de templates ne sont plus synchronisées en tant qu’élément global, vous pourrez commencer à éditer et construire votre layout.

Ajouter des modules Divi
Ajouter des sections, des lignes et des modules Divi

Lors de l’édition du « Template Layout », ça se passe comme avec le Visual Builder.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Ne pas oublier le module « Post Content »

Créer le design de vos pages avec le Divi Theme Builder vous permet de définir une structure propre à chaque type de page (ou une structure générale).

Ensuite, il vous suffit de créer ou éditer vos pages (onglet Pages > Toutes les Pages) comme vous le faisiez avant : avec Divi ou avec Gutenberg (éditeur de WordPress).

Toutefois, il est probable qu’en activant le Visual Builder sur l’une de vos pages, vous obtenez le message d’erreur suivant :

Missing Post Content Module
Message d’erreur : « Missing Post Content Module »

« Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module « Publier le contenu ». Un module de publication de contenu est requis pour ajouter un contenu unique dans le modèle de générateur de thèmes. Une fois qu’un module de contenu de publication a été ajouté au modèle, vous pourrez ajouter un contenu de publication unique dans cette zone pour chaque publication à l’aide du modèle. »

ajouter un module de Post Content
Éditer la template et ajouter un module de Post Content

Retournez alors dans la template créée (à l’onglet Divi > Theme Builder), éditez-la et ajoutez un module nommé « Post Content » à l’endroit désiré.

Post Content

Lorsque vous activerez de nouveau le Visual Builder sur la page en cours de création, le message d’erreur aura disparu et vous pourrez commencer à créer le layout.

Module Post Content au sein du layout
À présent, vous pouvez construire votre layout à l’endroit du module « Post Content »

Les sections, les lignes et les modules de Divi pourront uniquement se placer à l’endroit où vous avez ajouté le module « Post Content ».

À lire aussi : Divi intègre la fonctionnalité de WooCommerce Builder.

4 – Et encore d’autres options et fonctionnalités à venir !

J’espère que ce rapide tour d’horizon du Theme Builder vous a permis de savoir par où commencer avec Divi !

Bien évidemment, je ne suis pas entrée dans les détails, il y a encore beaucoup d’options et de fonctionnalités à découvrir. Sans parler des mises à jour futures qui permettront de faire évoluer l’outil…

Toutefois, soyez prudent : la mise à jour vers Divi 4.0 ne devrait pas avoir d’impact sur le design de votre site utilisant une version précédente tant que vous ne créez pas de templates à l’onglet Divi > Theme Builder. Par contre, si vous créez des nouvelles templates et notamment la Default Website Template sur un site déjà existant, le design de votre site entier va changer (c’est d’ailleurs le but de ce Thème Builder).

Et vous, l’avez-vous testé ? Qu’en avez-vous pensé ?

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Divi Theme Builder 4.0.x
(re)Voir la vidéo de lancement du Theme Builder.
Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Pour lire cet article plus tard : épinglez-le sur Pinterest !

comment fonctionne le Theme Builder de Divi ?
les fonctionnalités du Theme Builder

Pin It on Pinterest

Shares
Share This