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

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 1

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 2

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 3

Les actions possibles pour chaque section, colonnes et modules :

Section :

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

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 5

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 6

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 7

Paramètres d’affichage du visual builder

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

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 9

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 10

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 11

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 12

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 13

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 14

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 15

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 12

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 17

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 18

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 19

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 14

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 15

Webmaster & Webdesigner

WordPress Freelance

Puis-je vous aider ?

Création de site Web

Création E-commerce

Optimisation SEO

Mes derniers articles

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

Créer un formulaire dynamique sur WordPress

Grâce à Calculated Fields Form vous pouvez créez des devis, des formulaires dynamiques avec calculs intégrés. Si vous louez des chambres d'hôtes, vous avez besoin d'un formulaire de réservation qui calcul le prix de la location en fonction du nombre de personnes et de...

Comment insérer un iframe dans WordPress

On me demande souvent comment intégrer une iframe dans WordPress. Dans cet article, vous découvrirez également à quelles fins les Iframes sont nécessaires, quels sont les cas d'utilisation courante et comment vous pouvez afficher les Iframes dans WordPress...

Comment aligner verticalement le contenu avec Divi

Il peut être intérressant quand untilise le thème Divi, de vouloir centrer verticalement du contenu ou un image par rapport à un autre contenu. Souvent quand on utilise deux colonnes ou plus. Dans se petit guide je vous explique étape par étape avec des screenshots...

Thème Divi pour WordPress – Test et avis

Divi est mon thème WordPress de prédilection depuis des années. Je le recommande souvent à mes clients. Il est donc temps de présenter ce fameux thème d'un peu plus près et de vous donner mon retour d' expérience. Tôt ou tard, presque tous ceux qui utilisent des...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Le meilleur thème WordPress