Thème WordPress Divi 4 : Guide du débutant complet 2020

Thème WordPress Divi 4 : Guide du débutant complet 2020

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 groupe 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.

 

Thème WordPress Divi 4 : Guide du débutant complet 2020 22

Les colonnes

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

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

Thème WordPress Divi 4 : Guide du débutant complet 2020 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.

Thème WordPress Divi 4 : Guide du débutant complet 2020 24

Les actions possibles pour chaque section, colonnes et modules :

Section :

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 le librairie Divi (afin de pouvoir réutiliser cette section sur d’autres pages)
  • Supprimer la section
  • Quitter (d’ utilité assez mistérieuse)
  • Options avancées

Colonnes:

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 le 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:

Thème WordPress Divi 4 : Guide du débutant complet 2020 27

Dans l’ordre de gauche à droite :

  • Déplacer le module, cliquer et déplacer
  • Les paramètres de le module
  • Dupliquer le module
  • Enregistrer le module dans le 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é.

Thème WordPress Divi 4 : Guide du débutant complet 2020 28

Paramètres d’affichage du visual builder

Thème WordPress Divi 4 : Guide du débutant complet 2020 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

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 un version antérieur de la page
  • Exporter ou importer la mise en page sur votre ordinateur

Option de sauvegarde

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 »

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 ouvir le mode édition de cette page

Thème WordPress Divi 4 : Guide du débutant complet 2020 33

Selectionner et remplacer le texte 

Selectionnez le texte en maintenant le clic gauche enfocé, et remplacez le avec votre nouveau texte.

Thème WordPress Divi 4 : Guide du débutant complet 2020 34

Ouvrir la barre de navigation du bas

Pour cela Appuez sur les icones avec 3 petits point sur le bas de votre écran.

Thème WordPress Divi 4 : Guide du débutant complet 2020 35

Enregistrez

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

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

Thème WordPress Divi 4 : Guide du débutant complet 2020 36

Sélectionner et remplacer une image

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

Thème WordPress Divi 4 : Guide du débutant complet 2020 33

Ouvir le paramétrage de l’image

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

Thème WordPress Divi 4 : Guide du débutant complet 2020 38

Ouvrir la blibliothèque multimédia

Appuyer sur le bouton en forme de roue crantée

Thème WordPress Divi 4 : Guide du débutant complet 2020 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 
Thème WordPress Divi 4 : Guide du débutant complet 2020 40

Ouvrir la barre de navigation du bas

Pour cela Appuez sur les l’icone avec 3 petits point sur le bas de votre écran.

Thème WordPress Divi 4 : Guide du débutant complet 2020 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.

Thème WordPress Divi 4 : Guide du débutant complet 2020 36