When we start with WordPress it can be complicated... And when you discover a theme it adds a new layer! What is the functioning of Divi and Divi Builder in WordPress? Where does WordPress stop and where does Divi and his builder start? That's what the students ask me at every new training...
The purpose of this article is to democratize the fundamentals of creating a WordPress site with the theme Divi (You can also use it if you use another theme).
When do we have to set WordPress, when do we set the Divi theme and when does the Divi Builder come into the scene?
These are many questions that are posed by those who discover WordPress and have the ambition to create their site with the theme Divi.
- Anatomy of a WordPress site
- Where does WordPress stop and where does Divi start?
- Divi Tips Layout Analysis
- In conclusion
1 – Anatomy of a WordPress site
On the two images above, you can see – simplified – of what is composed a WordPress site.
At the top of the screen, we often find HEADER, followed by MAIN CONTENT (Main Contents). At the bottom of the screen is the FOOTER (footer).
This design, Generalmay 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). Although many themes allow to add a sidebar on the pages too.
But all this is just a hypothesis because with PAGE BUILDERS as the Divi Builder, everything may be questioned. One could add a SIDEBAR within a page for example, and not activate the SIDEBAR on the articles. Everything is just a question of setting options...
Note: depending on the choices you make in the theme settings options, you can get a different design. In this image (image 3), you can notice that the HEADER has been moved to the left of the screen.
2 - Where does WordPress stop and where does Divi start?
Let us return to this recurring question: How do we know if it is in WordPress or in Divi that we have to do our settings?
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, I'd say: WordPress deals with the creation, content, structure and functionality of your site. While the theme (Divi or other) takes care of the overall design of the site. The Divi Builder (or other page builder) deals with content ONLY (instead of the native WordPress system).
But I'm sure that if you got to this article, you need more explanation... Let us see this in detail!
2.1 – What does WordPress do?
Often, those who discover WordPress want to burn the steps. They look forward to tackling the design of the site, looking for a theme, defining colors and fonts etc. But it's a mistake!
Before the design, you need to focus on on Basic WordPress settings, content creation and site structure. Without any content, you will find it hard to set your theme!
For example, you will not be able to set your HEADER if your navigation menu is not yet created. Just as you will not get a menu if you have not yet created and published pages. Same for the blog side, you will not be able to define the blog design if you have not yet published articles... Are you following 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 set their location => APPARENCE tab > MENUS
- Download and manage images => MEDIA tab
- Manage sidebar content => APPARENCE tab > WIDGETS
- Add, delete, enable or disable plugins => tab EXTENSIONS
- Set the global settings of your site => BRANCH tab
- Add, edit or delete users => tabs USERS
- Moderator comments => tab COMMENTS
- Download a free or paid theme => APPARENCE tab > THEMES (see how to install the Divi theme)
You have understood, WordPress manages the contents as well as the functionality settings but does not manage the design (this is the theme that takes care of it). If features are missing, you can add them with plugins.
2.2 - What is the topic of Divi?
The theme Divi will take care of the global design of your site and in particular HEADER and FOOTER.
The main settings (the theme options) will be under The DIVI tab and under APPEAL > PERSONALIZE.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
Here's what you can do with the Divi theme since The DIVI tab :
- DIVI tab > THEME OPTIONS > GENERAL : In this tab you can add your logo, set your default color palette, enter your social profiles etc.
- DIVI tab > THEME OPTIONS > NAVIGATION : In this tab you will find some options such as deactivating the top item of the menu when it displays sub-elements.
- DIVI tab > THEME OPTIONS > INTEGRATION : This tab will allow you to add code to your header for example. It's very interesting if you need to add scripts like that of Google Analytics.
- DIVI tab > THEME OPTIONS > UPDATE: This tab lets you add your API key that you get when you subscribe to an ElegantThemes license. This will allow you not only to update your Divi theme but also to be able to download all-ready layouts.
- DIVI tab > MODULE PERSONNALIST: 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 may be interesting if you are several to manage the site. Thus, you can define who has access to certain settings according to 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 a model. It is also here that you can import certain external layouts.
- DIVI tab > CENTER SUPPORT: You can use this tab for debug purposes if you have problems or conflicts in your site.
As you may have seen in this list, The DIVI tab Only offers global design or theme functionality options. To configure more relevant design options, go to APPEAL > PERSONALIZE.
Here's what you can do with the Divi theme since APPEAL > PERSONALIZE:
- General Settings tab: This is the most important tab. Here you can define your typography, the background color orbackground image as well as layout settings (such as Boxed Layout).
- Header and Navigation tab: the header is a key element in the design of a site. Here you will find all the options for the appearance of your various menus. Read this article for detailed explanations.
- Page Footer tab: Here you can change the credits in the footer of the site, set layout for widgets at footer, change colors etc.
- Buttons tab: Here you can set 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 Colour Pallets offer some options but nothing very interesting.
Tip to remove Sidebar on pages not using the Divi Builder
You may have noticed that when you do not activate the Divi Builder to use the native WordPress editor, the Divi theme displays by default a Sidebar (even within your pages).
This can be easily disabled from the box « Divi page settings » located at the top right, within the page in question.
2.3 What's the Divi Builder doing?
The Divi Builder is responsible for the design of your content. That is, the design of your pages (and possibly your articles).
Note: activation of a builder page is optional because WordPress allows you natively to create content within your pages and articles.
The Divi Builder therefore only intervenes inside your "posts" (pages, articles or post-type custom). And none else: neither in the HEADER nor in the FOOTER (because this is the theme that is in charge).
Here's what you can do with the Divi Builder:
- Manage text, images, fonts, colors
- Managing Backgrounds
- Add animations to the page loading or overflight
- Add icons
- Manage columns
- Master Responsive rendering
- Define the visibility of modules or sections according to screens
- Add "dividers" to give a nice effect to your sections
- Add Custom Code
- Embarking external elements such as YouTube videos, Google Maps, Tweets etc...
- And the list is still very long! Discover here the list of all the modules of the Divi Builder.
Learn more about the Divi Builder.
3 – Divi Tip Layout Analysis
To better understand the functioning of Divi and Divi Builder in WordPress, let's analyze together the layout of the home page of Divi Tips.
On the above image, the left layout corresponds to the one that users see, the one you see when you visit this blog.
On the Middle layout, we can better understand the operation of Divi and Divi Builder in WordPress and this concept of page layout construction.
See? that a layout is a succession of sections (in blue). Each section may consist of one or more lines (green). In these lines, modules are placed as required (in grey).
If this is still a little blurred, look at the right layout (always on this picture): 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 you look back carefully at the middle layout, you can see that the Header and Footer (pink boxes on the image) are not supported by the Divi Builder. This is the Divi theme that will have to be set.
4 - In conclusion
I hope my explanations have been quite clear and will help many beginners to better understand the functioning of Divi and Divi Builder in WordPress. The most important thing is to dissociate what is managed by the theme, by the builder page and by WordPress.
Brief summary:
- WordPress manages the content, structure of the site and its features
- 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 tutos!
32 Comments