How Divi, the Divi Builder and WordPress Work: Fundamentals for Beginners

Published on 01/04/2019 | 32 comments

When you are new to WordPress it can be complicated... And when you discover a theme it adds another layer! How does Divi and the Divi Builder work in WordPress? Where does WordPress end and Divi and its builder begin? That's what students ask me at each new training...

This article aims to democratize the basics of creating a WordPress website with the Divi theme (you can also use it if you use another theme).

When should we set up WordPress, when should we set up the Divi theme and when does the Divi Builder come into play?

These are some of the questions that people who are new to WordPress and have the ambition to create their website with the Divi theme ask themselves.

  1. The Anatomy of a WordPress Site
  2. Where does WordPress "stop" and Divi "start"?
  3. Analysis of the Divi Tips layout
  4. In conclusion

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

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

1 - The Anatomy of a WordPress Site

Anatomie Page WordPress
1 - Anatomy of a WordPress page
Anatomie article WordPress
2 - Anatomy of a WordPress post

On the two images above, we can see - in a simplified way - what a WordPress site is made of.

At the top of the screen is often the HEADER, followed by the MAIN CONTENT. At the bottom of the screen is the FOOTER.

This design, as a general rule, may behave differently depending on the type of publication.

For example, a post will have a SIDEBAR (image 2) while a page will not (image 1). Even though many themes allow you to add a sidebar on pages too.

But all this is just a hypothesis because with PAGE BUILDERS like the Divi Builder, everything can be questioned. We could add a SIDEBAR within a page for example, and not activate the SIDEBAR on the articles. It's all a question of setting options...

Apparence différente grâce aux options de Divi
3 - Different appearance thanks to Divi theme options

Note: depending on the choices you make in the theme settings options, you may get a different design. On this image (image 3), you can notice that the HEADER has been moved to the left of the screen.

Essayer Divi

2 - Where does WordPress "stop" and Divi "start"?

Let's go back to that recurring question: how do we know if we should do our settings in WordPress or in Divi?

When you know WordPress well, everything is clear but I understand that this is not the case for beginners ... I was!

If I had to direct you in two words, I would say: WordPress takes care of the creation, content, structure and functionality of your site. While the theme (Divi or other) takes care of the overall design of the site. As for the Divi Builder (or other page builder), it takes care of the content ONLY (instead of the native WordPress system).

But I'm sure that if you've arrived on this article, it's because you need more explanations... So let's see it in details!

2.1 - What does WordPress do?

Often, those who are new to WordPress want to rush through the process. They can't wait to get to work on the design of the site, they look for a theme, define the colours and fonts etc. But this is a mistake!

Before the design, you should focus on the basic WordPress settingsthe creation of content and the structure of the site. Without any content, you will have a hard time setting up your theme!

For example, you will not be able to set up your HEADER if your navigation menu is not yet created. Likewise, you won't get a menu if you haven't created and published pages yet. Same for the blog side, you won't be able to set the blog design if you haven't published any posts yet... Do you follow me?

Here's what you can do with WordPress :

  • Create pages => PAGES tab
  • Create articles => ARTICLES tab
  • Create and manage categories => ITEM tab > CATEGORIES
  • Create and manage labels => ITEM tab > LABELS
  • Create navigation menus and define their location => Appearance tab > MENUS
  • Upload and manage images => MEDIA tab
  • Manage sidebar content => APPARANCE tab > WIDGETS
  • Add, remove, activate or deactivate plugins => EXTENSIONS tab
  • Define the global settings of your site => SETTINGS tab
  • Add, modify or delete users => USERS tab
  • Moderate comments => COMMENTS tab
  • Download a free or paid theme => Appearance tab > THEMES (see how to install the Divi theme)
WordPress gère les contenus et les fonctionnalités d'un site

As you can see, WordPress manages the content and the functionality settings but does not manage the design (the theme does that). If features are missing, you can add them with plugins.

tutoriel débutant pour apprendre à utiliser Divi

2.2 - What does the Divi theme do?

The Divi theme will take care of the overall design of your site, including the HEADER and FOOTER.

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

The main settings (theme options) will be found under the DIVI tab and under the APPEARANCE > CUSTOM tab.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

Here is what you can do with the Divi theme from the DIVI tab:

  • DIVI Tab > THEME OPTIONS > GENERAL In this tab, you can add your logo, set your default color scheme, fill in your social profiles, etc.
  • DIVI Tab > THEME OPTIONS > NAVIGATION In this tab, you will find some options like disabling the top menu item when it displays sub-items.
  • DIVI Tab > THEME OPTIONS > INTEGRATION This tab will allow you to add code to your header for example. It is very interesting if you need to add scripts like the one from Google Analytics.
  • DIVI Tab > THEME OPTIONS > UPDATE: This tab allows you to add your API key that you get when you sign up for a license from ElegantThemes. This will not only allow you to update your Divi theme but also to download ready-made layouts.
  • DIVI Tab > MODULE CUSTOMIZER: here you will find some basic options for each of the 46 Divi Builder modules. Honestly, there's not much to do here.
  • DIVI > ROLES EDITOR tab: this tab can be interesting if you are several to manage the site. This way, you can define who has access to certain settings according to the roles of your users.
  • DIVI tab > DIVI LIBRARY : this is where your module, section or layout saves will go when you save them as a template. This is also where you can import some external layouts.
  • DIVI > SUPPORT CENTER tab: you can use this tab for debugging purposes if you have problems or conflicts in your site.

As you can see from this list, the DIVI tab only offers options for the overall design or functionality of the theme. To configure more relevant design options, go to the APPEARANCE > CUSTOM tab.

Here's what you can do with the Divi theme from the LOOK > CUSTOM tab:

  • The General Settings tab: This is the most important tab. Here you can define your typography, the background color or thebackground image as well as the layout parameters (such as the Boxed Layout).
  • The Header and Navigation tab: The header is an essential element in the design of a site. This is where you will find all the options for the appearance of your various menus. Read this article for detailed explanations.
  • The Footer tab: here you can change the credits in the footer of the site, define the layout for the widgets in the footer, change the colors etc.
  • The Buttons tab: Here you can define the default appearance of all the buttons on your site. Thus, by inserting a button module when building your layout, your buttons will be uniform.
  • Tabs Blog, Styles on Mobile and Color Palettes tabs offer some options but nothing very interesting.

Tip to remove the sidebar on pages not using the Divi Builder

You may have noticed that when you don't enable the Divi Builder to use the native WordPress editor, the Divi theme defaults to a Sidebar (even within your pages).

This can be easily disabled from the "Divi Page Settings" box at the top right of the page in question.

2.3 What does the Divi Builder do?

The Divi Builder takes care of the design of your content. That is to say, the design of your pages (and possibly your articles).

Le Divi Builder s'occupe du design du contenu

Note: activating a page builder is optional because WordPress natively allows you to create content within your pages and posts.

The Divi builder only intervenes inside your "posts" (pages, articles or custom post type). And nowhere else: not in the HEADER, nor in the FOOTER (because the theme takes care of that).

Here's what you can do with the Divi Builder:

  • Manage text, images, fonts, colors
  • Manage backgrounds
  • Add animations when the page loads or when hovering
  • Add icons
  • Manage columns
  • Mastering responsive rendering
  • Define the visibility of modules or sections according to the screens
  • Add dividers to give a nice effect to your sections
  • Adding custom code
  • Embed external elements like YouTube videos, Google Maps, Tweets etc...
  • And the list goes on and on! Discover here is a list of all Divi Builder modules.

Learn more about the Divi Builder.

obtenir Divi - get Divi

3 - Divi Tips Layout Analysis

To better understand how Divi and the Divi Builder work in WordPress, let's analyze the layout of the Divi Tips homepage.

Création d'un Layout avec Divi

In the image above, the layout on the left is the one that users see when they visit this blog.

On the middle layout, we can better understand how Divi and the Divi Builder work in WordPress and this notion of layout construction.

We see that a layout is a succession of sections (in blue). Each section can be composed of one or more lines (in green). In these lines, modules are placed according to the needs (in grey).

If this is still a bit blurry, take a look at the layout on the right (still on this picture) : here everything is clear ! A layout is a succession of boxes within boxes. And this is possible thanks to page builders like the Divi Builder. This possibility is not offered by the theme, only by its builder.

Last clarification and reminder: if you look closely at the middle layout, you can see that the Header and Footer (framed in pink on the image) are not supported by the Divi Builder. It is the Divi theme that must be set.

plus de ressources pour Divi

4 - In conclusion

I hope that my explanations have been clear enough and that they will help many beginners to better understand how Divi and the Divi Builder work in WordPress. The most important thing is to separate what is managed by the theme, by the page builder and by WordPress.

A quick recap:

  • WordPress manages the content, the structure of the site as well as its functionality
  • The Divi theme manages the overall design of the site as well as the few features of the theme itself
  • The Divi Builder manages the construction of your content (pages, CPT articles) as well as their design.

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

Comprendre le fonctionnement de Divi et du Divi Builder
Les fondamentaux de la conception Web
How to use Divi in WordPress ?

1,958 words

8

You should like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

32 Commentaires

  1. Jérôme

    Bonjour,
    Comme d’habitude, c’est un super travail bien expliqué, détaillé et illustré.
    Lorsque l’on sait le temps que ça prend pour rédiger un tel Post (en plus d’une vie très active), je dis BRAVO Lycia et merci pour ce généreux partage.

  2. Lycia Diaz

    Merci Jérôme, ça me va droit au cœur ! Peu s’en rende compte malheureusement… Mais toi tu es là 😉 pour me motiver à continuer !!!
    À bientôt

  3. Sylvie

    Bonjour Lycia, je partage l’avis de Jérome. Je débute avec DIVI et la création de site et m’arrache pas mal les cheveux.
    Tes explications sont très pédagogues et je vais bien fouiller partout dans tes pages d’explication. Je me rends bien compte du temps que cela peut demander même si tu maîtrise !! Merci et bravo à toi !!
    Sylvie

  4. Lycia Diaz

    Merci Sylvie ! Ton commentaire m’encourage ! J’ai des tas d’idées d’articles mais c’est le temps qui me manque… J’espère que tu trouveras ton bonheur ici 😉
    À bientôt !
    Lycia

  5. Frédérique

    Bonjour Lycia,
    Merci de prendre le temps pour nous aider. Ton article est super bien écrit et très clair. Pour moi qui débute complètement, c’est vraiment une chance. Je vais aussi fouiner partout et j’ai un peu plus l’espoir d’y arriver maintenant.
    Encore merci et continue, on compte sur toi pour nous éclairer.
    Je te suis!

  6. Lycia Diaz

    Super Frédérique ! Merci 🙂

  7. Saskya

    Bonjour Lycia,

    Je viens de me lancer dans l’aventure wordpress et DIVI et je sens que ton site va être ma bible pour les prochains mois ((-:

    Tes articles sont clairs, complets, bien structurés et pédagogues !

    Bravo et un grand merci !

  8. Lycia Diaz

    Merci Saskya 😉

  9. Bertrand

    Bonjour,

    Je viens juste de commencer à utiliser Divi – un grand merci, votre blog m’aide beaucoup car contrairement à ce qu’annonce certains tutos, ce n’est pas facile pour un débutant !
    Une petite question, je veux créer une e-boutique, j’ai lu qu’il était intéressant d’acheter en plus de Divi, Divi bodycommerce, je m’y perds un peu….

  10. Lycia Diaz

    Bonjour Bertrand !
    Merci à vous 😉
    Si vous voulez créer une boutique en ligne, vous avez seulement besoin de WooCommerce, un plugin qui permet de transformer un site vitrine en site e-commerce. Le reste est superflu.
    J’espère avoir répondu à votre question.
    Bonne journée
    Lycia

  11. Abdallah

    Bonjour Lycia ,

    vos explications nous sont d’une grande aide

    merci pour votre super travail

  12. Lycia Diaz

    Merci beaucoup Abdallah 😉

  13. Decoster

    Bonjour,
    Merci pour ces explications. Avec la dernière version de l’OS « Catalina », c’est la cata ! IWEB n’est plus pris en charge et je suis contraint de passer à autre chose pour gérer mon site. C’était trop simple et convivial… J’ai opté pour « WordPress » et « DIVI » et en tant que béotien, je m’arrache les cheveux car je ne parviens à rien. Je vais approfondir vos articles et j’espère y trouver des solutions.
    Merci.

  14. Lycia Diaz

    Merci Decoster !
    Je suis surprise que Catalina soit déjà là ! Il faut que je mette mon ordi à jour…
    Concernant iWeb, je n’ai jamais testé mais je suppose que cette solution n’était plus trop utilisée, ils ont dû certainement arrêter de la maintenir.
    Dommage pour vous…
    Je suppose que WordPress est bien plus complexe et je comprends votre « arrachage de cheveux ».
    Courage pour vous mettre dans le bain : une fois qu’on a compris son fonctionnement, ça roule !
    Je ne sais pas si cela peut vous aider mais je propose un ebook PDF qui explique la création d’un site avec WordPress (mais cet ebook n’aborde pas le thème Divi, c’est alors encore un autre apprentissage).
    À bientôt 😉
    Lycia

  15. David Deschryver

    Bonjour,
    Grand débutant mais déterminé à progresser, je me permets de vous remercier et féliciter pour votre site !
    C’est clair, complet et rassurant…
    Je sens que je vais progresser plus rapidement que prévu et ça me redonne du courage…
    David

  16. Lycia Diaz

    C’est fait pour ! David ! Bienvenue sur Astuces Divi 😉

  17. vandeweghe

    Bonjour Lydia,

    Je débute sur wp et divi.
    Je ne trouve pas la possibilité d’automatiser la mise à jour des url modifiées.
    Vous pouvez m’aider svp ?

    Merci

  18. Lycia Diaz

    Salut Jean Luc,
    Je ne vois pas ce que tu veux dire ? Tu parles de redirection automatique ?
    Si c’est cela que tu cherches, il va falloir trouver un plugin je pense mais je ne sais pas si ça existe. Disons que je ne me suis jamais penchée sur la question…

  19. Alex

    Bonjour Lycia,

    Tout d’abord, un grand merci pour vos articles qui sont hyper clairs et très bien rédigés.
    Tout devient plus simple avec vous!

    J’avais une question concernant la compatibilité des plans WordPress et Divi. Ce dernier peut être utilisé peu importe l’abonnement WordPress sélectionné? En conseillez-vous un en particulier (Premium ou Business)?

    Merci de votre aide.

    Bien à vous

  20. Lycia Diaz

    Salut Alex,

    Je ne connais pas trop WordPress .com : si vous parlez d’abonnement, je suppose que vous faites référence à la solution d’Automattic ?
    Du coup, je ne pourrais pas répondre à votre question.

    Quant à WordPress .org, il n’y a pas de problème…

  21. Michele

    bonsoir Lycia
    je pensais avoir bien compris mais
    du coup depuis la page 162 de ebook pour word press je vois des trucs que je n’ai pas
    moi sur la gauche j’ai tous les parametres de Divi
    j’ai jamais Document blocs etc….
    est ce normal ? et en ai je besoin ?
    et quand je vais aux articles page 184 etc.. mais comment vais je mettre les étiquettes et les catégories ?
    merci

  22. Lycia Diaz

    Tu parles de la barre de gauche ou de droite ? On parle bien de WordPress et non de Divi…
    Les onglets de gauche disparaissent lorsque tu édites une page ou un article avec Gutenberg. C’est nouveau : c’est pour avoir plus de place dans l’éditeur. Mais ça ne change rien, tu retournes au back-office en cliquant sur le W de WordPress, en haut à gauche.
    Pour la barre de droite, elle doit sûrement être cachée, il suffit de la faire apparaitre en cliquant sur l’icône des réglages (la roue dentée) à haut à droite de Gutenberg.

  23. Anne

    Bonjour Lycia, moi aussi je m’y mets !! une de plus sur WP et Divi 🙂
    Tu m’as convaincue d’embarquer Divi… J’espère que je vais m’en sortir car je suis assommée par la quantité de choses à voir/comprendre :-/
    J’ai pris la version Divi à vie (!) et j’ai activé Divi comme thème dans WP mais j’ai repéré un Layout Pack qui m’irai bien (donné dans ElegantTheme). Juste je ne comprends plus trop si ce Layout aura les mêmes caractéristiques qu’un thème enfant ? Je début totalement et j’ai peur de mal commencer … (si j’utilise ce thème et que ça risque de tout sauter si je fais une mise à jour ce sera ballot).
    Merci infiniment pour toutes les ressources que tu mets à disposition (je suis allée voir ton profil Webeuse, ça me redonne espoir car je débarque dans le web après avoir fait plein d’autres choses bien différentes).

  24. Lycia Diaz

    Salut Anne ! Super ! Bienvenue ! T’inquiète pas, tu peux télécharger tous les layouts que tu veux, rien ne sautera … un thème enfant te permet de faire des modifications de fonctionnalités. Tu n’en a presque plus besoin depuis que le thème Builder existe. Rien ne t’empêche d’installer un thème enfant même si tu ne l’utilises pas. Le principal est de ne jamais modifier les fichiers du thème parent (le thème Divi lui-même). Bon courage !

  25. Caré

    Salut et merci pour votre article.J’ai un problème que je n’arrive pas à résoudre sur mon essai de site.
    lorsque j’active mon visual builder sur DIVI mes mise en forme (boutons, couleur de fond, etc..) apparaissent exactement comme je les ai travaillé, ensuite quand je quitte visual builder pour voir ma page, mes boutons et mes couleurs de fond apparaissent par défaut sans aucune modification, malgré mes sauvegarde mais rien n’y change.

    Avez-vous une solution ?

  26. TGN_59

    Bonjour,
    Je viens de créer mon site avec WordPress et le thème DIVI, qui semble attirer beaucoup de suffrages.
    Si la création est énormément facilitée par ces outils, je me suis « cassé les dents » sur les encadrés arrondis des articles (bordure) et sur les marges intérieures de ces articles (espacement), qui, d’une page à l’autre, ont des aspects différents.
    Il me semble avoir tout essayé sur l’article avec ses 3 niveaux d’encapsulation et dur la page qui contient l’article.
    Rien n’y fait… Pas plus de succès sur la page qui contient cet article.
    Quelqu’un sait-il comment résoudre ce problème, si problème il y a ?
    Avec mes remerciements anticipés.
    TGN_59

  27. Lycia Diaz

    Salut TGN, as-tu utilisé le Thème Builder pour créer tes articles et uniformiser tes marges ?

  28. Sylvain

    Bonjour,
    je suis entrain de créer un site avec l’aide de Divi.
    Tout se passer bien jusqu’à ce matin. Je vous explique :
    – J’ai d’abord créé dans le « thème builder » de Divi mon « squelette de page » comprenant un header, une section Body toute simple et un footer.
    – J’ai ensuite créé 2 pages, dans lesquelles j’ai importé mon « squelette de page » et où j’ai mis en place tout mes contenus dans la section Body de mon squelette.

    Après avoir passé plusieurs période dessus tout se passer bien jusqu’à ce fameux message « Module de contenu post manquant ».

    Et depuis je ne peux plus afficher ou modifier mes pages (qui sont toujours présentes).
    Qu’est-ce qui se passe ????
    Est-ce que quelqu’un a la solution ???

    En vous remerciant par avance.

    Sylvain

  29. Lycia Diaz

    Salut Sylvain, c’est bizarre, le problème est toujours là ?
    Pour précision : dans le thème builder, tu crées un MODELE, ton body devras avoir le module PUBLIER UN CONTENU. Ensuite, dans tes pages, tu ne dois pas importer ta mise en page créée avec le thème builder. Tu dois simplement créer ta mise en page avec le Divi Builder (et non le thème builder). Et là, il ne doit pas y avoir de conflit.

  30. vladimir

    Bonjour
    Actuellement en création de mon site internet avec Divi, j’avance mais ne comprends pas certaines subtilités :
    J’ai créé par mal de pages pour les menus avec le Divi Visual Builderet mais quand je retourne dans mon interface WordPress dans l’onglet Divi-Theme builder, je n’ai pourtant rien ( à part le Global header que j’ai créé)

    Alors à quoi sert ce Divi Theme Builder vs Visual Builder et pourquoi ne sont ils pas reliés ?!

    Merci pour votre aide
    Vladimir

  31. Lycia Diaz

    Vladimir le Visual Builder sert à créer le contenu des pages tandis que le Thème Builder sert à créer les modèles de thème que tu appliques ensuite à des pages…. Tes pages tu les trouves dans Pages > Toutes les pages

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This