¡Hoy quiero hablar de un tema que me encanta: los maquetadores visuales para WordPress!

Llevo un tiempo queriendo publicar este artículo, pero no quería que fuera el típico post en el que enumero los diferentes maquetadores y las características de cada uno.

Además, ese post ya lo tengo: Plugins “arrastrar y soltar” para diseñar y maquetar páginas en WordPress.

Quería que fuera un post diferente, muy completo y sobre todo arroje un poco de luz al tema de los diferentes maquetadores visuales para WordPress.

¿Por qué?

Porque en los últimos meses se está hablando mucho de ellos (bien y mal) y además existe una especie de rivalidad ABSURDA entre quienes usan uno y otro.

De modo que, para hablar de ellos con propiedad y desterrar algunos mitos, he creado este post en el que voy a hacer un análisis real de Divi, Elementor y Visual Composer.

Para ello, he invitado a especialistas en diseño web con WordPress que son amigos míos y cada uno de ellos usa un maquetador diferente.

¿Cómo he planteado este post?

La mecánica es muy sencilla. Los tres diseñadores hemos creado la misma página en un subdominio de nuestra web y hemos utilizado nuestro maquetador de cabecera.

Es decir, los tres hemos cogido el mismo diseño y lo hemos montado en Divi, Elementor y Visual Composer.

Exactamente el mismo, lo hemos calcado (cambiado alguna cosita) y el objetivo es analizar el comportamiento y rendimiento de cada uno de los maquetadores.

Así que, si te interesa conocer los resultados de este experimento, ponte cómodo ¡Empezamos!

Maquetadores visuales para WordPress

 

¿Qué es un maquetador visual para WordPress?

Lo primero que vamos a hacer es explicar qué es exactamente un maquetador visual.

Un editor o maquetador visual es una herramienta de diseño web que se instala en WordPress y sirve para dar forma a los contenidos de un sitio web.

Por lo tanto, sirven para maquetar y dar formato al contenido de las diferentes páginas de un sitio web

En el mercado de los maquetadores visuales para WordPress existen varios: Divi, Elementor, Visual Composer, Thrive Architect, Beaver Builder o Page Builder.

Estos seis son algunos de los más habituales, pero hay más opciones y además WordPress está desarrollando su propio maquetador.

Todos comparten una característica esencial: permiten maquetar sitios web arrastrando y soltando sus diferentes elementos.

Este es su principal beneficio, pues permiten crear páginas de forma sencilla.

Además, la mayoría de ellos incluye diferentes plantillas o layouts predefinidos que ayudan (mucho más) en la tarea de maquetación de un sitio web.

Por último, mencionar que algunos están disponibles en formato plugin, como es el caso de Elementor o Visual Composer, y otros son también son un theme, como sucede con Divi.

Maquetadores visuales para WordPress

 

Cómo son los diferentes maquetadores visuales para WordPress

Como yo el que más conozco a fondo es Divi, pues llevo años usándolo, voy a dejar que los otros dos diseñadores invitados te cuenten porqué usan sus respectivos maquetadores.

¡Y así aprovecho para presentártelos! 🙂

 

José Antonio Carreño

Utilizo Elementor junto al tema Generatepress (tema por decir algo, porque para mi más que un tema es un framework en toda regla) simple y llanamente por la flexibilidad que me da a la hora de poder diseñar lo que mi mente pueda llegar a imaginar.

Ambas herramientas combinadas me dan la posibilidad de replicar prácticamente cualquier técnica de diseño web vigente en la actualidad y, además, tanto su rendimiento como la limpieza de su código es TOP.

Esto segundo implica que no sólo tengo garantizado un buen diseño sino que también me da la seguridad de que estoy utilizando dos herramientas que no me van a dar problemas a la hora de realizar una buena optimización WPO.

Si a todo esto le sumas que Elementor no para de crear nuevas herramientas dentro de su maquetador que cada día te facilitan más la vida a nivel profesional y que siempre están en constante mejora y actualización de lo que ya tienen… para mi no hay color.

Y cuando digo constante, es constante. Raro es el mes en el que no hay novedades “palpables”. 😉

Visita su web: joseantoniocarreno.com

 

Almudena Morales

Uso el tema Bridge con Visual Composer desde que aprendí a diseñar páginas en WordPress. He probado otros temas y otros constructores pero no terminan de gustarme. Es cierto que cuando te acostumbras a trabajar con uno te da pereza cambiar, te acomodas porque ya lo conoces al dedillo y tu trabajo se agiliza.

Considero que hay que conocer otras herramientas para poder participar en todo tipo de proyectos y no cerrarse a opciones laborales. No obstante, si depende de mí, seguiré usando Bridge con Visual Composer durante una temporada.

He elaborado decenas de páginas web y el resultado ha sido muy satisfactorio.

¿Cuáles son sus ventajas?

  • Opciones de configuración. Bridge es un tema que te da todas las opciones que puedas imaginar, todas las que requiere tu proyecto. El diseño de cada elemento se puede configurar en el tema sin necesidad de utilizar CSS. Con unos clic eliges tus opciones, sin tener que meter código.
  • Una demo para cada negocio. Aunque elaboro web personalizadas y adaptadas a cada proyecto, Bridge con sus actuales 281 demos ayuda bastante a la hora de afrontar una nueva web. Sus diseñadores actualizan periódicamente las demos ampliándolas en numero y con los diseños más actuales que son de gran ayuda e inspiración.
  • Visual Composer es un constructor muy completo e intuitivo. Viene incluido en el tema Bridge. Ofrece muchas posibilidades de diseño y se actualiza regularmente añadiendo nuevos elementos muy útiles para que el resultado sea una página web actual y profesional.
  • Además de todo esto, Bridge es un tema Premium, con soporte técnico muy útil y tiene un precio de lo más razonable. Creo que es un tema perfecto para cualquier diseñador WordPress.
  • En cuanto al SEO, Bridge es un tema muy completo, con muchas opciones, y se podría pensar que esto afecta a su velocidad de carga pero no es así. Además. hay que tener en cuenta que hay múltiples factores que influyen en la WPO. Considero que, si una página web está alojada en un buen hosting y está optimizada, tendríamos un buen resultado.

Visita su web: almudenamorales.com

 

Y  mí ya me conoces de sobra. Además, ya he hablado de Divi en varios posts.

Llevo utilizando el maquetador visual de Elegant Themes desde hace varios años, por lo que conozco a la perfección tanto su evolución como características y funcionalidades.

Me parece muy dinámico y sencillo de usar, y con él se pueden crear webs muy creativas y atractivas, páginas con gancho, como me gusta llamarles a mí 😉

 

Análisis y comparativa entre Divi, Elementor y Visual Composer

Antes de empezar con el análisis y comparativa, conviene explicar cómo lo hemos planteado.

Como he comentado más arriba, los tres diseñadores hemos maquetado la misma web, cada uno de nosotros con su editor de cabecera.

Lo único que hemos hecho es cambiar el color, para que cada página tenga un tono diferente y no fueran repetitivas al hacer este post.

Los tres hemos contado con las mismas imágenes. Todas miden y pesan lo mismo, con el objetivo de “jugar” con las mismas reglas.

Aquí puedes ver las tres páginas:

 

Como puedes ver, las tres páginas mantienen el mismo diseño y estructura:

  • Barra superior con logo + menú.
  • Header con titular + llamada a la acción.
  • Un texto a modo de bienvenida.
  • 6 textos + iconos organizados en 2 filas.
  • 4 contadores circulares (barras en el caso de Elementor, pues no dispone de contadores circulares).
  • Otro bloque de texto con un par de imágenes alineadas de forma inversa (foto + texto / texto + foto).
  • Un apartado con un copy destacado a modo de eslogan.
  • 4 logotipos a modo de portfolio / clientes.
  • Por último, un formulario de contacto.

En cuanto a plugins instalados, también tienen los mismos cada una de ellas, a excepción del plugin de caché, aunque eso lo explicaré enseguida.

Los plugins que hemos instalado son:

  1. WP Smush para optimizar las imágenes.
  2. WP-Optimize para limpiar de base de datos y eliminar la posible basura generada.
  3. WPO Alejandro Novás para minificar el código de la web.
  4. Plugin de caché (cada una usa uno diferente).

¡Empecemos las pruebas!

Vamos a analizar el comportamiento y rendimiento de cada una de ellas teniendo en cuenta que:

  • Hemos utilizado las mismas imágenes (tienen el mismo peso y tamaño).
  • También hemos utilizado los mismos plugins.
  • Solo hemos modificado el plugin de caché, que es posiblemente el que más influye para la velocidad de carga de WordPress.

 

Para medir la velocidad de carga y el rendimiento en cada una de ellas, he querido utilizar diferentes herramientas (para tener más datos):

  1. Pingdom.
  2. GTmetrix.

 

Análisis de la velocidad de carga de Divi, Elementor y Visual Composer


 

Velocidad de carga con Divi

  • Test realizado con Pingdom:

Velocidad de carga con Divi

  • Test realizado con GTmetrix:

Velocidad de carga con Divi

 

Velocidad de carga con Elementor

En este caso, voy a medir la velocidad de carga de la combinación de Generatepress + Elementor (plantilla + maquetador).

  • Test realizado con Pingdom:

Velocidad de carga con Elementor

  • Test realizado con GTmetrix:

Velocidad de carga con Elementor

 

Velocidad de carga con Visual Composer

Por último, mido la velocidad de carga de la combinación de Bridge + Visual Composer (plantilla + maquetador).

  • Test realizado con Pingdom:

Velocidad de carga con Visual Composer

  • Test realizado con GTmetrix:

Velocidad de carga con Visual Composer

 

Comparativa de rendimiento entre Divi, Elementor y Visual Composer


DIVI

  • PageSpeed (Pingdom): 94
  • PageSpeed (GTmetrix): 91
  • Tiempo de carga (Pingdom): 659 ms
  • Tiempo de carga (GTmetrix): 2,9 segundos
  • Tamaño de la página (Pingdom): 748 kb
  • Tamaño de la página (GTmetrix): 462 kb
  • Peticiones externas (Pingdom): 32
  • Peticiones externas (Pingdom): 21
  • YSlow Score: 93%

ELEMENTOR

  • PageSpeed (Pingdom): 87
  • PageSpeed (GTmetrix): 90
  • Tiempo de carga (Pingdom): 571 ms
  • Tiempo de carga (GTmetrix): 2,3 segundos
  • Tamaño de la página (Pingdom): 522.5 kb
  • Tamaño de la página (GTmetrix): 509 kb
  • Peticiones externas (Pingdom): 39
  • Peticiones externas (Pingdom): 40
  • YSlow Score: 81%

VISUAL COMPOSER

  • PageSpeed (Pingdom): 84
  • PageSpeed (GTmetrix): 67
  • Tiempo de carga (Pingdom): 1.25 ms
  • Tiempo de carga (GTmetrix): 4 segundos
  • Tamaño de la página (Pingdom): 1 mb
  • Tamaño de la página (GTmetrix): 923 kb
  • Peticiones externas (Pingdom): 78
  • Peticiones externas (Pingdom): 78
  • YSlow Score: 64%


 

Nivel de consumo de recursos de los maquetadores visuales para WordPress

Realizada la comparativa entre los tres maquetadores, es el momento de analizar el nivel de consumo de recursos y solicitudes de archivos que hace cada uno de ellos.

Para ello, recurro de nuevo a Pingdom y analizo el apartado “File requests”.

 

Recursos consumidos por Divi

Nivel de consumo de recursos de los maquetadores visuales para WordPress

Los recursos consumidos por Divi y las solicitudes de archivos son los siguientes:

  • Hosting. El primer recurso que aparece es el tiempo de carga del servidor. Esto varía en función del proveedor de hosting que tengas contratado. En mi caso, tengo alojada mi web con Raiola.
  • Fuentes. Es el tiempo que tardan en cargar las Google Fonts en la página.
  • Caché de estilos. Tiempo de carga de la caché en referencia a los estilos de la plantilla / maquetador.
  • Iconos CSS. Se trata del tiempo de carga de los iconos CSS de la plantilla.
  • Archivos JS y CSS. Este tipo de archivos suponen la carga de diferentes elementos. JavaScript y CSS aplican un montón de código que debe ser minificado al máximo.
  • Imágenes. Como ya he mencionado en varios post, las imágenes también afectan en la velocidad de carga de WordPress, por lo que hay que comprimirlas y optimizarlas previamente.
  • Caché. Por último, aparece el archivo caché de WP Rocket.

 

Recursos consumidos por Elementor

Nivel de consumo de recursos de los maquetadores visuales para WordPress

En el caso de Elementor, estos son los archivo consumidos y las solicitudes que realiza:

  • Hosting. Igual que en el caso de Divi, el primer recurso es el servidor, en este caso SiteGround.
  • Emojis.
  • Fuentes de Google Fonts.
  • CSS de la plantilla: GeneratePress.
  • Diferentes bloques de diseño de Elementor: animaciones, iconos, blog, estilos, etc.
  • Archivos JS.
  • Imágenes.

 

Recursos consumidos por Visual Composer

Recursos consumidos por Elementor

La combinación de Bridge + Visual Composer es, sin duda, la que más archivos carga. A grandes rasgos:

  • Hosting / Servidor (OVH en este caso).
  • CSS de Autoptimize, plugin utilizado para la caché.
  • CSS de las tipografías.
  • Archivos JS.
  • Imágenes.
  • Scripts del plugin Contact Form 7.
  • Elementos de Visual Composer: widgets, acordeones, botones, etc.
  • Emojis.

Por lo tanto, esta combinación es la que más archivos JavaScript requiere para ser cargada y ahí es donde se observa la diferencia en el tiempo de carga respecto a los Divi y Elementor.

 

Plugins de caché para mejorar la velocidad de carga en WordPress

En cuanto a los plugins de caché, la idea inicial era que los tres instalásemos el mismo, pero por algún problema en el hosting de José Antonio, no pudo ser y la tuvimos que descartar.

Mi idea era que todos usáramos WP Rocket para la configuración de caché (para mí es el mejor plugin en este terreno), pero no pudo ser.

De modo que decidimos que cada uno utilizara el plugin de caché que usa habitualmente en sus diseños, quedando de la siguiente forma:

  • WP Rocket para Divi.
  • WP Super Caché para Elementor.
  • Autoptimize para Visual Composer.

 

Conclusiones sobre el uso de maquetadores visuales para WordPress

Lo primero que quiero destacar es que, una vez realizados los diferentes tests de velocidad, los datos varían en función de la herramienta utilizada.

Puedes ver, por ejemplo, como la misma página tiene 32 peticiones externas en una herramienta y 21 en la otra. Es decir, cada herramienta mide una cosa, lo que muestra que Pingdom considera solicitudes determinadas acciones que GTmetrix no.

En líneas generales, los tres maquetadores se comportan muy bien en cuanto a optimización y velocidad de carga, pero destacan los dos primeros.

Divi y Elementor arrojan unos datos muy similares: PageSpeed de 94 en Divi y de 84 en Elementor, y tiempo de carga de 659 milisegundos en Divi y de 571 en Elementor (según datos de Pingdom).

El que se queda un poco rezagado en cuanto a velocidad de carga es Visual Composer, pero también ofrece un resultado más que aceptable. Sinceramente, 1.25 segundo es un buen dato, tampoco nos volvamos locos.

En lo que sí flojea un poco la combinación de Bridge + Visual Composer es en el PageSpeed, que recordemos es el conjunto de datos sobre el rendimiento real de las páginas tanto en dispositivos móviles como en ordenadores a ojos de Google.

En mi opinión, aquí queda claro la fuerte competencia que están llevando a cabo en estos momentos Divi y Elementor para captar adeptos.

Lo cierto es que Elementor empezó de forma más modesta y ha acabado revolucionando el mercado de los maquetadores visuales para WordPres.

Por ese motivo, Divi, que siempre ha sido una plantilla puntera (cuando no existía esta fiebre por los maquetadores ya era una de las mejores plantillas del mhercado), en los últimos meses ha introducido decena de nuevas características para hacer más increíbles (y sencillos) sus diseños: animaciones, degradados o layouts son solo algunas de ellas.

Es decir, Divi se ha puesto las pilas por la llegada de Elementor, cosa que es de agradecer para quienes lo usamos habitualmente y es un hecho a reconocer.

Por último, destacar la importancia de usar un buen proveedor de hosting para alojar la web, así como un plugin de caché (y una correcta configuración del mismo) para optimizar su velocidad de carga.

En definitiva, a pesar de las diferencias entre estos tres maquetadores visuales para WordPress, creo que son muy buenas opciones para diseñar una web a día de hoy.

Si me pides que te recomiendo uno de ellos para tu web, obviamente te diría Divi, pero esa es una opinión subjetiva.

Ahora ya tienes los datos de los tres. Analiza sus funcionalidades y sobre todo las necesidades que tiene tu página web para decantarte por uno de ellos 😉

PD: a los diseñadores web, por favor, dejémonos de tonterías y rivalidades absurdas 🙂

¡Es el momento de debatir! ¿Qué te parecen los resultados? ¿Tienes alguna preferencia a la hora de elegir entre los diferentes maquetadores visuales para WordPress?

 

Acepto la política de privacidad

You have Successfully Subscribed!

Pin It on Pinterest

Share This