Divi Theme – The Divi Basics

 In Divi Theme, Wordpress Training

THE PAGE BUILDER A.K.A DIVI BUILDER

The Divi Builder makes it easy to add new content to your website, and to put it where you want it.

It is important to ensure you have this feature selected when you are creating a new page, or editing an existing page created with the Divi Builder.

To do this, follow the instructions below:

When creating a new page select ‘Use The Divi Builder’ button as per the image below:

use-divi-builder

If you see the button titled ‘Use Default Editor‘ (see below), you have successfully entered the Divi Builder! Please do not click the ‘Use Default Editor’ button or you will lose your content created in the Divi Builder!

use-default-editor-divi

THE DIVI BUILDER ELEMENTS

The builder uses three main building blocks:

Sections, Rows, and Modules. The basic hierarchy of these elements is as follows:

Sections

The most basic and largest building blocks used in designing layouts with Divi are Sections.

These are used to create the top-level areas in your website. There are two types of sections:

Standard, and Full Width.

full-width-and-standard

Standard Sections are made up of columns and rows, these are coloured blue.

Full Width Sections are made up of full width modules meaning your content will cover the entire row with no spaces to the left or right (useful for things such as a big image, video, slider or even a full screen google map). These sections are coloured purple. You can only use full width specific modules in this section. See more about rows and modules below.

Rows

Rows sit inside of Sections and you can place any number of rows in a section. There are many different Row Types to choose from. Once you define a Row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.

To insert a new row, click on the Add Row link as per the image below:

add-row

Once you have added your row, you can then select what column layout you would like. Your choices will look like this:

row-columns

Now that you’ve chosen your column layout for your row, you can start to add modules!

Modules

Modules are the visual elements that make up your website. Every module that Divi has can fit into any column width and they are all fully responsive, so you don’t have to worry about putting in a size for them!

To insert a new module, click on the Insert Module(s) link as per the image below:

insert-moduleee

Clicking this link will bring up a selection of many different modules to choose from, as shown in the image below:

modules

The Divi Theme tutorials in this portal will explain more about the individual modules in depth. 

What the icons mean

Now that you understand the Sections, Rows and Modules, you may be wondering what the icons in these areas mean. Here is an explanation for each of the icons:

The ‘Hamburger Menu‘ or the ‘Three Lines‘ icon

hamburger-menu

The ‘hamburger menu‘ icon brings up all of the settings for each Section, Row and Module, you can edit these settings in here. You can edit things in here such as background images, whether you want your content to be full width and the content of your modules.

The ‘Copy‘ icon

copy

The ‘Copy‘ icon will make a duplicate of a Section, Row or Module. This is handy if you want to have another ‘text’ module or you would like to make another Section in your page with similar content to an existing one. The duplicated item will always appear underneath the existing Section, Row or Module, you can then drag and drop it anywhere and edit it however you like.

The ‘Columns‘ icon

change-structure

The ‘Columns‘ icon will only appear in the Row area of your website. Clicking this icon allows you to change the column structure of your row. For example, if you made a row with 2 columns, but later decide you want 4 columns, you can change it here.

The ‘X‘ or ‘Delete’ icon

x-icon

The ‘X‘ icon will delete your Section, Row or Module. Please avoid clicking this unless you want to completely remove a Section, Row or Module from your page. Keep in mind if you click ‘X‘ on a Section (Blue or Purple area), everything within that Section will be deleted, including Rows and Modules. The same goes for Rows (Green area), in that all modules within the Row will also be deleted.

SAVING LAYOUTS, LOADING LAYOUTS & CLEARING LAYOUTS CREATED WITH THE DIVI BUILDER

Saving layouts and content for later use

If you are happy with your page layout and want to use a similar layout on another page or just want to save it incase anything happens to it, you can save your layout with the Divi Builder!

As a bonus, saving the layout will also save all of the content within the layout, including text, images, maps, anything you have in there will be saved, so this is also a great option to keep a backup of your pages.

Simply click the Save to Library button at the very top of the Divi Builder, and give the layout a name you will remember, the button looks like this:

save-layout

Loading page layouts

You can load layouts that you have saved previously using the Divi Builder, you can also load layout templates that the great people at Divi have created.

To do this simply click the Load from Library button at the very top of the Divi Builder, and give the layout a name you will remember, the button looks like this:

load-layout

Once you click on this button, you have the option to tick a box that says ‘Replace existing content with loaded layout‘, leave this ticked if you want to overwrite the existing page content with another layout (you will lose all page content), please untick this if you would simply like to add it on to your existing page layout, the layout will appear under your existing content.

Once you have found the layout you want to add and have either ticked or unticked the ‘replace’ box as per the image below. Click the load button to load the layout.

Load-layouts

Clearing/Deleting page layouts

If you want to delete your layout and start from scratch, you can click the Clear Layout button as per the image below, it will ask you to confirm if you would like to delete it, click Yes to clear the layout.

clear-layout

Recent Posts