La estación del cambio está sobre nosotros. La reciente llegada de WordPress 5.0 presenta un Editor de bloques completamente nuevo (también conocido como Gutenberg). Y el lanzamiento de nuestra nueva Divi Builder Experience 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.
Sin duda, estos nuevos cambios generarán algunas preocupaciones y confusión sobre cómo Divi y Gutenberg trabajan juntos y cómo utilizar mejor Divi con todos estos cambios. Este tutorial está destinado a suavizar el golpe del cambio guiándolo a través de las opciones disponibles y los pasos necesarios para que la nueva experiencia de Divi Builder funcione correctamente en WordPress 5.0.
Para aquellos de ustedes que no están listos para Gutenberg o la nueva Divi Builder Experience, no se preocupen. Discutiré las opciones disponibles para que usted mantenga las cosas 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 por defecto
- Cómo activar el nuevo Divi Builder en el backend con WordPress 5.0 (método preferido)
- Edición de una nueva página con la nueva interfaz de usuario de Divi Backend Builder
- Usando 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. Entonces, si está actualizando a WordPress 5.0, asegúrese de actualizar también Divi a 3.18+. Esta nueva versión soluciona 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 actualizarlos también al actualizar.
Cómo funciona el nuevo Divi Builder con Gutenberg por defecto
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, aparecerá una ventana emergente que le permitirá usar Divi Builder o el editor predeterminado de WordPress (ahora Gutenberg). Simplemente haga clic en «Usar Divi Builder».
Notará que será lanzado directamente al Visual Builder en la parte frontal.
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 parte delantera.
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 se necesita son unos pocos clics. Desde tu panel de WordPress, navega a Divi > Opciones de tema. Una vez allí, haga clic en la pestaña Generador. 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 desde Opciones de tema, estará listo para comenzar a crear sus páginas con la experiencia New Divi Builder.
Edición de una nueva página 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 de 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 se parece al Classic Backend Divi Builder con algunas funciones nuevas y potentes al alcance de su mano.
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 «Crear en el front-end» ha reemplazado al botón tradicional «Usar Visual Builder», pero la funcionalidad es la misma. Implementará el Divi Builder en la parte delantera 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 existe un constructor visual independiente. Solo hay un Divi Builder al que ahora se accede en el backend y el front-end.
Los modos de vista ahora disponibles en el backend
El New Divi Builder ha traído el Visual Builder y todas sus funciones al backend. Ahora no tienes que ir y venir editando tu página. Para activar la experiencia del constructor visual en el backend, puede alternar entre 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 parece mucho a la apariencia del generador de back-end clásico que estamos acostumbrados a ver. Sin embargo, puede alternar entre los diferentes modos de vista (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 sin problemas en el backend al editar su página. Por ejemplo, al editar la configuración de un elemento en el backend, el modal de configuración 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 los cambios en tiempo real.
Cambiar de nuevo a Classic Divi Builder
Si aún no está listo para la nueva experiencia Divi Builder, aún puede usar 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 Generador 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 deshabilite esta opción para mantener el Classic Divi Builder como antes. Pero recuerde, para ver el Classic Divi Builder en el backend, también debe asegurarse y habilitar la opción Classic Editor.
Las nuevas características de Divi Builder
El nuevo Divi Backend Builder también incluye todas las funciones nuevas y potentes que anteriormente solo estaban disponibles en Visual Builder. Y si eso no fuera suficiente, también obtendrá nuevas mejoras de rendimiento y usabilidad con este nuevo Divi Builder. Estas actualizaciones incluyen:
- Una experiencia de construcción más rápida que nunca utilizando el aprovechamiento de caché
- Una representación 100% precisa de su página en todos los modos de vista usando React Portal
- La capacidad de copiar y pegar entre páginas en Visual Builder tal como lo hace en Classic Builder.
Consulte el artículo New Divi Builder Experience para obtener más información sobre las nuevas y potentes funciones disponibles.
Usando 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ágina Divi Backend Builder o deshabilitando el último Divi Builder dentro de las opciones de tema. Una vez que haga el cambio, el editor de la página de back-end se verá casi exactamente igual que antes con algunos cambios menores. Notará que el antiguo botón «Usar Visual Builder» ahora dice «Crear en el front-end», 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 provisto en la parte inferior del Divi Builder en el backend.
Tenga en cuenta que Classic Divi Builder aún carecerá de todas las nuevas funciones ahora disponibles en el backend en 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 listos para Gutenberg o la nueva Divi Builder Experience, no se preocupen.
No necesita actualizar a WordPress 5.0, pero si lo hace, también deberá actualizar Divi para todas las correcciones de compatibilidad que incluimos para la compatibilidad con WP 5.
Entonces, si no quieres *tener* que actualizar Divi ahora mismo, tampoco necesitas actualizar WordPress ahora.
¿En qué orden debo realizar las actualizaciones?
No necesita hacerlo en un orden 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 New Divi Builder en el backend con todas las características nuevas que antes solo estaban disponibles en Visual Builder.
¿Qué pasa con los errores?
Estamos observando activamente cualquier error que haya surgido debido a la naturaleza del cambio significativo que trae Gutenberg, y estamos publicando 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 características 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 generador de backend Divi?
El nuevo Divi Builder en el backend tiene todas las funciones familiares y la sensación del Classic Divi Builder más todas las funciones 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 backend.
(Ver arriba: Cambiar de nuevo a Classic Divi Builder)
¿Puedo usar Gutenberg y Divi Builder al mismo tiempo?
Ambos son » constructores de páginas «, por lo que deberá elegir uno u otro. Sin embargo, estamos trabajando en integraciones emocionantes (próximamente) donde 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 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 le encanta. Y con todas las funciones potentes 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!