Divi is a modern no-code visual drag-and-drop website builder for WordPress. With Divi, you can build stunning websites from the ground up without touching a single line of code (unless you want to!).

Divi harnesses the power of complex web development and lets you design custom websites by using the Divi Visual Builder so you can see the changes you are making in real-time.

Let's explore all the features, settings, and functionality available within the Divi Visual Builder.

Once Divi is installed on your website, you can access the Visual Builder on every Page.

To do so, navigate to any page and click Enable Visual Builder on the top admin bar.

To start fresh on a blank page, navigate to your WordPress dashboard and click Page → Add New.

Give your Page a title, then click Use Divi Builder. This will reload the page onto the front end of the website with the Divi Visual Builder enabled.

As your page reloads, you'll notice three options:

This option loads the Divi Builder with a blank page design. Choose this option if you'd like to start your page design from Scratch.

This option lets you choose from our large library of pre-designed Divi layouts. You can choose from premade layouts by Divi, which you've designed and saved to your Divi Library, and existing pages on your website that you can clone.

This option allows you to create an entire page layout using Divi AI. Using your text prompt and information about your website, you can create the perfect page outline, then build it and fill it with content and imagery, bringing it all to life in no time.

Select, Build From Scratch. By default, a standard section is automatically added to the Page.

Let's start with the basics. The building blocks of Divi. The main building blocks of Divi are Sections, Rows, Columns, and Modules.

Sections contain Rows, which contain Columns, which contain Modules.

In Divi, everything you build starts with a section. Sections are the biggest building blocks in the Divi builder.

You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas.

This content wrapper has various settings that can be used to do some awesome things.

There are three types of sections:

Standard sections are the most commonly used section within Divi.

It expands to the browser's width and contains a row set to 80% width by default. However, many customization options are available within the standard section to get it to do whatever you want.

Fullwidth sections give you access to a set of Fullwidth Modules.

These modules act a little differently because they take advantage of the full width of the browser. Fullwidth modules can only be placed within Fullwidth sections.

Specialty sections allow for more advanced column structures.

When you select Specialty, you'll see all the available column structures.

Unlike Regular Sections, when you use a Specialty Section, you can add complex column variations next to full-spanning vertical sidebars without adding unwanted breaks to the Page.

These types of layouts are not possible using normal sections. Below is an example of a Speciality Section in action.

Rows are nested inside sections and can contain a variety of column layouts that help structure your content.

Columns are nested inside rows, creating a basic boxed structure for your content. Every row has a column, even if it's just one column.

Modules are the content blocks of Divi. Some examples include:

Check out all the modules Divi has to offer here. To learn how to use the modules, check out the link below.

When adjusting settings and applying styles in Divi, it's important to remember the hierarchy of Divi's Sections, Rows, Columns, and Modules.

These are called parent and child elements.

Child elements are nested inside parent elements and are affected by any design style you apply to the parent element.

Whenever you open an element's settings, a window will pop up with all the content, design, and advanced settings available to that element.

Let's take a closer look at what's available.

At the top left, you'll see the name of the builder element you're working on. That could be a Section, Row, Column, Module, Page settings, etc.

If you ever get confused about what element you're currently editing, look here; it will tell you!

Underneath the name of the module is where you can access Global Presets. Click on the dropdown to load a saved preset, create a new preset, or delete a preset.

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

The next icon expands the modal to the width of your browser.

The next icon either snaps or separates the modal. Snap affixes the modal to the left of your browser window and does not hover over your Page's content but adjusts next to it. To exit the left sidebar position of the snapped model, click the icon again, and it will separate and return to the position it was in before.

When clicked, the three vertical ellipses icon gives you access to even more settings for that element.

You can also access these settings by right-clicking on the design element you're working on. When right-clicking to access these settings, you'll notice Undo and Redo are added at the top of the list.

This is handy for when you want to quickly undo or redo a certain action.

Next in the module window is the Search Bar. You can quickly find and access settings and styles using the search field. Type what you're looking for to search.

The filter button works similarly to the search function, allowing you to quickly access modified styles, responsive styles, hover state styles, and active content.

All modal windows have three tabs:

This is where the content, design, and advanced settings are for any Divi Builder element you're working on (whether a section, row, column, or module).

The Content tab allows you to adjust the content settings of the Divi Builder element you're working on. What's in the Content tab varies depending on which element you are working on.

The Design tab allows you to adjust the design settings for the Divi Builder element you are working on.

The Advanced tab allows you to access the advanced settings for whatever Divi Builder element you work on. Settings like:

At the bottom of the modal window, you'll see 4 buttons from left to right:

In this section, we'll review the interface of the Divi Visual Builder and explain what each option does.

The bottom Toolbar is where you can access a variety of settings. Let's look at what each of these icons means.

We'll start from the left and work our way to the right side of the Divi toolbar.

Three Dots: Builder Settings

Click the three dots to access settings that customize the Divi Builder interface. Here, you can customize what icons are on the bottom Toolbar, the Builder default view mode, the modal default position, and more.

Customize Builder Settings Toolbar

Show or hide icons on the Toolbar for quick access here. Click the icon to show or hide it on the Toolbar.

From left to right, the icons are:

The History State Interval determines how often Divi auto-saves your page design. You can auto-save after every action or every 10, 20, 30, or 40 actions.

Here, you can set the default position of the modal when it's opened.

You can choose from:

Here, you can choose how new pages are loaded. You can choose for the Page to load as a build-from-scratch page, with the Divi Library window open, by cloning an existing page, or with the three options presented with Give Me a Choice.

Toggle this option on or off to enable or disable the Divi Builder animations when you click an object.

Toggle this option on to show disabled modules at 50% opacity. Disabled modules are hidden from view depending on the device used (desktop, tablet, or mobile).

When working within the Visual Builder, it's helpful to display disabled modules at 50% opacity so you know they are disabled for the view just by looking at them.

If this option is toggled off, the disabled element will not show in the view mode it's disabled on.

This setting will show module settings as closed toggles when it is toggled on. If this setting is toggled off it will show the module settings as open toggles.

This option allows you to choose whether or not you want modules to display placeholder content when you add them to your Page.

If you toggle this option off, new modules added to your Page will not display placeholder content, as shown below.

This setting allows you to choose whether or not you'd like to be able to edit Theme Builder templates in the Visual Builder.

If you only want those templates to be editable through the dashboard Theme Builder, then toggle this option off.

Now, let's look at the icons in the middle section of the Divi Toolbar.

The Plus icon loads the Divi Library when clicked. Here, you have three choices:

Divi comes packed with hundreds of free Layout Packs designed by our in-house design team just for you!

If you'd like to use a premade layout on your Page, click the Premade Layouts tab at the top of the Divi Library window and browse the hundreds of available designs.

You can even use the sidebar on the left to filter through categories or the search bar to find what you're looking for.

In this section, you can load any saved layouts from your Divi library and your Divi Cloud.

Click the Your Saved Layouts tab to view your saved layouts, and use the sidebar options to sort and filter through your saved layouts. One way to use this feature is to create templated wireframes to save as a layout and then load onto new websites.

Make this even easier by saving and loading from Divi Cloud, which you can access on any Divi website signed in with your account. Learn More: Save and Load Custom Layouts With Divi Library.

This feature is handy when you've already designed a page layout you like and want to use the same layout on another page.

To clone an existing page, click the Clone Existing Page tab and navigate to the Page you want to clone. What does this do, and when/why would you want to use it?

It allows you to save your page layout to your Divi Library and/or Divi Cloud Library. Once clicked, an options window will pop up where you can name your layout, assign it to certain categories and tags and save it to your Divi Cloud.

If you want to wipe your Page clean and start fresh, click the trash can icon to delete the entire page design.

This is the icon that either opens or closes the Divi Toolbar.

When the Toolbar is open and expanded, you'll see an x icon; when it's closed, you'll see a + icon to open and expand it.

The gear icon brings up the Page Settings window.

This is where you can apply custom settings to that Page only. These are not global settings but will only apply to the Page you are working on.

Page Content Settings

Page Design Settings

Page Advanced Settings

Click this icon to view the revisions made to the Page. Here, you can easily view history states for the Page you're working on and global history states (like edits to a global footer, header, or module).

To view the changes you've made, click on the action toggle.

Click this icon to Export or Import page layouts. Learn More here: Importing & Exporting Divi Builder Layouts & Library Collections.

The search icon helps you quickly access what you're looking for. You can change your device view, manage the page layout, access builder settings, search documentation, and open elements.

If you're looking for something within the builder and need to know where it is, use this search feature to find it.

Click this icon for a bird' s-eye view of the page layout. You can open and close all the layers and use the filter function to quickly find your desired design element.

Drag and drop the layers to rearrange the page design, or use the icons on the layers to access settings, duplicate that item, or delete it.

This question mark icon loads the Divi Builder Helper when clicked. Here, you can browse Divi's documentation, watch how-to videos, and look up keyboard shortcuts.

In the Video Tutorials tab, click on the topic you're interested in and watch the video on-screen. To view Divi's Documentation, visit Divi's Documentation Hub.

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

Mastering keyboard shortcuts can help speed up your design process and quick access and edit elements. Learn More: Divi Keyboard Shortcuts.

A feature you'll use often. Before exiting the Visual Builder, it's important to save your design.

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

Always make sure to save your work! The Divi Builder periodically auto-saves your work; however, it's best to do a final manual save before exiting the Visual Builder.

To save your design, click the green Save button at the bottom right of the screen or use the keyboard shortcut cmd + (mac) or ctl + s (PC).

Then click Exit Visual Builder on the top Toolbar to exit the Visual Builder.

Let's take a look at what you can do with the Divi Builder!

Divi isn't just a WordPress theme. It's a complete design framework that allows you to design and customize every part of your website from the ground up.

You have control over everything down to the finest detail. Create the perfect websites for you and your clients. Explore all the design features that Divi has to offer!

Making responsive websites is easy with Divi.

Divi is responsive by default but takes the responsive design further by giving you complete control over every design setting on each mobile device.

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

Let's explore some of the core features that make Divi, Divi!

Let's take a look at the essential features of Divi's Visual Builder and what's available to you at your fingertips.

With Divi's Visual Builder, you can drag and drop elements, format text, resize design elements, adjust responsive sizing, and show or hide elements based on the device used.

Divi's Theme Builder is a powerful way to build your website templating system using the power of Divis' Visual Builder to design your website's header, footer, product templates, blog post templates, category pages, project templates, 404 page, and more.

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

That way, you can visually see your changes before saving and publishing your design. You can also resize elements on your website by dragging the sides of the elements to adjust settings like height, width, padding, and margins.

In Divi, anything can be copied from one element and pasted onto another. You can copy individual settings, groups of settings, or an element's entire design and transfer it to another element on the Page.

There is no need to open up design settings and edit things repeatedly. Design it once, and then copy and paste.

If you have a design style you just created, and you want to use that elsewhere on the Page or even across the entire Page, you can extend that style automatically to your desired location.

Update hundreds of elements at once! Control exactly where and to which elements your styles should be extended to.

Keyboard shortcuts are the key to ultimate efficiency. Divi has a full range of keyboard shortcuts that advanced users can use to speed up their workflow significantly. Once you get the hang of shortcuts, you wonder how you ever lived without them!

If you want to edit multiple elements simultaneously, like a group of images, use Divi's multi-select bulk editing capabilities!

To select multiple elements, press Cmd or Ctrl and click each element you want to edit on the Page at once.

You can edit these elements simultaneously, changing their style and content or moving them to different locations on the Page as a group.

Make sweeping changes across your entire Page instantly, saving you hours of editing time. Using find and replace allows you to change any design value, such as colors or fonts, across the entire Page or within specific locations.

Instead of opening up each element individually and changing colors repeatedly, find and replace across the entire document.

Customize your website with its overarching design system by editing the default design of any element.

When you modify a module's default design, it updates across your whole website at once. Site-wide theme building plus site-wide design editing is the ultimate combo.

Divi lets you create a global color palette for your website. These global colors are dynamic and can be changed at any time.

This lets you quickly transform your website's color scheme in just a few moments.

While you don't need to know code to use Divi, you still have the option to write and edit code if you desire!

Divi has a fully-featured code editor that makes writing and editing code so much easier and enjoyable.

Features include syntax highlighting, error reporting, auto-complete, color picking, multi-line select, search, find and replace and more.

Add custom CSS to any element or add your code to any page using the Divi Code module or Page Settings Custom CSS area.

Each installation of Divi comes with access to the Divi Library, where you can save design elements, page layouts, headers, footers, and more for easy access when building websites.

Divi also comes with thousands of premade layouts you can use anytime!

With Divi, you can save builder elements (sections, rows, modules) as global designs across your website.

That means whenever you update a global element, it will automatically synch those changes anywhere else that element appears on your website, saving you time and headaches!

Divi can also display dynamic content (like your logo, a blog post's title, search results, and more) so that you can spend less time editing every Page and make changes with one click.

There are multiple ways to build with Divi. You can freely switch between different view modes, choosing the one that best suits you or your current project.

Zoom in and out, toggle through mobile device views, switch between unique interaction modes or build your page structures quickly in wireframe mode. It's up to you.

Divi has your back. Every action you perform while building is saved into your editing history.

You can undo, redo and explore revisions with ease. If something goes wrong, like your internet going down or your computer crashing, Divi will automatically save your progress so that you can restore it.

Divi also comes with powerful right-click options that make designing even faster! Learn all about what's possible with Divi's right-click options here.

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

However, we have a few recommendations for maximizing Divi, simplifying your workflow, and streamlining your design processes.

One of the great things about Divi's Visual Builder is that it's easy to switch between the front and backend editing.

Changing between both views takes less than one second. Switching between viewing your design on the front end and viewing the wireframe layout can help you quickly drag and drop elements and view the structure of your design.

I'm sure you've done it, too - take a screenshot of your page design to see how everything looks together.

The Zoom icon on the Divi toolbar lets you quickly take a bird's eye view of your design instead of having to save, exit, and take a screenshot.