Learn About Divi 5 Visual Builder Basics

 If you’re accessing Divi 5 visual builder for the first time, you’ll see many icons, so here’s a quick walkthrough:

• (1.) Left Sidebar Panel: This panel includes builder tools. You can add pre-made layouts, access your layout library, view the structure using Layers, switch to Wireframe View, save design variables, adjust builder settings, and get help.
• (2.) Top Bar: You can switch between responsive modes. The width and zoom controls help you fine-tune layout spacing across breakpoints. You’ll also find undo/redo, clear layout, history, and save options here. Plus the Exit, Preview, Save Draft, and Publish buttons to manage your progress.
• (3.) Right Sidebar: When you click into any module, its settings open on the right. You can add content, style it, and add custom CSS here. The breadcrumbs at the top (Page > Section > Row > Column) show exactly where the module lives within your layout.

Next, you have two container elements: sections (represented in blue) and rows (always green). Inside rows, you have columns where you can add Modules (in black).

To add a section, you’ll click the blue plus button. For a row, it’s the green plus button, and black for a module. You get different types of row options to choose from. Inside a row are columns.

And inside rows and columns, you’ll add content modules such as headings, images, etc. Divi 5 offers over 200 content modules for all purposes, whether you want to add a contact form, testimonials, etc.

The recent Module group module lets you group different elements so you can create and save your own modules. (The Grey color represents a module group.)

To add your branding consistently throughout your website, the easiest way is to define your design variables.

These global values (such as your primary colors and fonts) will apply automatically wherever you use them. To modify them, just change the variable value in the Variable Manager. 

To edit any module, click on it, and the settings pop up in the right side panel.

Every module settings panel includes three tabs:

• Content: This is where you add or edit the module’s actual content. You can also add links, choose a background, or change the admin label to help identify the module more easily.
• Design: Switching to the Design tab allows you to style the visual appearance of the module. You can change font size, weight, color, line height, spacing, alignment, and more. Keep in mind that different modules have different setting options.
• Advanced: The Advanced tab gives you full control over more technical options. Add custom CSS, set responsive visibility, and more. It’s especially useful if you want to customize beyond what the Design tab offers.
• The laptop icon lets you switch between responsive and hover modes. By switching to one mode, you can customize all settings and save.
• The Default Preset button is Divi’s preset feature. Here’s a difference between element presets and option group presets.