Website Resource Center
Explore all the resources that we have compiled to help you learn how to edit and update your website.
Divi Builder – General Info
The Visual Builder Basics
Divi’s power lies in the Visual Builder, a drag and drop page builder that allows you to build just about any type of website by combining and arranging content elements.
The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure of every Divi website.
Sections
The most basic and largest building blocks used in designing layouts with Divi are sections. These are used to create large groups of content, and they are the first thing you add to your page. There are three types of sections: Regular, Specialty and Full Width. Regular sections are made up of rows of columns while Full Width Sections are made up of full width modules that expand the entire width of the screen. Specialty sections allow for more advanced sidebar layouts. For more information about using sections, head over to our in-depth sections tutorial.
Rows
Rows sit inside of sections and you can place any number of rows inside a section. There are many different column types to choose from. Once you define a column structure for your row, you can then place modules into a desired column. There is no limit to the number of modules you can place within a column. For more information about using rows, head over to our in-depth rows tutorial.
Modules
Modules are the content elements that make up your website. Every module that Divi has can fit into any column width and they are all fully responsive.
Text Module
Text can be added anywhere on your page. Text modules can be placed within any column type, and when combined with other modules, they make for a truly dynamic page. When you add a text module, you are given all of the editing capabilities of a normal WordPress page. The text module can be used to create a small bit of text within a complex layout, or it can be used in a full width column to create an entire page.
How To Add A Text Module To Your Page
Before you can add a text module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.
Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.
Locate the text module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “text” and then click enter to automatically find and add the text module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.
Text Content
This field is where you can enter the body content of your module. Text content spans the full width of the column that it is in.
If your text is being placed onto a dark background the Text Color should be set to ‘Dark’. Visa versa, if your text is being placed onto a light background, the Text Color should be set to ‘Light’.
Image Module
How To Add A Image Module To Your Page
Before you can add a image module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.
Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.
Locate the image module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “image” and then click enter to automatically find and add the image module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.
Accordion Module
The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item’s content is displayed.
How To Add An Accordion Module To Your Page
Before you can add a accordion module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.
Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.
Locate the accordion module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “accordion” and then click enter to automatically find and add the accordion module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.
Person Module
The Person Modules is the best way to create a personal profile block. This is a great module to use on About Me or Team Member pages where you want to create a bio of individual people. This module combined text, imagery and social media links into a single, cohesive module.
How To Add A Person Module To Your Page
Before you can add a person module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.
Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.
Locate the person module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “person” and then click enter to automatically find and add the person module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.
SUPPORT
Need some help with your website? Please feel free to reach out to us and we will get to you shortly.
NEW STUFF
Do you a new page built out? Maybe you would like a new feature on your website? Let’s chat!
TRAINING
Would you like to schedule a training to learn more? Drop us a line and we can schedule a training.