How to Use DIVI Visual Builder: Basics

Visual Builder 

There are two options on how to edit and build a page. The Divi Builder is what you will see the page look like on the backend. Visual Builder - allows you to see your changes while editing. 

We at FreshySites use mainly the backend Builder to help keep elements consistent across all pages - Sections, padding, spacing, colors and more.

Visual Builder is great for quick adjustments to limit the number of times previewing the edits. Example: Estimating spacing on the backend might take longer than using Visual Builder.

You can switch back and forth between visual and backend. We stress that as always with editing, to be sure you save and publish your edits before exiting out of a page etc.

Activate it for that page, press "Build On The Front End" under the title of the page. Looks like the image above.

As you hover throughout the page, you will see options show highlighting the sections, buttons, and images. Make your adjustments.

Again we suggest that you use the visual builder for quick edits. You can add sections and new elements in this builder view but to keep all pages consistent, best to use the backend Divi Builder.

Similar to how the backend looks with Blue, green and gray sections/modules - You will see the same structure with Visual Builder.

Click on the "Gear" icon to open the options - it will open on the side of the page view

Settings look the same with Content Tab, Design Tab and Advanced Settings Tab.

Save adjustments with the green check mark on the bottom of the setting popup. You can also exit (not saving edits) and undo / redo on this bottom bar menu.

To SAVE - Click the 3 dots in a purple circle - Appears on top of the page.

Opens a menu for more options

Left Side Options: You can switch between device sizes to see a preview of what the page structure looks like accordingly.

Middle Options: Left to right - Add from the Divi library, Save to library, Delete page, close menu options, page settings, edit history, adjust page size (viewing not actual page dimensions)

Right Side Options: Here is how you SAVE all adjustments, Save a draft for Publish(Meaning Update).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.