Depuis la version 4.1 de Divi et sa nouvelle fonctionnalité de « Divi Layout Block », vous pouvez insérer des modules de Divi au sein de l’éditeur Gutenberg (le nouvel éditeur de WordPress) !

Même dans mes rêves les plus fous, je n’aurais jamais imaginé cela possible !

Il faut dire que depuis la sortie de Divi 4.0, toutes les mises à jour portaient sur la correction de bugs mineurs ou des mises à jour de sécurité. Aucune nouvelle fonctionnalité n’avait été apportée depuis la sortie du Thème Builder

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce que Gutenberg ?

Faut-il encore présenter Gutenberg ? Je me le demande… Mais je pense surtout aux nouveaux utilisateurs de WordPress : vous devez certainement vous demander ce qu’est Gutenberg ?

Eh bien oui, si vous utilisez WordPress depuis longtemps, Gutenberg est un mot qui vous est familier, il a fait couler beaucoup d’encre lors de la sortie de WordPress 5.0 en décembre 2018. Mais pensons un peu aux utilisateurs qui ont découvert WordPress en 2019. Ces derniers pourrait ne rien comprendre à ce terme…

Pour faire un topo rapide (éclair, même) : Gutenberg est l’éditeur de WordPress. Ça ne vous dit pas grand-chose, n’est-ce pas ? L’éditeur est tout simplement l’interface que vous utilisez au sein de WordPress lorsque vous créez vos contenus (page, articles, etc.).

Autrefois, avant décembre 2018, l’éditeur de WordPress ressemblait grossièrement à une page « Word ». Une sorte de page blanche avec une barre d’outil qui permettait de mettre en forme le texte.

Il faut dire que c’était un peu « dinosaure ». Gutenberg est venu mettre un grand coup de pied dans tout ça… La montée de Wix (entre autre) y est certainement pour quelque chose…

Bref, tout ça pour dire que la sortie de la nouvelle interface de saisie de contenus de WordPress (appelée Gutenberg), a fait un peu de mal à certains Page Builder.

D’ailleurs, je vous avais écrit un article à ce sujet qui vous expliquait comment conserver le Divi Builder en back-office suite à la sortie de Gutenberg. Eh oui, le changement, ça ne plait pas à tout le monde 😉 …

Mais il faut croire que Divi a su rebondir. Bon, il a mis un certain temps, je vous l’accorde… Mais aujourd’hui, vous allez pouvoir profiter de la puissance de Divi au sein même de Gutenberg !

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Pourquoi utiliser Gutenberg au sein de Divi ?

C’est une très bonne question. A contrario : pourquoi utiliser seulement le Divi Builder ?

Ce pourrait presque devenir un débat national.

Mais voilà mon avis, celui que je donne à tous mes élèves lors de mes formations :

  • Un thème sert à définir le design global d’un site WordPress.
  • Un page builder sert à créer des pages dites « complexes » : des pages de ventes, des landing pages, des pages d’accueil, etc.
  • Gutenberg sert à rédiger des articles de blog.

Sur Astuces Divi et sur mon autre blog (La Webeuse), c’est cette philosophie que j’applique.

Pourquoi utiliser un outil puissant et gourmand en ressource pour simplement afficher du texte et quelques images par-ci par-là ?

C’est comme rouler avec un 4×4 en ville, est-ce vraiment utile ? Sans parler qu’il faudra trouver un emplacement adéquat pour se garer… Un 4×4 est fait pour rouler sur des routes escarpées. En ville, on prend le tram ou on loue une petite trottinette électrique. C’est plus simple, plus facile, plus rapide… Hi hi hi, je m’éloigne du sujet !

Donc voilà, pour rédiger de simples articles, pas besoin de page builder, quel qu’il soit…

Mais c’est justement ici qu’est toute la frustration. Il nous manque toujours ce petit module, ce petit plus que nous aurions voulu insérer au sein de notre article. Par exemple : un accordéon, un module de blog ou je ne sais quoi encore !

Ouf, la version 4.1 de Divi nous permet enfin d’allier les 2. Plus besoin d’ajouter des addons pour Gutenberg pour obtenir un outil complet.

3 – Qu’est-ce que le « Divi Layout Block » ?

Le Divi Layout Block est une nouvelle fonctionnalité de Divi qui permet d’insérer des modules de Divi au sein de vos mises en page Gutenberg.

Puisqu’une vidéo est souvent plus parlante que des mots, voici Nick Roach qui nous présente cette fonctionnalité :

Alors qu’en dites-vous ?

Voir la publication officielle sur le blog d’Elegantthemes.

Je n’ai pas résisté à la tentation de tester immédiatement ces Divi Layout Blocks et je vous explique comment ça fonctionne…

4 – Divi Layout Block : comment ça marche ?

Rien de plus simple, vous n’allez pas être perdu(e)… Voici la procédure :

4.1 – Insérez un bloc Gutenberg

Créez ou éditez un contenu (page ou article) avec l’éditeur de WordPress (Gutenberg).

Gutenberg : ajouter un block
Ajoutez un block Gutenberg

Cliquez sur « + Ajouter un bloc ».

Cette démarche est la même que celle que vous utilisez pour insérer n’importe quel bloc Gutenberg.

4.2 – Insérez le bloc « Disposition Divi »

Un nouveau bloc a fait son apparition : le bloc Disposition Divi.

Bloc "Disposition Divi"
Choisissez le bloc « Disposition Divi »

Sélectionnez ce nouveau bloc…

Choisir le type de Divi Layout Block
Choisir le type de Bloc Divi : Build New Layout ou Charger depuis la bibliothèque

Deux choix vont s’offrir à vous… Vous pourrez :

  1. Build New Layout : vous allez construire votre section
  2. Charger depuis la bibliothèque : votre section est déjà construite et vous la téléchargez depuis votre Bibliothèque Divi.

4.3 – Construire le bloc Divi/Gutenberg

Si vous faites le choix n°1, vous découvrirez 3 nouvelles options :

Choisir le type de construction du bloc
Choisir le type de construction du bloc : construire à partir de zéro – choisir la mise en page – cloner une page existante
  1. Construire à partir de zéro
  2. Choisir la mise en page
  3. Cloner une page exsitante

Vous connaissez certainement déjà cet écran. Ce sont les options classiques de Divi pour la construction d’un layout.

Ajouter ligne et module Divi
Insérez une ligne puis un module Divi

Si vous choisissez l’option « Construire à partir de zéro », vous ajouterez ensuite :

  1. Une nouvelle ligne
  2. Puis un module offert par Divi.

Vous aurez le choix parmi les 46 modules du Divi Builder.

Pour cet exemple, j’ai inséré un module de « tableau des tarifs »…

Exemple de module dans un bloc
Exemple de module « tableau des tarifs »

Chaque module se paramètrent avec les options de Divi, si vous connaissez bien le Divi Builder, vous ne serez pas désorienté…

Comme d’habitude, vous n’oublierez pas de sauvegarder votre construction Divi à l’aide de la croix violette et du bouton vert qui se trouve en bas de page.

4.4 – Éditer le bloc Divi/Gutenberg

Une fois le Divi Layout Block inséré, vous pourrez modifier les paramètres grâce à un menu contextuel qui apparait au survol de la souris.

options du bloc Divi Gutenberg
Les options du bloc Divi Gutenberg
  1. Vous pourrez convertir le Divi Block Layout en bloc « groupe », mais honnêtement, je n’y vois pas trop d’intérêt…
  2. L’icône du crayon vous permettra de modifier le bloc Divi.
  3. Vous pourrez modifier votre layout contre une disposition pré-construite.
  4. Clear Layout : cette option supprime la mise en page créée avec Divi.
  5. Actualiser la mise en page : met à jour le bloc.
  6. Options supplémentaires : ce sont les options classiques de Gutenberg.

4.5 – Analyse du layout réalisé avec Gutenberg et Divi

Pour mieux comprendre, je vous propose une explication de la mise en page en détails :

Mise en page faite avec Gutenberg et Divi Layout Block
Mise en page faite avec Gutenberg et Divi Layout Bloc

Sur la capture d’écran ci-dessus, je vais essayer de vous expliquer la mise en page :

  • Encadré en vert : ici, il s’agit du Header (en-tête) et du Footer (pied de page) du site. Ceux-ci sont « d’origine », c’est-à-dire qu’ils ont été faits avec le thème Divi. Tout simplement.
  • Encadré violet : il s’agit de la template d’article créée avec le Thème Builder de Divi, comme expliqué dans cet article.
  • Encadré rose : la template d’article construite avec le Divi Thème Builder fait appel au module « Publier le contenu ». Cela signifie que le module fera apparaitre le contenu de la publication, quelle ait été construite avec Divi ou avec Gutenberg. Sur cette capture, il s’agit du contenu Gutenberg.
  • Encadré bleu : il s’agit du Divi Layout Block inséré précédemment ! Il se fond dans le décor…

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

5 – Mon avis général…

Divi Block Layout est une fonctionnalité intéressante qui ne déroute aucun utilisateur qui connait un minimum WordPress et Divi.

C’est super pour insérer des sections qu’on a préalablement enregistrées dans notre bibliothèque ou pour créer à la volée une section Divi, qui apparaîtra simplement au sein de Gutenberg.

Je suppose que cette fonctionnalité me servira tôt ou tard…

Notez que cette fonctionnalité existe également pour le Page Builder Elementor mais la différence est que vous devez ajouter un add-on pour l’obtenir et que vous ne pouvez insérer que des éléments déjà enregistrés dans votre librairie Elementor. Avec Divi, c’est différent puisque les modules que vous insérez peuvent être construits au sein même de Gutenberg…

Je pense aussi qu’Elegant Thèmes devrait à présent se focaliser sur la refonte de certains modules qui, avec le temps, sont devenus un peu vieillots…

Et vous, que pensez-vous de cette nouvelle fonctionnalité ?

Modules de Divi dans Gutenberg
Divi Layout Block

Pin It on Pinterest

Shares
Share This