Durante el lanzamiento de una gran actualización, una que supone un antes y después como en el caso de Divi 4 vs Divi 5 (la cual viene con cambios titánicos para tu negocio online), todos nos preguntamos si merece la pena llevarla a cabo y si para ello vas a requerir un gran esfuerzo.
Pues me comprometo a que con este artículo no te quede ni una sola duda porque tras haber hecho un montón de pruebas y comparativas hemos recopilado toda la información que debes de tener en cuenta para decidir si realizar el cambio… y hay más de una sorpresa.
¡Manos a la obra!
Índice
- Divi 5: la nueva tecnología explicada sin necesidad de conocimientos técnicos
- Divi 4 vs Divi 5: velocidad y rendimiento comparados al detalle
- Divi 5 vs Divi 4: perfección en el nuevo editor visual
- Divi 5.0 release date: ¿es absolutamente estable?
- ¿Merece la pena actualizar a Divi 5 para nuevos proyectos?
- ¿Merece la pena actualizar a Divi 5 para webs existentes?
Divi 5: la nueva tecnología explicada sin necesidad de conocimientos técnicos
Lo primero que debes comprender es que no es una actualización al uso, sino una herramienta 100% nueva. Es decir, se ha programado el constructor visual de Divi desde cero adaptándolo a las nuevas tecnologías y con un código mucho más limpio y moderno.
Si le hubieran puesto otro nombre tendría todo el sentido del mundo, han mantenido el nombre de «Divi» simplemente porque es una marca reconocible y porque puedes hacer la migración de todos los diseños de tu web a esta nueva versión.
1. Reescritura completa del código de Divi usando React
Si Divi 4 tenía alguna pega se ha eliminado de raíz, no la han «parcheado» o «arreglado» sino que la han borrado de la existencia creando una herramienta completamente nueva con una arquitectura mucho más moderna.
Entre otras cosas han desarrollado Divi 5 usando React, una biblioteca de código abierto especializada en crear interfaces de usuario rápidas y escalables. Ahora Divi es más como una aplicación que un montón de bloques y secciones ancladas una encima de otra.
Además equiparando Divi 4 vs Divi 5 el primero dependía mucho de JQuery que ha sido sustituido por la última versión de JavaScript mejorando la velocidad y compatibilidad con los sistemas web.
En otras palabras: no hay constructor visual que esté tan al día con las tecnologías web como Divi 5.
2. Eliminación de los antiguos shortcodes
Cuando creabas un diseño con Divi 4 el constructor visual finalmente lo exportaba como un montón de shortcodes anidados (como los que te piden que añadas algunos plugins, pues imagínate cientos de esos en cada apartado), que a su vez WordPress tenía que interpretar (lo cual requiere pasos adicionales para mostrar la web) para finalmente generar un código en gran parte innecesario, poco limpio y complicado de analizar por el resto de herramientas.
Las diferencias Divi 5 y Divi 4 en este aspecto son gigantes pues han eliminado por completo el uso de shortcodes para construir la web. En su lugar utilizan una estructura basada en datos y HTML, infinitamente más limpia, rápida y que solo imprime lo absolutamente necesario.
Nota: aclarar que puedes seguir utilizando los shortcodes de otros plugins, simplemente han desaparecido los que son internos de Divi.
Divi 4 vs Divi 5: velocidad y rendimiento comparados al detalle
¿Y en la práctica esto en qué se traduce?, te lo voy a ilustrar de la manera más clara posible, sin que tengas que tener ningún tipo de conocimiento técnico.
Aquí está la clave.
3. Mejora en la velocidad del editor (panel de administración)
De la noche a la mañana la velocidad de carga del constructor visual de Divi ha aumentado en un 1.000%:
- Ya no existen esos tiempos de espera considerables cuando le dabas al botón «Editar con Divi» y la web «se queda pensando» para mostrar todo en tu pantalla
- Ya no hay un retardo al añadir nuevas secciones y elementos que fueran medianamente complejos, a diferencia de Divi 4 donde esta latencia era inevitable por su arquitectura
- Y más importante aún, ya no se siente pesada la web cuando el proyecto va creciendo y adquiere una longitud considerable con decenas de secciones
Presta atención a esto porque absolutamente todo es más rápido: cargar el constructor visual, editar elementos, añadir nuevos bloques, cambiar configuraciones, moverse entre secciones, realizar scroll, etc.
¿Entonces Divi 4 o Divi 5?: como te dije antes, si le hubieran puesto de nombre «El constructor visual más ágil del mercado» en vez de «Divi 5» sería completamente legítimo.
4. Mejora en la experiencia de usuario de Divi 4 vs Divi 5
Por otro lado todas estas mejoras Divi 5 desembocan en que, cuando un usuario accede a tu página, tanto la carga, la visualización, la navegación como otros aspectos se han vuelto mucho más veloces.
El HTML final que es enviado al navegador del usuario es pequeño y ligero, los navegadores tienen que hacer menos trabajo para renderizar el contenido y todo va incalculablemente más fluido. Por ejemplo: la espera para mostrar el Above the fold (la parte superior de cada apartado que ves nada más acceder a él sin tener que hacer scroll) se ha reducido al mínimo.
Otra de las grandes optimizaciones es que Divi 4 tenía una política de «enviar todo el código que en algún momento pudiera ser necesario» (un desperdicio de recursos que no se solía aprovechar, esto lo siguen haciendo muchas herramientas y hablaremos de ello en otros posts), mientras que Divi 5 envía y ejecuta el JavaScript que realmente va a necesitar.
Se nota mucho más en webs complejas que sencillas pero en general el usuario agradecerá este cambio en tu negocio online.
5. Mejora en la puntuación del Core Web Vitals y el Google Page Speed
El Core Web Vitals es un informe del propio Google en el que se evalúan una serie de métricas sobre la velocidad y la experiencia de usuario.
Como ya hemos dicho todo depende de lo complejos que sean los diseños de tu web, pero hemos visto que Divi 5 vs Divi 4 hay una mejoría del 20%-60% en los diferentes análisis del Core Web Vitals:
- Disminuye el tiempo que tarda en generarse la página
- Reduce el consumo de Memoria RAM
- Requiere menos consultas a la base de datos
- La CPU se destina a las operaciones absolutamente necesarias
- Y todo esto finalmente se refleja en una mayor puntuación del Core Web Vitals y el Google Page Speed
De hecho con Divi 5 es bastante sencillo conseguir una puntuación cercana al 100 en Google Page Speed, ya que entre otras cosas facilita la visualización inmediata del contenido superior, ni te digo si tienes LiteSpeed como webserver junto a su plugin configurado para crear una caché a nivel de servidor y optimizar automáticamente las imágenes (incluido en todos nuestros planes de hosting).
6. Mejora en el posicionamiento SEO de tu web
El objetivo primordial de cualquier empresa y emprendedor es usar una tecnología que favorezca el marketing, como el posicionamiento en los buscadores.
Sin lugar a dudas en comparación Divi 4 vs Divi 5 este último facilita las cosas por 2 razones principalmente:
- Aprovechas mucho mejor el crawl budget al permitir que los bots de Google analicen con mayor brío cada apartado: menos código y mayor velocidad de carga son los factores técnicos más importantes (si no tenemos en cuenta la calidad del contenido que es lo fundamental).
- A todo esto súmale que ahora Divi 5 tiene una mejor semántica HTML: es bien sabido en el mundillo del SEO que no es lo mismo para Google usar la etiqueta
<b>que la etiqueta<strong>, la primera no le dice gran cosa al buscador mientras que la segunda posee un significado semántico (que el texto englobado tiene mayor importancia que el resto del contenido que hay alrededor). Bien pues en Divi 5 ahora el HTML generado se beneficia de dichos detalles reforzando el posicionamiento de tu web en las SERP.
Divi 5 vs Divi 4: perfección en el nuevo editor visual
El nuevo constructor o editor visual se puede resumir en pocas palabras: infinitamente más sencillo y directo de usar.
Te lo demuestro a continuación.
7. Nueva interfaz y sistema de módulos
¿Qué trae divi 5?, la primera diferencia que podemos apreciar es la ubicación del panel de edición: en Divi 4 por defecto es un pop-up de tamaño medio que oculta la mayor parte de las opciones y tienes que hacer scroll continuamente para ir de una configuración a otra, además había que estar moviendo este pop-up porque se posicionaba encima de lo que estabas editando ocultando una parte (aunque se podía fijar en el lateral lo normal es ignorarlo y usar lo que viene por defecto):
En contraste Divi 4 vs Divi 5 el segundo ya te viene preparado como un panel de edición fijado en el lateral que ocupa todo el alto de la pantalla, haciendo que sean visibles casi todos los ajustes simultáneamente y teniendo un panorama completo de lo que permite editar cada bloque:
Otra cosa que podemos notar es que en Divi 5 tienes las opciones del responsive en la parte superior, para cambiar las dimensiones del diseño y así verificar que se visualiza correctamente en diferentes dispositivos (de esto hablaremos en más detalle abajo porque lo de adaptarse de manera automática para la versión móvil es brutal).
Uno de los aspectos que menos me gustaban de Divi 4 era que los componentes de la interfaz ocupaban mucho espacio innecesariamente y además todo estaba disperso entre varias pestañas, provocando que tuvieras siempre una visión reducida de lo que puedes hacer en cada sección:
Por contra de Divi4 vs Divi5 este aspecto se ha corregido haciendo que los encabezados, nombres y otros elementos poco relevantes ocupen lo mínimo necesario, además de agrupar lo importante en una pestaña mejorando así la experiencia de usuario:
A esto añádele que han eliminado por completo las animaciones del editor (aparición y ocultación del maquetador, movimientos con efectos, etc.), totalmente innecesarias porque al administrador de la web no le hace falta nada de eso. Los efectos se crean para hacer atractiva y amigable la plataforma a tu cliente potencial y no a los profesionales que están trabajando en el constructor visual a los que solo añade retardos mientras editan.
Otra característica a la que vas a sacar el máximo provecho es que los ajustes globales, tanto los del apartado que estás editando como los que afectan a la web completa, se encuentran listados para mostrarse con vistas personalizadas a la izquierda. No tienes que salir del editor e ir a las configuraciones de la plantilla ni similar, y de hecho deduzco que con el tiempo los plugins que amplían Divi agregarán más pestañas aquí:
Puedes incluso modificar la cabecera o el pie de página (que es global para toda la web) sin recargar ni salirte del editor.
Ponte traje y corbata para exprimir las nuevas funcionalidades Divi 5: capas, preajustes, variables, grupos de configuraciones para aplicar de golpe… lo vas a encontrar todo en el mismo sitio, con carga instantánea, y encima es personalizable para que tengas a mano lo que más uses en cada momento.
Y por último ahora Divi 5 sigue una política de «1 solo click»: han reducido la navegación al mínimo necesario para acceder a cualquier elemento de diseño, ya no hace falta clickear en desplegables, pestañas e iconos varios, todo es más directo y en menos pasos.
8. Nuevas opciones configurables
Si profundizamos en cada sección, fila y módulo de Divi 5.0 vs Divi 4.0 encontraremos que han agregado novedades varias, por ejemplo todos los bloques poseen ahora un apartado llamado «Elementos» que te permite introducir otros bloques dentro de ellos:
Puedes agregar una barra de progreso dentro de un widget de texto, sin shortcodes ni plugins adicionales, con solo 2 clicks. Imagínate esto con cualquier módulo.
¿Y sabes aquello que a veces necesitamos de listar entradas o productos de una categoría específica en un widget muy concreto?, pues ahora ya no hay que hacer mejunjes de agrupaciones y shortcodes uno encima de otro ni usar plugins externos para crear un diseño «masonry», ya que con la nueva función de bucles (generador de loops) puedes listar lo que necesites, en la cantidad que quieras y donde te haga falta:
Asimismo para los que tengan un perfil de programador sabrán que antes por defecto solo podías añadir una ID o Clase de CSS:
Sin embargo ahora puedes agregar todos los atributos HTML y CSS habituales e incluso los tuyos propios para funciones JavaScript personalizadas:
Divi 5 también viene con una sección para meter código antes y después de cada bloque (no confundir con los pseudo-elementos :after y :before, esto lo que hace es agregar una etiqueta HTML de tipo div, section, article, etc.):
Y podrás definir acciones según el tipo de interacción que haga el usuario con cada bloque: cuando clickeen en una imagen, pasen el ratón por encima de un texto, etc.
9. Diseños y configuraciones globales de Divi 4 vs Divi 5
En el caso de los diseños y configuraciones que afectan a toda la web, aparte de hacerlas más accesibles desde el editor no han sufrido cambios, simplemente son más rápidas y generan un código más limpio pero tienes las mismas opciones Divi5 vs Divi4:
El Theme Builder te sigue permitiendo crear diseños globales, como una cabecera o pie de página homogénea para todos los apartados:
El Personalizador del tema es el mismo:
Por último las Opciones del tema si las comparas una por una verás que son idénticas y los únicos cambios Divi 5 recibidos es que han movido la «Paleta predeterminada de selección de colores», han agregado un botón para vaciar la caché de CSS y han añadido una configuración de compatibilidad con Divi 4 llamada «Force Enable D4 Shortcode Framework» (por si todavía necesitas usar su código hasta terminar la migración):
10. Responsive más robusto para adaptarse a móviles gracias a los Flexbox
Antiguamente para programar un diseño que se adaptara a tablets y móviles se usaba esencialmente «@media queries» para definir los puntos en que los componentes de la web debían aumentar o disminuir su tamaño.
Por ejemplo le decías al navegador que si las dimensiones de la pantalla del usuario eran de 1200 píxeles o más, el tamaño del título debía de ser de 45px, pero que si la pantalla era inferior mostrara el título con una fuente de 30px. De esta manera en dispositivos más pequeños todo se reducía para no desbordarse ni hacer un scroll gigante.
Sin embargo en ocasiones obligaba a utilizar triquiñuelas para arreglar situaciones que no podían resolverse de otro modo, como por ejemplo duplicar bloques enteros para crear un diseño para PC y otro para móviles.
Divi 5 en cambio llega con la nueva tecnología: Flexbox. La diferencia más apreciable es que, no solo define el tamaño de los elementos según el dispositivo del usuario, sino un sin fin de propiedades nuevas como por ejemplo indicar el orden de los distintos bloques (cuántas veces hemos querido mostrar primero una imagen y después un texto o viceversa pero requería reorganizarlo todo), cambiar el número de columnas o filas de manera dinámica sin tener que hacer malabares, ocupar todo el espacio disponible o solo una parte, etc.
Adicionalmente de Divi 4.0 vs Divi 5.0 pasas de tener 3 puntos de interrupción con la antigua versión a 7 puntos de interrupción con la nueva que además son personalizables:
11. Modo oscuro y modo luminoso
¿Es tan importante esta funcionalidad?, para los que pasamos muchas horas trabajando delante de la pantalla el Modo Oscuro o Dark Mode es una bendición.
En resumen esta característica lo que hace es cambiar la gama de colores del editor a una más oscura. No afecta al diseño que estás creando ni lo verán los usuarios de tu web, solo modifica tu interfaz como administrador:
Entre otras ventajas:
- Provoca menos fatiga visual
- Menor exposición a la luz azul al reducir el brillo
- Mejora la experiencia cuando trabajas de noche
- E incluso ahorra batería en algunos dispositivos
Si no la has usado nunca te recomiendo que la pruebes en tu navegador, redes sociales, etc. pues, aparte de ser una de las novedades Divi 5, la mayoría de plataformas incluyen un modo oscuro.
Divi 5.0 release date: ¿es absolutamente estable?
Sí, la versión final 100% testeada y lista para webs en producción salió el (divi 5 release date). Y no solo eso, sino que además en los 2 meses posteriores han lanzado 11 actualizaciones para corregir pequeños fallos y añadir nuevas características.
Por tanto Divi 5 es completamente seguro y le están dando un mantenimiento excepcional, pero hay algún problema…
¿Cuáles son los problemas y limitaciones actuales de Divi 5?
Decirte que en este punto el único error que he notado personalmente es que al importar un diseño por defecto algún icono no se visualizaba y para solucionarlo solo he tenido que abrir el editor y seleccionarlo a mano (me ha llevado 1 minuto), sin mayor inconveniente.
Seguro que hay más bugs, pero como te he comentado arriba han arreglado tantas cosas en solo 2 meses que es muy difícil que te tropieces con uno.
¿Divi 5 es compatible con plugins antiguos?
Donde más posibilidades hay de toparse con algún problema es en el caso de que tengas diseños muy complejos con plugins externos. No hace falta decir que los más importantes como Divi Supreme Pro o Divi Essential ya están preparados para Divi 5 y por tanto no deberías preocuparte, pero siempre viene bien tener un técnico a mano para no pasar nada por alto y corregir esas pequeñas taras y detalles que puedan surgir.
¿Se puede volver a Divi 4 desde Divi 5?
Sí, esencialmente hay 2 maneras: el primer método y el más seguro es restaurar una copia de seguridad (nosotros hacemos backups todos los días así que escríbenos y te ayudamos). De esta manera es como si la migración hacia Divi 5 no se hubiera efectuado.
El otro método si te encuentras en un proveedor distinto y no tienes esa posibilidad es usar las herramientas que te ofrece el propio Divi para revertir toda la migración.
Pero no te lo cuento, mejor te lo enseño paso a paso en un artículo concreto para ello.
Y ahora viene lo mejor…
¿Merece la pena actualizar a Divi 5 para nuevos proyectos?
Sin lugar a dudas: Sí.
Hemos verificado que todo son ventajas comparándolas punto por punto y no hay nada en lo que Divi 4 supere a Divi 5, por tanto no existe razón para seguir usando Divi 4 salvo que necesites alguna herramienta antigua que aún no sea compatible con la nueva versión y no hayas encontrado ninguna alternativa (lo cual sería raro). Divi 5 es mejor que Divi 4 y si vas a lanzar un nuevo proyecto te ahorras futuras migraciones.
¿Merece la pena actualizar a Divi 5 para webs existentes?
En la inmensa mayoría de los casos: Sí.
La única razón por la que no actualizaría sería que tuvieras alguna extensión o herramienta en Divi 4 que aún no está preparada para Divi 5 y la migración te fuera a dar demasiados problemas (en ese caso muy concreto te renta esperar), sino deberías poner en marcha el cambio.
¿Entonces Divi 5 o Divi 4?, lo más importante que debes de tener en cuenta es que Divi 4 quedará obsoleto y dejará de recibir nuevas versiones, por tanto a la larga sí o sí vas a necesitar actualizar si quieres que tu web sea compatible con WordPress, WooCoommerce, LearnDash y un sin fin de herramientas imprescindibles.
Elegant Themes (la empresa desarrolladora de Divi) ofrece al menos 6 meses de actualizaciones de mantenimiento (seguridad, corrección de errores, etc.), tras lo cual suele abandonar antiguos desarrollos en favor de las nuevos, por lo que habiendo superado este umbral no deberías esperar mucho más.
La conclusión es más que clara, y si necesitas ayuda técnica para pasar de Divi 4 a Divi 5 recuerda que tenemos un plan 100% especializado en Divi Hosting que incluye la licencia, cientos de diseños, plugins premium y además te apoyamos al hacer el cambio a la nueva versión. También te dejo nuestra guía para migrar Divi 4 a Divi 5 de la forma más sencilla y segura posible.
