Débuter avec le Visual Divi Builder

debuter-editeur-visuel-theme-divi

Durée : 5 minutes

Niveau : débutant

Vidéo : à venir

Prix : Gratuit (Si client)

Plugin requis : non.

Partagez ce tuto

Facebook
Twitter
Email
Table des matières

Si vous venez d’installer le thème WordPress Divi, tout d’abord un grand bravo. A partir de maintenant, vous allez pouvoir réaliser un site internet qui vous ressemble grâce à un outil simple : le Divi Visual Builder.

Qu’est-ce que le « Divi Visual Builder » ?

L’outil qu’on appelle Divi Builder se présente à vous sous deux formes : le traditionnel générateur de template via le back-office de votre interface WordPress mais aussi sous la forme d’un éditeur de type « visuel ».

Concernant l’outil qui est accessible via le back-office de WordPress, pas de surprise il fonctionne comme beaucoup de générateur de page. On ajoute des blocks, du texte, … et le tour est joué. Pour avoir un rendu de notre travail, on sauvegarde et on fait une prévisualisation. Et si je vous dit qu’on peut faire encore plus simple ?

Si je vous dit que vous pouvez éditer votre site internet à la volée sans passer par l’administration ? Pas mal non ?

Imaginez pouvoir personnaliser la police et la couleur de vos textes, redimensionner vos images, changer la taille de vos blocs de textes, … sans pour autant passer par le back-office de votre site. C’est possible avec ce nouvel éditeur dit « visuel ».

generateur-divi

Activer le Visual Builder Divi

Pour pouvoir utiliser le Visual Builder et ne pas vous prendre la tête concernant les modifications de votre site internet, la procédure reste extrêmement simple.

Il vous suffit de cliquer sur le bouton bleu « Utiliser le Visual Builder », comme sur l’image ci-dessous

activer-visual-builder

Quelques notions à connaitre sur le Builder Divi

La grande force du thème WordPress Divi réside dans le Visual Builder, un générateur de pages de type « drag and drop » (glisser déposer). Cette grande flexibilité vous permettra de créer des pages qui vous ressemblent et votre site internet sous WordPress sera un peu plus unique que celui de votre voisin ! Le Builder du thème WordPress Divi utilise trois grandes notions : les sections, les lignes et les modules Si on devait schématiser et simplifier, on dirait que :
  • Les sections sont l’ossature de votre page
  • Les lignes sont tous les os qui composent l’ossature
  • Les modules sont les éléments « cosmétique » de votre corps.

Les sections

Comme nous l’avons vu un peu plus haut, les sections sont les éléments les plus importants de notre page. Ce sont les parties qui permettent de définir la/les structure(s) de notre page. Avec ces sections, nous allons créer les grands ensembles d’éléments de notre page. Il existe trois types de sections : section standard, section pleine largeur et section spéciale. Selon le type de section que vous allez utiliser, vous pourrez plus ou moins faire des réglages avancés.

Les lignes

Les lignes sont les éléments qui vont définir une structure au sein des sections. Ainsi, dans une section, vous pouvez définir de placer une ligne qui présente des colonnes de type 1/3 – 1/3 – 1/3 ou encore 1/2 – 1/2. Chaque ligne est indépendante l’une de l’autre et vous pouvez choisir la disposition des colonnes selon votre guise.

Les modules 

Les modules sont les éléments de « carrosserie ». Chacun des modules de Divi rentrent dans des colonnes et sont Responsive Design. En gros, ce sont les éléments qui vont vous permettre de remplir de contenu vos différentes sections et ligne.
Retour en haut