The Basics

The webpage builder is a drag and drop builder you can create beautiful layouts with ease and control over every part of your site.

The builder uses three main building blocks: Sections, Rows, and Modules. Using these things in unison allows you to create a countless amount of page layouts. The basic hierarchy of these elements is as follows:

Sections

The most basic and largest building blocks used in designing layouts with the pagebuilder are Sections. These are used to create the top-level areas in your website.There are two types of sections: Regular, and Full Width. Regular Sections are made up of column rows and Full Width Sections are made up of full width modules. 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.

Modules

Modules are the visual elements that make up your website. Every modules that the pagebuilder has can fit into any column width and they are all full responsive

Getting Started

Upon creating a new page, you will see the standard WordPress Pages window. When you are using the pagebuilder, you will see a [Use The Divi Builder] button in blue. Clicking this will enable the Webpage Builder and you will be Presented with the Builder Start screen.

NOTE: If you have existing page content, it will all be placed into a full width Text Module by default. If you would like to separate out the content into respective modules, you will need to manually place it into individual modules.

Builder Layouts Options

Save To Library

At any time you can save a layout that you have built to your Library to be used at a later time. This option is great for using a layout on another page or section of a page. You can also Import & Export your library from one website to another.

Load From Library

You can also load a layout that you have saved in the past from your Library at any time. There are also dozens of pre-made layouts that get added to your library when you install this theme. Loading one of these pre-made layouts is a great place to start when first building a website with the page builder. When loading a layout you have the option to select from an array of pre-made Layouts or any layouts that you have saved/imported.

Clear Layout

If at anytime you feel the need to start from scratch, just click the Clear Layout button. Sometimes you just need a fresh start. This will delete everything you have built on the page and give you a clean slate.

Below these three buttons is your Page Builder Layout. These are where you will be adding Sections, Rows and Modules to your page in order to construct your layout. When you first enable the Page Builder, all you will see is the empty section shown above.

Sections Options

Every time you add a section you will need to define its properties. By clicking the section menu icon at the top of the blue side panel you will be taken to the Section Settings.

Background Image – If defined, this image will be used as the background for this Section. To remove a background image, simply delete the URL from the settings field.

Section background images span the width of the browser so we recommend that your background images are at least 1080px wide.

Transparent Background Color – Enabling this option will remove the background color of this section, allowing the website background color or background image to show through..

Background Color – If you would simply like to use a solid color background for your section, use the color picker to define a background color.

Background Video MP4 – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video WEBM – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video Width – In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height – In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Show Inner Shadow – Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.

Use Parallax Effect – Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale to the browser height.

NOTE: if you enable the parallax effect, we recommend that your images are at least the size of a standard screen size since your images will take on the width or height of the browser window (i.e. 1280px by 768px)

Custom Padding – Adjust padding to specific values, or leave blank to use the default padding.

Keep Custom Padding on Mobile – Allow custom padding to be retained on mobile screens

CSS ID – Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class – Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.

Adding and Defining a Row

After saving your section settings you will need to insert a row and define the row type. By clicking ‘Insert Columns’ you will be able to choose from a selection of row types. Rows also have lots of options that you can use to customize their appearance and alter the structure of the layout.

Adding a Module

Once you have selected a row type, you will be prompted to insert modules into that row. In the example below, we added a two column row.

Every Time you want to insert a module, you will need click ‘Insert Module’ and select one from the Page Builder module list. Once you have selected a module you will be brought to that modules specific options modal. Each module has a different purpose and a different set of options.

Expanding Your Layout

In the example below, we have filled the two columns with an image module and a text module.

You now have successfully defined a Section, with a Row, with Modules in a two column row type. You can access any of the elements’ options by clicking its menu icon or deleting it by clicking the X icon. To expand your layout you can either choose to add a section to the page, a row to an existing section, or a module to an existing column.

Modifying and Rearranging Your Layout

Editing your layout is very easy using the drag and drop builder features. If you want to move a section above or below another, simple drag and drop it in the desired location. Same goes for rows and modules. You can even move rows to different sections and modules to different columns. The only limitation to this is that you cannot drag Full Width Modules into regular sections and you cannot drag regular modules into Full Width Sections.

In the example below, you can see that moved our full width section to the top of our layout and moved our specialty section in between our existing sections.

Save and Publish!

Once you have finished building your layout, be use to click the Update/Publish button in your WordPress Dashboard. You will love the results.