Les bases de Divi : sections, lignes, colonnes et modules

Objectif

Le présent article vous présente les bases de la manipulation du thème-framework Divi (sous l’ancienne version du Divi Builder qui reste disponible ainsi que sous la nouvelle version du Divi builder).

Pré-requis

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

L’ancien Divi Builder

Si vous avez opté pour le retour à l’ancienne version du constructeur de Divi, lorsque vous créez une page ou un article, vous obtenez la présentation suivante :

Si vous cliquez sur le bouton

vous obtenez l’interface propre à Divi, grâce à cette activation du Divi Builder :

Sections, lignes, colonnes et modules

Pour vos premiers pas avec Divi, découvrez comment le Divi Builder gère l’espace, à travers les sections, les lignes et les colonnes :

Avec le nouveau Divi builder, vous allez retrouver la même structuration des pages et des articles en sections, lignes, colonnes et modules…

Les sections, lignes colonnes et modules avec le nouveau Divi builder

En mode Visual builder, c’est en survolant votre page ou votre article que vous faites apparaître la structure correspondante ; ci-dessous une section (avec un encadrement bleu) :

Cette section comprend une ligne (encadrement vert) avec deux colonnes :

La première colonne contient un module texte :

Et la seconde colonne contient un module image :

Pour chaque section, ligne et module, vous disposez d’une palette d’outil permettant d’éditer et de paramétrer ces section, ligne et module :

Vous pouvez également très facilement ajuster les marges des lignes ou des sections en les survolant et en cliquant sur le trait matérialisant l’un des bords, et en faisant glisser votre pointeur en maintenant le clic jusqu’à l’obtention de l’écartement souhaité ; la marge apparaît alors avec une surface colorée et un affichage en pixels :

Il ne faut bien évidemment pas oublier de sauvegarder votre travail régulièrement en cliquant dans la barre de fonctions située en bas de votre fenêtre sur :
• Enregistrer le brouillon, si vous êtes encore en mode brouillon,
• ou bien sur Sauvegarder si votre page ou article est déjà publié(e) :

Pour aller plus loin…

Voici le tutoriel d’Elegant Themes, l’éditeur de Divi (en anglais) :

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

Gutenberg and the New Divi Builder Experience

 

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…