Overview of Divi Visual Builder

Overview of Divi Visual Builder

The objective of this article is to teach you how to use the Divi Visual Builder to make and save changes to page content on your Divi WordPress site.


What is Divi?

Divi is a premium WordPress theme used to build websites. We favor it on client sites because it empowers our clients to make changes on their websites easily. Web pages in Divi are created using their Visual Builder which can be described as a visual website page editor. Please see the video below for an overview of the Visual Builder.

Accessing the Divi Visual Builder

Before getting started, log in to your website. You must be logged in to make website changes. In order to change content on a page, you must turn on the Visual Builder mode. This can be done one of two ways:

  1. Go your website and navigate to the page you wish to make changes to. Once on that page, click on the button in the top toolbar that says “Enable Visual Builder” to open the Visual Builder. It looks like this:  enable visual builder toolbar button
  2. Alternatively, from the Dashboard, navigate to Pages. This will display a list of the pages on your website. Find the page you would like to edit and hover over the page title. A few link options will appear. Choose “Edit with Divi” to open the Divi Visual Builder. It will appear similar to this:
edit with divi option when hovering over page in dashboard

Making Text Changes to Content

Once in the Divi Editor, you will see an editable version of your website page. If you hover with your mouse over parts of your page, you will see either black, blue, or green boxes surround content. These rows, sections, and modules make up your web page. Editing sections and rows (blue and green) will impact the design of your site. Since your website has been designed and optimized for all screen sizes, we recommend sticking to content changes to modules (black).

visual editor hovering over sections of content

The easiest way to change text on a page is to click directly on the text you want to change. Make text changes as if you were working in a typical word editor such as Word or Google Docs. Highlighting a section of text will open a gray toolbar with text options such as bolding the text, italicizing, adding a link, and more. Use this method add, remove, or modify text content on your site.

editing text in visual builder in divi

Saving Your Changes

Until your changes are saved, they will not be displayed on the website. If you were to leave the page before saving, you will lose your changes. When your changes are complete, click on the purple triple-dot icon purple triple-dot more options icon at the center bottom of your screen to access the Save button.

A toolbar of options will appear on the bottom of your screen. Click on the green Save button on the left to save your page changes. When you see the spinner disappear and be replaced with a checkmark, you will know your changes have been saved.

save button to save changes in divi visual builder

Now that your changes are saved, you can exit the Visual Builder. To do so, click on the Exit Visual Builder link in the top toolbar. It is located where the purple Enable Visual Builder button was and looks like this: exit visual builder button

That’s it!

Now that you understand the basics of the Divi editor, you can make changes to your website.

Our team is here ready to help if you have any questions. Give us a call or contact us for more information.