The functionality of "Divi Layout Block", allows you to insert Divi modules within the Gutenberg editor without enabling Visual Builder !
Even in my wildest dreams, I would never have imagined this possible!
It must be said that since output of Divi 4.0all updates related to minor bug fixes or security updates. No new functionality had been added since the release of the Theme Builder…
1 – What is Gutenberg?
Should we introduce Gutenberg again? I wonder... But I'm thinking above all about the new WordPress users: you must certainly wonder what it is Gutenberg ?
Well yes, if you've been using WordPress for a long time, Gutenberg is a word that is familiar to you, it caused a lot of ink to flow when it came out of WordPress 5.0 in December 2018. But think a little about the users who discovered WordPress in 2019. The latter may not understand anything about this term...
To make a quick topo (light, even): Gutenberg is WordPress Editor. Doesn't mean much to you, does it? The editor is simply the interface that you use within WordPress when you create your content (page, articles, etc.) without page builder.
Formerly, before December 2018, the WordPress editor looked roughly like a "Word" page. A sort of white page with a toolbar that allowed to format the text.
It must be said that it was a little "Dinosaur". Gutenberg came to kick in all this... The rise of Wix (among others) is certainly for something...
Anyway, all to say that the exit from the new WordPress content entry interface (called Gutenberg), hurt some Page Builder.
Besides, I wrote you an article about this that explained how keep the Divi Builder back-office following the release of Gutenberg. Yes, change doesn't please everyone.
But you have to believe that Divi was able to bounce. Well, it took a while, I'll give you... But today you will be able enjoy the power of Divi within Gutenberg !
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
2 - Why use Gutenberg within Divi?
That's a very good question. Contrario: why only use the Divi Builder?
It could almost become a national debate.
But here is my opinion, the one I give to all my students during my training:
- One theme is used to define the overall design of a WordPress site.
- One page builder is used to create so-called "complex" pages: sales pages, landing pages, home pages, etc.
- Gutenberg is used to write blog articles.
To (re)read WordPress / Divi / Theme Builder / Page Builder: the fundamentals.
On Astuces Divi and on my other blog (The WeberIt is this philosophy that I am applying.
Why use a powerful and resourceful tool to simply display text and some images here?
Also read: how to optimize the performance of your Divi website?
So, to write simple articles, no need to build page, whatever it is...
But it is precisely here that all frustration is. We are still missing this small module, that little more that we would have wanted to insert in our article. For example: an accordion, a blog module or I don't know what else!
Uf, the Divi version 4.1 finally allows us to combine the two. No more need to add addons for Gutenberg to obtain a full tool.
3 – What is the "Divi Layout Block"?
The Divi Layout Block is a new feature of Divi that allows to insert Divi modules within your Gutenberg layouts.
Since a video is often more talking than words, here are Nick Roach which presents this feature:
So what do you say?
See official publication on the blog of Elegantthemes.
I did not resist the temptation to immediately test these Divi Layout Blocks And I'll explain how it works...
4 - Divi Layout Block: How does it work?
Nothing simpler, you're not going to be lost... Here is the procedure:
4.1 – Insert a Gutenberg Block
Create or edit content (page or article) with WordPress editor (Gutenberg).
Click « + Add Block ».
This is the same approach you use to insert any Gutenberg block.
4.2 - Insert the "Divi Disposition" block
A new block appeared: the Divi Disposition block.
Select this new block...
Two choices will offer you... You can:
- Build New Layout: you will build your section
- Load from the library: Your section is already built and you download it from your Divi Library.
4.3 – Build the Divi/Gutenberg Block
If you make the #1 choice, you will discover 3 new options:
- Build from scratch
- Select layout
- Cloning an extant page
You certainly already know this screen. These are the classic Divi options for the construction of a layout.
If you choose the option "Building from scratch", you will then add:
- A new line
- Then a module offered by Divi.
You will have the choice among the 46 modules of the Divi Builder.
For this example, I inserted a module of "Table of Tariffs"...
Each module parameterizes with the options of Divi, if you know the Divi Builder well, you will not be disoriented...
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 – Edit Divi/Gutenberg Block
Once the Divi Layout Block inserted, you will be able to change the settings with a contextual menu that appears on the mouse's fly-by.
- You can convert the Divi Block Layout in "group" block, but honestly, I don't see too much interest...
- The pencil icon will allow you to modify the Divi block.
- You can change your layout against a pre-built layout.
- Clear Layout: this option removes the layout created with Divi.
- Updating the layout: updates the block.
- Additional options: These are the classic Gutenberg options.
4.5 - Layout analysis with Gutenberg and Divi
To understand better, I propose an explanation of the layout in detail:
On the above screenshot, I will try to explain the layout:
- Box in green: Here it is the Header (header) and Footer (footer) of the site. These are "original", i.e. they were made with the theme Divi. Simply.
- Purple box: It is the template of article created with Divi Builder Theme, as explained in this article.
- Pink box: the template of article built with the Divi Theme Builder appeals to the « Publish Content » module. This means that the module will make appear the contents of the publication, what was built with Divi or with Gutenberg. On this capture, it is Gutenberg content.
- Blue box: It is the Divi Layout Block inserted earlier! It melts in the decor...
Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos!
5 - My general opinion...
Divi Block Layout is an interesting feature that does not confuse any user who knows a minimum WordPress and Divi.
It's great to insert sections that we have previously recorded in our library or to create on the fly a section Divi, which will appear simply within Gutenberg.
I guess this feature will serve me sooner or later...
Note that this feature also exists for the Page Builder Elementor But the difference is that you have to add an add-on to get and that you cannot insert items already saved 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, over time, have become a little old-fashioned...
And you, what do you think of this feature?
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
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 ?
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.
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 😉
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 ».
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 😉
Bonsoir Lycia.
J’aimerais obtenir Divi en passant par ton lien d’affiliation mais pourquoi ne proposes-tu pas le tarif de promo actuel ?
https://www.elegantthemes.com/discount/developer/#pricing
Sitôt répondu, sitôt acheté :))
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 !
Bonjour,
j’utilise LearnPress (LMS education) et en créant un cours et certainement une erreur de ma part, le divi builder a pris la place de l’éditeur du plugin sans que je puisse le supprimer. « Divi tourne en disant: type de post incompatible » ! Du coup, plus rien ne fonctionne, je ne peux plus modifier le descriptif de ce cours. J’ai désactivé Divi sur les pages Learnpress dans les réglages mais cela ne change rien et tout reste bloqué !
Comment peut on régler ce problème car Learnpress et divi sont incompatibles et tout est coincé…
En vous remerciant pour votre attention.
Bonjour Virginie,
Je n’utilise pas LearnPress. Mais avez-vous vérifié à l’onglet Divi > Option du thème > Créateur pour voir si les types de publications de LearnPress sont cochées ? (si cette est option est dispo ?)
Sinon, je suppose qu’il vaut mieux se tourner vers le support de l’un et/ou l’autre.
Pour ma part, je n’ai jamais réussi à réutiliser le moindre layout Divi construit à partir de Gutenberg… Le seul moyen est de le convertir en bloc réutilisable qui sera alors un « block » au sens de WordPress. J’avoue que je m’y perds un peu avec les concepts de Divi/Extra au point de me demander si c’est une solution viable me concernant… Certes, la gestion du design est nickel mais ça manque de généricité. J’aimerais vraiment savoir comment insérer un bloc Divi Layout que je construis from scratch et que je puisse retrouver plus tard. En gros, le Load from library ne m’affiche rien du tout…
Salut Tounesse, il faut que tu les enregistres préalablement dans ta bibliothèque pour pouvoir faire appel à ces modules ultérieurement depuis le visual builder
Salut Lycia et merci pour ta réponse.
Malheureusement, ce n’est pas aussi simple que cela. S’il est possible d’utiliser le block « Divi Layout » de Gutenberg pour créer des layouts divi, il n’est malheureusement pas possible de réutiliser ce layout Divi depuis Gutenberg. J’ai trouvé une information selon laquelle il faut obligatoirement utiliser le Divi Builder et je confirme. La possibilité de transformer un layout divi créé depuis Gutenberg en un block WP réutilisable dans Gutenberg fonctionne mais je n’ai pas trouvé comment dupliquer ce block pour en faire un autre quasiment pareil. Autre détail important (je débute avec Divi), si vous créez un layout « section », vous ne pourrez le réutiliser qu’en tant que section. Il n’est pas possible d’insérer une section dans une section ou une row dans une row. Je me suis arraché les cheveux à essayer de comprendre pourquoi ma divi library restait désespérement vide… 🙂
Oui effectivement Tounese, si tu enregistres une ligne, tu ne peux que l’utiliser en tant que ligne et ainsi de suite. C’est un comportement logique. Par contre pour les blocks Gutenberg il faudrait voir si on peut l’enregistrer en tant que « composition », je n’ai pas encore testé… tu devrais lire cet article : https://la-webeuse.com/compositions-gutenberg-patterns-motifs/
Bonjour
Je n’ai pas le block Disposition Divi quand j’active un nouveau block avec Gutemberg. Solution ?
J’ai trouvé…. Vous pouvez annuler mes commrntaires…
Ah c’est bizarre car j’ai essayé y’a pas longtemps et il fonctionnait parfaitement.
Ah ok super
Super… je ne connaissais pas cette possibilité avec Divi !
Cool