Constructor Divi No Carga en el FrontEnd

  1. Inicio
  2. Divi
  3. Guías Divi
  4. Constructor Divi No Carga en el FrontEnd

WordPress es Mejor con Divi

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.

Jorge B.

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

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

19 Comentarios

  1. Jorge Arias

    Jorge, Gracias por tu articulo amigo… me ayudaste muchisimo… ya estaba pensando que destruir todo.. 😉

    Gracias.!!!

    Responder
    • Jorge Baffa

      ¡Me alegra saber que te sirvió! En su momento no sabía si publicarlo porque me parecía algo que solo me podía pasar a mí 🙂

      Gracias por tu comentario.

    • Dante The Persa

      Muchas gracias bro también estaba teniendo ese problema, si es bueno que publiques problemas así porque ya divi se ha popularizado tanto que habemos muchos que se nos presentan este tipo de errorres.

    • Jorge Baffa

      Me alegro de que te haya servido la solución! Saludos.

  2. Clara

    Hola, me pasa esto pero no se que es eso de Cloudflare, ni si esta activado. Solo he trabajado con Divi y todo iba bien y de repente deja de cargarme las cosas, me quita los fondos, me quita padding y todo de todo. He contactado con el hosting y nada…

    Responder
    • Jorge Baffa

      Clara. Contacta con el soporte de Divi. Ellos te sabrán decir cuál es el problema.

    • Clara

      Estoy en ello! Graciias 😊

    • Jorge Baffa

      👍

  3. Diego

    Y ¿cómo se desactiva y activa el Rocket Loader?

    Responder
    • Jorge Baffa

      Se desactiva desde Cloudflare. Vas a la sección Velocidad o Speed, buscas la opción Rocket Loader y la desactivas.

    • Diego

      Al final, mi problema era tan básico como que faltaba un par de actualizaciones del tema.

    • Jorge Baffa

      Suele pasar 🙂

  4. Yamilet

    Gracias!! Me pasaba lo mismo, no uso Cloudflare pero si el plugin Rocket de WP, solo con desactivarlo se solucionó el problema 🙂

    Responder
    • Jorge Baffa

      Gracias por el dato Yamilet!

  5. Lucia

    Muchisimas gracias, me salvaste! me iba desesperando

    Responder
    • Jorge Baffa

      Yo también me desesperé… jaja… Saludos.

  6. ebduy

    de verdad fue la mejor solución muchas gracias, ya tenia también todo listo para volverlo a hacer desde cero y me evitaste varias horas de trabajo, y de hecho esta solución no está a la vista en todas partes

    Responder
    • Jorge Baffa

      Me alegro de que te haya servido. Gracias por el mensaje.

Enviar un comentario

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