Los mejores maquetadores visuales de WordPress

Comparativa de los mejores Maquetadores Visuales de WordPress

Parece que fue ayer cuando aparecieron estas extensiones (plugins) de WordPress que permitían que cualquiera crease una web de forma rápida y sencilla.

Sí, estamos hablando de los constructores o maquetadores visuales de WordPress. Pero si queremos usar uno de estos es normal que nos surjan un gran número de dudas ¿Qué maquetador es mejor?¿Todo es positivo en su uso?¿Qué impacto tienen en el posicionamiento en Google?¿El uso de estos constructores ralentiza nuestra web?

A todo esto y más quiero responder en este artículo.

Introducción a los maquetadores visuales

Aún recuerdo esos años en los que la creación web era una ciencia desconocida y limitada a un pequeño grupo que escribían “cosas raras” en el ordenador.

Con el nacimiento de algunos CMS como WordPress llegó una nueva etapa que permitió la creación web sin contar con unos conocimientos técnicos avanzados.

Pero la cosa no quedó ahí, con el rápido crecimiento de WordPress comenzaron a nacer una serie de plugins que facilitaron la creación web de una forma sorprendentemente sencilla.

¿Qué es un maquetador visual exactamente?

Un maquetador visual es una aplicación que permite crear una página web de un modo muy gráfico y sencillo mediante técnicas como arrastrar y soltar, edición en vivo y bloques de contenido como texto, imágenes, galerías, formularios, mapas, CTAs y un largo etc.

Hablando de los maquetadores visuales no podemos evitar mencionar a Gutenberg, el creador web nativo de WordPress. Básicamente se usa para lo mismo que un maquetador visual. Pero a pesar de esto, los mismos creadores de WordPress (y Gutenberg) no lo clasifican realmente como un constructor.

Gutenberg editor de bloques de WordPress

¿Qué es Gutenberg o el editor de bloques?

Según los mismos creadores, Gutenberg es un “editor de bloques” y tiene varias diferencias con un maquetador visual, como que no cuenta con la función de arrastre y soltado (drag & drop), no dispone de edición en vivo y una serie de numerosas características que hacen de este editor una herramienta para usuarios más avanzados o que, al menos, entienden la estructura de bloques HTML en una web.

Dejando de lado esa definición, según mi experiencia y punto de vista, el mejor y más rápido maquetador visual es, sin lugar a dudas, Gutenberg y el por qué lo explico en este artículo sobre por qué Gutenberg es el mejor editor visual de WordPress.

Pero ateniéndonos a la definición de qué es un maquetador visual, no me queda otra que seguir este artículo por otro lado.

Los mejores maquetadores visuales de WordPress

Antes de nada quiero que tengáis en cuenta que una comparativa de los mejores maquetadores no implica que un maquetador sea mejor que otro para todas las webs, ya que cada web es única y en cada una de ellas hay funciones y características totalmente diferentes.

También debemos preguntarnos a qué nos referimos con “el mejor maquetador visual” ya que, si lo que queremos es que sea fácil de usar será una cosa, que cuente con una gran variedad de funcionalidades otra y que sea rápido otra.

Además, los maquetadores visuales no se ven bien en el 100% de dispositivos debido a que no pueden abarcar todo el código para todas las probabilidades web posibles.

Como la mayoría del mundo quiere una web rápida con una creación sencilla, me he basado en los datos facilitados por un muy buen estudio de velocidad de carga en WordPress realizado por jackcao.com en el que el proceso de testeo se ha hecho del siguiente modo.

Proceso de testeo

Se ha testeado 10 veces cada maquetador en un periodo de 12 horas y se han usado 3 herramientas de testeo:

  1. Google Page Speed Insights
  2. Pingdom Tool
  3. GT Metrix

Condiciones de testeo

  • Cada maquetador visual se instalará en un dominio separado
  • Todos los dominios estarán alojados en el mismo servidor
  • No se usaron plugins de caché
  • Se usó la misma estructura y elementos web
  • Se usó con el tema de WordPress recomendado para cada maquetador o, en su defecto, se usó Generatepress

Parece que Jack le tiene el mismo cariño a Generatepress que yo. De hecho también cuenta con otro artículo en el que demuestra que Generatepress es el tema más rápido, al menos a día de hoy.

Resultados del test

BUILDERGT MetrixPingdom ToolsGoogle Page Speed Insights
mskbsQueries0/100kbsmsQueries0/100FCPSpeedLCPTTITBTCLS
1Live Canvas917196208922542623951.12.42.41.31603
2Nimble Builder1044228208625862722932.15.72.12.100
3Bricks Builder1230580288762047830922.34.32.42.6360
4Oxygen Builder1140307448432560545912.54.02.62.6550
5Wp Bakery863349228538958230852.34.53.42.6410.08
6Zion Builder1043268248530645033852.15.13.62.2270
7Beaver Builder977472397955364251853.04.93.03.2380
8Themify1680341398139062154841.93.34.22.8280
9Seedprod1280307458232261647831.93.14.51.91816
10UX Builder959389268444749634743.05.94.33.31342
11Elementor1032469388155460346763.44.93.84.22184
12Divi1291604368168073450723.55.34.04.72180
13Thrive Architect920509338260669041674.25.94.34.6750
Test de velocidad de maquetadores visuales de WordPress

¿Qué significa tanto numerito? Yo quiero saber cuál es el mejor maquetador visual

Supongo que a os habrá sorprendido encontrar los maquetadores más conocidos en posiciones como en la 5ª, 11ª o 12ª, no sois los únicos.

Analizando los datos podemos ver que la cantidad de consultas, los Kbs, el LCP y el TTI se van incrementando a medida que avanzamos hacia la cola del listado.

Consultas (Queries):

Llamadas para recibir los elementos que componen la web. Pueden ser internas (elementos gráficos, datos de la base de datos, fuentes, etc) o externas (archivos JavaScript, CSS, fuentes, imágenes, etc).

Kbs:

Es el peso de la web en Kilobytes.

LCP:

En inglés (Largest Contentful Paint), es una de las medidas de los famosos web vitals. Básicamente el valor significa lo que tarda el último elemento en cargar.

TTI:

Del inglés (Time To Interactive), el tiempo que tarda en que el usuario pueda interaccionar con la web.

Por lo que he podido ver en la página de Livecanvas, el supuesto ganador de nuestra comparativa, se vende como un constructor que solo carga HTML y CSS ¿Y qué quiere decir con esto? Pues básicamente que para su uso no está cargando JavaScript, esto está muy bien en cuanto a velocidad, pero si hablamos de crear una web dinámica con elementos como un Slider elaborado y molón, lo tendremos difícil. otro punto a tener en cuenta es la cantidad de archivos CSS cargados y, si Livecanvas está desarrollado en Bootstrap 5, podría suponer que solo cargaría un archivo externo y el resto de código CSS estaría incrustado en el HTML en línea.

Antes del desenlace final me gustaría hacer unos tests por mi mismo. Ya que los constructores más conocidos de este listado son WP Bakery, Elementor y Divi y están en unas posiciones un tanto dispares voy a hacer una serie de tests al que se encuentra entre los dos, en la posición 11, Elementor.

Tests de carga de archivos externos en los maquetadores visuales

Si os interesa el tema podéis revisar un artículo del blog para que aprendáis cómo se reduce el contenido css que no se use en WordPress, o cómo cargarlos en algunas páginas de forma selectiva.

Como he comentado anteriormente, la carga de archivos externos es un factor determinante en cuanto a velocidad. Así que he realizado una instalación limpia de WordPress en local y la he “castrado” para evitar que cargue cualquier archivo externo.

Luego he instalado y testeado los siguientes constructores maquetadores visuales: Livecambas, Nimble Builder y Elementor. Todos ellos por separado y con único plugin instalado.

Test de carga de archivos externos de los maquetadores visuales de WordPress

Test de carga de archivos externos al constructor Livecanvas

Me he puesto en contacto con soporte para ver si me facilitaban una versión limitada para testeo. De una forma de lo más amable me han dicho que no disponen de esa facilidad, así que he tenido que comprar la versión de pago, que tiene 30 días de devolución total.

Para poder usar Livecanvas te recomiendan el tema Picostrap y, sino, te obligan a usar uno basado en Bootstrap. Para quien no lo sepa Bootstrap es un framework de CSS para usar los estilos de forma incrustada en el HTML, concretamente en el atributo class.

Bien, tras haber instalado Picostrap y Livecanvas veo que se carga un solo archivo a modo de CDN para Bootstrap, lo cual tiene su lógica:

  • bootstrap.bundle.min.js

Tras haber trasteado un rato el constructor me sorprende que no existe la misma libertad de edición que en maquetadores como Divi o Elementor, hay que adaptarse a las plantillas creadas para cada sección.
Las plantillas son de lo más atractivas y cumplen perfectamente su papel. Tampoco carga ningún otro archivo al haber creado una página con varias secciones. Esto último explicaría la superioridad en cuanto a velocidad de Livecanvas.

Test de carga de archivos externos al constructor de WordPress Nimble Builder

Tras haber instalado Nimble Builder no hay ningún archivo externo cargado. Sin embargo al haber colocado en una página un título, un separador, un ícono, una galería, un mapa y una imagen se han cargado los siguientes archivos.

CSS

  • nb-swiper
  • sek-base-light
  • fontawesome-all-min

Eso sí, a nivel de usabilidad flaquea un poco este plugin. Creo que para aprovecharlo de buena manera habría que tener unos conocimientos previos sobre cómo funciona una página y el customizer de WordPress. Aunque eso sí, la idea de aprovechar el customizer me parece de lo más original.

Test de carga de archivos externos al constructor Elementor

Solo con instalar Elementor he podido ver que carga la siguiente cantidad de archivos en una página:

CSS:

  • elementor-icons
  • elementor-frontend
  • elementor-post-6
  • elementor-global
  • google-fonts-1

JS:

  • elementor-7

Tras colocar un título, un separador, un ícono, una galería, un mapa y una imagen se han cargado los siguientes archivos además de los anteriores:

CSS:

  • elementor-icons-fa-solid
  • elementor-post-7

JS:

  • elementor/assests/js/frontend.min.js
  • elementor/assets/lib/waypoints/waypoints.min.js
  • elementor/assets/js/frontend-modules.min.js
  • elementor/assets/js/webpack.runtime.min.js

Es verdad que la velocidad de carga de estos archivos también depende del servidor que estemos usando pero, aún así, visto con ojos de desarrollador web, creo que la carga de tanto archivo es excesiva. Haciendo una estimación muy general podríamos decir que la carga de un archivo JS o CSS puede variar entre milésimas de segundo a casi 1 segundo dependiendo de la velocidad del servidor y el peso del archivo.

El mejor maquetador Visual de WordPress

Cuál es el mejor maquetador visual de WordPress

Tomando en cuenta los valores de los tests previos voy a decir que el mejor maquetador visual de WordPress es Livecanvas.
Como ya he mencionado anteriormente esta calificación es relativa, y esto es debido a muchos factores. Para esta selección me he centrado en la búsqueda de un maquetador visual que cubra las necesidades de una persona sin conocimientos avanzados de desarrollo web que, además, prefiere velocidad a comodidad de uso, precio, diversidad de funciones o contenido dinámico.
Si el caso fuese para un desarrollador experimentado sin duda diría que el mejor es Gutenberg (aunque no esté calificado como maquetador). Si me centrase en facilidad de uso, dinamismo y mayor libertad para la maquetación podría elegir entre Divi o Elementor, etc.

Resumen del artículo en 3 minutos

Si necesitas un desarrollador de WordPress profesional, consúltanos sin compromiso. Resolveremos tus dudas y llevaremos tu proyecto al siguiente nivel.

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com