Le nouveau Divi Builder

Objectif

Le présent article vous explique les principes de base pour l’utilisation du nouveau constructeur de Divi (le “Divi Builder”).

Pré-requis

Une base WordPress installée avec un thème-enfant de Divi.

L’interface de connexion

Le menu latéral à gauche de votre interface WordPress vous permet d’avoir accès à vos pages ou à vos articles, sous les rubriques “Pages” ou “Articles”…

Cliquer sur le titre de la rubrique ou sous le premier item situé sous ce titre revient au même : par exemple sur la photo ci-contre, cliquer sur “Articles” ou sur “Tous les articles” conduira au même résultat…

Dans Pages ou Articles, vous allez ensuite sélectionner la page ou l’article dont vous allez modifier le contenu.

Vous arrivez ainsi sur la nouvelle interface Divi, qui peut paraître déroutant à ceux qui étaient habitués à l’ancienne interface…

Vous allez voir qu’il n’en est rien et qu’au contraire, cette nouvelle interface va pouvoir vous simplifier la tâche, en vous permettant de visualiser en direct le résultat de vos manipulations.

Le “Visual Builder”, qui était auparavant le constructeur alternatif de Divi, devient le constructeur par défaut, pour une meilleure efficacité de vos travaux !

Vous pouvez alors cliquer sur le bouton “Edit With The Divi Builder”.

Ce clic vous amène alors sur votre page ou article en mode “Visual Builder”…

Le mode Visual Builder

En cliquant dans le bas de la page sur :

vous obtenez le déploiement de la barre de fonctions :

En survolant la page ou l’article, vous faites apparaître la structure, composée de sections, de lignes et de modules :

Le fonctionnement du builder

Pour accéder au constructeur proprement dit, il faut cliquer sur l’icône de roue crantée ci-contre (et ce, qu’il s’agisse de modifier une section, une ligne ou un module…).

L’interface de paramétrage apparaît alors (ici sur la partie droite de la page ou de l’article en cours de modification).

En cliquant sur l’icône ci-contre (placée en haut à droite de l’interface de paramétrage)…

…vous pouvez déplacer cette fenêtre sur votre écran et la positionner où vous le souhaitez.

En survolant la fenêtre, vous pouvez également faire apparaître en bas à droite un bouton vous permettant d’en modifier la dimension.

Vous pouvez ainsi réduire ou agrandir cette fenêtre selon vos besoins.

Cette interface vous permet de retrouver les fonctionnalités de l’ancien constructeur de Divi, avec pour chaque section, chaque ligne et chaque module, trois catégories de paramétrages : Contenu, Style et Avancé (ce dernier onglet étant plutôt réservé aux utilisateurs avertis pour l’insertion de lignes de code).

Nouveauté : un bouton “Help” est disponible…

Il vous permet d’afficher différents éléments d’aide sous forme de tutoriels (en anglais) proposés par Elegant Themes, l’éditeur de Divi.

Familiarisez-vous avec le nouveau Divi builder en manipulant et personnalisant un texte…

Pour aller plus loin…

La documentation de Divi (en anglais) fournit tous les détails des fonctionnalités du nouveau contructeur :

https://www.elegantthemes.com/documentation/divi/visual-builder/

Le blog de Divi est également une grande source d’information sur les bonnes pratiques autour de l’environnement Divi et WordPress :

https://www.elegantthemes.com/blog/

 

 

Cet article vous a-t-il été utile ?

N'hésitez-pas à nous faire part de vos expériences et des difficultés que vous pouvez encore rencontrer, de manière à ce que nous puissions affiner et compléter ce support…

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *