Guías Divi

Constructor Divi No Carga en el FrontEnd

Si el constructor Divi no carga cuando intentas diseñar en el front-end (pero sí en el back-end y en el theme builder) quizás esta sea la causa.

Como ya seguramente sabes si usas Divi en WordPress, el constructor se puede usar en tres lugares diferentes de WordPress:

  • En el Back-end. Es cuando usas Divi en el lugar donde habitualmente está el editor de WordPress, también llamado Última Experiencia de Divi Builder. Al activar esta opción el editor de WordPress desaparece por completo y es reemplazado por Divi.
  • En el Front-end. Es cuando usas Divi directamente en la página publicada. Vas a la página publicada y arriba en la barra de WordPress haces clic en Activar el constructor visual.
  • En el Theme Builder. Es cuando usamos Divi para crear plantillas que luego asignamos masivamente a un grupo de páginas o entradas.

Las dos primeras opciones se usan cuando queremos editar una entrada o página individual, mientras que la tercera es para crear diseños que aplican a todo el sitio o a una determinada categoría, por ejemplo.

Aclaradas las tres formas que existe de usar Divi vamos al problema que nos ocupa.

¿Por qué no carga el editor Divi en el Front-end?

A mí en lo personal no me gusta el editor del back-end de la última experiencia de Divi Builder ya que no puedo ver la página en su tamaño definitivo.

Por eso, cuando hace unos días me dispuse a hacer unos cambios en la home de Aventura Digital, fui directo a la vista de la página publicada y le di clic a Activar el constructor visual para editar en el front-end y, para mi sorpresa el editor Divi no cargaba.

Las pelotitas de colores que vemos mientras carga el constructor Divi permanecían ahí girando por minutos en un bucle sin final.

Cancelé, recargué la página, lo volví a intentar y nada… 

Borré la cache. Por las dudas desactivé el plugin de cache y puse Cloudflare en Modo Desarrollador… Nada…

Lo raro era que unos días antes había usado el constructor Divi del front-end y funcionaba normalmente… Y no había actualizado plugins en los últimos días… Además la versión de Divi era la última.

Cansado y sin más que probar contacté al soporte de Divi reportando el fallo.

Luego de conectarse vía acceso remoto a mi WordPress el técnico me respondió (para mi sorpresa) que el constructor sí funcionaba…! Adjuntando una captura de pantalla.

Gracias a esa captura me di cuenta de que él había probado el editor Divi en el back-end. Y ahora la cosa era más extraña aún… En el back-end y también en el Theme Builder Divi funcionaba sin problemas.

¡Pero en el front-end seguía sin cargar!

Me recomendó desactivar todos los plugins en busca de alguno que causara el fallo… ¡Y nada!

Desactivé absolutamente todos los plugins hasta dejar WordPress pelado y el bendito editor seguía sin querer cargar…

 

En esos días tenía el sitio instalado en SiteGround, porque tenía curiosidad por probar el rendimiento de este hosting y su servicio.

Así que consulté también al soporte de SiteGround, por si acaso era algo que tuviera que ver con el hosting… Aunque no lo creía.

Si hay algo que tiene SiteGround es un excelente soporte técnico.

El técnico se ocupó de revisar todo, desde WordPress hasta la configuración de la cuenta de hosting en busca de una posible causa al extraño problema de que no cargara el constructor Divi en el front-end de mi sitio web.

Resumiendo

Al final la causa la encontró el soporte de SiteGround. El problema no estaba ni en mi WordPress, ni en el hosting.. Ni siquiera en Divi.

Quién impedía que cargue el editor Divi en el front-end era Cloudflare. Para mi total sorpresa porque, como conté al principio, unas de las primeras medidas que tomé fue la de poner Cloudflare en modo Desarrollador.

La cuestión es que unos días antes yo había activado una herramienta de Cloudflare llamada Rocket Loader

Rocket Loader se encuentra en la sección de Velocidad (o Speed) de Cloudflare y ayuda a cargar más rápido a páginas que usan Javascript (o sea todas).

Pero por alguna razón (que la verdad no analicé) esta herramienta bloquea la carga del constructor Divi cuando queremos editar en el front-end.

Después de desactivar Rocket Loader, inmediatamente el editor del front-end de Divi volvió a funcionar con total normalidad.

De todas maneras Rocket Loader no es una herramienta para descartar así porque sí, ya que efectivamente reduce el tiempo de carga.

En mi caso pasó de más de 1 segundo a casi medio segundo (medidos con Pingdom) luego de activarlo. Una diferencia para nada despreciable.

La Solución

Rocket Loader tiene un método que permite excluir determinado Javascript. Si te interesa puedes leer la explicación directamente en este artículo de Cloudflare.

Sin embargo yo adopté una solución más fácil: dejarlo así. 

Cuando necesito editar una página individual lo desactivo y luego lo vuelvo a activar.

A mí me sirve ya que no es que me pase todo el tiempo haciendo cambios en el sitio web. Y por otro lado al Theme Builder de Divi, que es lo que más uso últimamente, no lo afecta.

Pero el mejor aprendizaje de todo este lío es quizás que el Modo Desarrollador de Cloudflare no desactiva todas sus herramientas, como uno podría imaginar.

Espero que te haya sido útil toda esta experiencia y su respectiva solución, si es que estás rompiéndote la cabeza porque el editor Divi del front-end no carga en tu WordPress.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Compartir
Publicado por
Jorge B.

Artículos recientes

Cómo Configurar Divi

Al momento de activar el constructor Divi se crea una nueva opción en el menú…

28/02/2023

¿Qué es Divi?

Divi es un constructor para WordPress que se instala como un si fuera un tema…

28/02/2023

Cómo Insertar una Caja de Autor en Entradas con Divi

En esta guía te muestro paso a paso cómo crear una caja con información del…

11/04/2022

Cómo Hacer un Encabezado Diferente para la Home con Divi

En esta guía te muestro cómo cambiar el encabezado de la página home para que…

04/04/2022

Cómo Diferenciar Entradas con Diseños Diferentes con Divi

En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…

28/03/2022

Cómo Hacer un CV Digital con WordPress y Divi

En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…

24/03/2022