Constructor Divi No Carga en el FrontEnd

Jorge Baffa

Jorge Baffa

22-07-2020

Manual de WordPress

Aprende a usar y configurar todos los aspectos de WordPress.

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 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 es que unos días antes lo había usado 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) 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, 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.

Manual de WordPress

Aprende a usar y configurar todos los aspectos de WordPress.

Jorge Baffa

Jorge Baffa

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

WordPress es Mejor con Divi

0 comentarios

Enviar un comentario

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