Rows

Therowsare nested within the sections and may contain a variety of column structures that help you organize your content.

Columns

Thecolumnsare nested within the rows, creating a basic box-shaped structure for your content.
Each row has at least one column, even if it is just one.

Modules

Themodulesare Divi's content blocks. Examples include:

• Contact form

• Image

• Text

• Carousels (sliders)

• Information table (Blurb)

See all the modules Divi offershere here here. To learn how to use the modules, check out the link below.

Hierarchy of Father/Son Elements in the Divi Builder Elements

When you adjust settings and apply styles in Divi, it is important to remember the hierarchy of Sections, Rows, Columns and Modules.

• Thesectionscontain contain containrows

• Therowscontain contain containcolumns

• Thecolumnscontain contain containmodules

This is called the hierarchy of elementsfather and son.

Thechild elementsare nested within theparent elementsand are affected by any design style that you apply to the parent element.

Element Configuration Emerging Window

Each time you open an item settings, a pop-up window will appear with all the content, layout, and advanced options available for that item.

Let us look in more detail what you can find there.

Name of Element

In the upper left corner you will see thename of the constructor elementwith which you are working with. It can be a section, row, column, module, page settings, etc.

If you're ever not sure which item you're editing, look here! He will tell you.

Presets

Under the name of the module you can access theglobal presets. Click on the drop-down menu to: Upload a saved preset, create a new preset, delete a preset

Presets are pre-designed and saved settings for any section, row, column or module within Divi.

Expand the Modal

The next iconexpands the modalat the width of your browser.

Anchor or Separate the Modal

The next icon allowsanchororseparatethe modal.
Alanchor, the modal is fixed to the left side of the browser window anddoes not overlappingon the content of your page, but fits next door.
To exit this anchored position, click the icon again and the modal will separate, returning to its previous position.

Other Settings

When you click on thethree vertical pointsmore configurations for that element are accessed.

Save in the Library

Save this item to your library.

Save in Divi Cloud

Save this item to yourDivi Cloud

Test A/B (Split Test)

Perform an A/B test with this modal. Learn how to do a split test here.

Disable

Quickly disable the item on desktop, tablet or mobile.
When the icon isgreen green, the element is visible.
When it isred red, it is hidden.

Block

Blocks the item so that styles or settings cannot be changed.
To unlock, right-click on the item and selectUnlock.

Copy Module

Copy the module to the clipboard to be past anywhere on the page.

Copy Module Styles

Copy the styles and settings in the module to apply to another module.

Paste Button One Styles:Paste the button styles, only if you have copied them before using the option above.

Reset Module Styles:Reset module styles to default values, eliminating any customization.

Paste Module:Once you have copied the module, click here to paste it anywhere on the website. For this to work, you must first have clickedCopy Module.

View Modified Styles

Displays only module settings that have been modified.
This is useful if you made many changes or do not remember what they were, as it allows you to quickly see the modified styles for easy updating them.

Extend Button Styles

By extending the styles of a module, you can apply them to the entire page, including headers, footers, page layout, section, row, or column where the module is located.

Apply Styles to Active Adjustment

Apply the styles defined in the item's layout tab to the active preset, which by default is theDefault preset.

Edit Adjustment Styles

Access the configuration and styles of the current preset.

Go to the Layer

Clicking here opens the layers panel and focuses on the layer where the design element is located.
This is useful for quickly accessing constructor elements, adjusting their settings, rearranging them, and more.

You can also access these settings by right clicking on the design item you are working with.
When you right click, you will notice that the options forUndo (Undo)andRedo (Redo)at the top of the list.

This is useful for quickly undoing or remake specific action.

Search Options Bar

Then in the module window, you will find thesearch bar. You can quickly find and access settings and styles using the search field. Write down what you're looking for to filter options.

+ Filter

Thefilterworks similarly to the search, allowing you to quickly access modified styles, responsive styles. hover styles, active content

Tabs: Content, Design, Advanced

All manners have three tabs:

• Content

• Design

• Advanced

This is where the content, layout, and advanced settings are located for any element of the Divi Builder you are working on (either a section, row, column or module).

Tab Content

Allows you to adjust the content settings of the item you are working on.
What appears in this tab varies by item type.

Design tab

Allows you to modify the visual styles and adjustments of the item.

Advanced Tab

Here you access advanced item settings, such as:

• Custom CSS

• Visibility

• Scroll effects (scroll effects)

• Conditions of Use
  

• Bottom Buttons: Exit, Undo, Redo, Save

  At the end of the modal window, you will see 4 buttons (left to right):

  • Going out (red):If you go out without saving, you will lose the changes.

  • Undo (purple):Reverse the previous action.

  • Redo (blue):It takes an action you undo.

  • Save (green):Save the changes.

  

From left to right, the icons are:

1. Outline View (Wireframe):Displays the structural layout of the page.
   

1. Zoom In / Zoom Out:Bring the page layout from the page.
   

1. Desktop View:Adjust the builder's view to desktop size.
   
2. Tablet view:Adjust your view to the tablet size.
   
3. Mobile view:Adjust the view to the size of a mobile phone.
   

Default Position of the Configuration Modal

You can choose:

1. Last used
   
2. Minimum floating size
   
3. Full screen (fullscreen)
   
4. Fixed left side bar
   
5. Fixed right side bar
   
6. Fixed bottom panel
   

Page Creation Flow

Here you can choose how new pages load. You can opt for:

• Create from scratch

• Upload the Divi Library window

• Clone an existing page

• Or see the three options with"Give me to choose"

Builder Interface Animations

Turn this option on or off toenable or disable Divi Builder animationswhen you click on an object.

Show Disabled Modules with 50% Opacity

Activate this option so that disabled modules appear with 50% opacity. This is useful for visually know which modules are disabled for a specific view (desktop, tablet or mobile).

If you turn off this option, the moduleswill not be displayed in the view where they are disabled.

Group Settings in Toggles Closed Toggles

If you enable this option, the module settings will be displayed in default sections. If you turn it off, they will be open.

Add Fill Content to New Modules

This option allows you to decide whether new modules should displayExample contentwhen added.
If you turn it off, the modules will be added empty.

Theme Builder Templates Editing

Allows or not to edit templates from the Visual Builder from the Visual Builder.
If you just want them to be edited from the Builder Theme dashboard on your desktop, turn off this option.

Central Section of the Divi Toolbar

Upload from the Library

The icon of+ +opens the Divi Library. From there you can choose:

• Pre-designed designs:Use any of the free designs created by the Divi team.

• Your Saved Designs:Upload designs saved locally or Divi Cloud.

• Clone Existing Page:Use the layout of an already created page.
  

Pre-designed designs

Divi offers hundreds of free design packages.
You can filter by category or search by name using the left sidebar or search bar.

Your Saved Designs

From here you can access the designs saved in your library or Divi Cloud.
Ideal for storing base templates (wireframes) and reusing them elsewhere.

Clone Existing Page

Very useful if you already have a page with the desired design and want to reuse it on another page.
Click on the tabClone Existing Pageand select the page to copy.

Save to Library (Down arrow icon)

Allows you to save the current page layout to yourDivi Libraryand/orDivi Cloud.
You can:

• Assign him aname

• Save it inDivi Cloud

• Add it tocategories(the categories with blue cloud icon are from Divi Cloud)

• Addlabels(such as: clear, dark mode, season, etc.)
  

Delete Page Design (Trash can icon)

Delete the full layout from the current page. Ideal if you want to start from scratch.

Icon X / +

This icon opens or closes the Divi toolbar.
When the bar is open you will see aX, when you are closed you will see a+ +.

Page Settings (Gear icon)

Open the configuration window on the current page (they are not global settings).

Page Content Settings

• Title:Page title (also editable from the backend)

• Excerpt:Brief description

• Fund:Add a color, image or background video

• A/B tests:You can also test A/B tests on your pages
  

Page Design Settings

• Spacing:Channel width (gutter width) defines the space between columns

• Text:Define custom colors with light and dark text

Advanced Page Settings

• Custom CSS:Applies only to this page

• Performance:By default enabled. Compile CSS into minified files to improve load speed

Revision History (Clock icon)

View thestatus of the current page historyand also global changes (such as footer, header or global modules).

Portability (double arrow icon)

Import or export page layouts.
Ideal for moving templates between Divi sites. More information here:Import and Export Divi Builder Designs.

Quickly search inside the builder. You can:

• Change the device view

• Manage page layout

• Access constructor adjustments

• Search for documentation

• Open specific elements

Use this feature if you don't know where a specific option is. It is very useful!

Layers Icon

Click on this icon to get aGeneral viewof the page design. You can open and close all layers, and use the filter function to quickly find the design item you are looking for.

You can drag and drop the layers torearrange page layoutor use the icons in the layers to access the settings, duplicate that item.

Divi Builder's help (Question mark icon)

This icon loads theDivi Builder Helpwhen you click. Here you can:

• Browse Divi documentation

• Watch tutorials

• View keyboard shortcuts

On the tabVideo Tutorialsclick on the topic you are interested in and watch the video on screen.
To see Divi's documentation, visit theDivi Documentation Centre.

All keyboard shortcuts available on both Mac and PC are listed in the Keyboard Shortcuts tab.

Mastering keyboard shortcuts can help you speed up your design process and quickly access and edit items. More information: Divi Keyboard Shortcuts.

Save

A feature that you will use frequently. Before you leave the Visual Builder, it is important to save your design.

Divi automatically saves your design periodically, but this button is also here for instant saving.

Save Divi Visual Builder configuration

Always make sure you save your work! The Divi Builder automatically keeps your work regularly; however, it is better to do a final manual save before leaving the Visual Builder.

To save your design, click the green buttonSaveat the bottom right of the screen or use the keyboard shortcutcmd + s(Mac) orctrl +(Pc).

Then clickExit the Visual Builderin the top bar to exit the Visual Builder.

Divi Builder capabilities

Let's look at what you can do with Divi Builder.

Complete design control

Divi is not just a WordPress theme. It is a complete design framework that allows you to design and customize each part of your site from scratch.

You have full control to the smallest detail. Create perfect places for you and your customers. Explore all the design features Divi offers.

Responsive edition

Creating responsive sites is easy with Divi.

Divi is responsive by default, but also gives you full control over each design adjustment on each mobile device.

This allows you to perfectly adapt the appearance of each element on computers, tablets and smartphones.

Essential features of the Visual Builder

Let us look at the essential functions that Divi has at your fingertips.

Visual design on the front-end

With Divi's Visual Builder, you can drag and drop items, format text, resize elements, adjust responsive sizes, and display or hide items depending on the device.

Topic Builder

The Divi Theme Builder is a powerful way to create your site's template system using Visual Builder to design headers, footers, product templates, blog posts, category templates.

Drag and resize items

With Divi you can design complex layouts by dragging and dropping elements into the front-end.

This way you can see your changes visually before saving and publishing your layout. You can also resize elements by dragging their sides to adjust height, width, filling and margins.

Copy and paste styles

In Divi you can copy anything from one element and paste it into another. You can copy individual settings, adjustment groups or the full layout of one item and transfer it to another on the page.

You do not need to open design settings again. Design once and copy and paste.

Extendable styles

If you've created a design style and want to use it elsewhere on the page or across the page, you can automatically extend that style wherever you want.

Update hundreds of items at once. Control exactly where and to what elements your styles extend.

Example: You designed the perfect button but there are dozens on the page. You can extend that style to all the buttons instantly.

Keyboard shortcuts

Keyboard shortcuts are key to maximum efficiency. Divi has a wide range of shortcuts that advanced users can use to significantly speed up their workflow. Once you master them, you will wonder how you lived without them.

Multiple selection and mass editing

If you want to edit multiple items simultaneously, such as a group of images, use Divi's multi-select capability.

To select multiple, tap Cmd or Ctrl and click each item you want to edit on the page.

You can edit those items simultaneously, changing style and content, or moving them as a group.

Find and replace styles
Make changes across your page instantly, saving time. By searching and replacing you can change design values, such as colors or fonts, throughout the page or in specific locations.

Instead of opening each item and changing colors repeatedly, use search and replace the entire document.

Global site styles
Customize your site with a global design system by editing the default layout of any element.

When you modify the default layout of a module, it is updated throughout your site at the same time. Creating a full site theme plus editing design at site level is the perfect combination.

Global site colors

Divi lets you create a global color palette for your site. These colors are dynamic and you can change them at any time.

This allows you to quickly transform your website's color scheme in a few moments.

Advanced code editing

Although you don't need to know code to use Divi, you still have the option to write and edit code if you wish.

Divi includes a full code editor that makes it easy to write and edit code.

Functions include syntax highlighting, error detection, self-completing, color selector, multi-line selection, search, replacement and more.

You can add custom CSS to any item or code on a page using the Divi code module or the custom CSS area in the page settings.

Build your design library

Each Divi facility includes access to the Divi Library, where you can save design elements, page layouts, headers, footers and more for easy access to building sites.

Divi also includes thousands of pre-designed designs that you can use at any time.

Global elements and dynamic content

With Divi you can save sections, rows or modules as global layouts on your site.

This means that when you update a global item, it will automatically sync wherever it appears on your site, saving time and headaches.

Divi can also display dynamic content (such as your logo, entry title, search results, and more) so you spend less time editing each page and making changes with a single click.

Mobile view modes and wireframe

There are many ways to build with Divi. You can switch between different modes of view by choosing the one that best suits you or your project.

You can zoom in, alternate mobile device views, change interaction modes, or build your page structure quickly in wireframe mode.

History, self-saving and browser backups

Divi supports you. Every action you take while building is saved in your editing history.

You can easily undo, remake and explore revisions. If something fails, such as your internet connection or closes your browser, Divi will automatically save your progress so you can restore it.

Right click options

Divi also has powerful right-clicking options that further streamline design. Learn everything that is possible with the right-click options in Divi.

Best tips and practices from the Divi Builder

There are many ways to use Divi in your design strategy, and each designer or developer will have their own method and workflow that works best for them. We encourage you to find the process that works best for you.

Toggle between Visual Builder and wireframe mode

One of the great advantages of Divi's Visual Builder is that it is easy to switch between front-end edition and wireframe mode.

Switching between the two views takes less than a second. Switching between seeing your design and structure can help you drag and drop items quickly and visualize the structure.

Use the zoom out function

Surely you have also done this: take a screenshot of your design to see what everything looks together.

The zoom icon in the Divi bar lets you get an overview of the design without having to save, exit and take a screenshot.