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 and Visual Builder - allows you to see your changes while editing!
How to Use the Visual Builder
- 1
- Go to 'Pages' > Open page > Click 'Build on The Front End' button. See image below.
- 2
- Hover over elements to see options to move, settings (edit), duplicate, change layout structure, save to library and delete. Review DIVI icons, settings and more here!
- 3
-
Save adjustments with the green checkmark on the bottom of the setting popup.
Always save while editing between opening and closing elements on the page.
-
You can also exit (not saving edits) and undo / redo on this bottom bar menu. See the image above.
- 4
- Save All Edits BEFORE EXITING the editing window/page. See notes below.
How to Save Edits
While editing, always click the green checkmark on the bottom of the setting popup.
Ready to save all updates?
- 1
-
Click the 3 dots in a purple circle - appears on the bottom of the page.
- 2
-
Click ' Save' bottom right corner. Save/Publish edits before leaving the visual builder. See image and more options below.
Options Menu
Open the Menu by clicking the '3 dots in a purple circle' icon. Located at the bottom of the screen.
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: Save all edits. New pages will show 'Save a draft' or 'Publish' options.
Exiting the Visual Builder
Always save your edits before leaving, or closing your browser window. Any edits made will not automatically save. Clicking the checkmark icon while editing saves your changes for that element but does not push them 'live' to the frontend/public. Read step #4 above on how to save ALL edits before exiting.
To exit the visual builder - Click in the toolbar on the very top to leave and return to the backend.