Divi Layout Block

Bloque de diseño Divi: ¡Módulos Divi dentro de Gutenberg!

Actualizado el 12/07/2021 | Publicado el 10/01/2020 | 20 comentarios

1.461 palabras

6

¡La función Divi Layout Block te permite insertar módulos Divi en el editor Gutenberg sin activar el Visual Builder!

Ni en mis sueños más locos habría imaginado que esto fuera posible.

Hay que decir que desde el lanzamiento de Divi 4.0Todas las actualizaciones eran correcciones de errores menores o actualizaciones de seguridad. No se ha introducido ninguna novedad desde el lanzamiento de Constructor de temas...

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es Gutenberg?

¿Todavía hay que introducir Gutenberg? Me pregunto... Pero pienso sobre todo en los nuevos usuarios de WordPress: ¿se estarán preguntando qué es Gutenberg?

Pues sí, si llevas mucho tiempo usando WordPress, Gutenberg es una palabra que te resulta familiar, fue todo un acontecimiento cuando se lanzó WordPress 5.0 en diciembre de 2018. Pero pensemos en los usuarios que han descubierto WordPress en 2019. Puede que no entiendan el término en absoluto...

Para dar una visión rápida: Gutenberg es el editor de WordPress. Eso no te dice mucho, ¿verdad? El editor es simplemente la interfaz que utilizas dentro de WordPress cuando creas tu contenido (páginas, entradas, etc.) sin un constructor de páginas.

En el pasado, antes de diciembre de 2018, el editor de WordPress se parecía más o menos a una página de "Word". Una especie de página en blanco con una barra de herramientas que permitía formatear el texto.

Hay que decir que era un poco dinosaurio. Gutenberg llegó y puso una gran patada en todo eso... El aumento de Wix (entre otros) es ciertamente un factor...

En fin, todo esto para decir que el lanzamiento de la nueva interfaz de entrada de contenidos de WordPress (llamada Gutenberg), ha perjudicado un poco a algunos Page Builders.

Por cierto, había escrito un artículo sobre este tema que explicaba cómo mantener el Divi Builder en el back office tras el lanzamiento de Gutenberg. Sí, no a todo el mundo le gustan los cambios 😉 ...

Pero supongo que Divi se ha recuperado. Bueno, ha tardado un poco, lo reconozco... ¡Pero hoy podrás aprovechar la potencia de Divi dentro del propio Gutenberg!

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

2 - ¿Por qué usar Gutenberg en Divi?

Esta es una muy buena pregunta. Por otro lado: ¿por qué utilizar sólo el Divi Builder?

Esto casi podría convertirse en un debate nacional.

Pero esta es mi opinión, la que doy a todos mis alumnos durante mis cursos de formación:

  • Un tema se utiliza para definir el diseño general de un sitio de WordPress.
  • Un constructor de páginas se utiliza para crear las llamadas páginas "complejas": páginas de ventas, páginas de aterrizaje, páginas de inicio, etc.
  • Gutenberg se utiliza para escribir entradas de blog.

Para (re)leer 👉 WordPress / Divi / Theme Builder / Page Builder: lo básico.

En Divi Tips y en mi otro blog (El Webeuse), esta es la filosofía que aplico.

¿Por qué utilizar una herramienta potente y que consume muchos recursos para mostrar simplemente un texto y unas pocas imágenes aquí y allá?

Lea también: ¿Cómo optimizar el rendimiento de su sitio Divi?

Así que ahí lo tienes, para escribir artículos simples, no necesitas un constructor de páginas, sea cual sea...

Pero aquí es donde radica la frustración. Todavía nos falta ese pequeño módulo, ese pequeño extra que nos hubiera gustado insertar en nuestro artículo. Por ejemplo: un acordeón, un módulo de blog o lo que sea.

Uf, la versión 4.1 de Divi por fin nos permite combinar las dos cosas. No es necesario añadir addons para Gutenberg para obtener una herramienta completa.

3 - ¿Qué es el bloque de diseño Divi?

El bloque de diseño Divi es una nueva característica en Divi que le permite insertar Módulos Divi dentro de sus diseños de Gutenberg.

Como un vídeo suele ser más elocuente que las palabras, aquí está Nick Roach presentando esta función:

¿Qué te parece?

Consulte la publicación oficial en el blog de Elegantthemes.

No he podido resistir la tentación de probar estos bloques de diseño de Divi inmediatamente y voy a explicar cómo funcionan...

4 - Bloque de diseño Divi: ¿cómo funciona?

Nada más sencillo, no te perderás... Este es el procedimiento:

4.1 - Insertar un bloque Gutenberg

Crear o editar contenido (página o artículo) con el editor de WordPress (Gutenberg).

Gutenberg : ajouter un block
Añadir un bloque Gutenberg

Haga clic en "+ Añadir un bloque".

Este es el mismo proceso que se utiliza para insertar cualquier bloque de Gutenberg.

4.2 - Insertar el bloque "Divi Layout"

Ha aparecido un nuevo bloque: el bloque Divi Layout.

Bloc "Disposition Divi"
Elige el bloque "Divi Layout"

Seleccione este nuevo bloque...

Choisir le type de Divi Layout Block
Elija el tipo de bloque Divi: Construir nuevo diseño o Cargar desde la biblioteca

Tendrás dos opciones... Puedes :

  1. Construir nuevo diseño: construirá su sección
  2. Subir desde la librería: Tu sección ya está construida y la subes desde tu librería Divi.

4.3 - Construir el bloque Divi/Gutenberg

Si elige el número 1, descubrirá 3 nuevas opciones:

Choisir le type de construction du bloc
Elija el tipo de construcción del bloque: construir desde cero - elegir el diseño - clonar una página existente
  1. Construir desde cero
  2. Elija el diseño
  3. Clonar una página existente

Es posible que ya esté familiarizado con esta pantalla. Estas son las opciones clásicas de Divi para construcción de un diseño.

Ajouter ligne et module Divi
Insertar una línea y luego un Divi

Si eliges la opción "Construir desde cero", entonces añadirás :

  1. Una nueva línea
  2. Entonces un módulo ofrecido por Divi.

Puede elegir entre lo siguiente 46 módulos de Divi Builder.

Para este ejemplo, he insertado un módulo de "tabla de tarifas"...

Exemple de module dans un bloc
Ejemplo de módulo "tabla de tarifas"

Cada módulo se puede configurar con las opciones de Divi, así que si estás familiarizado con el Divi Builder, no te confundirás...

Como siempre, no olvides guardar tu construcción de Divi usando la cruz púrpura y el botón verde en la parte inferior de la página.

4.4 - Editar el bloque Divi/Gutenberg

Una vez insertado el bloque de diseño Divi, puedes cambiar la configuración mediante un menú contextual que aparece al pasar el ratón por encima.

options du bloc Divi Gutenberg
Opciones del bloque Divi Gutenberg
  1. Puedes convertir el diseño de bloques de Divi en un bloque de "grupo", pero honestamente, no veo mucho sentido...
  2. El icono del lápiz le permitirá editar el bloque Divi.
  3. Podrá cambiar su diseño con respecto a un diseño preconstruido.
  4. Borrar diseño: Esta opción elimina el diseño creado con Divi.
  5. Actualizar diseño: actualiza el bloque.
  6. Opciones adicionales: son las opciones clásicas de Gutenberg.

4.5 - Análisis del diseño creado con Gutenberg y Divi

Para una mejor comprensión, propongo una explicación detallada de la disposición:

Mise en page faite avec Gutenberg et Divi Layout Block
Maquetación realizada con Gutenberg y Divi Layout Bloc

En la captura de pantalla de arriba, intentaré explicar la disposición:

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

5 - Mi opinión general...

Divi Block Layout es una característica interesante que no confunde a ningún usuario que sepa un mínimo de WordPress y Divi.

Es ideal para insertar secciones que hayas guardado previamente en tu biblioteca o para crear una sección Divi sobre la marcha, que simplemente aparecerá dentro de Gutenberg.

Supongo que tarde o temprano necesitaré esta función...

Ten en cuenta que esta funcionalidad también existe para el constructor de páginas Elementor, pero la diferencia es que tienes que añadir un complemento para obtenerla y sólo puedes insertar elementos ya almacenados en tu biblioteca de Elementor. Con Divi, es diferente porque los módulos que se insertan se pueden construir dentro de Gutenberg mismo...

También creo que Elegant Themes debería centrarse ahora en rediseñar algunos de los módulos que, con el tiempo, se han quedado un poco anticuados...

¿Qué le parece esta función?

Modules de Divi dans Gutenberg
Divi Layout Block
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

20 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 !

  8. virginie

    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.

  9. Lycia Diaz

    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.

  10. Tounesse

    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…

  11. Lycia Diaz

    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

  12. Tounese

    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… 🙂

  13. Lycia Diaz

    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/

  14. Maillet Pierre

    Bonjour
    Je n’ai pas le block Disposition Divi quand j’active un nouveau block avec Gutemberg. Solution ?

  15. Maillet Pierre

    J’ai trouvé…. Vous pouvez annuler mes commrntaires…

  16. Lycia Diaz

    Ah c’est bizarre car j’ai essayé y’a pas longtemps et il fonctionnait parfaitement.

  17. Lycia Diaz

    Ah ok super

  18. Julie

    Super… je ne connaissais pas cette possibilité avec Divi !

  19. Lycia Diaz

    Cool

Soumettre un commentaire

Votre adresse e-mail 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.