Please enable the breadcrumb option to use this shortcode!

Démarrer avec Divi > Découvrir le Visual Builder

Le visual builder est une spécificité de Divi qui fournit une expérience de construction de site très fluide et intuitive

Le Divi Visual builder (constructeur) te permet de construire ton site en glisser / déposer et de voir tes modifications instantanément. Tu vois ta page en direct et cliques sur les éléments pour faire tes modifications.

Les constructeurs Divi : Tout la puissance du thème  !
Les builders (constructeurs) donnent au thème Divi toute sa puissance et son originalité. Tu peux construire tes pages grâce à des modules en effectuant des glisser / déposer. Cela rend le processus plus facile tout en étant totalement personnalisable. Tu trouveras un builder, nommé Générateur Divi, sur la partie backend de ton site (la partie WordPress accessible avec ton mot de passe que les internautes ne voient pas). Ce constructeur Divi vient améliorer celui de wordpress en proposant une construction par blocs (comme des légos).

Et encore plus magique : Le visual builder. Il a les mêmes possibilités et permet de construire exactement les mêmes pages sauf que le visual builder agit sur le front-end : Tu construis tes page côté internaute et les modifient directement sur le visuel. Tu te rends compte instantanément des modifications.

Cet article est consacré au visual builder qui est tout à fait adapté pour démarrer avec divi.

Activer le Générateur Divi

A chaque fois que tu créés ou édites une page dans le thème Divi, tu as la possibilité d’utiliser le générateur Divi.

Connecte-toi à ton wordpress.

Dans la barre latérale gauche clique sur

  • Page > Ajouter si tu souhaites créer une nouvelle page
  • ou sur Page > Toutes les Pages, sélectionne ta page et clique sur « modifier »

Clique sur le bouton « Utiliser le générateur Divi » tout en haut de la fenêtre d’édition pour passer du mode standard d’édition WordPress au mode de construction Divi.

Tu peux désormais utiliser les blocs et l’ensemble des modules Divi.

Activer le Visual Builder

Pour aller encore plus loin, tu peux utiliser le visual builder et modifier ton contenu directement sur la partie visuelle de ton site.

Connecte-toi à ton wordpress.

Si ta page est déjà créée avec le générateur Divi, deux options s’offrent à toi pour activer le visual builder :

  • Depuis le Back End (la partie d’administration WordPress de ton site)
    Dans la barre latérale gauche clique sur Page > Toutes les Pages, sélectionne ta page et clique sur « modifier ».
    Tu te retrouves sur l’éditeur de page ; clique tout en haut sur « Utiliser le Visual Builder ».

 

  • Depuis le Front End :
    Lorsque tu es connecté(e) sur ton tableau de bord WordPress, clique tout en haut, sur le nom de ton site.
    Tu vois désormais le site tel que le voient tes visiteurs avec une barre d’administration tout en haut en plus. Rendez-vous sur la page que tu souhaites modifier en utilisant ton  menu ou tes liens.
    Dans la barre d’administration, clique sur « Activer le visual builder ».
Le système de construction par blocs

Le Divi Builder te permet de construire ton site avec des blocs, un peu comme des légos. Il y a trois types de blocs principaux : les sections, les rangées et les modules. Les sections contiennent des rangées qui elles mêmes contiennent des modules.
Les sections et les rangées forment une grille sur ton site dans laquelle tu places tes contenus (textes, images, services, formulaires …) sous forme de modules.

Chaque bloc contient des paramètres qui permettent de personnaliser ton design au pixel près et pour chaque appareil (mobile, ordinateur, tablette) si besoin.

Les sections

Le bloc section est le bloc le plus large. Une section est représentée par la couleur bleue. C’est la base sur laquelle les autres blocs pourront se fixer. C’est donc la première chose à construire sur ton site.

Il y a trois types de section :

  • Section pleine largeur : . Elle accueille un seul module qui prend toute la largeur de l’écran. Elle est souvent utilisée pour débuter la page d’accueil, associée avec le module en tête plein écran
  • Section Normale : Cette section est consituée de lignes et colonnes. Elle permet de réaliser une grille sur ton site pour y placer tes éléments à venir (les modules)
  • Section Spécialité : Cette section propose des dispositions particulières qui sont un peu plus complexes à utiliser dans un premier temps
Pour en savoir plus, rendez-vous sur l’article Comprendre les sections de Divi.
Les rangées

A l’intérieur des sections, tu peux placer autant de rangées que tu veux.
Les rangées sont représentées par la couleur verte. Quand tu appuies sur un + vert, tu ajoutes une nouvelle rangée et dois choisir le nombre de colonnes que celle-ci contiendra.
Dans chaque colonne, tu pourras placer un ou plusieurs modules.

Pour en savoir plus, rendez-vous sur l’article Comprendre les sections de Divi.
Les Modules
Les modules sont les parties qui apparaissent sur ton site. Choisis ce dont tu as besoin (image, formulaire de contact, texte, résumé, bouton, etc.) et cale le dans l’emplacement que tu lui as réservé grâce à tes sections et à tes rangées.

Les modules sont tous responsive : ils s’adaptent à la largeur de la colonne et à la largeur de l’écran utilisé (ordinateur, tablette, mobile).

Découvrir tous les modules Divi

Sauvegarder tes changements

r

N'oublie pas de cliquer sur "Sauvegarder les changements" pour "enregistrer les modifications" apportées sur le visual builder.

Le bouton "Sauvegarder les changements" se trouve tout en bas de ta page. Il est représenté par une bulle violette comportant trois petits points. Clique sur la bulle violette en bas au centre de ta page. En se dépliant elle découvre le bouton "Sauvegarder" sur lequel il faut cliquer.

Newsletter

Rejoins-nous !

Besoin d'aide, une question sur Divi ? Like la page Divi en français, rejoins-nous sur le Groupe Facebook, trouve des solutions et participe toi aussi ! Plus on est de fous plus on aime Divi 😉

Offre à la une

Offre Divi

  • + Licence Divi
  • + Mises à jour automatiques

60€ au lieu de 89€

Les formations

GAGNE DU TEMPS

Il y a forcément une formation adaptée à tes besoins

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Autres ressources « Visual Builder »

Insérer une image

Insérer une image

Télécharge une image dans ta bibliothèque de médias directement depuis tes options divi, tes modules ou tes sections pour illustrer ton thème

Ajouter le logo

Ajouter le logo

Divi te permet de placer facilement ton logo sur ton site en modifiant les options du thème

Ajouter son Favicon

Ajouter son Favicon

Ajoute un favicon qui sera reconnu par tous les navigateurs sans entrer dans le code

Effectuer les Mises à Jour Divi

Effectuer les Mises à Jour Divi

Effectue les mises à jour Divi

Le thème Divi se répand à toute vitesse. Il convient aussi bien aux débutants qu'aux développeurs et leurs clients. Toi aussi rejoins-nous !

Modules de contenu

Utilisateurs

Polices d'écriture pré-installées

Maîtriser Divi sans perdre de temps

Les Formations Divi

Divi en un tour de Main

Débutant

Cette formation t'accompagne dans toutes les fonctionnalités de bases de Divi.
Un gain de temps inestimable !

Devenez Développeur Wordpress

Avancé

Webmarketing, expérience utilisateur, développement, référencement, sécurité, performance : Devenez un expert en travaillant sur de vrais projets acompagnés par des pros.

Terminer votre cursus avec le module travailler en Agence ou Devenir Auto-Entrepreneur.

Soyez Apte à recevoir votre première rémunération de dev. dès la fin de la formation !

Faire des sites pro sans coder

Confirmé

Tu veux construire tes sites ou ceux des autres sans apprendre le code ?
Avec la puissance de Divi et une formation Class-Active, deviens performant rapidement !

Formations Sur-mesure

Bénéficiaire d'un financement

Tu bénéficies d'un financement à la formation pour te reconvertir ou développer tes savoir-faire ?

Fais nous part de ton objectif pour que nous te proposions une formation qui correspond précisément à ton projet, à ton niveau actuel et à tes besoins.

https://class-active.fr/

Contacte Class:active

Le centre de formation aux métiers du web, 100% online, qui propose des workshops et formations coachés par des professionnels

Tél : 01 84 25 39 48
Web : class-active.fr

Contacte Nous

En cochant la case ci-dessus tu affirmes avoir pris connaissance de notre politique de confidentialité. Tu peux demander la suppression de tes données à tout moment en suivant la procédure et en nous contactant à l’adresse hello+rgpd@bee-too-bee.com.