Gutenberg y la nueva experiencia Divi Builder

La temporada del cambio está sobre nosotros. La reciente llegada de WordPress 5.0 introduce un editor de bloques completamente nuevo (también conocido como Gutenberg). Y, el lanzamiento de nuestra nueva experiencia Divi Builder no solo ha ofrecido una integración fluida con Gutenberg, sino que también ha mejorado toda la experiencia de diseño de sitios web con Divi.

Estos nuevos cambios indudablemente generarán algunas preocupaciones y confusión sobre cómo Divi y Gutenberg trabajan juntos y cómo usar mejor Divi con todos estos cambios. Este tutorial está destinado a suavizar el golpe del cambio al guiarlo a través de las opciones disponibles y los pasos necesarios para que la nueva experiencia Divi Builder esté funcionando con éxito en WordPress 5.0.

Para aquellos de ustedes que no están preparados para Gutenberg o la nueva experiencia Divi Builder, no se preocupen. Discutiré las opciones disponibles para que las cosas sigan funcionando como de costumbre. Y para aquellos de ustedes que estén listos para aventurarse en lo desconocido y emocionante, esta guía los ayudará a encontrar el camino.

Esto es lo que cubriré en este tutorial:

• La importancia de instalar la última versión de Divi al actualizar a WordPress 5.0
• Cómo funciona el nuevo Divi Builder con Gutenberg de forma predeterminada
• Cómo activar el nuevo Divi Builder en el backend con WordPress 5.0 (método preferido)
• Edición de una página nueva con la nueva interfaz de usuario de Divi Backend Builder
• Uso de The Classic Divi Builder con New Divi

La importancia de instalar la última versión de Divi al actualizar a WordPress 5.0

La última versión de Divi es compatible con WordPress 5.0. Por lo tanto, si está actualizando a WordPress 5.0, asegúrese de actualizar también Divi a 3.18+. Esta nueva versión resuelve muchos de los problemas de compatibilidad con el nuevo editor de bloques de Gutenberg. Si mantiene una versión anterior de Divi, tendrá problemas para acceder a Divi Builder y otras configuraciones de página hasta que actualice.

Las últimas versiones de Extra, Bloom, Monarch y el complemento Divi Builder también son compatibles con WordPress 5.0, por lo que es mejor actualizarlas también al realizar la actualización.

Cómo funciona el nuevo Divi Builder con Gutenberg de forma predeterminada

Una vez que actualice a WordPress 5.0 e instale Divi 3.18 (última versión), estará listo para comenzar a construir su sitio web. Si agrega una nueva página, será recibido con una ventana emergente que le permite usar Divi Builder o el editor predeterminado de WordPress (ahora Gutenberg). Simplemente haga clic en "Usar Divi Builder".

Notará que se le iniciará directamente en Visual Builder en la interfaz.

Si sale de Visual Builder y edita la página en el backend, verá que no hay Classic Divi Builder disponible. Solo tendrá la opción de iniciar Divi Builder en la interfaz.

Esto se debe a que WordPress 5.0 eliminó el editor clásico y lo reemplazó con el editor de bloques (Gutenberg). Por lo tanto, se han eliminado todas las aplicaciones conectadas, incluido el Classic Divi Builder. En resumen, no hay Classic Divi Builder sin el Classic WordPress Editor.

Cómo activar el nuevo Divi Builder en el backend con WordPress 5.0 (método preferido)

Para acceder al nuevo Divi Builder en el backend, todo lo que necesita son unos pocos clics. Desde su panel de WordPress, navegue a Divi> Opciones de tema. Una vez allí, haga clic en la pestaña Constructor. En las opciones del Generador, haga clic en la pestaña Avanzado. Allí encontrará las opciones para habilitar la última experiencia de Divi Builder y habilitar el editor clásico (WordPress). Deberá habilitar ambas opciones para disfrutar del nuevo Divi Builder en el backend . Luego haga clic en Guardar cambios.

Nota: La opción para habilitar el editor clásico en las opciones de tema de Divi reemplaza la necesidad de usar el complemento del editor clásico proporcionado por los colaboradores de WordPress para aquellos que no están listos para usar Gutenberg.

Una vez que haya habilitado la última versión de Divi Builder y el editor clásico de Opciones de tema, estará listo para comenzar a construir sus páginas con la nueva experiencia de Divi Builder.

Edición de una página nueva con la nueva interfaz de usuario de Divi Backend Builder

Con el nuevo Divi Builder habilitado en el editor clásico de WordPress, verá el botón familiar "Usar el Divi Builder". Haga clic en este botón como de costumbre para implementar Divi Builder.

A continuación, seleccione cómo desea comenzar a diseñar su página entre las tres opciones que aparecen.

Ahora está listo y funcionando con la nueva experiencia Divi Builder en pleno efecto. Notará que el nuevo Divi Backend Builder tiene un aspecto similar al Classic Backend Divi Builder con algunas funciones nuevas y poderosas a su alcance.

Aquí hay algunas características notables de la interfaz de usuario del editor de páginas que lo ayudarán a comprender un poco mejor la nueva experiencia.

El botón "Construir en la interfaz"

El botón "Construir en la interfaz" ha reemplazado al botón tradicional "Usar el generador visual", pero la funcionalidad es la misma. Implementará Divi Builder en el front-end para una experiencia de construcción visual completa como antes. La razón principal de la redacción de este botón es que técnicamente no hay más constructores visuales separados. Solo hay un Divi Builder al que ahora se accede en el backend y el front end.

Los modos de visualización ahora disponibles en el backend

El New Divi Builder ha traído el Visual Builder y todas sus características al backend. Ahora no tiene que ir y venir editando su página. Para activar la experiencia del constructor visual en el backend, puede alternar los diferentes modos de vista en la parte superior del Constructor. De forma predeterminada, el modo de vista de estructura alámbrica está activo, lo que tiene sentido porque se asemeja mucho a la apariencia del constructor de backend clásico que estamos acostumbrados a ver. Sin embargo, puede alternar entre los diferentes modos de visualización (escritorio, tableta y teléfono inteligente) para editar su página visualmente (como lo hizo con Visual Builder) en el backend sin tener que salir de la página.

La nueva interfaz de usuario de Divi Builder

Además de tener la capacidad de alternar diferentes modos de vista en el backend, la interfaz de usuario de Divi Builder funciona a la perfección en el backend al editar su página. Por ejemplo, al editar la configuración de un elemento en el backend, la configuración modal se puede mover a cualquier ubicación dentro de toda la ventana del navegador, lo que le brinda el espacio necesario para realizar ediciones en el backend mientras ve sus cambios en tiempo real.

Volver a Classic Divi Builder

Si no está del todo listo para la nueva experiencia Divi Builder, aún puede usar el Classic Divi Builder como antes. La última versión de Divi ha incorporado una forma extremadamente simple de implementar el Classic Divi Builder que se encuentra justo en la parte inferior de la interfaz de usuario de Divi Builder en el backend al editar su página. Allí verá un enlace que le permitirá volver al Classic Divi Builder con un simple clic.

Nota: También puede cambiar al Classic Divi Builder en Opciones de tema. Haga clic en la pestaña Creador y luego en la pestaña de opciones avanzadas. Allí puede encontrar la opción para habilitar o deshabilitar la última experiencia Divi Builder. Simplemente desactive esta opción para mantener el Classic Divi Builder como antes. Pero recuerde, para ver el Classic Divi Builder en el backend, debe asegurarse y habilitar la opción Classic Editor también.

Las nuevas funciones de Divi Builder

El nuevo Divi Backend Builder también incluye todas las nuevas y potentes funciones que antes solo estaban disponibles en Visual Builder. Y si eso no fuera suficiente, también está obteniendo algunas actualizaciones de rendimiento y usabilidad completamente nuevas con este nuevo Divi Builder. Estas actualizaciones incluyen:

• Una experiencia de construcción más rápida que nunca utilizando el aprovechamiento de la memoria caché
• Una descripción 100% precisa de su página en todos los modos de visualización usando React Portal
• La capacidad de copiar y pegar entre páginas en Visual Builder tal como puede hacerlo en Classic Builder.

Consulte el artículo sobre la nueva experiencia Divi Builder para obtener más información sobre las nuevas y potentes funciones disponibles.

Uso de The Classic Divi Builder con New Divi

Como se mencionó anteriormente, puede cambiar al uso de Classic Divi Builder usando el enlace provisto en el nuevo editor de páginas Divi Backend Builder o deshabilitando el último Divi Builder dentro de las opciones del tema. Una vez que realice el cambio, el editor de la página de fondo se verá casi exactamente igual que antes con algunos cambios menores. Notará que el antiguo botón "Usar el generador visual" ahora dice "Construir en la interfaz", pero la función sigue siendo la misma que antes. También tendrá la opción de cambiar al nuevo Divi Builder haciendo clic en un enlace proporcionado en la parte inferior del Divi Builder en el backend.

Tenga en cuenta que el Classic Divi Builder aún carecerá de todas las funciones nuevas que ahora están disponibles en el backend del New Divi Builder.

Resumen y preguntas frecuentes

¿Tengo que actualizar Divi o actualizar a WordPress 5.0?

Para aquellos de ustedes que no están preparados para Gutenberg o la nueva experiencia Divi Builder, no se preocupen.

No es necesario que actualice a WordPress 5.0, pero si lo hace, deberá actualizar Divi también para todas las correcciones de compatibilidad que incluimos para la compatibilidad con WP 5.
Por lo tanto, si no desea * tener * que actualizar Divi en este momento, tampoco necesita actualizar WordPress ahora.

¿En qué orden debo realizar las actualizaciones?

No es necesario que lo haga en un orden en particular, pero deberá asegurarse y actualizar Divi si actualiza WordPress 5.0.

¿Cómo funcionará la nueva experiencia Divi en versiones anteriores de WordPress?

Al igual que antes, sin embargo, el Divi más nuevo incluye el New Divi Builder en el backend con todas las funciones nuevas que antes solo estaban disponibles en Visual Builder.

¿Qué pasa con los errores?

Estamos atentos a cualquier error que haya surgido debido a la naturaleza del cambio significativo que trae Gutenberg, y estamos lanzando versiones de corrección de errores (básicamente a diario) para garantizar que las cosas sean lo más estables posible.

Ahora que Guteberg está aquí, ¿tengo que usar Visual Builder?

No, ahora puede usar New Divi Builder en el backend, que viene con todas las funciones nuevas que antes solo estaban disponibles en Visual Builder.
(Ver arriba: Cómo activar el nuevo Divi Builder en el backend con WordPress 5.0 (método preferido))

¿Dónde está el viejo (familiar) clásico constructor de backend Divi?

El nuevo Divi Builder en el backend tiene todas las características familiares y la sensación del Classic Divi Builder más todas las características de tipo "Visual Builder" y más. Sin embargo, el nuevo Divi Builder le permite volver al Classic Divi Builder en cualquier momento desde el editor de la página de fondo.

(Ver arriba: Volver a Classic Divi Builder)

¿Puedo usar Gutenberg y Divi Builder al mismo tiempo?

Ambos son "creadores de páginas", por lo que deberá elegir uno u otro. Sin embargo, estamos trabajando en integraciones interesantes (próximamente) en las que puede usar sus módulos Divi favoritos dentro de Gutenberg, o usar cualquier bloque Gutenberg registrado dentro de Divi Builder.

Pensamientos finales

El lanzamiento de Gutenberg por sí solo es un poco abrumador para la mayoría. ¡El editor de páginas de WordPress con el que todos estamos familiarizados es completamente diferente! Pero, afortunadamente, el lanzamiento de nuestra nueva experiencia Divi Builder se integra sin problemas con Gutenberg, lo que le permite mantener la interfaz de usuario familiar que ha llegado a amar. Y con todas las poderosas funciones ahora disponibles en el backend, Divi Builder es más rápido y confiable que nunca.

Espero escuchar sus opiniones sobre la nueva experiencia Divi Builder con Gutenberg en los comentarios a continuación.

¡Salud!