How to Use Divi 5:A Visual Builder Walkthrough

Summary

• Learn about every area of the Divi 5 visual builder interface.
• Understand how sections, rows and modules are structured.
• Configure global design variables before you begin.
• Understand the responsive system so that you can design for every device.

Before you build, learn how to use the tools

You have already installed Divi 5 and can access its visual builder, the tool you will use to create and customise every page on your website: adding, moving and modifying text, images, buttons or forms directly on the screen, without writing code.

This is the fourth phase of building your website. Before you begin designing, it is important to become familiar with the workspace and understand how the builder is organised.

It is normal for this stage to feel like the densest part of the journey because you will discover many new tools and concepts. However, this is where most of the learning effort takes place. Once you understand how the builder works overall, creating and customising pages with Divi will become much easier.

How do you open the Divi 5 visual builder?

To start designing with Divi, you need to open the visual builder on a WordPress page or post.

Create a new page

From the WordPress dashboard:

• Go to Pages → Add New Page.
• Give the page a name, for example Home.
• Click Use Divi Builder.

The page will then reload and the Divi visual builder will open.

What you see is Build From Scratch mode, the option we will use during the next stages.

Choose how to begin

If you click the blue + icon, you will be shown three options for getting started:

Pre-made layout

This allows you to load a professional template from the Divi library and use it as a starting point.

Saved layout

This allows you to reuse layouts that you previously saved in your Divi library or Divi Cloud.

Build with AI

This allows Divi AI to generate an initial proposal from your instructions.

Explore the visual builder interface

As you work with Divi and select different elements on the page, tools and options will appear. The following image brings together the main areas of the visual builder that you will use during this journey.

The canvas is the main area of the screen. Here, you see your page as visitors will see it and can edit it directly in real time.

When you click an element on the canvas, you can select and modify it. As you move the pointer over the page, Divi displays coloured borders to help you identify each part of the structure:

• Blue border: section.
• Green border: row.
• Grey border: column.
• Black border: module.

These colours help you distinguish the structure of your page quickly while you work.

On the left side of the screen, you will find a column of icons providing access to the builder’s main tools.

You do not need to memorise all these tools now. Throughout this journey, we will use the most important ones and you will discover the rest gradually.

Layouts: opens the template panel with three sources: the pre-made library, your layouts saved in Divi Cloud and AI generation. It is useful for loading complete structures without starting from scratch.

Layers: displays the complete page structure as a tree. It is very useful for locating, selecting and reorganising elements on complex pages.

Style Inspector: allows you to see the styles applied to the selected element and understand where they come from, including assigned presets.

Global Variables: opens the variable manager so that you can define colours, fonts, text and other values that can be reused throughout the website. We will devote a complete section to this tool later.

Presets: allows you to create and manage reusable styles that can be applied automatically to several elements.

Page Manager: allows you to switch quickly between different pages on the website without leaving the visual builder.

Interactions: allows you to create animations and dynamic behaviours that respond to user actions, such as clicks, scrolling or hovering.

Wireframe View: displays the page structure as blocks, making long or complex pages easier to organise.

Element selection and management: these three icons provide different ways to select and highlight elements on the canvas, making it easier to work on designs with many modules.

Builder Settings: opens the builder preferences, where you can customise the behaviour of the interface and other working options.

Divi Helper: provides quick access to official Divi documentation, tutorials and other support resources.

When you select a section, row, column or module, its settings panel opens on the right side of the screen. This is where you will do most of the work while designing your pages.

The panel is organised into three main tabs:

• Content: what does the element display? This allows you to edit the element’s content, such as text, images, icons, links or backgrounds. From here, you can also add internal elements when the module type permits it.

Content: what does the element display?

This allows you to edit the element’s content, such as text, images, icons, links or backgrounds. From here, you can also add internal elements when the module type permits it.

• Design: what does it look like? This allows you to customise the element’s appearance: typefaces, colours, sizes, spacing, borders, shadows and many other design options. Most of these settings can also be adapted for desktop, tablet and mobile.

Design: what does it look like?

This allows you to customise the element’s appearance: typefaces, colours, sizes, spacing, borders, shadows and many other design options. Most of these settings can also be adapted for desktop, tablet and mobile.

• Advanced: advanced options. This brings together tools for more technical customisations, such as custom CSS, CSS classes and IDs, display conditions, animations and interactions.

Advanced: advanced options

This brings together tools for more technical customisations, such as custom CSS, CSS classes and IDs, display conditions, animations and interactions.

At the top of the settings panel, you will find a breadcrumb showing the position of the selected element within the page structure. For example: Page → Section → Row → Column → Module.

You can click any level to select the parent element quickly. This is very useful when you are editing a module and need to modify the row, column or section containing it without having to find them manually on the page.

At the top of the builder, you will find several tools to help you during the design process:

• Responsive View: switches between desktop, tablet and phone views so that you can check how the page adapts to each device. Settings made in a specific view apply only to that type of device.
• Undo and Redo: allows you to reverse or restore the latest changes.
• Save: saves the page’s changes at any time. You can also use Ctrl + S on Windows or Cmd + S on Mac.
• Preview: opens the page in a new tab so that you can view it without the builder interface.
• Exit: closes the visual builder and returns to the normal page view.
• Light and Dark modes: available from Builder Settings, this changes the interface’s appearance according to your preference. The option affects only the editor and does not modify your website’s design.

How is a page organised in Divi 5?

Before adding content, it is important to understand how Divi organises a page. Every design is built using the same hierarchy:

Sections

Sections are the largest blocks on the page. You can imagine them as the broad horizontal bands that divide the content into different areas, for example the main header or hero, a services section, testimonials or the footer.

Each section occupies the full available width and acts as the main container for the elements it includes. In the visual builder, it is identified by a blue border.

To add a new section, click the blue + icon at the bottom of the page.

You will put rows, columns and modules into practice step by step in Your first page with Divi 5.

How do you add, duplicate and delete elements?

Now that you know the structure of a Divi page, it is time to learn how to add, reorganise, duplicate and delete its different elements.

Add elements from the canvas

The quickest way to add elements is to use the + icons that appear as you move the pointer over the page:

• Blue + → adds a new section.
• Green + → adds a row within a section and allows you to choose the column layout.
• Black + → adds a module within a column.

Simply place the pointer where you want to insert the element, click the corresponding icon and select the option you need.

Add elements with the context menu

Divi also includes a useful context menu. You can open it by right-clicking any section, row, column or module, or from each element’s options menu.

The most useful options include:

• Add Element Above: inserts a new element before the selected element.
• Add Element Inside: inserts a new element inside the selected element.
• Add Element Below: inserts a new element after the selected element.

The context menu is especially useful when you are working with complex pages and need to insert elements more precisely.

Reorganise elements

Every Divi element can be moved by dragging and dropping it. Simply hold down the move icon and drag the section, row, column or module to the desired position.

This is one of the quickest ways to reorganise content while designing a page.

Duplicate elements

Duplicating an element is the quickest way to reuse a design without having to recreate it from scratch.

You can do this in three ways:

• From the toolbar: move the pointer over the element and click the Duplicate icon.
• From the context menu: right-click and select Duplicate.
• With a keyboard shortcut: Ctrl + Shift + D on Windows or Cmd + Shift + D on Mac.

The copy is created immediately beneath the original element and retains all its content, configuration and styles.

How do you edit an element’s content and design?

When you select any section, row, column or module, its settings panel opens on the right side of the screen. From here, you can modify both its content and appearance.

Content tab

The Content tab defines what the element displays. The available options change according to the type of element selected.

For example:

• Text: allows you to write and format content.
• Image: allows you to select or upload an image from the Media Library.
• Button: allows you to define the button text and the link to which it will direct the user.

Many elements also include common options such as:

• Background: allows you to add a background colour, gradient or image.
• Elements: allows you to add modules or rows directly inside the selected element when its structure permits it.
• Metadata: allows you to assign an internal name to the element so that it can be identified easily in the Layers panel. This name is visible only to you and does not appear on the published page.

Design tab

The Design tab controls the element’s visual appearance. Although the options vary according to the module type, the most common are:

• Typography: the text’s typeface, size, colour and spacing.
• Spacing: margins and padding.
• Sizing: width, height and maximum size.
• Borders: thickness, colour and rounded corners.
• Shadows: add depth to elements.
• Animations and effects: allow you to customise the visual behaviour of certain elements.

Advanced tab

The Advanced tab brings together options intended for more technical customisations. The most frequently used include:

• Attributes: assigns a CSS ID or CSS classes to the element. This is useful if you want to apply custom styles.
• Custom CSS: allows you to add CSS code directly to the element.
• HTML Tag: defines the element’s semantic tag, which is useful for content structure and SEO.
• Conditions and Interactions: allow you to display elements or create dynamic behaviours according to different rules.
• Visibility: allows you to decide on which devices the element will be displayed.

Design Variables: Divi 5’s global design system

Before you start designing your first page, it is useful to learn about one of Divi’s most powerful tools: Design Variables, also called global variables. Configuring them from the beginning allows you to work more quickly, maintain greater visual consistency and simplify website maintenance.

What are Design Variables?

Design Variables allow you to define reusable values such as colours, fonts, images, links, sizes or text for use anywhere on the website.

You can imagine them as a list of official values for your website. Instead of repeating the same information again and again, you define it once and Divi reuses it wherever necessary.

For example, instead of entering the colour code #073D3F every time you use your brand’s main colour, you can create a variable called Primary Colour. You then only need to select it when configuring a colour. If you decide to change that colour one day, you only need to modify the variable once and every element that uses it will be updated automatically.

Available variable types

Divi 5 allows you to create six types of Design Variable:

• Colour variables: reuse your brand colours throughout the website.
• Font variables: define the typefaces used for headings and text.
• Image variables: reuse images such as logos, icons or backgrounds.
• Link variables: save frequently used URLs.
• Number variables: reuse values such as sizes, margins, spacing or border radii.
• Text variables: store reusable information such as your company name, telephone number or slogan.

How do you apply a variable to an element?

While editing an element, you will find a small variable icon next to many fields, including colour, font or size fields.

Instead of entering a value manually, you can select an existing variable. When changing text colour, for example, simply choose the Primary Colour variable. If you later modify that variable, every element using it will be updated automatically.

Why configure variables before you start designing?

Defining your variables from the beginning is a small investment of time that will simplify all the work that follows.

• You will maintain a consistent visual identity throughout the website.
• You will save time by reusing colours, fonts and other values.
• You will be able to update the complete design by changing a single variable, without having to check every page or module manually.

It is one of those tools that may seem unimportant at first, but whose usefulness grows as your website develops.

The Divi 5 responsive system

Today, the same website may be visited on a desktop computer, tablet or mobile phone. Divi makes it easier to adapt the design to each type of screen and provide the best browsing experience.

How does the responsive system work?

Divi includes several breakpoints to adapt the design automatically to different screen sizes. The three you will use most frequently are:

• Desktop: large screens.
• Tablet: medium-sized screens.
• Phone: small screens.

You can switch between these views using the device icons in the builder’s top bar.

Advice before you begin designing

Before moving to the next stage, keep these points in mind. These small recommendations will help you work more comfortably and efficiently from the beginning.

• Define your visual identity before designing. Choose your main colours, typefaces and spacing, then configure them as Design Variables. This will make the whole process quicker and keep your website’s visual identity more consistent.
• Save your work frequently. Get into the habit of using Ctrl + S on Windows or Cmd + S on Mac whenever you complete an important change. This simple habit can save you a great deal of time.
• Start with simple designs. You do not need to use every Divi function from the first day. Begin with simple structures and add new options as you gain confidence.
• Always check the mobile version. A large share of visitors will access your website on a phone. Spending a few seconds checking the design before publishing can prevent many problems.
• Use Wireframe View when the page grows. If the design starts to become difficult to manage, switch temporarily to Wireframe View. You will work on a much cleaner structure and find it easier to locate, move and reorganise elements.

You now know the foundations of the Divi visual builder: you understand how sections, rows and modules are organised, know how to edit elements and are familiar with essential tools such as Design Variables and the responsive system.

At the next stage, we will put all this into practice by creating your first page with Divi. It will be time to apply what you have just learned step by step and begin designing with confidence.