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.
- The anatomy of a WordPress site
- Where "WordPress" stops and "Divi" begins?
- Analysis of the layout of Divi Tips
- 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.
1 - The anatomy of a WordPress site
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....
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 " 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)
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.
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.
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).
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.
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.
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.
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!