Consécration d’une vie, apogée d’une carrière, le Theme Builder annoncé il y a plus d’un an est enfin disponible avec la dernière mouture de Divi, la version 4.0.

Elegant Themes vient de l’annoncer en fanfare et à première vue, ce Theme Builder n’a absolument rien à envier à celui d’Elementor Dont On Ne Doit Pas Prononcer Le Nom disponible depuis bien plus longtemps.

Alors à quoi s’attendre ?

Pour ceux qui n’ont rien suivi (ou qui se sont orientés vers un autre builder faute de mises à jour), un Theme Builder, ou constructeur de thème en français, permet de construire l’intégralité du site via le Visual Builder.

Plus aucune limite.

Pour découvrir en détails les nouvelles fonctionnalités apportées par Divi 4 et apprendre plein d’astuces sur cette nouvelle version, regardez notre vidéo de présentation sur notre groupe d’entraide Facebook.

Vous allez pouvoir créer un menu, un pied de page (RIP Divi Visual Footer… j’exagère, le plugin a encore quelques options sympas) mais surtout des modèles de pages dynamiques.
Avec la récente arrivée des modules WooCommerce et du WooCommerce Builder, le design de l’intégralité de vos pages est maintenant à votre portée en créant simplement un ou deux modèles.
Il en est de même pour tous les Custom Post Types que vous utilisez.

Allez, c’est parti pour un petit tour du propriétaire !

Le Theme Builder de Divi

Pour accéder au graal, rendez-vous dans l’administration, puis dans Divi -> Theme Builder.

Nous y voila. Cette page, très intuitive, vous permettra de créer, importer et exporter tous vos modèles de pages.

On peut y voir différents blocs permettant de créer des modèles de pages à assigner à tous nos contenus.
Ces blocs sont tous décomposés en 3 sous-blocs :

• Le header : l’entête de votre page
• Le body : le corps de votre page (vous y placerez tout votre contenu)
• Le footer : le pied de page

Le premier bloc ici représente le modèle global du site.
Vous pouvez par exemple y définir simplement un menu et un pied de page qui seront utilisés sur toutes les pages du site.
Ce n’est pas forcément la peine d’y créer un contenu pour le moment.

Vous pouvez ensuite ajouter autant de blocs que vous le souhaitez à utiliser sur les types de contenu suivant :

• Uniquement la page d’accueil
• Tous les articles
• Une catégorie d’articles particulière
• Une étiquette d’articles particulière
• Un article en particulier
• Une page spécifique
• La page définie comme votre page de blog
• Chaque type de page d’archives (catégories, auteurs, étiquettes, produits, projets…)
• Les pages WooCommerce (Boutique, Panier, Commande ou Mon Compte) : il n’y a pour l’instant aucun module dédié. Il faudra donc toujours utiliser les shortcodes WooCommerce en attendant (ou Divi BodyCommerce par exemple)
• Un produit en particulier
• Une catégorie de produit en particulier
• La page de résultats de recherche
• La page d’erreur 404

Il suffit de cocher tous les contenus auxquels vous souhaitez assigner votre modèle de page pour le mettre en forme.

À noter que vous pouvez également choisir d’exclure votre modèle de certains contenus plutôt que de l’assigner manuellement.

C’est d’une part un gain de temps monumental, mais d’autre part la possibilité de créer des designs très spécifiques pour différentes pages ou produits rapidement et simplement sans plugins tiers.

Créer un modèle de page avec le Theme Builder

Après avoir découvert les options globales, nous allons passer à la création d’un modèle de page et ses paramètres.
Vous allez le voir, il y en a quelques-uns d’intéressants.

On l’a vu plus haut, les modèles se décomposent de la manière suivante :

À noter que l’icône d’oeil à droite permet d’afficher ou masquer la section que vous souhaitez.
Cela se révèle très utile pour la construction de Landing Page pour vos produits par exemple (RIP les plugins de Landing Page).

Pour construire l’une des parties de votre modèle, il vous suffit de cliquer sur Add Global …

Le Theme Builder vous offre à partir de là différentes options :

• Use Global … : non présente sur la capture, cette option apparait lorsque vous avez défini une section globale pour vos modèles de pages. On en reparle juste en dessous
• Build Global … : vous permet de lancer le Visual Builder pour construire votre modèle
• Ajouter de la bibliothèque : vous permet de charger un modèle enregistré ou ayant été importé (il y a fort à parier qu’Elegant Themes va en offrir un maximum)
• Copy From Template : vous permet de copier directement une section depuis n’importe lequel de vos autres modèles de pages. Ici j’avais au préalable créé un modèle de page de résultats et de produits. Il n’y a pas besoin de les enregistrer dans la bibliothèque Divi pour les réutiliser ici.
  Cette option transforme également automatiquement votre modèle en section globale.
  Cela est possible également en faisant un copier/coller via le clic droit de la souris.

Une fois vos modèles créés, pensez bien à enregistrer vos modifications sans quoi vous ne verrez aucun changement (et allez perdre beaucoup de temps) :

Deux nouveaux modules : Menu de navigation et Post Content

Le Theme Builder intègre deux nouveaux modules Divi à utiliser dans vos modèles pour mettre en forme votre design.

Le module Menu

Le module Menu vous permet comme son nom l’indique d’insérer un menu de navigation – préalablement créé dans l’administration de votre site – dans votre page.

Ce module vous permet d’utiliser les options de modifications classiques de Divi concernant la personnalisation et reprend les options déjà disponibles dans le personnaliseur de thème que vous utilisez habituellement :

• Le choix du menu si vous en avez créé plusieurs
• L’ajout d’un logo
• L’ajout d’éléments ( le panier WooCommerce ou le champ de recherche)
• Le style du menu, reprenant les modèles que nous connaissons déjà

Les autres options du modules concernent la personnalisation de tous les éléments :

• Couleurs des textes, icônes, bordures…
• Tailles des textes, marges…
• Dimensionnement du logo, de la hauteur du menu..
• Polices, etc.

Petits bémols de mon point de vue :

• Toujours pas de possibilité de saisir le point de rupture du menu manuellement
• On ne peut nativement pas définir le menu comme étant fixe en haut de l’écran

Espérons que cela fasse l’objet d’une future mise à jour.

Passons maintenant à l’autre nouveauté…

Le module Post Content

Ce module est indispensable lors de la création de modèles de page d’article.

Il permet d’insérer le contenu de celui-ci – ce que vous rédigez dans l’administration de WordPress – ou vous voulez sur la page.
Attention il n’englobe ni le titre, ni l’image à la Une, ni les métadonnées, ni les commentaires.

Son gros point fort réside dans la possibilité de styliser chaque élément de votre article (niveaux de titres, textes, images, liste à puces, bloc de citations, etc.) via les options du Builder.
Il ne vous sera donc plus nécessaire de chercher comment mettre en forme chaque élément en CSS.

En quoi ce Theme Builder est révolutionnaire ?

On l’a vu, le Theme Builder de Divi 4.0 apporte son lot de nouveautés et la possibilité de créer des modèles de pages pour absolument tout.

Mais surtout, et c’est bien là le principal, il rend Divi enfin vraiment DYNAMIQUE.

Vous n’aurez maintenant plus qu’à créer un seul modèle de page par type de contenu (ou plus si vous voulez des designs différents) en utilisant les champs dynamiques : titres, URL, métadonnées, champs personnalisés, champs ACF…
Vous pourrez tout insérer ou vous voulez de la manière que vous voulez.

Tout ceci est rendu possible automatiquement grâce à l’utilisation globale des modèles de pages, sans aucun plugin supplémentaire et sans avoir à rentrer dans le code.

Plus besoin de notions de HTML ou PHP pour concevoir des sites complexes et poussés.
Cerise sur le gâteau : tout reste visuel.

Partager