La funcionalidad de "Divi Layout Block", permite insertar Módulos Divi dentro del editor Gutenberg sin autorización Visual Builder !
Incluso en mis sueños más salvajes, nunca hubiera imaginado esto posible!
Debe decirse que desde entonces salida de Divi 4.0todas las actualizaciones relacionadas con correcciones menores de errores o actualizaciones de seguridad. No se ha añadido ninguna nueva funcionalidad desde la publicación de la Theme Builder…
1 – ¿Qué es Gutenberg?
Deberíamos presentarnos ¿Gutenberg otra vez? Me pregunto... Pero estoy pensando sobre todo en los nuevos usuarios de WordPress: sin duda debe preguntarse lo que es Gutenberg ?
Bueno, sí, si has estado usando WordPress durante mucho tiempo, Gutenberg es una palabra que te es familiar, que causó mucha tinta para fluir cuando salió de WordPress 5.0 en diciembre 2018. Pero piensa un poco sobre los usuarios que descubrieron WordPress en 2019. Este último no puede entender nada sobre este término...
Para hacer un topo rápido (luz, incluso): Gutenberg es Word Press Editor. No significa mucho para ti, ¿verdad? El editor es simplemente la interfaz que utilizas dentro de WordPress cuando creas tu contenido (página, artículos, etc.) sin constructor de páginas.
Anteriormente, antes de diciembre de 2018, el editor de WordPress parecía aproximadamente como una página "Word". Una especie de página blanca con una barra de herramientas que permitió formatear el texto.
Debe decirse que era un poco "Dinosaur". Gutenberg vino a patear todo esto... El ascenso de Wix (entre otros) es ciertamente para algo...
De todos modos, todo para decir que la salida de la nueva interfaz de entrada de contenido de WordPress (llamado Gutenberg), herir un poco Page Builder.
Además, te escribí un artículo sobre esto que explicaba cómo mantener el Divi Builder back-office después de la liberación de Gutenberg. Sí, el cambio no agrada a todos.
Pero tienes que creer que Divi fue capaz de rebotar. Bueno, tomó un tiempo, te daré... Pero hoy serás capaz disfrutar del poder de Divi dentro de Gutenberg !
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2 - ¿Por qué utilizar Gutenberg dentro de Divi?
Esa es una pregunta muy buena. Contrario: ¿por qué utilizar sólo el Divi Builder?
Casi podría convertirse en un debate nacional.
Pero aquí está mi opinión, la que doy a todos mis estudiantes durante mi entrenamiento:
- Uno tema se utiliza para definir el diseño general de un sitio WordPress.
- Uno página constructor se utiliza para crear páginas llamadas "complejos": páginas de ventas, landing pages, home pages, etc.
- Gutenberg se utiliza para escribir artículos de blog.
To (re)read WordPress / Divi / Theme Builder / Page Builder: los fundamentos.
On Astuces Divi y en mi otro blog (El WeberEs esta filosofía que estoy aplicando.
¿Por qué utilizar una herramienta poderosa y ingeniosa para simplemente mostrar texto y algunas imágenes aquí?
Lee también: ¿Cómo optimizar el rendimiento de su sitio web Divi?
Así que, para escribir artículos simples, no hay necesidad de construir página, sea lo que sea...
Pero es precisamente aquí que toda frustración es. Todavía nos falta este pequeño módulo, ese poco más que habríamos querido insertar en nuestro artículo. Por ejemplo: un acordeón, un módulo de blog o no sé qué más!
Uf, el Versión 4.1 Finalmente nos permite combinar los dos. No más necesidad de añadir addons for Gutenberg para obtener un herramienta completa.
3 – ¿Cuál es el "Bloque de Diseño Divi"?
El Divi Layout Block es una nueva característica de Divi que permite insertar Módulos Divi dentro de sus diseños de Gutenberg.
Puesto que un video es a menudo más hablar que las palabras, aquí están Nick Roach que presenta esta característica:
¿Qué dices?
Ver publicación oficial en el blog de Elegantthemes.
No resistí la tentación de probar inmediatamente estos Bloques Divi Layout Y explicaré cómo funciona...
4 - Bloque de diseño Divi: ¿Cómo funciona?
Nada más simple, no te vas a perder... Aquí está el procedimiento:
4.1 – Insertar un bloque Gutenberg
Crear o editar contenido (página o artículo) con WordPress editor (Gutenberg).
Haga clic « + Add Block ».
Este es el mismo enfoque que utiliza para insertar cualquier bloque de Gutenberg.
4.2 - Insertar el bloque "Divi Disposition"
Un nuevo bloque apareció: el bloque Divi Disposition.
Seleccione este nuevo bloque...
Dos opciones te ofrecerán... Puedes:
- Construir nuevo diseño: Usted construirá su sección
- Carga de la biblioteca: Su sección ya está construida y la descarga desde su Biblioteca Divi.
4.3 – Construye el bloque Divi/Gutenberg
Si usted hace la opción #1, usted descubrirá 3 nuevas opciones:
- Construir desde cero
- Seleccionar diseño
- Cierre una página de extancia
Ciertamente ya conoces esta pantalla. Estas son las opciones clásicas de Divi para construcción de un diseño.
Si eliges la opción "Construir desde cero", añadirás:
- Una nueva línea
- Luego un módulo ofrecido por Divi.
Usted tendrá la elección entre 46 módulos del Divi Builder.
Por este ejemplo, inserté un módulo de "Tabla de Aranceles"...
Cada módulo parametriza con las opciones de Divi, si conoce bien el Divi Builder, no serás desorientado...
Como siempre, no olvidarás guardar tu construcción Divi usando la cruz morada y el botón verde en la parte inferior de la página.
4.4 – Editar Divi/Gutenberg Block
Una vez Divi Layout Block insertado, podrá cambiar la configuración con un menú contextual que aparece en el fly-by del ratón.
- Usted puede convertir el Divi Block Layout en bloque "grupo", pero honestamente, no veo demasiado interés...
- El icono del lápiz le permitirá modificar el bloque Divi.
- Puede cambiar su diseño contra un diseño preconstruido.
- Diseño claro: esta opción elimina el diseño creado con Divi.
- Actualización del diseño: actualiza el bloque.
- Opciones adicionales: Estas son las opciones clásicas de Gutenberg.
4.5 - Análisis del diseño con Gutenberg y Divi
Para entender mejor, propongo una explicación del diseño en detalle:
En la imagen anterior, intentaré explicar el diseño:
- Caja en verde: Aquí está el Header (header) y Footer (footer) del sitio. Estos son "original", es decir, fueron hechos con el tema Divi. Simplemente.
- Caja púrpura: Es el plantilla de artículo creado con Divi Builder Tema, como se explica en este artículo.
- Caja rosa: la plantilla de artículo construida con el Divi Theme Builder apela al « Contenido publicado » módulo. Esto significa que el módulo hará aparecer el contenido de la publicación, lo que fue construido con Divi o con Gutenberg. En esta captura, es contenido de Gutenberg.
- Caja azul: Es el Divi Layout Block insertado antes! Se derrite en la decoración...
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!
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 WordPress y Divi.
Es genial insertar secciones que tenemos previamente grabado en nuestra biblioteca o crear on the fly a section Divi, que aparecerá simplemente dentro de Gutenberg.
Supongo que esta función me servirá tarde o temprano...
Tenga en cuenta que esta característica también existe para Page Builder Elementor Pero la diferencia es que tienes que añadir un add-on para llegar y que no se puede insertar artículos ya guardados en tu biblioteca Elementor. Con Divi, es diferente ya que los módulos que insertas se pueden construir dentro de Gutenberg mismo...
También creo que los temas elegantes deben centrarse ahora en rediseñar algunos módulos que, con el tiempo, se han convertido en un poco anticuado...
Y tú, ¿qué piensas de esta característica?
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