In this article, we are going to talk about the Divi Theme by Elegant Themes. Elegant Themes has produced a powerful theme builder that allows users beginner and advanced to design and create websites from either templates layouts or to build from scratch a custom website. So let’s get started and dive right in.
What is Divi?
Divi theme is a powerful WordPress theme that includes the Divi theme builder into the Divi theme. It allows users to create websites for their business/ brand. There are some web design agencies that use Divi to create websites for their clients like us here at PC Designs. We use Divi from Elegant Themes on a regular basis to create stunning beautiful lead generating custom websites for our clients. If you would like to check us out and see what we can do please visit our website design page for more information.
What Is The Visual Builder?
The Elegant Themes Divi Builder comes with 2 sides: The standard “Back-end Builder” and the front-end “Visual Builder.” Both sides of the builder allow you to build and design the same types of websites with the same content elements and design settings. The only difference is the interface look. The Back-end Builder is right inside 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 editor. It’s great for making fast changes while inside the WordPress editor dashboard, but it’s also confined by the dashboard and is rendered as a block-based representation of your website. This particular Guide will be taking attention to the visual builder.
The all-new Visual Builder, on the other hand, allows you to build your very own pages for your website on the front side so you can see it live as your edit your website! It’s an experience that is mind-blowing and awesome that will keep you excited to design your website. When you add content or adjust any of the design settings inside the visual builder, your changes appear instant to give you that real-time feel. You can click on the text on the page and just start adding text to the page. 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.
Enabling The Visual Builder
Make sure you are logged into the WordPress Admin Dashboard and navigate to the front side of your website. There is a button on the admin bar of the page that says “Enable Visual Builder” 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).
The Visual Builder Basics
Divi’s power lies in the Visual Builder, a drag and drops 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 rows. This is the structure of every Divi website.
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.
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.
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.
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 have currently hovered over.
If you are starting a brand new page, then your first section will be added automatically.
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.
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.
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.
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.
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 to 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. 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.
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!
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.
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.
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 every one. By the time you are finished, you will be a Divi master!
Expanding Divi’s Potential With More Modules, Child Themes And Layouts
One of Divi’s biggest assets is its passionate community of designers and developers. On the Divi Marketplace, Divi creators have been building and sharing amazing Divi resources such as custom Divi Modules, Divi Child Themes, and pre-built Divi Layouts. Using Child Themes and Layouts are great ways to jumpstart new websites and Divi Modules unlock Divi’s potential by giving you more building blocks.