Divi Layout Block: Divi modules within Gutenberg!

Published on 10/01/2020 | 8 comments

Since version 4.1 of Divi and its new "Divi Layout Block" feature, you can insert Divi modules in the Gutenberg editor (the new WordPress editor)!

Even in my wildest dreams, I would never have imagined this possible!

It must be said that since the Divi 4.0 releaseAll updates were minor bug fixes or security updates. No new functionality had been added since the release of the Builder Theme

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is Gutenberg?

Do we still have to introduce Gutenberg? I'm wondering... But I'm especially thinking about new WordPress users: you must be wondering what is Gutenberg?

Well yes, if you've been using WordPress for a long time, Gutenberg is a word you're familiar with, it was a big topic of discussion when WordPress 5.0 was released in December 2018. But let's think about the users who discovered WordPress in 2019. They may not understand the term...

To make a quick overview (lightning, even): Gutenberg is the WordPress editor. Doesn't tell you much, does it? The editor is simply the interface you use within WordPress when you create your content (page, articles, etc.).

In the past, before December 2018, the WordPress editor looked roughly like a "Word" page. A kind of blank page with a toolbar that allowed you to format the text.

It was a bit of a dinosaur. Gutenberg came to put a big kick in all this... The rise of Wix (among others) certainly has something to do with it...

In short, all this to say that the release of the new WordPress content entry interface (called Gutenberg), has done a bit of harm to some Page Builders.

In fact, I wrote an article about it in which I told you how... keep the Divi Builder in back-office after the release of Gutenberg. Yes, not everyone likes change 😉 ...

But I guess Divi bounced back. Well, it took a while, I'll grant you that... But today, you'll be able to enjoy the power of Divi within Gutenberg himself!

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

2 - Why use Gutenberg within Divi ?

That's a very good question. Conversely, why use only the Divi Builder?

This could almost become a national debate.

But this is my opinion, the one I give to all my students during my training:

  • A theme is used to define the overall design of a WordPress site.
  • A page builder is used to create so-called "complex" pages: sales pages, landing pages, homepages, etc.
  • Gutenberg is used to write blog posts.

On Divi Tips and on my other blog (La Webeuse), it is this philosophy that I apply.

Why use a powerful and resource-hungry tool to simply display text and a few images here and there?

It's like driving a 4×4 in the city, is it really useful? Not to mention that you'll have to find a suitable place to park... A 4×4 is made for driving on steep roads. In town, you can take the tram or rent a small electric scooter. It's simpler, easier, faster... Hi hi hi, I digress!

So here it is, to write simple articles, no need for a page builder, whatever it is...

But that's where all the frustration is. We are still missing that little module, that little extra that we would have liked to insert in our article. For example: an accordion, a blog module or whatever!

Phew, version 4.1 of Divi finally allows us to combine the 2. No more need to add addons for Gutenberg to get a complete tool.

3 - What is the "Divi Layout Block"?

The Divi Layout Block is a new feature of Divi that allows you to insert Divi modules within your Gutenberg layouts.

Since a video is often more meaningful than words, here is Nick Roach who presents this feature:

So what do you say?

See the official publication on the Elegantthemes blog.

I couldn't resist the temptation to test these Divi Layout Blocks right away and I'll tell you how it works ...

4 - Divi Layout Block: how does it work?

Nothing could be simpler, you're not going to get lost. Here's the procedure:

4.1 - Insert a Gutenberg block

Create or edit content (page or article) with the WordPress editor (Gutenberg).

Gutenberg : ajouter un block
Add a Gutenberg block

Click on " + Add a block ".

This is the same process you use to insert any Gutenberg block.

4.2 - Insert the " Divi Layout " block

A new block has appeared: the Divi Layout block.

Bloc "Disposition Divi"
Select the "Divi Layout" block

Select this new block...

Choisir le type de Divi Layout Block
Choose the type of Divi Block: Build New Layout or Load from Library

You'll have two choices... you can..:

  1. Build New Layout: you will build your section
  2. Load from Library: Your section is already built and you download it from your Divi Library.

4.3 - Building the Divi/Gutenberg block

If you make choice n°1, you will discover 3 new options:

Choisir le type de construction du bloc
Choose the type of block construction: build from scratch - choose the layout - clone an existing page
  1. Building from scratch
  2. Choose the layout
  3. Cloning an exiting page

I'm sure you're familiar with this screen. These are Divi's classic options for the layout construction.

Ajouter ligne et module Divi
Insert a line and then a Divi module

If you choose the "Build from scratch" option, you will then add :

  1. A new line
  2. Then a module offered by Divi.

You will have the choice of 46 Divi Builder modules.

For this example, I have inserted a module of "tariff table" .

Exemple de module dans un bloc
Example of the module "tariff table".

Each module can be configured with Divi options, if you are familiar with the Divi Builder, you won't be confused ...

As usual, you will not forget to save your Divi construction using the purple cross and the green button at the bottom of the page.

4.4 - Editing the Divi/Gutenberg block

Once the Divi Layout Block is inserted, you can change the settings using a context menu that appears on mouse-over.

options du bloc Divi Gutenberg
The options of the Divi Gutenberg block
  1. You can convert the Divi Block Layout into a "group" block, but honestly, I don't see much point in doing that...
  2. The pencil icon will allow you to edit the Divi block.
  3. You will be able to modify your layout against a pre-built layout.
  4. Clear Layout: This option removes the layout created with Divi.
  5. Update layout: updates the block.
  6. Additional options: these are the classic Gutenberg options.

4.5 - Layout analysis with Gutenberg and Divi

For a better understanding, I offer you an explanation of the layout in detail:

Mise en page faite avec Gutenberg et Divi Layout Block
Layout made with Gutenberg and Divi Layout Bloc

On the screenshot above, I will try to explain the layout:

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

5 - My general opinion...

Divi Block Layout is an interesting feature that does not confuse any user who knows a minimum of WordPress and Divi.

It's great for inserting sections we've previously saved in our library or for creating a Divi section on the fly, which will simply appear within Gutenberg.

I guess this feature will come in handy sooner or later...

Note that this feature also exists for the Elementor Page Builder but the difference is that you have to add an add-on to get it and you can only insert elements that are already registered in your Elementor library. With Divi, it's different since the modules you insert can be built within Gutenberg itself .

I also think that Elegant Themes should now focus on redesigning some modules that have become a bit old-fashioned over time...

What do you think of this new feature?

Modules de Divi dans Gutenberg
Divi Layout Block
Add Divi Modules in Gutenberg

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

8 Commentaires

  1. Denis

    Effectivement ça a l’air pas mal, mais j’avoue que jusqu’alors je n’utilisais guère que DIVI qui me suffisait amplement. Je n’ai pour l’instant encore pas publié de page avec Gutenberg pour lequel je ne voyais pas un grand interet si ce n’est toutefois certains blocs tels que galerie ou texte lequel permet une plus grande souplesse dans l’utilisation d’une image au sein d’un texte. En plus on peut intégrer « How To » et « Faq » de yoast ce que l’on ne peut pas faire avec DIVI. A tester donc et à voir à l’usage, peut être notamment au niveau du référencement

  2. Lycia Diaz

    Merci Denis pour ce retour !
    Pour ma part, mon essai avec les blocs « how to » et « faq » de Yoast m’ont posés des problèmes dans la Google Search Console. Je n’ai malheureusement pas pris le temps de me pencher dessus. Pour des questions de rapidité, j’ai préféré tous les supprimer. Si quelqu’un les utilise sans aucun problème avec la GSC, j’aimerais bien savoir comment ?

  3. David C.

    Alors c’est bien mais pas bien en même temps.

    L’avantage d’utiliser Gutenberg pour rédiger ses articles étant de pouvoir par la suite remplacer le thème ou encore faire un export/import par la suite.

    Or, là, si on change de thème, on perd la partie qu’on a inséré.

    Tous les modules/lignes/sections font appel à du CSS de DIVI et certain module un peu de JS (carrousel, module blog,…) . Donc si on n’utilise plus Divi, soit toute la mise en page du bloc sera détruite, soit le bloc ne va pas apparaître… Pire, comme Divi aime les shortcode, il y aura sûrement le nom du shortcode à la place du bloc.

    Cependant, cela permet plus de chose comme ajouter un module résumé, très apprécié par les utilisateurs Divi ou encore de personnaliser son module à souhait avec des marges, bordures, ombres, etc… à condition d’être pieds et mains liés avec Elegant Theme.

  4. Lycia Diaz

    Salut David,
    Ton point de vue est tout à fait valable.
    Mais pour ma part, je n’envisage pas de changer de thème, et ce pour de longues années (jusqu’à ce qu’il existe quelque chose de mieux, disons) 😉
    De tous les thèmes premiums que j’ai utilisé jusqu’à présent (il y en a des tas), c’est le seul qui évolue à un bon rythme et en s’améliorant. Je migre tous mes sites vers Divi, d’ailleurs. Donc, cette nouvelle fonctionnalité ne me dérange pas. Je ne l’utiliserai que si j’en ai besoin, avec parcimonie. D’ailleurs, il m’est déjà arrivé d’écrire 1 ou 2 articles avec le Divi Builder juste parce que certaines fonctionnalités me manquaient au sein de Gutenberg. Ce ne sera plus le cas, à présent.
    Toutefois, si tu envisages de changer de thème, tu peux toujours conserver le Divi Builder, car à mon avis, un site WordPress ne peut pas se passer d’un Page Builder (quel qu’il soit), pour l’instant… Donc, oui, tu peux changer de thème mais conserver seulement le Divi Builder, ainsi tes articles Gutenberg qui utilisent cette solution ne seront pas impactés.
    Il m’est même arrivé de voir, sur le site de certains de mes clients, Elementor ET Divi Builder activés en parallèle. C’est un peu fou mais pourquoi pas, après tout ? Si on a choisi WordPress, c’est aussi pour sa grande diversité !
    Affaire à suivre hi hi hi 😉

  5. JLuc V

    Bonsoir Lycia,
    Au 4.4, tu montres une capture d’écran qui m’intrigue. Comment fais-tu pour afficher le contenu de ton article dans cette vue ?
    Quand je sélectionne un article, je ne vois pas son contenu avant d’avoir cliqué sur « Editer avec Divi ».

  6. Lycia Diaz

    Coucou Jean Luc. C’est un article qui n’utilise pas le Divi Builder. Il utilise Gutenberg, l’éditeur natif de WordPress. Si tu as le bouton « éditer avec Divi » c’est que tu as construit ton article avec Divi Builder au lieu de Gutenberg. Maintenant on peut insérer des blocs Divi au sein de Gutenberg sans activer le Divi Builder 😉

  7. Lycia Diaz

    Merci Daniel, c’est super gentil et encourageant !
    En fait, il te suffisait de cliquer sur n’importe quel lien affilié de mon site et te rendre sur la page de promo pour faire ton achat. Si mon blog était le dernier « cookie » enregistré, j’aurais certainement touché la commission. Si j’ai bien compris, ça marche comme ça (même s’ils ne sont pas très explicites à ce sujet).
    Je te remercie de souligner/rappeler que je me rémunère de cette manière (le temps passé à rédiger mes articles). Mon blog n’affiche aucune publicité encombrante, je ne vous envoie pas de newsletter tous les jours (certains le font) et j’espère vous aider un max dans la conception ou l’apprentissage de Divi… Donc MERCI pour ta contribution en utilisant mes liens affiliés.
    Voici un lien de réduction.
    À bientôt sur Astuces Divi !

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

Share This