The Divi Builder is a WordPress plugin we use to build the front end or customer-facing side of websites. It is a WYSIWYG (what you see is what you get) editor, meaning that you can use the Divi design platform, called the Visual Builder, to design all the aspects of your page without any having to write any code. This platform provides a simple way for anyone to build or edit webpages without advanced knowledge of web development or coding.
Accessing the Divi Builder
- Once you are logged in to WordPress, you can open the Divi Builder on any existing webpage by selecting the purple "Enable Visual Builder" button at the top of your screen. Alternatively, click on the pages tab in the menu bar on the left side of the dashboard to access a list of every page on your website. Find the page you want to change and select "Edit with Divi Builder."
- To create and design a new page with the Divi Builder, access your WordPress dashboard, hover over the pages tab at the left of the screen, and select "Add New." This will open the WordPress backend editor; once you finish the design of your page, you can return here to edit the SEO details and make other changes. Click on the purple "Use Divi Builder" button to open the Visual Builder. When creating a new page with the builder, you will be presented with three options for beginning the page: build from scratch, choose a premade layout, and clone an existing page. Divi has hundreds of premade layout templates following various themes and business types that will give you a launching pad for designing your page. If you have an existing page that you want to form the basis of any new pages, select the "Clone Existing Page" option.
Sections, Rows, and Modules
The Visual Builder is a drag-and-drop editor that allows you to move, arrange, combine, and edit the elements of the page to create page designs with great variety. Every page designed with Divi Builder is made up of combinations of sections, rows, and modules. These are essentially three different sizes of building blocks to use when crafting webpages and are color-coded for easy identification.
Sections
- Sections are the first and largest building block used to create large groups of content. You can use these to divide your webpage into sections of content organized around a theme or containing content to be grouped together. There are three types of sections: Regular (blue), Specialty (orange), and Full Width (purple). Regular sections are the most common and are built up of rows containing different modules. Specialty sections allow for more advanced section layouts. Fullwidth sections are made up of full width modules that fill up the entire width of the screen.
Rows
- Rows (green) are placed inside of sections and can follow many different column layouts. Once you choose a column layout for your row, you can fill it out with modules. There is no limit to the number of rows that can fit in a section or the number of modules that can fit in a row.
Modules
- Modules (gray) fit inside of rows and hold the individual pieces of content for your page. There are MANY different kinds of modules tailored for different forms of content, with everything from text and images to videos and blogs.
Building a Page
- You must create a section on your page to start adding content, though, if you are creating a new page from scratch, a blank section will be created automatically. To add a section, hover over an existing one and click the blue (+) sign at the bottom of the section. A new section will be added directly underneath the existing one.
- Once you have created a section you can start filling it with rows. To add a row, click on the green (+) button. You can add any number of rows, each with their own column layout style.
- Add modules to your columns to begin adding content. There are more than forty different module types to choose from, some basic and some more advanced. To add a module, click on any of the gray (+) signs inside of an empty row or click on the gray (+) below an existing module. Click and drag on any section, row, or module to arrange the page contents in any way you please.
- Every section, row, and module features a settings panel that controls the format and features related to that item. Each settings panel includes three tabs: content, design, and advanced. These three tabs are filled with various settings that will allow you to alter any feature of the content included in that section, row, or module. Browse through the settings and build any kind of page you need.
- Scroll to the bottom of the page and find the Divi dock, the purple ( . . . ) button. This will expand the settings bar and display several important actions when building a page in the visual builder. After clicking on the dock, select the "Save Draft" button to save your progress, or select the "Publish" button to finish your work and publish the page to your website.