Are you using all the features of the Divi Visual Builder?
If you start with DiviIt is not easy to explore all the options and functionalities offered by the Visual Builder!
In this article, I show you some tips that will help you be more efficient and productive when using Divi's Page Builder.
- 1 - Wired display in 1 click
- 2 - Locking a Divi module
- 3 - Choose the type of Divi Visual Builder interface
- 4 - Insert page parameters from the Visual Builder
- 5 - Extend styles from any Divi module to the whole page
- 6 - Going back to a previous version thanks to "revisions".
- 7 - Get help and resources directly in the Visual Builder
- 8 - A/B Testing is child's play!
- 9 - The final word...
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - Wired display in 1 click
For the nostalgic ones, those who loved build their layout from the back-officeThe Divi Visual Builder allows you to enable "wired display".
With a single click, the layout is built in the form of a "brick".
This way of displaying the construction of the page is sometimes necessary to see more clearly in its composition.
This makes it possible to check, at a glance, the placement of sections (blue or purple), lines (green) and modules (grey).
To view the layout in "wired" mode, simply open the options from the purple button at the bottom of the page and click on the 2nd brick icon in the lower left corner. Click it again to return to normal display.
Also to be read: 7 hidden features of Divi for Gutenberg!
2 - Locking a Divi module
You're more of the type to start something, finish it and never look back?
Great, this hidden option is for you!
The Visual Builder allows you to lock the modules. Once you think your module is complete and perfect, you can lock it.
This allows you to quickly see which parts of the layout are completed and which parts are not yet completed.
Every Divi moduleThe lock, section or line, is likely to be locked:
- Go to the additional options of the item you want to lock: click on the 3 small dots icon.
- Select the "Lock" option.
- A red padlock appears on the locked module.
If you need to unlock it, just click on it and the module is editable again.
Don't delay any longer! Discover the Divi theme here !
3 - Choose the type of Divi Visual Builder interface
The Visual Builder interface can be used in 3 modes:
- The "move module" mode.
- The "unlock module" mode.
- The "grid" mode.
You can display the 3 shortcut icons that will allow you to switch from one mode to another with just one click.
- Click on the purple button at the bottom of the page (3 small dots) to display the additional options.
- Click on the first icon in the lower left corner (still the 3 small dots).
- A window appears: you can click on the last 3 grayed icons (Divi constructor configurations) to add the shortcuts.
These 3 display modes are also available from the drop-down menu named "Interface Builder". Here you can choose the default display mode.
3.1 - Visual Builder interface in "move module" mode
The "move module" mode is the default mode, the one you probably know.
It allows you to obtain a layout that displays its composition only when you hover the mouse over the screen (hover display).
With this mode, you will have to hover over the module or section to be edited to make its options appear. When your mouse is out of the window, your layout is "clean", like the one the user sees when visiting your site.
3.2 - Visual Builder interface in " unlock the module " mode
Although the translation is not very goodIn the "unlock module" mode, the "unlock module" mode allows you to get colored boxes around the sections/lines/modules in order to get a general idea of the layout's composition.
When the mouse hovers, the editing options will appear.
3.3 - Visual Builder interface in " grid " mode
The "grid" mode displays all sections/lines/modules with their edit menu. This allows you to reach them easily and quickly.
As far as I'm concerned, it's not uncommon to have to switch from one mode to another, especially when some sections or modules overlap and the editing options are hard to reach. The wired mode is also a great help in this type of configuration.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"
4 - Insert page parameters from the Visual Builder
If you need to change the title of your page, add an image to highlight or refine the extract to improve your SEOyou don't have to go back to the back end of your page... Did you know that?
An option in the Divi Visual Builder allows you to reach these page settings directly...
- Click on the purple button at the bottom of the page (the 3 small dots), to make the additional options appear.
- Click on the cogwheel icon.
- A pop-up appears and allows you to change these parameters: page title, extract and spotlight image.
5 - Extend styles from any Divi module to the whole page
Here's an option that will save you a lot of time!
Imagine that you've just completed a complex layout and finally, your client (or you) decides to change the main color, typeface or even font size...
Are you really going to modify module by module and spend more hours on your project? It's raging, I've been there too...
Don't worry about Divi!
The option " extend styles " is perfect to apply the modification of an element on the whole of a line, a section or a page !!!
In this example, you can see that my buttons are red. If, in the end, I decide to pass them in purple, I'd like to avoid doing the action 3 times (or as many times as there are buttons)...
Then all I have to do is:
- Open the parameters of a module, this is the first button.
- Make my modifications: this can be the size of the button, adding a border, adding a shadow, changing the background color, etc. Once this change is made, simply click on the 3 small dots icon that appears on the flyover near the option.
- Choose "extend xxxxx". In my case, it's "extend background button.
- Choices will appear: to "all buttons" throughout "this page".. In the drop-down menus, you can choose the conditions to apply this new style. End with "Extend".
This video is certainly more explicit...
6 - Going back to a previous version thanks to "revisions".
The Visual Builder gives you the right to make mistakes!
If you have just changed something you don't like or have mistakenly deleted a module or section, you can go back.
To display the history of your changes, open the context menu at the bottom of the page (purple button) and click on the clock icon.
The list of changes appears with the schedule. Select the version you want to reinstate and release.
7 - Get help and resources directly in the Visual Builder
Need help using Divi Visual Builder?
Maybe you don't need to Google a solution... Maybe it's right there in front of you?
Have you ever clicked on the question mark icon at the bottom right?
A popup opens and allows you to view video tutorials and even access Divi's list of keyboard shortcuts.
With these shortcuts, you can save a lot of time, especially if your main activity is based on website design. WordPress with Divi.
The magnifying glass icon next to it allows you to quickly search for an answer to a question.
8 - A/B Testing is child's play!
Have you ever used the A/B Testing functionality offered with the Divi Visual Builder?
It's really easy to set up and it's usable on any section / line or module of the Divi Builder...
First of all, go to the optional menu (icon of the 3 small dots) of the module or section to be duplicated in A/B Testing. Choose: Test A/B.
A popup will open and you will be able to click on the item that will be the subject of the A/B test. You will see the cursor become round to target the element.
At that point, the element will be duplicated.
If you don't see it, switch to wired display mode (as seen in this article) and you will see that the item has been duplicated.
You can then edit them to make variations. For example: "free quote" or "contact us".
A/B Testing will allow you to check which CTA works best.
The idea is to test version A for a given period of time and then version B for another period of time. Then decide which version will be implemented in the long term.
A/B Testing is a very effective marketing technique for measuring engagement and click-through rates.
When one of your items is subjected to an A/B test period, you will easily recognize it because it turns blue. Then you can:
- Set the settings as usual.
- Obtain statistics at the end of the trial period.
- Switch from one version to the other by clicking on the side arrows.
- Go to the context menu to end the test or access other options.
Statistics will give you access to valuable information such as :
- The number of clicks
- The number of views
- The bounce rate
- The commitment rate
This is very similar to the data and KPIs needed to study the effectiveness of a marketing campaign.
All official resources about Divi's A/B Testing are available here.
9 - The final word...
I must confess that I don't yet know all the hidden nooks and crannies of Divi and her Visual Builder.
I may use Divi on a daily basis for my clients' projects, my own or even my training courses, but there is always something to discover...
I'd be happy to know if you already know and use these "hidden options" of the Visual Builder or if you see some other nice ones that I might have forgotten in this list: say it in comment!