Maquetar páginas en WordPress se ha convertido en una necesidad para muchos blogueros, marcas y empresas que quieren crear landing pages personalizadas con el objetivo de vender sus productos o servicios, hacer lanzamientos, promociones, publicidad o captar nuevos leads.
Cuando empecé a diseñar páginas web (primero en el bloc de notas con HTML y luego con Dreamweaver), crear y maquetar este tipo de páginas era mucho más complejo que ahora.
En los últimos años han aparecido varias herramientas y plugin de los llamados "arrastrar y soltar" que nos han facilitado muchísimo maquetar páginas en WordPress.
Resumen
¿En qué consisten estos plugins para maquetar páginas en WordPress?
Básicamente, incorporan funcionalidades para diseñar páginas (y posts) personalizadas de manera muy visual, es decir, podemos diseñar e ir viendo el resultado a la vez. Y todo con solo arrastrar elementos y colocarlos (soltarlos) en el lugar que queremos que aparezcan.
✅ Su gran ventaja es que no se necesitan grandes conocimientos de diseño a través de código.
❌ Su inconveniente en que suelen incorporar infinidad de opciones y hay que trabajarlos mucho para usarlos con fluidez.
Por ese motivo, hoy he querido recopilar algunos plugins para crear y maquetar páginas en WordPress, con vídeos y ejemplos de cada uno de ellos.
10 plugins maquetar páginas en WordPress
#1 Divi Builder
Divi es, en mi opinión, la mejor plantilla premium que existe para WordPress. Si eres lector habitual de este blog o sigues mis trabajos, sabrás que es el tema que uso en el 90% de mis diseños.
Divi está disponible en dos formatos:
- Plantilla para WordPress.
- Plugin (Divi Builder) para instalar y trabajar con su editor en una plantilla diferente a Divi. Si te llama la atención esta opción, mi consejo es el que lo pruebes con OceanWP, pues juntos hacen un tándem muy completo.
¿Cómo funciona Divi Builder?
Con su sistema de arrastrar y soltar, se organiza a través de módulos, filas y columnas, lo que permite diseñar todo tipo de páginas. Además, incorpora 46 módulos de contenido, tales como acordeones, sliders, botones, audios, vídeos, personas, llamadas a la acción o formularios.
Y aquí te dejo un tutorial en el que te explico cómo crear una página web con Divi paso a paso, con un ejemplo real.
#2 Elementor
Elementor es uno de los últimos que ha aparecido, pero que ha revolucionado el mercado de los maquetadores visuales para WordPress.
Cuenta con una versión gratuita y otra de pago (Elementor Pro), que incorpora funcionalidades más avanzadas.
Similar a otros plugins para maquetar páginas en WordPress, con Elementor podemos crear sitios web de gama alta y píxeles perfectos a velocidades récord. Además, se adapta a cualquier tema, cualquier página y cualquier diseño.
Aquí puedes ver cómo funciona:
Y esta es su carta de presentación:
#3 Thrive Architect (Thrive Content Builder)
Es otro de los plugins más utilizados por los diseñadores para maquetar páginas en WordPress.
Se trata de un plugin 100% visual, que permite diseñar cualquier tipo de página en tiempo real.
Su particularidad es que está orientada a la generación de leads.
Thrive Content Builder incorpora más de 130 temas a partir de los que crear landing pages.
El plugin incluye decenas de elementos (texto, imágenes, botones, formularios,) divididos en diferentes categorías: simples, multi-estilo y avanzados.
Aquí puedes ver un tutorial muy completo de mi colega José Antonio Carreño.
#4 Visual Composer / WPBakery Page Builder
Visual Composer, ahora conocido como WPBakery, fue uno de los plugins pioneros en el diseño y maquetación para WordPress. En mi opinión, con el paso del tiempo se ha quedado atrás por la aparición de nuevos competidores.
La diferencia entre Visual Composer y WPBakery es que el primero sirve para crear sitios web completos y el segundo se usa específicamente para diseñar y maquetar contenido en WordPress.
Lo he usado bastante y tengo que reconocer que al principio me costó un poco acostumbrarme, pero cuando le pillas el punto, es tan sencillo e intuitivo como el resto.
Al igual que los anteriores, incluye todo tipo de elementos para maquetar una página en WordPress: columnas, filas, cuadros, botones, etc.
#5 Page Builder by SiteOrigin
Page Builder de Site Origin es el primer plugin de este tipo que utilicé cuando empezaba a diseñar webs con WordPress, hace ya unos cuantos años.
Se trata de un sencillo constructor de páginas que permite montar diseños adaptables usando widgets, arrastrando y soltando.
Es compatible con cualquier plantilla y sus resultados, a pesar de no ser tan profesionales como con los anteriores plugins, no están nada mal si lo que buscas es un diseño sencillo, y especialmente tratándose de un plugin gratuito.
#6 Beaver Builder
Beaver Builder es otra opción interesante para maquetar páginas en WordPress. Como en el caso de Elementor, dispone de una versión gratuita y otra premium con funcionalidades más completas y avanzadas.
¿Cuáles son las particularidades de Beaver Builder?
- Ofrece licencias ilimitadas y soporte mundial.
- Incluye docenas de plantillas para diseñar páginas.
- Para ahorrar tiempo, solo hay que elegir una plantilla y reemplazar las imágenes y el texto por el que quieras.
- Puedes optar entre variedad de estilos utilizando sus ajustes preestablecidos.
- Se puede utilizar con cualquier tema y, si cambias de plantilla, no vas a perder el contenido. Incluso si dejas de usar Beaver Builder, tu contenido vuelve al editor de WordPress, cosa que no suele suceder con algunos de los anteriores.
Aquí puedes ver un ejemplo real de página web maquetada con Beaver Builder.
#7 Gutenberg
Gutenberg es el editor propio de WordPress para maquetar páginas. Está disponible desde hace un tiempo, a partir de la versión 5.
Ahora mismo, es posible desactivarlo y seguir editando el editor clásico, pero imagino que en un futuro será de uso obligatorio para todos los usuarios de WordPress.
En esta captura puedes ver cómo aparecen los bloques a la hora de crear una entrada. Por defecto salen los más utilizas, pero hay muchos más disponibles.
De momento es algo básico, pero con el tiempo irá sumando nuevas opciones y funcionalidades. Por lo tanto, te recomiendo ir acostumbrándote a él a la hora de crear y publicar tus entradas (para páginas no lo recomiendo debido a sus limitaciones).
También tienes la opción de añadir bloques adicionales a Gutenberg con cualquiera de estos 7 plugins.
Y aquí te dejo un vídeo de Fernando Tellado en el que explica cómo convertir entradas clásicas en bloques de Gutenberg, cosa que te recomiendo ir haciendo poco a poco.
#8 Live Composer
Live Composer es un plugin gratuito de código abierto para maquetar contenido en WordPress.
Similar a los anteriores, permite crear diseños sin necesidad de tener conocimientos avanzados, arrastrando y soltando elementos con su editor visual.
#9 Oxygen Builder
Oxygen es uno de los últimos plugin para maquetar contenido en WordPress que he descubierto. Al igual que los anteriores, permite colocar elementos arrastrando y soltando.
Revisando su documentación (no lo he probado todavía), he encontrado una opción que me ha llamado la atención: incluye la posibilidad de crear encabezados personalizados visualmente, incluidos headers fijos y superpuestos.
#10 Brizy
Brizy es el último plugin de este tipo que he conocido (me hablaron de él hace unos días por Twitter). En su web se "venden" como el creador de sitios web más fácil de usar, ya que no es necesario tener habilidades de diseñador o desarrollador.
Sus puntos fuertes:
- Intuitivo y sin desorden. Solo muestra lo que es necesario para desarrollar una tarea concreta y oculta todo lo que no es.
- Edición en tiempo real. Permite crear diseños de forma visual y ver los cambios en directo.
- Arrastrar y soltar. Permite organizar y mover todos los elementos simplemente arrastrando el ratón.
- Innovador. Se basa en React, la biblioteca JavaScript de código abierto desarrollada por Facebook.
- Muy completo. Incluye multitud de elementos (formularios, sliders, pestañas, etc) en su versión gratuita.
Aquí puedes ver un ejemplo de su funcionamiento:
Hasta aquí mi repaso por estos 10 plugins para diseñar y maquetar páginas en WordPress ¿Los conocías todos? ¿Cuál usas tú? ¡Cuéntame!
Y recuerda que, si necesitas ayuda con tu sitio, puedes echarle un vistazo a mi servicio de diseño web.
¡Excelente aportación, Max! Hace algunos días que pienso en diseñar una landing, creo que probaré alguno de los dos primeros...
Algo que siempre me pregunto es como se sabe cuanto "pesa" un plug-in o cuántos recursos va a consumir antes de instalarlo... ¿Alguien lo sabe? ?
Comparto tu post, Max, me ha gustado mucho
Saludos ?
Hola Natalia,
Puedes consultar esa info en las especificaciones del post. Otra opción es instalarlos y hacer distintas pruebas de medición para saber el tiempo de carga.
Saludos!
Hola Natalia, para landing te recomiendo el quinto Page Builder by SiteOrigin, es super sencillo y el resultado es muy profesional.
¡Hola Max!
Los he probado todos menos Beaver Builder. De momento el que más me está gustando es el Elementor la versión Pro que te permite bastantes más cosas que el básico, aunque el básico está genial y es una competencia muy digna para Divi.
Divi me gusta, pero a veces se me hace corto y lo que pasa con la mayoría de drag&drops que te dejan una maraña de código CSS por detrás fea fea.
¿un abrazo grande y gracias por este post!
Hola Esti 🙂
¿Entonces me recomiendas la versión pro de Elementor? (no eres la primera persona que me ha dicho eso mismo).
Divi se ha actualizado mucho en los últimos meses y ha incorporado funcionalidades chulas.
Yo creo que el problema del código que dejan lo tienen todos (o casi todos). Es decir, te facilitan mucho el trabajo, pero tienen esa pega.
Un abrazo!
Hola Max,
Primero de todo, muchas gracias por incluir mi video en tu artículo. Espero que pueda servir de ayuda a todos aquellos que lean este post.
La verdad es que yo soy de Elementor y/o Thrive Content Builder (en ese orden). Elementor es un plugin relativamente nuevo, pero en el poco tiempo que llevan para mi han superado a otros competidores.
También es cierto que Divi no lo he probado, pero el hecho de que sea un maquetador en el que se utilizan bloques como en Visual Composer me hace dudar de que me vaya a gustar. Y es que Visual Composer cuando lo he utilizado me ha dado verdaderos problemas y quebraderos de cabeza. Le tengo un poco de "manía". 😛
Gran artículo, como prácticamente siempre. ¡Te lo comparto!
¡Un abrazo!
Hola Jose 🙂
No eres el primero que me habla de bien de Elementor. Me estáis convenciendo jaja
Bueno, ya sabes que al final todo es acostumbrarse a una herramienta y sacarle todo el partido.
Un abrazo!
De la lista he probado Beaver Builder, Visual Composer, Divi y otro media docena que ya no recuerdo el nombre.
El que menos me ha gustado ha sido Visual Composer, lo encuentro lento y que para lograr ciertos efectos hay que instalar una buena cantidad plugins.
De un tiempo para aca he trabajado con Divi y me gusta es fácil, rapido y en el blog de Elegant themes siempre comparten buenos recursos
Beaver lo instale hace un mes en la web de un cliente porque necesitaba un par de landings, su sitio esta usa Génesis y al instalar el plugin de Divi rompió la web . Entonces probamos con Beaver Builder y todo bien. Es muy bueno creo que un poco más liviano y no crea tanto codigo sucio según he leido.
En foros y algunos blogs tambien he leido buenos comentarios de elementor, voy a ver cuando me animo lo pruebo
Buen post Max
Saludos
Hola Albeiro,
A mí Visual Composer es probablemente el que menos me gusta, pero al final, si tienes que utilizarlo por obligación, como es mi caso en la web del trabajo, te acostumbras.
El que más uso es Divi, me encanta. Y de Elementor todo el mundo me habla muy bien, así que probaré a maquetar alguna página con él.
Gracias por pasarte y comentar.
Saludos
Hola Max. Como siempre...tu post es fantástico y me ha gustado mucho. Me gustaría que me solucionaras una duda que tengo, verás... Tengo un sitio web hecho con DIVI y me gustaría hacer una página más (dentro de mi sitio web) con otro plugin de los que has descrito en éste informe. Será compatible?...podré maquetarlo y no habrá problemas de lectura?..
En definitiva...puedo hacer la página (es un ejemplo) "sobre mi" con DIVI, el "quienes somos" como elementor, el "productos" con beaver Builder y una landing page con Thrive Content Builder?.
Muchas gracias anticipadas por tu respuesta.
Saludos
Hola Gonzalo,
En principio sí son compatibles. Yo he tenido instalados en el mismo WordPress Divi Builder y Visual Composer.
¿Cuál es el problema? Que son plugins que pesan mucho y, por ese motivo, solo recomiendo tener instalado uno y no varios.
Si decides instalar más de uno, te recomiendo hacer pruebas en el tiempo de carga y los recursos consumos con alguna herramienta como Pingdom y GTmetrix.
Por favor, mantenme informado, me interesa este tema 😉
Te dejo mi correo para que me escribas: hola@maxcf.es
¡Saludos!
Alguien puede decirme que sucede si instalamos 2 Plug ins maquetadores al mismo tiempo? por ejemplo construir una pagina con Beaver y luego otra página con Elementor dentro del mismo sitio web
Hola Manuel,
No te lo recomiendo. Los maquetadores son plugins de gran tamaño por todos los recursos que contienen. Por lo que, a mayor tamaño, mayor tiempo de carga del sitio web.
Además, sirven para lo mismo: maquetar páginas.
Mi consejo es que elijas uno solamente.
Por cierto, ¿has probado Divi? 😉
Lo que hize fue maquetar un sitio con Beaver.... pero Beaver no tienen algunas heramientas que Elementor si tienen. Ahora... si elimino el plug in Beaver, se perdera el trabajo ralizado en el sitio.
Elementor si contiene, por otro lado, los textos que se deplegan con clicks
Te agradezco mucho por tu consejo Max, feliz año 2018!
Beaver, Beaver, Beaver... No hay color. 🙂
Mas Liviano, más flexible, No precarca tooodos los estilos como Divi y si prescindes conservas todo el contenido.
Yo utilizo desde siempre Visual Composer con el Genesis Framework y me va genial. Los únicos cons que veo son:
- Algunas acciones van un poco lentas (o tal vez sea por otros aspectos de mi web).
- No es un maquetador en vivo 100% ya que para editar algo se te abre una ventanita.
Un saludo!
Hola Samantha,
¡Qué bueno! Nunca había visto la combinación de Visual Composer con Genesis.
Si te funciona bien y cubre tus necesidades, estupendo.
Muchas gracias por pasarte.
Saludos!
Me pareció muy interesantes los plugin que nos compartes en tu site. ya que por el momento aun no los utilizo pero estoy interesado en darle un look diferente a mi web. muchas gracias.
Buenas y gracias por este post informativo.
Veo que todos estos editores se instalan como plugin, ¿hay algún editor como SiteOrigin Page Builder que sea gratuito pero que no necesite de instalación de plugin?
He encontrado un editor de páginas gratuito que se llama Themes Generator, es relativamente nuevo pero es totalmente funcional. De momento estoy contenta
con él. Si lo has usado ¿podrías darme una opinión/valoración?
Hola Rosa,
Si buscas un plugin gratuito, creo recordar que Elementor tiene una versión free (más limitada que la pro).
El que te recomiendo al 100% es Divi. De hecho, puedes probarlo de forma gratuita en su propia web: elegantthemesdemo.com.
En cuanto a Themes Generator, no puedo darte mi opinión, no lo conozco. Como te digo, siempre maqueto con Divi 🙂
Saludos
Excelente por la información, realmente soy nuevo en esto pero he utilizado uno que no recuerdo su nombre , que me parece fácil pero pesado a la vez, tratare de ponerme en contexto con cada uno a ver que tal me va hasta ahora el Live Composer, pero es cuestión de necesidades. apenas lo estoy chequeando.
Hola Darry,
Muchas gracias por tu comentario. Así es, todo depende de las necesidades de cada proyecto y de las preferencias personales.
No conocía Live Composer, pero le echaré un vistazo. Si me lees habitualmente, ya sabes que el editor que uso y recomiendo es Divi 🙂
Saludos
Hola. Tienes idea del valor de divi?
Hola, Gressy:
Si te refieres al precio de Divi, puedes verlo directamente en la web de Elegant Themes.
Saludos