8 Divi Visual Builder features you should use!

Updated on 05/03/2020 | Published on 27/02/2020 | 7 comments

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.

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".

Affichage filaire Divi Visual Builder
Wired display Divi Visual Builder

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).

Activer l'affichage filaire

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.

Verrouiller un module Divi

Every Divi moduleThe lock, section or line, is likely to be locked:

  1. Go to the additional options of the item you want to lock: click on the 3 small dots icon.
  2. Select the "Lock" option.
  3. 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:

  1. The "move module" mode.
  2. The "unlock module" mode.
  3. 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.

Choisir l'interface du Divi Visual Builder
Selecting the Divi Visual Builder interface
  • 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.
Interface Visual Builder

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

Interface mode déplacer

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

Interface mode déverrouiller
Unlock mode interface

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

Interface mode grille

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...

Paramètres de la page
Page Settings
  • 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 !!!

Étendre les style dans le Visual Builder
Extending styles in Visual Builder

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:

  1. Open the parameters of a module, this is the first button.
  2. 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.
  3. Choose "extend xxxxx". In my case, it's "extend background button.
  4. 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".

Historique du Visual Builder
Visual Builder History

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?

Aide Divi Visual Builder
Divi Visual Builder Help

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.

Get the full list of keyboard shortcuts for Divi Visual Builder here!

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...

A/B Testing Divi
Activate A/B Test

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.

A/B Testing Divi Visual Builder
Define the 2 versions of the test

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:

  1. Set the settings as usual.
  2. Obtain statistics at the end of the trial period.
  3. Switch from one version to the other by clicking on the side arrows.
  4. Go to the context menu to end the test or access other options.
A/B Testing Visual Builder
A/B Testing options

Statistics will give you access to valuable information such as :

  1. The number of clicks
  2. The number of views
  3. The bounce rate
  4. The commitment rate
A/B Testing Divi Builder
A/B test statistics

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!

Fonctionnalites Divi Visual Builder
Fonctionnalites Visual Builder Divi
Hidden features of Divi Builder

1,760 words

7

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

7 Commentaires

  1. Samir

    Merci pour ces astuces.

    J’utilise DIVI pour mes clients et je tenais à vous remercier pour toutes les astuces que vous apportez.

    Samir
    wpcreationweb.com

  2. Lycia Diaz

    Merci Samir !

  3. jean-luc Robert

    Hello Lycia
    Super ces astuces, je ne les connaissais pas, et pourtant je suis assez curieux. Je suis content de connaitre ton blog.
    Merci encore

  4. Lycia Diaz

    Super Jean Luc !

  5. Benabou

    Super article et super site. J’utilise également beaucoup Divi avec mes clients et pour mes propres sites et je dois dire que ça m’a donné envie de tester le A/B testing.

  6. Michele

    c’est TOP toutes ces astuces !! tout est TOP sur ce site ma référence absolue
    en plus comme j’ai tout en anglais et que je suppose que les lignes sont dans l’ordre ça va m’aider
    merci encore

  7. Lycia Diaz

    Merci Michelle

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This