Getting Started With The Divi Builder

What Is The Visual Builder?

The Divi Builder comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.” Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. The only difference is the interface. The Back-end Builder lives inside of the WordPress Dashboard and it can be accessed along with all of the other standard WordPress settings. It sits inside the WordPress UI and replaces the standard WordPress post editor. It’s great for making quick changes while you are inside the dashboard, but it’s also confined by the dashboard and is rendered as a block-based representation of your website. This tutorial will be focusing only on the visual builder.

docs image

The all new Visual Builder, on the other hand, allows you to build your pages on the front-end of your website! It’s an amazing experience and allows for much faster design. When you add content or adjust design settings inside the visual builder, your changes appear instantly. You can click onto the page and just start typing. You can highlight text and adjust its font and style. You can add new content, build your page and watch everything happen right before your eyes.

using-visual-builder-2-2

Enabling The Visual Builder

While you are logged in to your WordPress dashboard, you can navigate to any page on the front-end of your website and click the “Enable Visual Builder” button in the WordPress admin bar to launch the visual builder.

If you are editing your page on the back-end, you can switch to the visual builder by clicking the “Enable Visual Builder” button that sits at the top of the back-end Divi Builder interface (note, you must first enable the Divi Builder before the visual builder button will appear).

docs image

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.

Building Your First Page

The three basic building blocks (Sections, Rows and Modules) are used to build your page.

docs image

Adding Your First Section

Before you can add anything to your page, you will first need to add a section. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below it. When clicked, a new section will be added below the section you are currently hovered over.

If you are starting a brand new page, then your first section will be added automatically.

docs image

Adding Your First Row

After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.

To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.

docs image

Adding Your First Module

Modules can be added inside of rows, and each row can house any number of modules. Modules are the content elements of your page, and Divi comes with over 40 different elements that you can use to build with. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. We have individual tutorials for every single Divi module, so if you want to learn more about the types of modules that Divi provides then be sure to head back to the main document page and browse through the “Modules” section.

To add a module, click the gray (+) button that exists inside of any empty column or click the gray (+) button that exists when hovering over a module on the page to add a new Module below it. Once you have clicked the button, you will be greeted by a list of modules. Pick your desired module and it will be added to your page and the settings panel for the module will appear. Using this settings panel, you can begin configuring your module.

docs image

Configuring And Customizing Sections, Rows And Module

Each section, row and module can be customized in various ways. You can access an element’s settings panel by clicking the gear icon that exists when hovering over any element on the page.

using-visual-builder-8-2

This will launch the settings panel for the specified element. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Each tab is designed to make accessing and adjusting Divi’s large variety of settings quick and easy. The Content tab of course is where you can add content such as images, video, links, and admin labels. The Design tab is where we’ve place all of the built-in design settings for each element. Depending on what you’re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more. For an in-depth look at the Design tab, take a look at our design settings tutorial. Finally, if you want even more control you can head over to the Advanced tab where you can apply custom CSS, adjust visibility based on device, and (depending on which element you’re editing) do even more fine tuning.

Saving Your Page And Accessing Page Settings

To access general page settings, click the purple dock icon at the bottom of your screen. This will expand the settings bar and provide you with various options. You can open up your page settings by clicking the gear icon. Here you can adjust things like page background color and text color. You will also find the Save and Publish buttons as well as responsive preview toggles.

docs image

Jump-start Your Design With Pre-made Layouts

A great way to jump-start your new page is to start things off with a pre-made layout. Divi ships with over 20 pre-made layouts that cover a variety of common page types, such as “About Us,” “Contact,” “Blog,” “Portfolio,” etc. You can load these up and then swap out the demo content for your own. Your new page will be finished before you know it! To learn more about using pre-made layouts, be sure to take a look at our in-depth pre-made layouts tutorial.

docs image

Saving Your Own Layouts To The Library

In addition to using the pre-made layouts that come with Divi, you can also save your own creations to the Divi Library. When a design is saved as a Divi Layout in the Divi Library, it can be loaded onto new pages. The more you build up your library with your favorite designs, the faster you will be able to create new websites. For an in-depth look at the Divi Library, be sure to check our our dedicated Divi Library tutorial

To save an item to the library, click the library icon that exists when hovering over any element and within the page settings bar. Once an item has been added to the library, it will appear in the “Add From Library” tab when adding new Divi layouts, sections, rows and modules.

docs image

Ok, You Have The Basics Down. Now It’s Time To Dig Deeper!

So by now you have added your first sections, rows and modules to your page. You have adjusted their settings and begun building and customizing your design. You have the basics down, but there is so much more to learn. We have dozens and dozens of tutorials that cover every single aspect of Divi. I encourage you to head back to the main documentation page and read through each and every one. By the time you are finished, you will be a Divi master!

Accordion Module

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

Audio Module

Audio Module

The audio module allows you to embed an audio file + a custom audio player anywhere on your page. The audio player assumes the clean/modern style of the Divi theme. This is a great feature for musicians who want to show off their latest creations, or podcasters who...

Bar Counters Module

Bar Counters Module

Animated counters are a fun and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging. You can place as many counters as you would like inside of this module. VIEW A LIVE DEMO OF THIS MODULE...

Blog Module

Blog Module

With Divi, even blogs are a module, and your “blog” can be placed anywhere on your website, and in various formats. You can combine blog and sidebar modules to create classic blog designs. 1 column, 2 column or 3 column blogs can all be built using blog and sidebar...

Blurb Module

Blurb Module

The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Blurb modules can be placed in any column that you create. VIEW...

Button Module

Button Module

How To Add A Button Module To Your Page Before you can add a button 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...

Call To Action Module

Call To Action Module

It’s always important to give your visitors a clear call to action. Whether you are trying to get them to purchase your product or contact you for a quote, the call-to-action module will get the clicks you need. The CTA module is a simple combination of a title, body...

Circle Counter Module

Circle Counter Module

The circle counter provides you with a beautiful and visually-compelling way to display a single statistic. As you scroll down, the number counts up and the circle graph fills to the percentage based location. Try combining multiple circle counter modules on a single...

Code Module

Code Module

The Code Module is a blank canvas that allows you to add code to your page, such as plugin shortcodes or static HTML. If you would like to use a third party plugin, for example a third party slider plugin, you can simply place the plugin’s shortcode into a standard or...

Comments Module

Comments Module

The comments module allows you to place a comment form anywhere on your page. If you are using a standard page or post without the Divi Builder, comments will always appear below your post content. Once the Divi Builder is enabled, however, you can place the comments...

Contact Form Module

Contact Form Module

Communication is the cornerstone of any business. With Divi, you can easily add contact forms to any part of your website. VIEW A LIVE DEMO OF THIS MODULE How To Add A Contact Form Module To Your Page Before you can add a contact form module to your page, you will...

Countdown Timer Module

Countdown Timer Module

The Countdown Timer module creates a visual timer that counts down to a specific date. This is great for creating a “coming soon” page to builds anticipation for a new product or service. When combined with a “blank page,” this can also be used as a great “coming...

Divider Module

Divider Module

The divider module is perfect for creating either a horizontal line rule, custom vertical spacing, or both. Using this element is great for adding structure and organization to your site. VIEW A LIVE DEMO OF THIS MODULE How To Add A Divider Module To Your Page Before...

Email Optin Module

Email Optin Module

The Divi Email Optin module supports various email providers. Within each email provider, you can create custom data fields that can store different pieces of information about your email subscribers. This data can then be used to segment your email lists or create...

Filterable Portfolio Module

Filterable Portfolio Module

The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to...

Gallery Module

Gallery Module

Sharing a collection of images is always a great way to visually engage users in your content. The Gallery module lets you create and organize galleries anywhere on your website. The Divi Builder gallery module comes in both grid and slider format and supports large...

Image Module

Image Module

Divi makes it easy to add images anywhere on the page. All images come with 4 different animation styles that make browsing your website fun and engaging. Image modules can be placed in any column that you create, and their size will be adjusted to fit. VIEW A LIVE...

Number Counter Module

Number Counter Module

The number counter is a great way to display numbers in a fun and engaging way. This module is commonly used to display statistics about yourself or your company. For example, display your customer count or Facebook followers is a great way to showcase social proof....

Person Module

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

Portfolio Module

Portfolio Module

With the Portfolio Module you can show off your work anywhere on your site in any column structure. VIEW A LIVE DEMO OF THIS MODULE How To Add A Portfolio Module To Your Page Before you can add a portfolio module to your page, you will first need to jump into the Divi...

Navigation Module

Navigation Module

How To Add A Post Navigation Module To Your Page Before you can add a post navigation 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 Slider Module

Post Slider Module

How To Add A Post Slider Module To Your Page Before you can add a post slider 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...

Post Title Module

Post Title Module

The Post Title Module displays the title of your current post, and optionally the post Featured Image and meta data in an elegant fashion. This allows you to create more unique looking posts when building your posts using the Divi Builder. VIEW A LIVE DEMO OF THIS...

Pricing Tables Module

Pricing Tables Module

It’s easier than ever to create pricing tables for your online products. Create as many tables as you want, and control the pricing and features of each. You can even feature a particular plan to increase conversions. Even if your module includes more than one pricing...

Search Module

Search Module

Using the search module, you can place a search form anywhere on your site. This search form will allow your visitors to search through all of your website’s content, including all pages and blog posts. This gives you the functionality of the WordPress search widget...

Shop Module

Shop Module

Divi has been designed to be WooCommerce compatible. To integrate WooCommerce you will need to install the latest version of WooCommerce. WooCommerce is the plugin that we recommend, as it has the nicest feature set, interface and follows the best coding practices....

Sidebar Module

Sidebar Module

Divi lets you create an unlimited number of widget ready areas on the fly. Sidebars can then be added to any page, allowing you to create unique sidebars for different section of your website. VIEW A LIVE DEMO OF THIS MODULE How To Add A Sidebar Module To Your Page...

Slider Module

Slider Module

Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds! VIEW A LIVE DEMO OF THIS MODULE How To Add A Slider Module To Your Page Before you can add a...

Social Media Module

Social Media Module

The social media module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+. These icons are integrated into the theme, in the clean style of Divi using our Elegant Icons, which make them preferable to use...

Tabs Module

Tabs Module

Tabs are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of tabs that will look great inside any sized column. At ¼ columns, tab buttons are stacked and remain visible. At larger sizes, tab buttons...

Testimonial Module

Testimonial Module

Testimonials are a great way to encourage trust from your visitors. Using the Divi testimonial module, you can quickly add testimonials to your join & sales pages. testimonials are usually compelling quotes from your customers. Each testimonial has a quote, the...

Text Module

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

Toggle Module

Toggle Module

Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column. VIEW A LIVE DEMO OF THIS MODULE How to Add a Toggle Module to Your Page Before...

Video Module

Video Module

Adding videos to your page in Divi is simple using the Video module. The module allows you to embed videos from just about any source, as well as customize the thumbnail image and play button to add a clearner style to the embed. VIEW A LIVE DEMO OF THIS MODULE How To...

Video Slider Module

Video Slider Module

Divi makes it easy to add a Video Slider to your page. This is a great way to organize collections of videos from just about any source. The video gallery also allows you to customize video thumbnail images and play button to add a clear, custom style to your embeds....