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