Divi Layout: el nuevo bloque de Divi para Gutenberg

lydiacalero

On 17/01/2020

El pasado 9 de enero Divi lanzó su versión 4.1. con varias mejoras y una de esas novedades que a los amantes de este tema de Elegant Themes nos vuelven locos: el bloque Divi Layout para Gutenberg.

Ya podemos usar el constructor de Divi dentro de Gutenberg

El nuevo bloque Divi Layout combina el poder de Divi con Gutenberg, permitiéndonos cargar diseños de Divi o construir nuevos diseños realizados con Divi directamente dentro del editor Gutenberg.

Esto quiere decir que, a la hora de crear una nueva entrada de nuestro blog, ya no tenemos que decidir si hacerlo con Divi o con Gutenberg. Ahora podemos combinar ambas opciones y diseñar artículos la mar de chulos.

¿Qué es Gutenberg?

Gutenberg es el nombre en clave del editor basado en bloques que se introdujo como novedad en la versión 5.0. de WordPress.

Este nuevo editor sustituyó al editor clásico de toda la vida basado en TinyMCE.

Hay que decir que este cambio en principio no hizo mucha gracia a la comunidad de WordPress en general, aunque yo personalmente no entiendo por qué.

Con su sistema de bloques, similar al de otros constructores como Elementor o el mismo Divi, es bastante sencillo de usar.

Pero si eres de los que echas de menos el editor clásico, puedes recuperarlo haciendo varias cosas:

  • Si usas Divi (si estás leyendo esto lo más probable es que sí), puedes habilitar el editor clásico en Opciones del tema – Constructor.
  • Descargando el plugin Classic Editor.
  • Utilizando el bloque Clásico de Gutenberg. Sí, amigos, dentro del mismo Gutenberg hay un bloque que te permite utilizar el editor clásico de WordPress y editar toda la entrada de tu blog con él. Se ve que no son tan malvados los creadores de Gutenberg…

Pero volvamos al tema.

El año pasado Divi ya presentó el soporte inicial para el nuevo editor de WordPress, que permitía a los usuarios de Divi alternar entre Gutenberg y el constructor de Divi a la hora de crear páginas.

Ahora esa integración llega un pasó más allá al permitir que los usuarios podamos combinar módulos de Divi con bloques de Gutenberg en la misma página.

Uniendo dos constructores: Divi y Gutenberg

Divi es uno de los mejores constructores visuales del mercado y la verdad es que tiene muchas ventajas significativas frente a Gutenberg.

De hecho, muchos usuarios de Divi nunca usan Gutenberg para crear sus entradas porque no les aporta todas las posibilidades que sí aporta Divi.

Hasta ahora.

Gracias a esta integración, Gutenberg y Divi ya no tienen que competir entre ellos y pueden trabajar juntos. ¡Divi y Gutenberg on los nuevos Best Friends Ever de WordPress!

Los responsables de Divi aseguran que continuarán pendientes de las actualizaciones de WordPress y se asegurarán de que Divi siempre funcione bien con las futuras versiones y con cada nueva versión de Gutenberg.

divi layout

El bloque Divi Layout es un nuevo bloque añadido a Gutenberg tras la versión 4.1. de Divi y funciona como un mini-constructor de Divi.

Podemos usarlo en cualquier lugar dentro de una página construida con Gutenberg para agregar módulos de Divi o crear diseños con el editor de Divi.

Cuando añadimos un bloque Divi Layout podemos hacer dos cosas: crear un nuevo diseño o cargar un diseño ya creado y guardado en nuestra biblioteca.

Estos bloques pueden ir alternándose con el resto de bloques de Gutenberg (párrafo, imagen, galería, etc) si así lo deseamos.

Una vez añadido un bloque Divi Layout, luego podemos editarlo utilizando la interfaz del constructor de Divi como siempre.

Cómo usar el bloque Divi Layout

Una vez hayamos instalado la versión 4.1. de Divi, y vayamos a editar o crear una entrada con Gutenberg, veremos un nuevo bloque disponible en la lista: Divi Layout.

Podemos añadirlo en cualquier parte de la página y después crear con el constructor de Divi todo lo que se nos ocurra.

Esto nos permite añadir tanto diseños grandes y complejos como módulos individuales que no existen en la biblioteca de Gutenberg (un formulario de contacto o un contador numérico, por poner un par de ejemplos).

¡Esto es maravilloso!

Alrededor del bloque Divi Layout podemos ir añadiendo otros bloques de Gutenberg y así ir combinándolos para crear diseños increíbles.

Cargar diseños ya creados o crear nuevos diseños desde cero

Cuando añadimos un bloque Divi Layout a nuestra página, podemos elegir entre crear un nuevo diseño desde cero o cargar uno ya creado.

Si elegimos crear un nuevo diseño, el constructor de Divi se abrirá en una ventana emergente en la que podremos usar el editor visual de Divi y todas sus funciones.

Si elegimos la opción de cargar un diseño ya creado, se abrirá una ventana emergente con la biblioteca de Divi y todos sus diseños (plantillas de Divi, nuestros propios diseños guardados y nuestras páginas ya creadas).

El diseño que seleccionemos de la biblioteca se cargará directamente en Gutenberg. Luego podemos editarlo en cualquier momento si lo necesitamos, haciendo click en la opción de Editar Diseño de la barra de herramientas de los bloques de Gutenberg.

Utiliza múltiples bloques Divi Builder en una misma página

Podemos añadir tantos bloques Divi Layout como queramos en una misma página. Esto nos permite mezclar y combinar los módulos de Divi con los bloques de Gutenberg para crear casi cualquier cosa que deseemos.

El bloque Divi Layout admite todas las funcionalidades básicas y es súper fácil de usar. Podemos moverlo, editarlo, duplicarlo y eliminarlo de forma muy sencilla.

Además, como el resto de bloques de Gutenberg, el bloque Divi Layout también puede guardarse como bloque reutilizable para poder volver a usarlo siempre que queramos en la misma página o en cualquier otra que creemos.

Edición en vivo sin ventanas emergentes ni actualizaciones del navegador

El nuevo bloque de Divi para Gutenberg nos permite mucho más que cargar diseños estáticos desde nuestra biblioteca.

Cada bloque Divi Layout es un diseño independiente que puede editarse y modificarse directamente con el editor visual de Divi.

La edición de bloques se realiza sobre la marcha utilizando una superposición del editor visual de Divi. Así podemos utilizar todas las funciones de este increíble editor visual sin tener que desplazarnos fuera de Gutenberg o actualizar la página.

Y hasta aquí el repaso al nuevo módulo de Divi para Gutenberg. ¡Un pequeño paso para Divi pero un gran paso para la humanidad de WordPress!

Si te ha gustado el post, anímate a compartirlo en tus Redes Sociales. ¡Compartir es vivir, amigos!

Soy Lydia Calero y ayudo a pymes y emprendedores autónomos a conseguir una página web atractiva y eficaz para su negocio. Estoy especializada en el diseño de páginas web con WordPress y Divi, tema Premium de Elegant Themes, la combinación perfecta para crear sitios web espectaculares. Pídeme presupuesto sin compromiso para diseñar tu página web con WordPress y Divi. Te lo enviaré en menos de 24 horas, totalmente a la medida y adaptado a tus necesidades específicas.

¿Te ha resultado útil este artículo?

Average rating / 5. Vote count:

¡Aún no hay votos! Sé el primero en valorar este artículo

¡Siento mucho que el post no te haya resultado útil!

¡Ayúdame a mejorarlo!

¿Cuáles son tus sugerencias para mejorar este post?

8 trucos infalibles para triunfar con tu página web

Descubre las claves para conseguir una página web que te ayude a atraer nuevos clientes, multiplicar tus resultados y destacar sobre tu competencia.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

18 + 13 =

Información básica sobre protección de datos Ver más

  • Responsable Lidia Calero Jimenez .
  • Finalidad Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios LUCUSHOST.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

También podría gustarte…

Novedad Divi 4.4.0.: Panel de capas

Novedad Divi 4.4.0.: Panel de capas

Con la nueva actualización de Divi, ahora podemos construir visualmente y navegar rápidamente por nuestro contenido al mismo tiempo gracias al nuevo panel de capas. ¡Lo mejor de ambos mundos! Aquí tenéis un vídeo explicativo en inglés sobre el nuevo panel de capas de...

leer más
Share This