Editing Overview
Sites developed by SteppeMedia generally use the Divi theme which comes with the Divi page builder. This builder is often referred to as the Visual Builder. The Visual Builder uses three main building blocks: Sections, Rows and Modules. 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.
The below image shows a visual representation of the visual builder and the hierarchy of sections, rows, and modules. The screenshot shows that sections are represented in blue, rows are in green, and modules are black.
Sections
The most basic and largest building blocks are sections. These are used to create large groups of content, and they are the first thing you add to your page/post. While there are three types of sections (regular, specialty and full width) you will primarily be using the regular sections. Regular sections are made up of rows with columns. 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.
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: single column, 2 equal columns, 2 uneven columns, 3, 4, etc. Once you define a column structure for your row, you can then place modules into a desired column.
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.
Modules
Modules are the content elements that make up the website. Every module can fit into any column width and they are all fully responsive. Modules include content like Text, Images, Buttons and more. 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 that can be searched and added to the page.
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. 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 placed 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.
Modules, rows, and sections can also be duplicated by using the button next to the settings toggle.
Saving Your Page And Accessing Page Settings
Clicking the purple dock icon at the bottom of your screen will expand the settings bar and provide you with various page level settings options. Several of these options will not be needed however, it is important to note the history button, second to the right. Selecting this will allow you to see all changes made to the page during your current editing session. If a mistake is made during the editing process, you can undo it using this button.