Constructeur de page de Divi : Guide du débutant 2021

Bienvenue sur mon guide complet pour débuter avec Divi. Ce guide est destiné à vous apprendre les bases de Divi et plus spécifiquement du « Visual Builder » ou constructeur visuel présent avec le thème Divi.

 

Les bases du visual builder ou constructeur de page Divi

Divi est un thème qui vous permet de modifier rapidement et simplement tous les aspects et contenus de votre site.

Ainsi en quelques clics vous pouvez modifier la partie « front-end » c’est à dire la partie que le visiteur pourra voir, grâce au visual builder de Divi.

Le constructeur utilise trois blocs de construction principaux : Sections, Colonnes et Modules. Leur utilisation conjointe vous permet de créer un nombre incalculable de mises en page. Les sections sont les plus grands blocs de construction, et elles abritent des groupes de rangées. Les colonnes se trouvent à l’intérieur des sections et servent à choisir le nombre de modules présent sur une seule ligne. Les modules sont placés à l’intérieur des colonnes. C’est la structure basique de Divi.

Les sections

Les sections sont les éléments de base utilisés dans la conception de pages avec Divi, elles sont la première chose que vous ajoutez à votre page. Celle-ci vous permet de créer des grands groupes de contenu. Il existe trois types de sections : Régulières, Spécialisées et Pleine largeur.

Les sections sont représentées par le cadre bleu pour les sections régulières, orange pour les sections spécialisées et violet pour les sections pleine largeur.

 

Constructeur de page de Divi : Guide du débutant 2021 22

Les colonnes

Les colonnes se trouvent donc à l’intérieur des sections, vous pouvez choisir le nombre d’éléments (ou de modules) que vous souhaitez affichez sur une ligne.

Les colonnes sont représentées par les cadres vert.

Constructeur de page de Divi : Guide du débutant 2021 23

Les modules

Les modules sont les éléments de contenu qui composent votre page web (texte, image, appel d’action…). Chaque module de Divi peut s’intégrer dans n’importe quelle largeur de colonne et ils sont tous entièrement personnalisable.

Les modules sont représentés par les cadres gris.

Constructeur de page de Divi : Guide du débutant 2021 24

Les actions possibles pour chaque section, colonnes et modules :

Section :

Constructeur de page de Divi : Guide du débutant 2021 25

Dans l’ordre de gauche à droite :

  • Déplacer la section, cliquer et déplacer
  • Les paramètres de la section
  • Dupliquer la section
  • Enregistrer la section dans la librairie Divi (afin de pouvoir réutiliser cette section sur d’autres pages)
  • Supprimer la section
  • Quitter 
  • Options avancées

Colonnes:

Constructeur de page de Divi : Guide du débutant 2021 26

Dans l’ordre de gauche à droite :

  • Déplacer la colonne, cliquer et déplacer
  • Les paramètres de la colonne
  • Dupliquer la colonne
  • Modifier le nombre de colonne sur une seule ligne
  • Enregistrer la section dans la librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
  • Supprimer la colonne
  • Quitter (toujours aussi mystérieux)
  • Options avancées

 

Modules:

Constructeur de page de Divi : Guide du débutant 2021 27

Dans l’ordre de gauche à droite :

  • Déplacer le module, cliquer et déplacer
  • Les paramètres du module
  • Dupliquer le module
  • Enregistrer le module dans la librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
  • Supprimer le module
  • Quitter
  • Options avancées

Vous connaissez maintenant les base du visual builder de Divi, du moins en ce qui concerne la création interne des pages, dans la section ci-dessous je vous explique les réglages et actions générales que vous pouvez effectuer sur la page.

 

Paramétrage général de votre page Divi

Pour accéder à la barre de paramétrage générale vous pouvez cliquer sur le bouton suivant situé dans le bas de votre page, en mode visual builder activé.

Constructeur de page de Divi : Guide du débutant 2021 28

Paramètres d’affichage du visual builder

Constructeur de page de Divi : Guide du débutant 2021 29

Dans l’ordre de gauche à droite :

  • Paramètres du constructeur de page
  • Affichage en mode Wirefrime (utile quand certains éléments se chevauchent et sont inaccessible via l’affichage classique)
  • Zoom
  • Affichage en mode Ordinateur
  • Affichage en mode Tablette
  • Affichage en mode Smartphone

Paramètres de la page

Constructeur de page de Divi : Guide du débutant 2021 30

Dans l’ordre de gauche à droite :

  • Ajouter une autre page au contenu de celle-ci
  • Sauvegarder la mise en page dans votre blibliothèque divi
  • Supprimer la page
  • Fermer la barre d’option inférieur
  • Paramètres de la page
  • Restaurer une version antérieure de la page
  • Exporter ou importer la mise en page sur votre ordinateur

Option de sauvegarde

Constructeur de page de Divi : Guide du débutant 2021 31

Dans l’ordre de gauche à droite :

  • Effectuer une action via le mode recherche
  • Ouvre une petite fenêtre ou vous trouver votre wireframe en version fenêtré
  • Regroupe les guides disponnibles dans Divi 
  • Sauvegarder le brouillon
  • Publier la page

Comment accéder au visual builde de Divi ?

1. Connectez-vous à votre espace administrateur

Pour cela rendez-vous sur votre url d’administration et introduisez votre login et votre mot de passe.

Dans votre tableau de bord WordPress cliquez sur la petite maison en haut à gauche puis sur « aller sur le site »

Constructeur de page de Divi : Guide du débutant 2021 32

2. Choisissez la page à modifier

 Maintenant que vous êtes sur votre site en mode administrateur naviguez jusqu’a la page contenant le texte à modifier.

Ceci fait appuyez sur bouton « activez le visual builder » pour ouvrir le mode édition de cette page

Constructeur de page de Divi : Guide du débutant 2021 33

Sélectionner et remplacer le texte

Sélectionnez le texte en maintenant le clic gauche enfoncé, et remplacez-le par votre nouveau texte.

Constructeur de page de Divi : Guide du débutant 2021 34

Ouvrir la barre de navigation du bas

Pour cela Appuyez sur les icones avec 3 petits points sur le bas de votre écran.

Constructeur de page de Divi : Guide du débutant 2021 35

Enregistrez

Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.

Et voilà votre texte a bien été modifié vous pouvez quitter le visual builder.

Constructeur de page de Divi : Guide du débutant 2021 36

Sélectionner et remplacer une image

Sélectionnez la page où se trouve l’image et activé le visual builder

Constructeur de page de Divi : Guide du débutant 2021 33

Ouvrir le paramétrage de l’image

Vous devez ouvrir la fenêtre de paramétrage grâce à l’icône en forme de rouage sur fond gris se trouvant sur l’image en question.

Constructeur de page de Divi : Guide du débutant 2021 38

Ouvrir la bibliothèque multimédia

Appuyer sur le bouton en forme de roue crantée

Constructeur de page de Divi : Guide du débutant 2021 39

Choisissez l’image à insérer

  • Si votre image ne se trouve pas dans votre bibliothèque multimédia téléversez la en appuyant sur l’onglet « téléverser des fichiers » comme indiquer en 1.
  • Si vous possédez déjà l’image dans votre bibliothèque multimédia, sélectionnez-la et appuyez sur « charger une image » en bas à droite de l’écran comme le montre la flèche 
Constructeur de page de Divi : Guide du débutant 2021 40

Ouvrir la barre de navigation du bas

Pour cela Appuyez sur l’icône avec 3 petits points sur le bas de votre écran.

Constructeur de page de Divi : Guide du débutant 2021 35

Enregistrer

Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.

Et voila votre image a bien été modifié vous pouvez maintenant quitter le visual builder.

Constructeur de page de Divi : Guide du débutant 2021 36

Sébastien Chaidron
Webmaster & Webdesigner
WordPress Freelance

Puis-je vous aider ?

Perdu dans le périple de la création d’un site web ?

Laisser-moi vous éclairer !

Mes derniers articles

Comment augmenter la largeur du menu déroulant Divi

Il arrive parfois que la taille des éléments du sous-menus, ou menu déroulant ne correspondent pas à ce que vous souhaitez ! Voici une petite astuce pour résoudre ce problème… Le code ci-dessous fixe la largeur minimale à 300px. Adaptez cette valeur en fonction de...

Ajouter un produit avec Woocommerce guide d’utilisation

1. Ajout d'un produit Il est temps d'ajouter vos produits. Mais avant de vous lancer, nous vous recommandons de vous familiariser avec le fonctionnement des catégories, des étiquettes et des attributs des produits. Plus d'informations ici : (Gestion des...

Mon top 5 des meilleurs thèmes WordPress 2020

C'est une question que je rencontre encore et encore et à laquelle je peux répondre d'une part, mais d'autre part, je ne peux pas y répondre non plus. Qu'est-ce qui fait qu'un thème WordPress est le meilleur de son genre et y a-t-il encore des différences...

Comment rédiger un texte optimisé pour le référencement Google ?

Si vous voulez attirer plus de visiteurs sur votre site web, il vous faut avant tout une chose : un bon contenu. Mais ce n'est pas tout. Après tout, les utilisateurs doivent d'abord prendre conscience du contenu. Et cela se produit généralement lorsqu'ils trouvent le...

Les sites web du futur

Les sites web sont-ils en train de disparaître ? Le site web du futur À une époque aussi rapide que celle de la numérisation, les tendances d'aujourd'hui seront la neige de demain. Le site Internet existe en tant que média depuis près de 30 ans maintenant - il est...

Comment trouver des polices d’écriture sur d’autres sites web

Chaque site web a son propre design et utilise ses propres polices d'écriture pour donner la touche correspondante en fonction du type de contenu et des goûts du propriétaire. En ce sens, le choix d'une bonne police d'écriture est essentiel pour qu'un site web soit...

Le meilleur thème WordPress

Formulaire de contact - Sébastien Chaidron - Webmaster & Webdesigner Freelance