The Visual Builder allows you to customize your site on the front-end of your website!
When you add content or adjust design settings inside the visual builder, your changes appear instantly.
To get started, log into your blog following these instructions.
That will take you to the dashboard of your site.
Open your site in a new tab, and you will see a black bar with editing options as shown below:
Click where it says ENABLE VISUAL BUILDER and you’ll be ready to start editing! Here’s what your screen will look like at this point:
Just scroll downwards to whichever section you want to customize, and follow the feature guidelines below when editing.
Hovering your mouse cursor on each of the icons numbered above will reveal its function as listed below:
1 – Move Module/ Move Section: Use this to change the position of your section. Simply drag upwards or downwards to move the section.
2 – Module Settings/ Section Settings: Clicking on this icon will open up a new screen where you can edit different aspects of your site like the colors, images, and so on.
3 – Duplicate Module/ Duplicate Section: This simply enables you to create an identical section with the same settings (colors, images and text) with just one click! You can then customize the duplicate section to suit your purposes.
4 – Save Module/ Section to Library: This allows you to save your current settings to a special library in your dashboard, so that you can easily access it later, and/or return to your previous settings.
5 – Delete Module/ Delete Section: This deletes the entire section from your website.
NOTE: The difference between a section and a module is simply that one houses the other. A section is basically the background on which a module is built.
6 – Expand Settings: Clicking on this will open up a new set of settings that govern the entire homepage, where as the settings covered in 1 to 5 above only apply to a particular section or module.
Hovering your mouse cursor on each of the icons numbered above will reveal it’s function as listed below:
6a – Wireframe View: This opens up an alternative display of your visual builder as shown below. Click on the same icon to revert to the default view.
6b – Zoom Out: Increase or decrease the size of your visual builder display.
6c, 6d and 6e – Desktop View, Tablet View, and Phone View respectively: These simply show you a preview of what your site will look like on different screens and devices.
6f – Load From Library: This allows you to change the layout of your entire site with one simple click. The Predefined Layouts come with the theme, and when you click Add From Library you’ll see the default PSMU Layout, and any others you may have saved, if at all. Use this with caution as it will mean starting over from scratch with your site customization.
6g – Save To Library: This saves your current settings in a new layout template in the theme library.
6h – Clear Layout: Delete all your current settings and build a new site from scratch.
6i – Collapse Settings: Return to single section editors 1 to 5 above.
6j – Page Settings: This gives you access to the collective settings of your entire homepage. You have the option to edit colors in this section.
6k – Editing History: This will give you a quick recap of all the changes you have made to your site.
6l – Portability: This is used by professional web designers to export the theme settings between different sites. You won’t need this feature.
6m – Save: Click this button to save your changes when you’re done editing!
You can use the visual builder to edit all the different sections on your homepage following the above guidelines.
Alternatively, you can edit each of your sections from within the dashboard, following the rest of the tutorials below this one under Theme Customizations > Divi Theme Customizations.