Un page builder o maquetador visual es un software que te permite diseñar webs con bloques o elementos “prefabricados”.
Y para los que nos dedicamos al diseño web, es todo un salvavidas.
En lugar de tener que pelearte con el código HTML, CSS y PHP como a la antigua usanza, con los editores visuales solo tienes que buscar el elemento que quieras, clicarlo y arrastrarlo hasta la página (lo que se conoce como “clic & drop”).
¿Que quieres una tabla? Escoges el bloque, lo arrastras y lo sueltas.
¿Una galería a 3 columnas en la parte izquierda de la página? Divides la página en columnas, arrastras la galería y la incrustas.
Las opciones son infinitas.
El “problema” es que la oferta de page builders para WordPress también lo es. Y con tantas opciones resulta complicado saber con cuál quedarte.
Pero tranquilo, porque con este post te vamos a echar una mano.
Aquí analizamos 5 de los mejores maquetadores visuales CMS, sus puntos fuertes y débiles.
Y además también nos vamos a “mojar”.
Al final del post te contamos cuál es el que nosotros usamos, tanto en la agencia como en la Escuela Tu Posicionamiento Web. 😉
Preparados, listos… ¡A maquetar!
Índice de contenidos del artículo:
✅ Los 5 mejores page builders de WordPress + qué debes tener en cuenta al escoger un maquetador visual
Para que un maquetador visual se considere “bueno”, debería cumplir al menos 3 puntos:
- Fácil de usar.
- Que genere un código HTML limpio (optimizado para el SEO).
- Muchas opciones de personalización.
Puntos que, en mayor o menor medida, cumplen los 5 que hemos incluido en esta lista.
Ahora que sabes en qué aspectos debes fijarte, vamos a ver esos page builders.
👉 1. Elementor
Elementor nació en 2016, y en apenas unos años se ha convertido en uno de los maquetadores visuales más utilizados.
Y no es por casualidad.
Su versión gratuita es bastante completa. Cuenta con algunos bloques muy prácticos, como un carrusel de imágenes, cajas de iconos o un divisor en columnas.
Otro detalle interesante es que te permite ocultar o modificar elementos en la versión responsive de la página.
Así, si en la versión para ordenador has puesto un slider, en móviles puedes ocultarlo o cambiarlo por una imagen estática para que no entorpezca la navegación.
Lo mejor es que te permite ver a tiempo real los cambios que vas haciendo en la página (lo que se conoce como live builder), en lugar de tener que entrar y salir constantemente de la vista previa.
Y si quieres añadir algún elemento más personalizado, puedes usar el bloque de código HTML o incluso crear hojas de estilo CSS globales.
Pero si quieres sacarle el máximo partido, lo mejor es utilizar la versión de pago: Elementor Pro.
Con esta versión tienes acceso a una infinidad de bloques, desde tablas de precios hasta distintos menús de navegación secundarios.
Elementor Pro cuenta con varios planes de pago, y está disponible a partir de 49 $ al año.
👉 2. Page Builder by SiteOrigin
Si eres de los que disfruta hurgando en el CSS, este maquetador puede ser una buena opción.
Todos los maquetadores de esta lista te permiten añadir estilos personalizados. La diferencia es que, además, Page Builder te da muchas facilidades para modificar el diseño de un elemento específico (ponerle borde a una fila, un color de fondo, etc.).
Es un maquetador sencillo pero muy completo. En su versión gratuita cuenta con más de 20 widgets, a los que se pueden añadir otros 21 prémium (a partir de 29$).
Además te ofrece varias plantillas gratuitas que puedes utilizar como base para tus diseños.
Un aspecto curioso de Page Builder es que cuenta con dos editores diferentes: un constructor visual y otro más “tradicional” (trabajas en el back end de WordPress), para que uses el que más te guste.
El único problema es que, si lo desactivas, SiteOrigin deja muchos shortcodes o códigos abreviados.
👉 3. Divi Builder
El plugin Divi Builder está pensado para utilizarse en conjunto con el tema Divi.
Si es tu caso, la ventaja de utilizar Divi Builder es que no van a surgir incompatibilidades entre el maquetador y el tema (aunque también se puede usar con otras plantillas y temas de WordPress).
Al igual que con Elementor y Page Builder, puedes ver a tiempo real los cambios que estás haciendo en la página.
Además se trata de un editor muy personalizable. Puedes modificar el tamaño de fuente, el color de los elementos, el espacio entre las columnas, etc.
Otro detalle muy interesante es que te permite crear tus propias plantillas, para reutilizarlas las veces que quieras.
El único problema, al igual que pasaba con Page Builder, es la cantidad de códigos que deja cuando lo desactivas.
Los únicos planes disponibles son de 89 $ y 249 $, pero en ellos se incluye todo el rango de productos de Divi.
👉 4. Beaver Builder
Beaver Builder es otro peso pesado del mundo de los maquetadores para WordPress.
Cuenta con dos versiones: la lite (o gratuita) y la de pago.
La versión lite está un poco limitada. Te permite poco más que meter bloques de texto, fotos vídeos y código HTML personalizado. Además no ofrece ninguna plantilla predefinida.
Por su parte, la versión de pago te da acceso a más de 50 plantillas e incluye bastantes opciones para modificar el CSS a tu gusto.
Aunque eso sí, los precios son un poco elevados (99 $ el plan más económico).
Lo más interesante es que Beaver Builder no deja códigos abreviados tras la desactivación.
👉 5. BeTheme
En realidad BeTheme no es un maquetador, sino un tema de pago de Wordpress. Pero lo hemos incluido en esta lista porque incluye un maquetador propio (Muffin Builder).
BeTheme cuenta básicamente con los mismos bloques predefinidos que el resto de maquetadores de la lista.
Pero la gran diferencia es su enorme cantidad de diseños.
En total más de 500 webs completas “prefabricadas” que puedes instalar con un solo clic.
¿Que no quieres utilizar siempre el mismo diseño de página?
No pasa nada, porque BeTheme te da bastantes opciones para modificar lo que quieras, incluyendo:
- Fuentes tipográficas.
- El aspecto del header y el footer.
- El logo.
- Los colores de la página.
- Etc.
Además también te permite crear temas hijo de la plantilla original.
No incluye Live Builder, es decir, no puedes ver los cambios en tiempo real.
BeTheme está disponible por 59 $.
✅ Ya has visto cuáles son los mejores maquetadores visuales de WordPress… pero ¿con cuál nos quedamos nosotros?
Porque dijimos que te íbamos a dar nuestra opinión, ¿no?
Y es que nosotros llevamos ya más de 13 años diseñando páginas webs, así que hemos tenido la oportunidad de probar varios de los maquetadores visuales que han ido surgiendo.
Por eso tenemos muy claro que para nosotros no hay un solo favorito, sino dos. 😉
El primero es Elementor Pro, la versión de pago de Elementor.
Es un maquetador muy intuitivo, con unas funcionalidades muy potentes y con un código bien optimizado.
Pero lo que más nos gusta de trabajar con él es que, en apenas unos minutos, puedes tener hecho el esqueleto de una web.
Y cuando te dedicas al diseño de forma profesional, más rapidez significa más rentabilidad.
De hecho Elementor Pro es la primera opción que les recomendamos a nuestros alumnos del Máster de Optimizer Manager.
>> Entra aquí para ver los planes de Elementor Pro. <<
Por un motivo muy similar Be Theme es nuestro segundo favorito.
Lo que nos encanta de este tema/maquetador es la inmensa biblioteca de webs prediseñadas que tiene, y que puedes instalar en un solo clic.
De nuevo es una solución muy buena para acelerar el proceso de diseño y seguir ofreciendo un resultado de calidad. Tanto es así que nosotros la hemos usado con muchísimos clientes de la agencia.
>> Aquí puedes adquirir la plantilla + maquetador visual Be Theme. <<
Elementor Pro es lo mejor para principiantes y no tan principiantes, mientras que a Be Theme cuesta un poco más cogerle el truco.
Pero una vez los dominas, ambos son herramientas muy potentes para cualquier diseñador.
✅ ¿Tienes claro qué page builder de WordPress vas a usar?
Si has llegado hasta aquí, es muy probable que te dediques al diseño web y estés buscando un maquetador visual.
Uno con el que seguir ofreciéndoles un resultado de calidad a tus clientes, pero que a la vez te permita trabajar más rápido para rentabilizar tu tiempo.
Ahora bien, ¿y si además les pudieras ofrecer a tus clientes una web que..?:
- Atrae visitas.
- Convierte esas visitas en clientes.
En definitiva, una web que no solo es visualmente atractiva, sino que además les ayuda a aumentar su facturación.
Sería una buena forma de aumentar el valor de tus servicios, diferenciarte de la competencia y subir tus tarifas, ¿no? 😉
Pues ese paso ya lo han dado muchos diseñadores web (y no diseñadores) que se han formado con nosotros para reinventarse como Optimizer Managers (aquí puedes conocer a algunos).
Y es que el Optimizer Manager hace justo eso: combina el diseño con estrategias digitales para crear webs que ayudan a sus clientes a vender más.
>> En esta página tienes toda la información sobre el Optimizer Manager y cómo puedes formarte como uno. <<
Si te interesa, solo tienes que apuntarte a la lista de espera y te avisaremos cuando volvamos a abrir las plazas del máster.
“Ufff, pero es que yo de esto de SEO y estrategias online no tengo ni idea”.
No pasa nada, porque en el máster te enseñamos a diseñar estas estrategias online desde cero.
Además, al inscribirte a la lista de espera recibirás un ebook gratuito donde te explicamos los pasos a dar para empezar a aprender SEO.
Así le pierdes un poco el miedo. 😉
Entra en el enlace y, si crees que podemos ayudarte a ofrecerles un servicio de más valor a tus clientes, apúntate.