Lorsqu’on débute avec WordPress cela peut être compliqué… Et lorsqu’on découvre un thème cela vient rajouter une nouvelle couche ! Quel est le fonctionnement de Divi et du Divi Builder dans WordPress ? Où s’arrête WordPress et où commence Divi et son builder ? C’est ce que les élèves me demandent à chaque nouvelle formation…

Cet article à pour but de démocratiser les fondamentaux de la création d’un site WordPress avec le thème Divi (vous pourrez aussi vous en servir si vous utilisez un autre thème).

À quel moment devons-nous paramétrer WordPress, à quel moment devons-nous paramétrer le thème Divi et à quel moment le Divi Builder entre en scène ?

Voilà de nombreuses questions que se posent ceux qui découvrent WordPress et qui ont l’ambition de créer leur site avec le thème Divi.

  1. L’anatomie d’un site WordPress
  2. Où « s’arrête » WordPress et où « commence » Divi ?
  3. Analyse du layout de Astuces Divi
  4. En conclusion

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

1 – L’anatomie d’un site WordPress

Anatomie Page WordPress
1 – Anatomie d’une page WordPress
Anatomie article WordPress
2 – Anatomie d’un article WordPress

Sur les deux images ci-dessus, on peut voir – de manière simplifiée – de quoi est composé un site WordPress.

En haut de l’écran, on retrouve souvent le HEADER, suivi du MAIN CONTENT (Contenu Principal). En bas de l’écran, on retrouve le FOOTER (pied de page).

Ce design, en règle générale, pourra se comporter différemment en fonction du type de publication.

Par exemple, un article sera doté d’une SIDEBAR (image 2) alors qu’une page ne le sera pas (image 1). Même si de nombreux thèmes permettent d’ajouter une sidebar sur les pages aussi.

Mais tout cela n’est qu’une hypothèse car avec les PAGE BUILDERS comme le Divi Builder, tout peut-être remis en question. On pourrait ajouter une SIDEBAR au sein d’une page par exemple, et ne pas activer la SIDEBAR sur les articles. Tout n’est qu’une question de paramétrage d’options…

Apparence différente grâce aux options de Divi
3 – Apparence différente grâce aux options du thème Divi

Notez : selon les choix que vous ferez dans les options de paramétrages du thème, vous pourrez obtenir un design différent. Sur cette image (image 3), vous pouvez remarquer que le HEADER a été déplacé sur la gauche de l’écran.

Essayer Divi

2 – Où « s’arrête » WordPress et où « commence » Divi ?

Revenons à cette question récurrente : comment sait-on si c’est dans WordPress ou dans Divi que nous devons faire nos paramétrages ?

Quand on connait bien WordPress, tout est limpide mais je conçois que ce n’est pas le cas des débutants… je l’ai été !

Si je devais vous aiguiller en deux mots, je dirais : WordPress s’occupe de la création, des contenus, de la structure et des fonctionnalités de votre site. Tandis que le thème (Divi ou autre) s’occupe du Design global du site. Quant au Divi Builder (ou autre constructeur de page), il s’occupe du contenu SEULEMENT (à la place du système natif de WordPress).

Mais je suis sûre que si vous êtes arrivé sur cet article, c’est que vous avez besoin de plus amples explications… Voyons donc cela en détails !

2.1 – De quoi s’occupe WordPress ?

Souvent, ceux qui découvrent WordPress veulent brûler les étapes. Ils ont hâte de s’attaquer au design du site, ils recherchent un thème, définissent les couleurs et les polices etc. Mais c’est une erreur !

Avant le design, vous devez vous concentrer sur les réglages de base de WordPress, la création de contenus et la structure du site. Sans aucun contenu, vous aurez bien du mal à paramétrer votre thème !

Par exemple, vous n’arriverez pas à paramétrer votre HEADER si votre menu de navigation n’est pas encore créé. De même que vous n’obtiendrez pas de menu si vous n’avez pas encore créé et publié des pages. Idem pour le côté blog, vous ne pourrez pas définir le design du blog si vous n’avez pas encore publié des articles… Vous me suivez ?

Voici ce que vous pourrez faire avec WordPress :

  • Créer des pages => onglet PAGES
  • Créer des articles => onglet ARTICLES
  • Créer et gérer des catégories => onglet ARTICLES > CATÉGORIES
  • Créer et gérer des étiquettes => onglet ARTICLES > ÉTIQUETTES
  • Créer des menus de navigation et définir leur emplacement => onglet APPARENCE > MENUS
  • Télécharger et gérer des images => onglet MÉDIAS
  • Gérer le contenu des sidebars => onglet APPARENCE > WIDGETS
  • Ajouter, supprimer, activer ou désactiver des plugins => onglet EXTENSIONS
  • Définir les réglages globaux de votre site => onglet RÉGLAGES
  • Ajouter, modifier ou supprimer des utilisateurs => onglets UTILISATEURS
  • Modérer des commentaires => onglet COMMENTAIRES
  • Télécharger un thème gratuit ou payant => onglet APPARENCE > THÈMES (voir comment installer le thème Divi)
WordPress gère les contenus et les fonctionnalités d'un site

Vous l’avez compris, WordPress gère les contenus ainsi que les paramètres de fonctionnalité mais ne gère pas le design (c’est le thème qui s’en occupe). Si des fonctionnalités sont manquantes, vous pourrez en ajouter à l’aide de plugins.

tutoriel débutant pour apprendre à utiliser Divi

2.2 – De quoi s’occupe le thème Divi ?

Le thème Divi va s’occuper du design global de votre site et notamment du HEADER et du FOOTER.

Le thème Divi s'occupe du design global du site

Les principaux paramétrages (les options du thème) vont se trouver sous l’onglet DIVI et sous l’onglet APPARENCE > PERSONNALISER.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Voici ce que vous pourrez faire avec le thème Divi depuis l’onglet DIVI :

  • Onglet DIVI > OPTIONS DU THÈME > GÉNÉRAL : dans cet onglet, vous pourrez ajouter votre logo, définir votre palette de couleur par défaut, renseigner vos profils sociaux etc.
  • Onglet DIVI > OPTIONS DU THÈME > NAVIGATION : dans cet onglet, vous trouverez quelques options comme la désactivation de l’élément supérieur du menu lorsque celui-ci affiche des sous-éléments.
  • Onglet DIVI > OPTIONS DU THÈME > INTÉGRATION : cet onglet vous permettra d’ajouter du code à votre header par exemple. C’est très intéressant si vous devez ajouter des scripts comme celui de Google Analytics.
  • Onglet DIVI > OPTIONS DU THÈME > UPDATE : cet onglet vous permet d’ajouter votre clé API que vous obtenez lorsque vous souscrivez à une licence de ElegantThemes. Cela vous permettra non seulement de pouvoir mettre votre thème Divi à jour mais également de pouvoir télécharger des layouts tout-prêts.
  • Onglet DIVI > PERSONNALISEUR DE MODULES : ici vous trouverez quelques options basiques pour chacun des 46 modules du Divi Builder. Honnêtement, il n’y a pas grands choses à faire ici.
  • Onglet DIVI > ÉDITEUR DE RÔLES : cet onglet peut-être intéressant si vous êtes plusieurs à gérer le site. Ainsi, vous pourrez définir qui a accès à certains paramétrages en fonction des rôles de vos utilisateurs.
  • Onglet DIVI > BIBLIOTHÈQUE DIVI : c’est ici que vos sauvegardes de modules, sections ou layouts iront se stocker lorsque vous les enregistrez comme modèle. C’est également ici que vous pourrez importer certains layouts externes.
  • Onglet DIVI > SUPPORT CENTER : vous pourrez utiliser cet onglet à des fins de débug si vous avez des problèmes ou des conflits dans votre site.

Comme vous avez pu le voir dans cette liste, l’onglet DIVI propose seulement des options de design global ou de fonctionnalité du thème. Pour configurer des options plus pertinentes concernant le design, rendez-vous à l’onglet APPARENCE > PERSONNALISER.

Voici ce que vous pourrez faire avec le thème Divi depuis l’onglet APPARENCE > PERSONNALISER:

  • L’onglet Paramètres Généraux : c’est l’onglet le plus important. Ici, vous pourrez définir votre typographie, la couleur de fond ou l’image d’arrière-plan ainsi que les paramètres de mise en page (comme le Boxed Layout).
  • L’onglet En-tête et Navigation : le header est un élément primordial dans le design d’un site. C’est ici que vous trouverez toutes les options pour l’apparence de vos divers menus. Lire cet article pour des explications détaillées.
  • L’onglet Pied de Page : ici vous pourrez changer les crédits dans le footer du site, définir le layout pour les widgets en pied de page, changer les couleurs etc.
  • L’onglet Boutons : ici vous pourrez définir l’apparence par défaut de tous les boutons de votre site. Ainsi, en insérant un module Bouton lors de la construction de votre mise en page, vos boutons seront uniformes.
  • Les onglets Blog, Styles sur Mobile et Palettes de Couleur offrent quelques options mais rien de très intéressant.

Astuce pour supprimer la Sidebar sur les pages n’utilisant pas le Divi Builder

Vous avez pu remarquer que lorsque vous n’activez pas le Divi Builder pour utiliser l’éditeur natif de WordPress, le thème Divi affiche par défaut une Sidebar (même au sein de vos pages).

Cela peut être désactivé facilement depuis l’encadré « Paramétrages de la page Divi » situé en haut à droite, au sein de la page en question.

2.3 De quoi s’occupe le Divi Builder ?

Le Divi Builder s’occupe du design de votre contenu. C’est-à-dire du design de vos pages (et éventuellement de vos articles).

Le Divi Builder s'occupe du design du contenu

Notez : l’activation d’un page builder est facultatif car WordPress vous permet nativement de créer le contenu au sein de vos pages et de vos articles.

Le Divi builder intervient donc uniquement à l’intérieur de vos « posts » (pages, articles ou custom post type). Et nulle par ailleurs : ni dans le HEADER, ni dans le FOOTER (car c’est le thème qui s’en charge).

Voici ce que vous pourrez faire avec le Divi Builder :

  • Gérer du texte, des images, des polices, des couleurs
  • Gérer des arrières plans
  • Ajouter des animations au chargement de la page ou au survol
  • Ajouter des icônes
  • Gérer des colonnes
  • Maitriser le rendu responsive
  • Définir la visibilité des modules ou des sections en fonction des écrans
  • Ajouter des « dividers » pour donner un effet sympa à vos sections
  • Ajouter du code personnalisé
  • Embarquer des éléments extérieurs comme des vidéos YouTube, des Google Maps, des Tweets etc…
  • Et la liste est encore très longue ! Découvrez ici la liste de tous les modules du Divi Builder.

En savoir davantage sur le Divi Builder.

obtenir Divi - get Divi

3 – Analyse du Layout de Astuces Divi

Pour mieux comprendre le fonctionnement de Divi et du Divi Builder dans WordPress, analysons ensemble la mise en page de la page d’accueil de Astuces Divi.

Création d'un Layout avec Divi

Sur l’image ci-dessus, le layout de gauche correspond à celui que les internautes voient, celui que vous voyez lorsque vous visitez ce blog.

Sur le layout du milieu, on arrive mieux à comprendre le fonctionnement de Divi et du Divi Builder dans WordPress et cette notion de construction de mise en page.

On voit qu’un layout est une succession de sections (en bleu). Chaque section peut-être composée d’une ou de plusieurs lignes (en vert). Dans ces lignes, on y place des modules en fonction des besoins (en gris).

Si cela est encore un peu flou, regardez donc le layout de droite (toujours sur cette image) : ici tout est clair ! Un layout est une succession de boites dans des boites. Et cela est possible grâce aux constructeurs de pages comme le Divi Builder. Cette possibilité n’est pas offerte par le thème, seulement par son builder.

Dernière précision et rappel : si on revient attentivement sur le layout du milieu, on voit que le Header et le Footer (encadrés en rose sur l’image) ne sont pas pris en charge par le Divi Builder. C’est le thème Divi qu’il faudra paramétrer.

plus de ressources pour Divi

4 – En conclusion

J’espère que mes explications ont été assez claires et qu’elles aideront de nombreux débutants à mieux comprendre le fonctionnement de Divi et du Divi Builder dans WordPress. Le plus important est de bien dissocier ce qui est géré par le thème, par le page builder et par WordPress.

Petit récapitulatif :

  • WordPress gère les contenus, la structure du site ainsi que ses fonctionnalités
  • Le thème Divi gère le design global du site ainsi que les quelques fonctionnalités du thème lui-même
  • Le Divi Builder gère la construction de vos contenus (pages, articles CPT) ainsi que leur design.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Comprendre le fonctionnement de Divi et du Divi Builder
Les fondamentaux de la conception Web

Pin It on Pinterest

Shares
Share This