When you're new to WordPress it can be complicated... And when you're new to 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? This is what students ask me at each new training session...
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 many of the questions that people who are new to WordPress and have ambitions to create their site with the Divi theme have.
- The Anatomy of a WordPress Site
- Where does WordPress "stop" and Divi "start"?
- Analysis of the layout of Divi Tips
- In conclusion
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - The Anatomy of a WordPress Site
In the two images above, you 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 to pages as well.
But all this is just a hypothesis because with PAGE BUILDERS like the Divi Builder, everything can be questioned. You could add a SIDEBAR within a page for example, and not activate the SIDEBAR on articles. It's all a question of setting options...
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.
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 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 give you two words of advice, I would say : WordPress takes care of the creation, content, structure and functionality of your site. The theme (Divi or other) takes care of the overall design of the site. The Divi Builder (or other page builder) takes care of the content ONLY (instead of the native WordPress system).
But I'm sure that if you've come to this article, it's because you need more explanation... So let's have a look at it in detail!
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 started 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. Similarly, you won't get a menu if you haven't created and published pages yet. The same goes for the blog side, you won't be able to set the blog design if you haven't published any articles yet... Do you follow me?
This is 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)
As you can see, WordPress manages the content and functionality settings, but does not manage the design (the theme does that). If features are missing, you can add them with plugins.
2.2 - What is the Divi theme about?
The Divi theme will take care of the overall design of your site, including the HEADER and FOOTER.
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 > GENERALIn this tab you can add your logo, set your default colour scheme, enter your social profiles etc.
- DIVI Tab > THEME OPTIONS > NAVIGATION In this tab you will find some options such as 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 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 people managing 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 colour 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 a detailed explanation.
- 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 colours 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, Mobile Styles and Colour Palettes tabs offer some options but nothing very interesting.
Tip for removing 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, the design of your pages (and possibly your articles).
Note: enabling a page builder is optional as WordPress natively allows you to create content within your pages and posts.
The Divi builder therefore only intervenes inside your "posts" (pages, articles or custom post types). And nowhere else: neither 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, colours
- Managing backgrounds
- Add animations when the page loads or when hovering
- Adding icons
- Managing columns
- Mastering responsive rendering
- Define the visibility of modules or sections according to the screens
- Add dividers to give your sections a nice effect
- Adding custom code
- Embed external elements such as 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.
3 - Divi Tips Layout Analysis
To better understand how Divi and the Divi Builder work in WordPress, let's look at the layout of the Divi Tips homepage.
In the image above, the layout on the left is the one that people see when they visit this blog.
On the middle layout, you can better understand how Divi and the Divi Builder work in WordPress and the notion of building layouts.
We can 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 rows, modules are placed according to need (in grey).
If this is still a bit unclear, 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 needs to be set.
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 make a clear distinction between what is managed by the theme, by the page builder and by WordPress.
Short summary:
- WordPress manages the content, structure and functionality of the site
- The Divi theme handles 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 the ElegantThemes blog which is full of ideas and tutorials!
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.
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
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
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
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!
Super Frédérique ! Merci 🙂
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 !
Merci Saskya 😉
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….
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
Bonjour Lycia ,
vos explications nous sont d’une grande aide
merci pour votre super travail
Merci beaucoup Abdallah 😉
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.
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
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
C’est fait pour ! David ! Bienvenue sur Astuces Divi 😉
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
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…
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
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…
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
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.
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).
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 !
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 ?
Salut Caré… Je pense que cet article va répondre à ta question : https://astucesdivi.com/probleme-enregistrement-modifications-divi/
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
Salut TGN, as-tu utilisé le Thème Builder pour créer tes articles et uniformiser tes marges ?
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
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.
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
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