DIVI : Tutoriel complet pour bien débuter

Divi est un thème WordPress ultra populaire, utilisé sur des milliers de sites. Pourtant, il ne fait pas toujours l’unanimité. Divi est un thème parfois incompris par les nouveaux utilisateurs WordPress c’est pourquoi cet article a pour but de démocratiser sa compréhension. Je vais vous guider pour atteindre votre objectif premier : celui de créer un site superbe et efficace avec Divi.

1 – Les prérequis au thème Divi

La plupart des nouveaux utilisateurs de WordPress n’ont qu’une seule envie : construire leur site ou leur blog en un temps record et surtout, ils veulent que ce site/blog soit magnifique visuellement.

C’est pourquoi, ils installent WordPress et choisissent un thème dans la foulée, sans même prendre le temps de comprendre le fonctionnement de WordPress (👉 lisez les bonnes pratiques de l’utilisation de WordPress).

Arrive vite alors un gros souci : les fonctionnalités de WordPress s’entremêlent avec celles du thème et si celui-ci recommande ou est doté d’un page builder, c’est l’enfer ! L’utilisateur se sent complètement perdu. Et c’est tout à fait normal.

Donc l’un des premiers prérequis indispensable à l’utilisation du thème Divi (ou de tout thème d’ailleurs) est de comprendre le fonctionnement classique de WordPress. Cela étant fait, vous aurez toutes les cartes en main pour personnaliser l’apparence de votre site à l’aide du thème.

D’ailleurs, le thème ne doit servir qu’à cela : améliorer le design de vos pages, de vos en-têtes et pied de page.

Si WordPress est déjà trop compliqué à comprendre en “mode autodidacte”, de nombreuses formations existent, comme les formations proposées par WPFormation qui sont entièrement prises en charge. En quelques heures, vous comprendrez les fondamentaux de ce CMS – utilisé par pratiquement 40% des sites dans le monde – et vous pourrez vous atteler ensuite à construire un fabuleux design.

Un autre prérequis au thème Divi, non-indispensable mais bienvenu, est d’avoir quelques notions (même basiques) des termes HTML et CSS. Cela vaut pour tous les thèmes, finalement. En effet, avec quelques notions de CSS, vous appréhenderez plus facilement les options proposées par un thème et un page builder.

2 – Les avantages et les inconvénients de ce thème

S’il existait un outil “parfaitement parfait”, ça se saurait n’est-ce pas ? Et Divi, comme tous les thèmes, présente des avantages comme des inconvénients… Commençons par le “pire” puis voyons le “meilleur” :

2.1 – Les inconvénients du thème Divi

1. Le thème Divi n’est pas joli : en effet, lorsque vous installez Divi pour la première fois, vous pouvez vous demander comment un thème peut être aussi basique et non-attrayant 🤢. C’est la remarque que je m’étais faite il y a quelques années, avant de comprendre son fonctionnement et ses possibilités. Depuis, je l’utilise sur tous mes sites, sans exception, et je vous aide à faire la même chose grâce à mes tutoriels publiés sur Astuces Divi.
2. Le thème Divi n’est pas gratuit : alors que la plupart des thèmes WordPress offrent une version gratuite, le thème Divi, quant à lui, n’est disponible qu’en version payante. Il s’agit d’un “thème Premium”. Cependant, vous aurez 30 jours pour l’essayer et vous faire rembourser s’il ne vous convient pas.
3. Le thème Divi est mal traduit : en effet, la version française de Divi est traduite par une vache espagnole. Cela peut causer quelques soucis si vous connaissez bien les termes anglais car sa mauvaise traduction peut vous induire en erreur. Après un moment, vous vous y ferez et vous n’y prêterez plus attention. Si cela est vraiment un problème, il existe une extension pour obtenir Divi en bon français.

2.2 – Les avantages du thème Divi

Vous connaissez maintenant les points faibles de Divi. Voyons ses points forts :

1. Un prix avantageux : dans un paysage WordPress où les abonnements vont bon train, où l’on doit payer pour un oui ou pour un non des abonnements à tout-va, ElegantThemes – la société éditrice de Divi – est l’un des rares acteurs de la communauté à proposer une licence à vie et pour un nombre illimité d’utilisation. Cela signifie que pour un peu moins que 250$ (environ 210€) vous pourrez installer le thème Divi sur un nombre illimité de sites et obtenir les mises à jour et le support à vie. Vous ne payerez pas chaque année.
2. Une vraie communauté : pour la raison précédente, il existe une grande communauté d’entraide autour de ce thème. Parce que son model-business est avantageux pour les freelances et les agences, il est utilisé mondialement et vous n’aurez pas de mal à trouver des tutoriels, des vidéos, de la documentation et de l’aide.
3. On peut tout faire avec Divi : depuis la version 4.x de Divi, il est désormais possible de réaliser des designs incroyables. Une fois que vous maitriserez ce thème et ses builders, vous ne rencontrerez plus aucune limite. Par exemple, regardez à nouveau la capture d’écran précédente (🤢) et regardez les deux suivantes :

Ou voici un autre exemple :

3 – Divi ≠ Divi Builder (Visual Builder) ≠ Theme Builder

Une méconnaissance de l’environnement WordPress en général peut entraîner des confusions dans l’utilisation du thème Divi.

En effet, WordPress vous permet de créer les menus de navigation, de créer des pages, des articles, des catégories, des étiquettes, des Customs Post Types. De plus il gère la médiathèque, les permaliens, etc. et son éditeur Gutenberg permet de créer les contenus du site.

Une fois que cela est assimilé, vous pourrez vous lancer dans le design du site grâce au thème Divi mais surtout grâce à son Visual Builder et son Theme Builder.

Ces points essentiels ne sont peut-être pas encore assez clairs mais la suite de cet article va tout vous expliquer.

4 – Les réglages du thème Divi

Pour bien débuter avec Divi, commencez d’abord par les réglages du thème avant tout autre chose.

4.1 – L’onglet Divi

La première des choses à faire après avoir installé le thème est de vous rendre à l’onglet Divi > Options du thème :

1. L’onglet Général : dans cet écran, prenez le temps de paramétrer chaque option. Par exemple, vous pourrez définir le logo du site pour remplacer le “D” de Divi actuellement visible dans l’en-tête du site. Sélectionnez aussi les couleurs de votre charte graphique. Ainsi, à chaque fois que vous ferez appel à des couleurs, elles seront déjà paramétrées pour l’ensemble du site, vous gagnerez beaucoup de temps. Enfin d’autres options sont disponibles comme définir les URL de vos réseaux sociaux, vous pourrez y revenir ultérieurement si besoin.
2. La navigation : vous pouvez consulter cet onglet mais il n’y a pas grand-chose à se mettre sous la dent. Mise à part une option qui peut être intéressante si vous voulez désactiver le niveau supérieur du menu déroulant. Elle se trouve dans le sous-onglet des paramètres généraux.
3. L’onglet Créateur : ici aussi les options sont presque inutiles, sauf si vous désirez désactiver l’utilisation du Visual Builder sur certains types de publications. Toutefois, dans le sous-onglet “Avancé”, l’option “Génération de fichiers CSS statiques” peut parfois causer des problèmes. Si vous remarquez que vos modifications au sein d’une page créée avec le Visual Builder ne sont pas prises en compte, désactivez cette option.
4. L’onglet Disposition : pareil ici, peu d’options importantes sauf une. Si vous ne souhaitez pas afficher d’image mise en avant dans vos articles, vous pouvez le définir ici.
5. Les publicités : vous pouvez passer votre chemin.
6. L’onglet SEO : pareil, passez votre chemin et utilisez plutôt une extension comme SEOPress, RankMath ou Yoast.
7. L’intégration : cet onglet est indispensable si vous souhaitez intégrer du code (scripts) dans la <head> ou le <body> de votre site. Par exemple, vous pourrez l’utiliser pour connecter Google Analytics à Divi ou à d’autres fins.
8. Les mises à jour : cet onglet vous permet de saisir votre clé de licence afin de recevoir les mises à jour automatiques du thème et bénéficier de toutes ses fonctionnalités (comme le téléchargement des layouts).

Donc pour récapituler et éviter de vous faire perdre votre temps pour rien, dès que vous installez Divi, concentrez-vous sur les pastilles n°1 – 8 – 7 de cette capture d’écran. Soit l’onglet Général, Mises à jour et Intégration.

Les autres onglets en barre latérale tels que Personnaliseur, Éditeur de Rôle et Support n’ont pas vraiment d’importance. Disons surtout que l’onglet Personnaliseur est un raccourci de l’onglet Apparence > Personnalisé (un onglet historique existant sur tous les sites WordPress). Par contre les onglets Theme Builder et Bibliothèque auront un rôle important dans la création de votre site. Nous verrons cela en détail.

4.2 – Le personnaliseur

Les options générales étant paramétrées, vous pouvez définir quelques autres options depuis le personnaliseur.

Le personnaliseur du thème Divi est disponible depuis l’onglet Apparence > Personnalisé ou depuis l’onglet Divi > Personnaliseur de thème.

1. Les paramètres généraux : quatre sous-onglets vous permettent de paramétrer des options importantes pour votre site. Par exemple, vous pourrez définir la mise en page globale du site (mise en page emboitée ou non) mais surtout, définissez ici votre police par défaut (onglet Typographie). Ainsi, à chaque fois que vous utiliserez le Visual Builder, il affichera déjà la police que vous avez choisie, c’est bien plus rapide que de définir la police pour chaque module du builder.
2. L’onglet En-tête et navigation : ici vous définirez le design et les éléments de votre en-tête (header). Chose importante à retenir : cet onglet disparait si vous créez un en-tête global via le Theme Builder. En d’autres termes, si vous envisagez de créer un en-tête personnalisé à l’aide du thème builder, il est inutile de faire des paramétrages ici.
3. L’onglet Pied de Page : celui-ci vous permet de définir les options du footer. Vous pourrez choisir les couleurs et vous pourrez (surtout) modifier les crédits du pied de page depuis le sous-onglet Barre inférieure. Attention, l’onglet Pied de page disparait si vous créez un pied de page global via le Theme Builder ! Tout comme l’en-tête, il est inutile de paramétrer votre footer ici si vous envisagez d’utiliser le pied de page global du Thème Builder.
4. L’onglet Boutons : cet onglet est très utile car il vous permet de définir une bonne fois pour toute le design de vos boutons. Ainsi, à chaque fois que vous insèrerez un module Bouton depuis le Visual Builder, ses styles seront déjà paramétrés. Vous conserverez ainsi un design cohérent dans toutes les pages de votre site.
5. L’onglet Blog : il est quasi inutile, surtout si vous envisagez de créer vos modèles d’article via le Theme Builder.
6. L’onglet Style sur mobile : quelques options de responsive design sont disponibles ici.
7. L’onglet Palette de couleurs : circulez, il n’y a rien à voir ici !
8. L’onglet Menus : il s’agit d’un raccourci vers l’onglet Apparence > Menus disponible dans WordPress.
9. L’onglet Widgets : il s’agit d’un raccourci vers l’onglet Apparence > Widgets disponible dans WordPress.
10. L’onglet Réglages de la page d’accueil : il s’agit d’un raccourci vers un réglage important de WordPress disponible à l’onglet Réglages > Lecture.
11. L’onglet CSS additionnel : il vous permet d’ajouter du code CSS personnalisé qui peut s’avérer très utile si vous souhaitez redéfinir certains styles.

5 – Le fonctionnement du Divi Builder

Le Divi Builder, également appelé Visual Builder, est un constructeur de page (Page Builder) et comme son nom l’indique, il sert à construire la mise en page de vos publications.

N’essayez pas de l’activer sur votre header ou votre footer, il ne fonctionnera pas. De même qu’il ne marchera pas non plus sur les pages spéciales de votre site comme la page du blog, les pages de catégories ou d’étiquettes, les pages WooCommerce (page panier, page mon compte, etc.)… Ces restrictions sont logiques puisqu’il ne peut intervenir que sur le “contenu” d’une publication : il prend la place de Gutenberg.

Il faut donc le voir comme une alternative pour créer le design d’une publication. Il offre bien plus de possibilités que Gutenberg car il est doté d’un bataillon d’options que nous allons voir.

5.1 – La mise en page avec le Divi Builder

Si vous n’avez pas l’âme d’un webdesigner, il peut être assez complexe de créer un design efficace pour une mise en page. Mon premier conseil serait de regarder comment sont construites les pages de sites qui vous plaisent et de poser vos idées sur papier.

Il faut imaginer alors un gabarit composé de “briques” ou de “boîtes”. Une mise en page n’est rien d’autre que la superposition de diverses briques, comme si vous deviez bâtir les murs de votre maison.

Donc voici cette action en image :

C’est aussi simple que cela. Plusieurs sections, rangées et modules vont se succéder pour créer ce que l’on appelle le “layout” (mise en page) de votre publication.

5.2 – Les modules du Divi Builder

Mais soyons honnête : vous n’utiliserez que les plus utiles et les plus intéressants ! Par exemple, moi-même je ne tourne qu’avec une douzaine de modules, c’est amplement suffisant :

• Le module Texte : il permet de tout faire. Il ressemble à l’ancien éditeur de WordPress ou au bloc “Classique” de Gutenberg. Vous pourrez donc l’utiliser pour vos contenus textuels, vos titres, vos codes courts (shortcodes), vos contenus HTML, vos contenus embarqués (vidéo YouTube, etc.) et pourquoi pas vos images…
• Le module Image : même si le module texte permet d’insérer des images, je vous conseille plutôt d’utiliser le module Image qui offre davantage d’options de personnalisation.
• Le module Blog : il permet d’afficher vos derniers articles de blog, n’importe où. Donc si vous utilisez ce module au sein de votre page d’accueil, une section sera dédiée à l’affichage de vos derniers articles.
• Le module Boutique : il est l’équivalent du module Blog mais pour votre boutique WooCommerce. Vous pourrez ainsi afficher vos x derniers produits de la boutique ou de les filtrer selon divers critères.
• Le module Bouton : il permet de placer çà-et-là des appels à l’action (même si le module Appel à l’action existe également).
• Le module Barre latérale : il permet d’afficher une sidebar de votre choix, préalablement créée à l’onglet Apparence > Widgets. D’ailleurs, le thème Divi vous permet justement de créer autant de nouvelles zones de widget que vous le souhaitez. Cela éviter donc de coder ces zones de widget à la main dans un thème enfant. C’est très pratique.
• Les modules Accordéon ou Bascules peuvent être utilisés pour créer des encarts ou des FAQ.
• Le module Résumé est intéressant pour créer des encarts avec icônes.
• Le module Menu vous permet d’afficher un menu où vous le souhaitez au sein de votre mise en page.
• Le module Diapo permet de recréer un carrousel d’image.
• Le module Code permet d’insérer du code personnalisé au sein de votre mise en page uniquement. Vous pourrez insérer du JS, du CSS et du HTML. Pour des raisons de sécurité, vous ne pourrez pas insérer du PHP, c’est à ce moment-là que vous aurez besoin d’un thème enfant.

Mais ce qu’il faut comprendre, au-delà du nombre de modules disponibles, c’est que chacun d’eux fonctionne selon la même logique :

• L’onglet Contenu permet d’agir sur le contenu et le fond (arrière-plan).
• L’onglet Style permet d’agir sur l’apparence : les couleurs, la taille, les marges, les animations, etc.
• L’onglet Avancé permet d’aller bien plus loin en définissant des Classes ou ID CSS, en jouant sur la visibilité, les effets de scroll, les transitions et les positions. C’est à ce moment-là que vos notions de CSS deviendront vraiment utiles car Divi propose simplement ce que le CSS permet déjà depuis toujours.

Mon conseil ici : n’hésitez pas à naviguer et tester toutes les options disponibles dans ces modules. Ce n’est qu’en testant que vous vous familiariserez avec cet outil et que vous découvrirez ses fabuleuses capacités.

5.3 – Les modules du WooCommerce Builder

Si WooCommerce est installé sur votre site, vous remarquerez alors que plusieurs modules sont disponibles en supplément (16 au total).

Ainsi, vous pourrez aussi activer le Visual Builder au sein d’une fiche produit WooCommerce afin de créer le design de votre choix plutôt que de subir celui imposé par défaut.

Tous les modules indispensables sont disponibles :

• Woo Add To Cart
• Woo Breadcrumb
• Woo Description
• Woo Images
• Woo Additional Info
• Woo Cart Notice
• Woo Gallery
• Woo Meta
• Woo Price
• Woo Related Product
• Woo Stock
• Woo Title
• Woo Rating
• Woo Reviews
• Woo Tabs
• Woo Upsell

Il s’agit en fait tout simplement des éléments contenus dans une fiche produit classique WooCommerce mais l’avantage est que vous pourrez les disposer comme bon vous semble.

Mieux encore ! Si vous voulez gagner du temps, je vous conseille de créer un modèle de fiche produit directement avec le Divi Theme Builder. Ainsi, toutes vos fiches produit auront un design similaire et vous n’aurez effectué le travail qu’une seule fois !

5.3 – Les autres fonctionnalités du Divi Builder

Le Visual Builder offre d’innombrables fonctionnalités, il faudrait une encyclopédie pour les détailler une à une. Voici les principales, celles qui vont vraiment améliorer votre productivité…

👉 Les layouts de Divi

Le Visual Builder permet importer des mises en page pré-construites (layouts), créées par des WebDesigner expérimentés. Cela remet donc en question le choix de créer vous-même votre mise en page :

C’est l’une des grandes forces de Divi : il met à votre disposition pas moins de 1383 mises en page réparties dans 187 packs ! Chaque pack contient donc les pages principales dont un site a besoin. Cette bibliothèque est enrichie chaque semaine.

Vous pourrez alors télécharger chaque layout correspondant à chaque page de votre site, il vous suffira ensuite de changer les textes, couleurs et images pour mettre votre touche finale !

Cette fonctionnalité est parfaite pour les débutants, ceux qui n’ont pas l’âme créative et ceux qui n’ont pas de temps à perdre.

👉 L’import/export et la bibliothèque Divi

Toujours pour améliorer votre productivité, le Visual Builder vous permet d’importer des mises en pages, de les exporter et de les enregistrer dans la Bibliothèque Divi.

Pour effectuer ces actions, il vous suffit d’ouvrir les options en bas de l’écran lorsque le Visual Builder est activé:

• La portabilité permet d’importer ou exporter un layout entier, extérieur à votre site.
• La librairie permet d’enregistrer une mise en page pour l’utiliser ultérieurement. Les éléments ainsi enregistrés iront se ranger dans la Bibliothèque Divi.

Une fois que ces éléments existent dans votre bibliothèque, vous pourrez les insérer dès que vous en avez besoin : cliquez sur le “+” et ouvrez l’onglet “Ajouter de la bibliothèque”.

Attention, si vous avez enregistré un module, ne croyez pas que vous le trouverez dans la liste des sections :

• Le “+” bleu (ou violet) permet d’insérer une section préalablement enregistrée.
• Le “+” vert permet d’insérer une ligne préalablement enregistrée.
• Le “+” gris permet d’insérer un module préalablement enregistré.

👉 Les éléments globaux

La fonctionnalité d’enregistrement dans la bibliothèque permet également d’enregistrer en tant qu’élément Global :

En cochant l’option “En faire un élément global”, le module, la ligne ou la section ainsi enregistrée deviendra unique. Cette couleur verte permet de les repérer facilement.

Cela signifie que si vous l’utilisez sur plusieurs pages et que vous modifiez cet élément, les modifications interviendront sur la totalité de votre site ! Vous gagnerez ainsi en productivité. Cela ressemble à la fonctionnalité de Bloc Réutilisables de Gutenberg.

6 – La puissance du Theme Builder

Pour l’instant, seul le Thème et le Visual Builder ont été abordés, pourtant une dernière fonctionnalité, et non des moindres, a été implémentée dernièrement : le Thème Builder.

Comme son nom l’indique, il permet de construire le Thème à la manière d’un Page Builder. En d’autres termes, il intervient là où le Visual Builder ne peut pas intervenir.

L’objectif d’utiliser le Thème Builder est (encore) d’améliorer votre productivité mais également de créer un design entièrement personnalisé qui est impossible à obtenir en utilisant seulement le Visual Builder.

6.1 – Le Theme Builder et la hiérarchie des fichiers modèles

Chaque thème WordPress est codé en suivant la hiérarchie des fichiers modèles :

Ce qui implique que chaque fichier indispensable à un thème a été codé par les développeurs du thème.

Si le développeur a pensé à ajouter diverses options de personnalisation dans ses paramètres, vous pourrez agir sur le design de pages spécifiques comme la page du blog, les pages d’archives, les pages de catégories, les pages WooCommerces, etc. Mais si le développeur n’a pas prévu de telles options, vous serez contraint de “subir” le design imposé…

Mais ça, c’était avant l’apparition du Thème Builder, qui permet justement de construire le design de ces pages spéciales.

Il permet de créer des “Modèles” ou “Gabarits” uniques qui s’appliqueront à un lot de publications.

Par exemple, vous créez un modèle de présentation pour vos articles de blog et tous vos articles auront cette même présentation, seul le contenu changera.

Idem pour vos pages, vos produits de la boutique, etc. Mais mieux encore, vous pouvez assigner ces modèles qu’à une partie de vos publications, par exemple : “tous les produits classés dans une catégorie spécifique” ou “tous les articles assignés à un auteur spécifique”…

Bref, on peut vraiment tout faire… sans coder !!! Car rappelons-le, avant l’apparition du Thème Builder, pour parvenir à cela, il fallait tout coder dans un thème enfant et avoir de sacrés connaissances en PHP !

6.2 – Comment ça marche ?

Vous allez voir que l’utilisation du Thème Builder est toute simple. Elle fonctionne comme le Visual Builder :

1. Allez à l’onglet Divi > Thème Builder
2. Un modèle est déjà présent mais il est vierge. Il s’agit du modèle de site par défaut. Cela signifie que si vous l’utilisez, il prendra le dessus sur vos paramétrages précédents. Vous n’êtes pas obligé de l’utiliser. De toute façon, le thème Builder est non-destructif, donc vous pouvez tester et jeter le modèle s’il ne vous convient pas et votre site retrouvera son design originel.
3. Si vous ajoutez un en-tête global, vous créerez le design de votre header et celui-ci s’appliquera sur la totalité du site. Ce qui est intéressant, c’est que vous avez tous les modules du Visual Builder à votre disposition pour construire cet en-tête. Vous pourrez ainsi obtenir un header entièrement personnalisé et original. N’oubliez pas toutefois d’y placer le module Menu afin d’afficher la navigation du site.
4. Le pied de page global fonctionne comme l’en-tête global.
5. Quant au corps global, vous allez définir un modèle pour la partie contenu de vos publications. Là encore, vous n’êtes pas obligé de l’utiliser. Si c’est votre souhait, n’oubliez pas d’y placer le module Publier un contenu qui permettra d’afficher le contenu de vos publications. Notez que vos publications peuvent continuer d’être éditées avec le Visual Builder ou Gutenberg : c’est justement le rôle du module “Publier un contenu” de récupérer le contenu de vos pages, articles, fiches produits, CPT, etc.
6. Toutefois, vous pouvez aussi créer des modèles spécifiques qui s’appliqueront à certaines publications seulement. Il vous suffira d’ajouter un nouveau modèle.
7. Il faudra alors choisir quel modèle vous voulez créer. Cochez une ou plusieurs cases pour assigner ce modèle à un ou plusieurs types de publications :

Ensuite, il ne vous restera plus qu’à créer le design du modèle à l’aide du Builder qui est identique au Visual Builder.

Maintenant, le design de votre site n’a plus aucune limite ! Par exemple :

• Créez un en-tête différent sur chaque page
• Ajoutez une couleur d’arrière-plan différente en fonction des catégories du blog
• Supprimez l’en-tête et le pied de page sur une page spécifique (page de vente par exemple)
• Créez des modèles de fiches produit WooCommerce différentes en fonction des catégories de produit
• etc.

7 – Quelques recommandations pour une bonne expérience avec Divi

Nous arrivons à la fin de ce guide d’utilisation de Divi. Bien évidemment, j’aurais tant de choses à vous montrer encore ! Il m’arrive encore de découvrir quelques fonctionnalités cachées ou que je n’avais pas encore utilisé !

Je suis fascinée et chaque nouvelle création de site me procure une certaine euphorie ! Divi nous permet de faire appel à notre créativité…

Mais j’ai encore quelques recommandations à vous faire :

• Ne survolez pas ce guide : lisez-le attentivement car de nombreuses astuces y sont mentionnées. Vous y trouverez certainement quelques réponses.
• Utilisez une extension de cache : Divi est réputé pour être lent mais c’est surtout le poids de vos images qui ralentit votre site. Alors pensez à bien compresser vos images et à utiliser un Cache pour améliorer le temps de chargement.
• N’essayez pas d’aller trop vite : prenez le temps de tester et re-tester. Vous ne maitriserez pas Divi en un jour. Souvenez-vous quand vous avez appris à conduire ! Donc ne baissez pas les bras et entrainez-vous souvent.
• Ne touchez pas aux marges intempestivement : dans le Visual Builder, il est très facile de “tirer” sur les marges des sections, des rangées et des modules. Les utilisateurs ont alors tendance à faire glisser ces curseurs pour que les éléments se placent à leur convenance… Aïe ! C’est le meilleur moyen pour avoir des soucis de responsive. Mon conseil est de ne quasiment pas toucher aux marges, sauf si vous savez exactement ce que vous faites.

Et pour finir, voici quelques liens qui peuvent vous être utiles :

• Essayez le Visual Builder directement en ligne.
• Découvrez tous les packs de layouts disponibles gratuitement dans le Visual Builder.
• Parcourez la documentation officielle de Divi (anglais).
• Allez plus loin avec mes tutoriels sur AstucesDivi.