¿Qué es un Constructor Visual (o Page Builder)?
Un constructor visual es un maquetador que te permitirá diseñar y desarrollar sitios web sin conocimientos de HTML, CSS, JS y PHP; en otras palabras, te permitirá tener un sitio web profesional, sin código y sin experiencia.
Para poner un ejemplo, si el editor de bloques de WordPress te resulta fácil de usar, entonces un constructor visual también lo será.
Por otro lado, no tendrás que gastar tiempo y dinero en contratar un diseñador o un desarrollador en Fiverr, ya que los únicos costos en los que incurrirás serán tu tiempo y el costo del plugin que elijas.
1. Elementor PRO
Elementor PRO es el constructor visual más popular de WordPress y es utilizado por sitios web y bloggers en todo el mundo. De hecho, con más de 5+ millones de instalaciones activas esto no es ninguna sorpresa.
Elementor cuenta con una versión gratuita y una premium; sin embargo, como podrás ver a continuación la versión gratuita es muy limitada.
Un dato interesante es que MagoWP está construido con Elementor PRO y GeneratePress. Con esta combinación hemos tenido muy buenos resultados y hemos podido personalizar nuestro sitio web fácilmente.
1.1. Características Destacadas
Elementor cuenta con algunas características que podemos destacar y que seguramente encontraras muy útiles si te decides por esta opción:
- Facilidad de uso: No es necesario dedicar horas de aprendizaje para usar Elementor. Su sistema de arrastrar y soltar módulos permite que hasta el más novato cree diseños impresionantes.
- Constructor de sitios web: Con Elementor PRO es posible construir un sitio web desde cero, ya que con su creador de temas podrás desarrollar todas las páginas y elementos que necesita tu sitio web: cabecera, pie de página, archivos, búsqueda, página 404 y mucho más.
- Efectos: No es necesario codificar para crear páginas únicas y dinámicas. Los módulos de Elementor permiten el uso de estilos, efectos y animaciones para todo: filas, columnas, botones, texto y todo lo que se te ocurra.
- SEO: Su código está optimizado y cuenta con la integración de plugins reconocidos mundialmente como Yoast SEO.
- WooCommerce: Elementor cuenta con múltiples módulos para sitios de comercio electrónico. Esto lo convierte en uno de los mejores constructores visuales para la maquetación de tiendas online.
Ten en cuenta que si bien Elementor es intuitivo y fácil de usar, dominarlo a la perfección requerirá bastante práctica, la cual irás adquiriendo conforme pase el tiempo.
1.2. La Interfaz de Elementor
La interfaz de elementor es super sencilla y eso es grandioso para principiantes. La maquetación de un sitio web con Elementor es muy rápida y consiste en arrastrar y soltar los elementos en columnas o filas.
Como puedes ver en la imagen anterior, Elementor cuenta con un panel de administración con todos los módulos, y en base a ellos podrás armar tu pagina segun tus necesidades. Por otro lado, todos los ajustes y modificaciones se pueden ver en vivo, de modo que no tendrás que cargar paginas ni cambiar de pestañas de forma recurrente.
1.3. Módulos Disponibles
Elementor PRO cuenta con más de 50 módulos listos para un maquetado fácil y rápido. Encontrarás módulos para casi cualquier tarea: imágenes, formularios, testimonios, listas de precio y mucho más.
Y eso no es todo; si a pesar de los módulos que vienen incluidos aún necesitas más, puedes utilizar extensiones como Ultimate Addons for Elementor que ofrece 40+ módulos nuevos, 100+ templates y 200+ bloques para ahorrar tiempo y lograr diseños realmente únicos y profesionales.
1.4. Personalización
En Elementor encontraremos tres pestañas básicas en todos los módulos y widgets disponibles: Contenido, estilo y personalización.
- Contenido: Es donde realizamos los ajustes básicos del módulo correspondiente, como cantidad de entradas en el módulo del blog o cantidad de elementos en una lista.
- Estilo: Permite darle vida al módulo y volverlo más atractivo con colores, tipos y tamaños de fuente, espaciado y una infinidad de opciones disponibles.
- Avanzado: Esta pestaña nos permite configurar efectos, animaciones, hacer nuestro contenido responsivo e insertar código CSS adicional.
En resumen, la personalización de módulos en Elementor está diseñada para usarse por cualquier persona y lograr resultados increíbles. Inclusive si nunca has utilizado un constructor visual antes, Elementor PRO es una de las mejores opciones para empezar.
1.5. Plantillas Disponibles
Con más de 300+ plantillas profesionales disponibles, construir nuestro sitio web no será un problema. Esta característica es perfecta para personas que no son muy creativas o conocen poco de diseño.
Por otro lado, el constructor de temas de Elementor es otro plus que te permitirá crear un sitio web desde sus cimientos. Con el constructor de temas crearás desde la cabecera, el pie de página, el archivo del blog, la página de búsqueda, la página de error 404 y mucho más.
Tip: Una plantilla que recomienda Elementor es Hello Theme, ya que es un canvas en blanco diseñado para crear tu pagina desde cero.
Algo muy importante que mencionar es que con Elementor te ahorraras una buena cantidad de dinero, ya que incluye tantas funciones, que casi no será necesario adquirir plugins adicionales.
2. Divi Builder
Divi de Elegant Themes es uno de los mejores constructores visuales para WordPress y tiene muchas características únicas que lo diferencian de sus competidores. Lo primero que debes entender es que al comprar una suscripción de Divi tendrás acceso un paquete que incluye 5 herramientas distintas:
- La plantilla Divi: Es la bandera de Elegant Themes (el desarrollador) e incluye todas las funcionalidades del constructor visual (Divi Builder).
- La plantilla Extra: Enfocada en sitios web de revistas y noticias que también tiene incorporado el constructor visual.
- El plugin Monarch: Te permitirá agregar botones para compartir y captar seguidores en redes sociales.
- El plugin Bloom: Sirve para crear formularios y ventanas emergentes (pop ups) de forma visual y que permite captar leads y conversiones de tus visitantes.
- El plugin Divi Builder: Es el constructor visual en sí, el cual puedes instalar en cualquier plantilla.
Lo interesante es que las plantillas Divi y Extra incluyen como parte de sus funcionalidades el constructor visual, por lo cual, si utilizas cualquiera de ellas, no tendrás que instalar el plugin Divi Builder, lo cual es muy bueno ya que garantiza soporte y compatibilidad constante.
Por otro lado, Divi es el único que tiene la opción de comprar una licencia de por vida, lo cual es muy importante si planeas utilizarlo en el largo plazo o si eres una agencia de marketing digital, ya que podrás utilizar tu licencia en sitios web ilimitados.
Ahora que ya tienes una idea, te habrás dado cuenta que la relación precio-calidad de Divi es muy superior y casi insuperable para cualquier persona que requiera acceso a todas estas herramientas.
2.1. Características Destacadas
El caso de Divi es bastante especial ya que cuenta con algunas características que no encontramos en ninguno de sus competidores:
- Precio-calidad: Esta es quizás la característica más destacada de Divi, y es que el valor que obtienes por tu dinero es muy elevado, y probablemente ningún competidor se acerca a ello.
- Suscripción de por vida: Divi cuenta con una opción para adquirir una suscripción de por vida y te permitirá ahorrar en el largo plazo.
- Comunidad: Cuenta con una comunidad muy activa y podrás encontrar recursos y documentación de forma fácil.
- Soporte 24×7: Tengo que mencionarlo, el soporte de Divi es increíble y tendrás acceso a un chat disponible 24×7 para hacer consultas técnicas y recibir soporte cuando más lo necesites.
- Woocommerce: Encontrarás todo tipo de módulos disponibles, desde galerías de productos, listas de precio, botones y muchos más. Todo para crear un comercio electrónico sumamente atractivo y profesional.
2.2. La Interfaz de Divi
Divi está diseñado para personas que no tienen conocimientos de código ni de programación y tiene una interfaz intuitiva que se basa en agregar elementos en bloque.
Ejemplo: Para agregar una fila o columna debes dar clic en el icono de agregar, luego se mostrarán los módulos disponibles, seleccionas uno y de ese modo vas creando el contenido y las páginas.
La interfaz es un poco diferente a la de Elementor, pero es probablemente una de las más fáciles de utilizar para personas que dan sus primeros pasos en WordPress y con todos los plugins que incluye la suscripción, definitivamente tendrás todo lo que necesitas en el mismo lugar.
2.3. Módulos de Disponibles
Con más de 50+ módulos personalizables, Divi aporta todos los elementos necesarios para maquetar un sitio web único, y si no es suficiente con ellos, recuerda que como parte de tu suscripción a Divi tendrás acceso a los plugins Monarch y Bloom, los cuales te servirán para extender las funciones de tu sitio web.
2.4. Personalización
Para personalizar un módulo en Divi tendremos tres opciones: contenido, diseño y avanzado, y cada una de ellas permite realizar acciones diferentes, por lo cual al utilizar todas juntas podrás lograr un diseño prácticamente único. Veamos de forma breve en qué consiste cada una de las opciones:
- Contenido: La pestaña de contenido permite realizar ajustes específicos de cada módulo, por ejemplo si hemos utilizado el módulo del acordeón, en esta pestaña podremos agregar todos los elementos del mismo.
- Diseño: Esta pestaña permite modificar colores, tamaños y formas para hacer que nuestro módulo sea 100% original y se diferencie del resto.
- Avanzado: Esta es la ultima opcion y es donde podremos ver efectos de animación, ajustes responsivos y donde podremos insertar código CSS adicional.
Al igual que Elementor, utilizar Divi es muy sencillo, pero si quieres sentirte muy comodo y utilizarlo a la perfección vas a necesitar algo de tiempo y practica (como todo en la vida).
2.5. Plantillas Disponibles
Divi incluye cerca de 200 packs prediseñados (cada pack incluye páginas como: inicio, servicios, tienda, blog, nosotros, etc.) lo cual hace que Divi cuente con un total de 1468 páginas individuales y listas para utilizar. Sin lugar a dudas esta es una de las bibliotecas más grandes de todas y solo viene en aumento.
Por otro lado, para facilitarte la búsqueda la biblioteca se encuentra ordenada por categorías como: Salud, tecnología, comercio, educación, negocios y más; por lo cual te sera muy fácil encontrar un diseño que se acomode a tu sitio web.
3. Beaver Builder
Beaver Builder es un constructor ligero y fácil de usar para principiantes y nos ha demostrado excelentes resultados al momento de crear diseños profesionales en muy poco tiempo.
Si bien es cierto que Beaver Builder incluye una versión gratuita, la misma se encuentra limitada a módulos básicos y no cuenta con acceso a los templates que están disponibles en la biblioteca de diseño.
Para entender mejor qué incluye cada uno de sus planes veamos el siguiente comparativo:
Como puedes ver, la mayoría de las características avanzadas que necesitamos para crear un sitio web profesional empiezan en el plan Standard; pero lo bueno es que Beaver Builder ofrece un descuento muy significativo (40%) en la renovación de todos sus planes.
3.1. Características Destacadas
- Rendimiento: Los constructores visuales suelen ser pesados y afectar los tiempos de carga de tu sitio web; sin embargo, Beaver Builder solo carga los estilos y scripts de los elementos que utilices, lo cual ayuda a solucionar este problema en gran medida.
- Creación de plantillas: Además de contar con plantillas predefinidas también podrás crear tus propias plantillas. Esta función es muy útil cuando quieras crear y exportar tus plantillas a otras instalaciones de WordPress.
- Compatibilidad: No importa cuál sea el tema que tengas, este plugin funciona con casi todos.
- Diseño Responsivo: Está optimizado para todo tipo de pantallas: Escritorio, tabletas y celulares. Hoy en día el diseño móvil es de gran importancia y con Beaver Builder tendrás este tema solucionado.
- Descuentos: Todas las suscripciones anuales de Beaver Builder se renuevan con un jugoso 40% de descuento.
3.2. La Interfaz de Beaver Builder
La interfaz de Beaver Builder es muy simple y te permitirá realizar modificaciones y ajustes con solo arrastrar y soltar elementos. Una vez que agregues un elemento, puedes modificarlo mediante una pequeña ventana emergente que podrás situar en cualquier lugar.
Por otro lado, destacamos que podemos configurar su interfaz en modo oscuro para lograr una excelente experiencia de usuario (UX) y adaptable para todos los gustos.
3.3. Módulos Disponibles
Todas las versiones premium de Beaver Builder incluyen módulos que se dividen en seis categorías: Básico, Medios, Acciones, Diseño, Información y Publicaciones.
Beaver Builder integra 36 módulos para facilitar la creación e integración de los elementos que necesites, pero si aún necesitas más no hay problema, ya que podrás extender sus funciones por medio de un plugin como Ultimate Addons for Beaver Builder.
Al igual que con Elementor, este plugin también cuenta con extensiones muy potentes y te permitirá agregar 60+ módulos, 100+ templates y 200+ filas pre-diseñadas. Sin lugar a dudas una combinación muy popular.
3.4. Personalización
Personalizar tu sitio web es muy fácil y podrás hacerlo mediante los módulos describimos en la sección anterior. Para modificar tus elementos los módulos incluyen tres opciones: General, Estilo y Avanzado.
- General: Está diseñado para realizar los ajustes básicos del módulo: Imágenes, texto, enlaces y otros.
- Estilo: Permite configurar la apariencia del módulo.
- Avanzado: Podrás ajustar el tamaño del módulo, hacerlo responsivo, agregar efectos o animaciones e incluir código personalizado.
Así seas un principiante o un veterano en WordPress, la personalización de los módulos de Beaver Builder te resultará súper sencilla.
3.5. Plantillas Disponibles
Beaver Builder cuenta con más de 40+ plantillas y 100+ filas preconstruidas que podrás utilizar como base inicial para diseñar tu sitio web. Sus plantillas se dividen en dos grupos:
- Páginas de contenido
- Páginas de aterrizaje (landing pages)
Gracias a esta clasificación podrás elegir fácilmente la más adecuada, y ten en cuenta que la biblioteca siempre se encuentra en aumento, así que es muy probable que tengas nuevas plantillas disponibles cada cierto tiempo.
Veredicto Final
En este versus de constructores visuales hemos comparado los tres mejores del mercado: Elementor PRO, Divi Builder y Beaver Builder.
Si bien es cierto que algunos de ellos cuentan con versiones gratuitas, estas se encuentran muy limitadas a pocas opciones y no son recomendables. Veamos un breve comparativo de las versiones premium de cada uno:
También hemos visto que podemos extender las funcionalidades de Elementor y Beaver Builder con plugins como Ultimate Addons for Elementor y Ultimate Addons for Beaver Builder (ambos desarrollados por el creador de la plantilla Astra que cuenta con más de 1+ millón de instalaciones activas) que son complementos muy populares y confiables.
Nuestro veredicto final es que: Los tres constructores visuales cubren necesidades distintas, pero sabemos que eso no es lo que quieres escuchar, asi que resumimos qué necesidad cubre cada uno de ellos para que identifiques el más adecuado:
Elementor PRO – Es la mejor opción para crear sitios web desde cero y utilizarlo con cualquier plantilla que prefieras, sin ralentizar mucho tu instalación de WordPress.
Divi – Es la mejor opción para principiantes (lo digo por experiencia ya que fue mi primera plantilla), e incluye 5 elementos al precio de 1: La plantilla Divi, la plantilla Extra, el plugin Monarch, el plugin Bloom y el plugin Divi Builder. Si buscas sacarle el jugo a tu inversión, Divi es para ti.
Beaver Builder – Es la mejor opción si quieres una alternativa similar a Elementor, pero que te permita utilizarlo en una cantidad ilimitada de sitios web, en cualquiera de sus planes.
Cualquiera que elijas, estamos seguros que tendrás excelentes resultados. Eso fue todo por ahora, pero antes de irte déjanos un comentario y dinos (en tu opinión) cuál es el mejor constructor visual para WordPress.
