How Divi, Divi Builder and WordPress work: fundamental for beginners

Published on 01/04/2019 | 18 comments

When you start with WordPress it can be complicated... And when you discover a theme it adds a new layer! How does Divi and Divi Builder work in WordPress? Where does WordPress stop and Divi and his builder start? This is what the students ask me for each new training....

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

When do we have to set up WordPress, when do we have to set up the Divi theme and when does the Divi Builder come on stage?

These are many questions that those who discover WordPress and have the ambition to create their site with the Divi theme.

  1. The anatomy of a WordPress site
  2. Where "WordPress" stops and "Divi" begins?
  3. Analysis of the layout of Divi Tips
  4. In conclusion

Advertisement: 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 article

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, we often find the HEADER, followed by the MAIN CONTENT. At the bottom of the screen, we find the FOOTER (footer).

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

For example, an article will have a SIDEBAR (image 2) while a page will not (image 1). Even if many themes allow to add a sidebar on the pages too.

But all this is only 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 about setting options....

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

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

Essayer Divi

2 - Where " stops " WordPress and " starts " Divi?

Let us return to this recurring question: how do we know if it is in WordPress or Divi that we have to make our settings?

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

If I had to guide 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) is in charge of the overall design of the site. As for the Divi Builder (or other page builder), it handles content ONLY (instead of the native WordPress system).

But I'm sure that if you came up with this article, it's because you need more explanation... Let's see it in detail!

2.1 - What is WordPress about?

Often, those who discover WordPress want to skip the steps. They are eager to tackle the design of the site, they are looking for a theme, define colors and fonts etc.. But this is a mistake!

Before the design, you should focus on the basic WordPress settingscontent creation and site structure. 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 has not yet been created. Likewise, you will not get a menu if you have not yet created and published pages. Same for the blog side, you won't be able to define the blog design if you haven't published articles 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 => ARTICLES tab > CATEGORIES
  • Create and manage labels => ARTICLES tab > LABELS
  • Create navigation menus and define their location => APPEARANCE tab > MENUS
  • Download and manage images => MEDIA tab
  • Manage sidebar content => APPEARANCE tab > WIDGETS
  • Add, delete, enable or disable plugins => EXTENSIONS tab
  • Define the global settings of your site => SETTINGS tab
  • Add, modify or delete users => USER tabs
  • 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 functionality settings but does not manage the design (it is the theme that deals with it). If features are missing, you can add them using plugins.

tutoriel débutant pour apprendre à utiliser Divi

2.2 - What does the Divi theme deal with?

The Divi theme will take care of the overall design of your site and in particular 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 APPEARANCE > CUSTOMIZE 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, define your default color palette, enter your social profiles, etc.
  • DIVI tab > THEME OPTIONS > NAVIGATION In this tab, you will find some options such as disabling the upper menu item when it displays sub-elements.
  • DIVI tab > THEME OPTIONS > INTEGRATION This tab will allow you to add code to your header for example. This is very interesting if you need to add scripts like the one of Google Analytics.
  • DIVI tab > THEME OPTIONS > UPDATE: this tab allows you to add your API key that you get when you subscribe to a license of ElegantThemes. This will not only allow you to update your Divi Theme but also allow you to download ready-made layouts.
  • DIVI tab > MODULES 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 tab > ROLE EDITOR: this tab can be interesting if you are several to manage the site. This way, you can define who has access to certain settings based on the roles of your users.
  • DIVI tab > DIVI LIBRARY: this is where your backups of modules, sections or layouts will be stored when you save them as templates. This is also where you can import some external layouts.
  • DIVI tab > SUPPORT CENTER: you can use this tab for debugging purposes if you have problems or conflicts in your site.

As you may have seen in this list, the DIVI tab only provides options for the overall design or functionality of the theme. To configure more relevant design options, go to the APPEARANCE > CUSTOMIZE tab.

Here is what you can do with the Divi theme from the APPEARANCE > CUSTOMIZE 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 at the bottom of the page, 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.
  • The tabs Blog, Styles on Mobile and Color Palettes 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 do not enable the Divi Builder to use the native WordPress editor, the Divi theme displays a Sidebar by default (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 builder page is optional because WordPress allows you to natively create content within your pages and articles.

The Divi builder therefore only intervenes within your "posts" (pages, articles or custom post type). And there is no other way: neither in the HEADER, nor in the FOOTER (because it is the theme that takes care of it).

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

  • Manage text, images, fonts, colors
  • Manage backgrounds
  • Add animations to page loading or hover
  • 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 such as YouTube videos, Google Maps, Tweets etc....
  • And the list is still very long! Discover here is the list of all the modules of the Divi Builder.

Learn more about the Divi Builder.

obtenir Divi - get Divi

3 - Analysis of the Divi Tips Layout

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

Création d'un Layout avec Divi

In the image above, the layout on the left corresponds to the one that Internet users see, the one you see when you visit this blog.

On the middle layout, we can better understand how Divi and 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 needs (in grey).

If it is still a little blurry, look at the layout on the right (still on this image): here everything is clear! A layout is a succession of boxes in 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 precision and reminder: if we look carefully at the layout of the middle, we 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 will have to be configured.

plus de ressources pour Divi

4 - In conclusion

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

A brief summary:

  • WordPress manages the content, structure and functionalities of the site
  • 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) and their design.

Need more resources on Divi? Visit ElegantThemes' blog 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 ?

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

18 Commentaires

  1. Jérôme

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

  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 !

  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


    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

  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

    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.

  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 😉

  15. David Deschryver

    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…

  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 ?


  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…

Soumettre un commentaire

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

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

Share This