Elementor Vs Beaver Builder: Una Comparación Detallada de Page Builder

¿Está tratando de decidir entre Elementor vs Beaver Builder para diseñar su sitio WordPress?

Elegir un page builder para WordPress es un poco como casarse. Aunque siempre puedes cambiar de opinión más adelante, es complicado y es mejor evitarlo siempre que sea posible.

Para ayudarte a no cambiar de opinión en el futuro, vamos a comparar estos dos pesos pesados de la construcción de páginas y ayudarte a tomar una decisión.

No vamos a recomendar uno sobre otro. En lugar de eso, vamos a profundizar y a darte la información que necesitas para tomar tu propia decisión. Para ello, te enseñaremos las interfaces, los widgets, las plantillas, las opciones de estilo y mucho más.

Y para hacer las cosas lo más estandarizadas posible, hemos importado exactamente el mismo diseño de Plantilla de Inicio para cada constructor de páginas respectivo. Así que aunque nuestros sitios de prueba están ejecutando dos constructores de página diferentes, se verán 100% idénticos, lo que le da una gran mirada a cómo cada constructor de página maneja las cosas.

Ambas instalaciones de ejemplo se están ejecutando el tema Astra utilizando el plantillas web gratuitassi le interesa saber de dónde procede el diseño.

Totalmente actualizado

Este artículo ha sido muy popular entre nuestros lectores, así que en lugar de sustituirlo por otro, hemos pensado en actualizarlo para que refleje la actualidad.

Este artículo se actualizó por última vez allá por julio de 2019. Pasan muchas cosas en estos años y todos lo sabemos, así que lo hemos actualizado por completo para reflejar las versiones más recientes de Elementor y Beaver Builder.

Elementor está ahora en la versión 3.0.5. Lo probamos en la versión 2.0 y algunas cosas han cambiado. Estos cambios se han reflejado más adelante en este artículo.

Beaver Builder estaba en la versión 2.2 cuando creamos este artículo. Ahora está en la versión 2.4. Compruebe los registros de cambios para ver cuánto ha cambiado en ese tiempo.

Elementor frente a Beaver Builder: la interfaz

Esta sección tiene que ser la primera porque vas a pasar la mayor parte del tiempo en la interfaz de edición del constructor de páginas.

Si no lo encuentra rápido e intuitivo, su productividad caerá como una roca y eso es lo contrario de lo que debe hacer un constructor de páginas.

Ambos constructores de páginas ofrecen interfaces sólidas, sin fallos y bastante rápidas, por lo que es poco probable que notes alguna diferencia en ese aspecto.

Sin embargo, aunque ambos son creadores de páginas frontales y visuales, abordan la interfaz de forma algo diferente, lo que puede influir en su decisión. No hay una elección correcta o incorrecta entre Elementor y Beaver Builder. Es muy probable que todo se reduzca a preferencias personales.

Echemos un vistazo...

Interfaz Elementor

Elementor divide su pantalla en dos secciones principales:

• 1 - Una vista previa en directo de tu diseño a la derecha.
• 2 - Una barra lateral donde puedes acceder a los elementos de la página. Puedes arrastrarlos y soltarlos directamente desde este menú o seleccionarlos y añadirlos de la forma habitual. A continuación, puedes darles estilo y hacer uso de otras funcionalidades (como las vistas previas responsivas).

En Elementor es un editor en vivo, cualquier cambio que hagas se refleja inmediatamente en el panel derecho. Una vez que hayas añadido un elemento, puedes seleccionarlo en el panel derecho para acceder a todas sus propiedades y cambiar lo que quieras.

Si quieres tener una visión completa de tu sitio, también puedes ocultar manualmente el panel lateral cuando sea necesario.

Elementor admite la edición de texto en línea para que puedas editar cualquier elemento de texto con sólo hacer clic y escribir. También puedes seleccionar el elemento de texto y realizar los cambios en la barra lateral de la izquierda.

Por último, con algunos de los botones más pequeños de la barra lateral, podrás acceder a:

• Vistas previas con capacidad de respuesta
• Botones de deshacer/rehacer
• Un historial completo tanto de las acciones individuales (para la sesión actual) y las revisiones guardadas
• Otros ajustes

Interfaz Beaver Builder

Beaver Builder te ofrece una vista previa a todo lo ancho de tu diseño, optando por meter las áreas de control en una barra superior y una ventana emergente que aparece cuando quieres editar un módulo o una fila.

• 1 - La vista previa en directo ocupa toda la página
• 2 - Puede añadir módulos o filas haciendo clic en el icono + para abrir el menú

Este es el aspecto de la interfaz cuando pulsas el icono +:

Al pulsar + se carga el panel principal, el equivalente al menú de la izquierda en Elementor. Aquí encontrarás todos los elementos de la página que se ofrecen.

Al igual que Elementor, sólo tienes que arrastrar estos módulos desde la barra lateral y colocarlos en su lugar para añadirlos a tu página.

Puede editar módulos en un cuadro emergente similar a Constructor Divi. Si lo prefiere, puede fijar fácilmente esta ventana emergente a la barra lateral.

Beaver Builder también ha añadido recientemente la edición de texto en línea, lo que lo equipara a Elementor en ese aspecto*:

*Si utiliza la edición en línea, le recomendamos que fije la ventana emergente a la barra lateral, ya que facilita la edición en línea.

Interfaz Elementor frente a Beaver Builder: ¿cuál es mejor?

Tanto Elementor como Beaver Builder ofrecen una interfaz fluida similar con fácil acceso a las herramientas. Elementor tiene más opciones de personalización, mientras que la barra lateral de Beaver Builder es más fácil de navegar.

Ahora Beaver Builder ha añadido la edición en línea, la competencia está más reñida que nunca, por lo que resulta realmente difícil elegir entre ellas.

Elementor frente a Beaver Builder: módulos y secciones

Tanto si los llamas widgets como módulos, secciones o filas, estos elementos son los bloques de construcción de tu diseño. Como referencia, Elementor los llama widgets, mientras que Beaver Builder los llama módulos. Sin embargo, son exactamente lo mismo.

Utiliza secciones, filas y columnas para crear el diseño básico de tu página. A continuación, añades widgets o módulos a esas filas y columnas para añadir contenido a la página.

En esta sección, compararemos cómo maneja estos elementos cada constructor de páginas.

Widgets Elementor

Elementor te ofrece tres elementos, cada uno con una jerarquía:

• Secciones - Se encuentran en la parte superior de la jerarquía de elementos. Una sección agrupa columnas y widgets y te permite personalizar todo lo que hay dentro.
• Columnas - Las columnas son el segundo nivel de la jerarquía. Se colocan dentro de las secciones y dividen el diseño verticalmente.
• Widgets - Los widgets constituyen el tercer nivel de la jerarquía. Constituyen el contenido real de su sitio. Los widgets pueden ser texto, imágenes, una tabla de precios o lo que quieras.

En la versión gratuita de Elementor, puedes construir tus diseños con 28 widgets. Con Elementor Pro, tendrá acceso a más de 50 widgets premium para añadir aún más libertad a su diseño.

Elementor también le permite añadir widgets adicionales a través de terceros Complementos Elementor. Por ejemplo, el Complementos definitivos para el plugin Elementor añade en 50 nuevos widgets que puedes utilizar en tus diseños.

Módulos Beaver Builder

Beaver Builder funciona con un enfoque similar, aunque utiliza una terminología diferente:

• Filas - Las filas son la parte superior de la jerarquía, el equivalente a las Secciones en Elementor. Puede utilizar las filas para aplicar un espaciado cohesivo y fondos al contenido que contienen.
• Columnas - Las columnas encajan dentro de las filas y le ayudan a dividir su página verticalmente.
• Módulos - Estos son el contenido real de su sitio. El equivalente de los Widgets en Elementor. Contendrán el texto, imágenes, botones y cualquier otra cosa que desee utilizar.

En la versión gratuita, Beaver Builder te ofrece 6 módulos. Pero con la versión Premium, tendrás acceso a un total de 50 módulos.

Al igual que Elementor, también puede ampliarlo con Complementos Beaver Builder para terceros. Por ejemplo, el Plugin Ultimate Addons for Beaver Builder añade más de 60 módulos nuevos.

Módulos y secciones Elementor frente a Beaver Builder: ¿cuál es mejor?

Tanto Elementor como Beaver Builder ofrecen la mayor parte de lo que se puede necesitar en una página web. Ambas ofrecen opciones decentes para las versiones gratuitas y una gama mucho más amplia para las premium.

Elementor parece tener ventaja aquí. La opción gratuita ofrece más que Beaver Builder y la premium aún más. Los widgets de terceros parecen ser más frecuentes para Elementor en este momento también.

Elementor frente a Beaver Builder: opciones de diseño

Una vez que hayas colocado los módulos y las secciones, deberás darles estilo para que tengan el aspecto adecuado.

Ahí es donde entran en juego las opciones de estilo de un constructor de páginas, pero...

A continuación, sólo tiene que editar los estilos con su constructor de páginas si desea crear contenido que rompa con sus estilos globales.

Elementor Opciones de diseño

Por defecto, Elementor aplica sus propios estilos globales a tu contenido, que puedes configurar según tus necesidades.

Sin embargo, accediendo a la configuración del plugin, puede desactivar esta funcionalidad y utilizar en su lugar los estilos de su tema de WordPress:

Si utiliza el Tema Astraesto es útil porque significa que puede utilizar Controles detallados del personalizador de Astra para establecer los estilos de su sitio completo.

Una vez que lo hagas, su contenido Elementor utilizará exactamente el mismo estilo que el contenido normal de WordPress, lo que garantiza la coherencia en todo el sitio.

Por supuesto, si quieres anular estos estilos globales, o dar otro tipo de estilo a tu diseño, Elementor te da mucho control.

Cada sección, columna o widget tiene tres pestañas para controlar su aspecto y funcionamiento:

• Contenido - cosas básicas como la alineación y el tamaño.
• Estilo - colores, tipografía, etc.
• Avanzado - márgenes y rellenos personalizados, animaciones, controles adaptables, Z-index, etc.

Elementor tiene uno de los conjuntos más profundos de opciones de estilo que encontrarás en un constructor de páginas, por lo que es imposible cubrir todas las opciones.

Además de los márgenes y el relleno personalizados, hay dos funciones especialmente útiles:

• Controles sensibles - Permiten ocultar contenidos en dispositivos específicos, como móviles o tabletas.
• CSS personalizado - Con Elementor Pro, puede añadir estilos CSS personalizados directamente a widgets o secciones individuales (la versión gratuita permite añadir una clase o ID CSS, pero no estilos propiamente dichos).

Por último, para muchos de los ajustes de estilo, es posible utilizar el icono de dispositivo para aplicar estilos diferentes a distintos tipos de dispositivos:

Esto es útil para el diseño mobile first y puede ser increíblemente útil para optimizar sus páginas para diferentes dispositivos.

Beaver Builder Opciones de diseño

Por defecto, Beaver Builder adopta los estilos globales de tu tema, en lugar de aplicar sus propios estilos como hace Elementor por defecto. En nuestra opinión, esta es una mejor manera de hacer las cosas.

Una vez más, esto significa que puede utilizar el Controles del personalizador del tema Astra para establecer un esquema de estilo coherente y, a continuación, sólo tiene que sustituir sus estilos globales con Beaver Builder según sea necesario.

Al hacer clic en cualquier fila o módulo, puede aplicarle estilo mediante las pestañas que aparecen en la ventana emergente.

Las pestañas que ves dependen del módulo específico. Por lo general, tendrás al menos opciones para:

• Estilo - Controla la anchura, altura, colores, alineación y otros parámetros del contenido.
• Tipografía - Cambia la fuente, el color y el tamaño
• Avanzado - Cambia márgenes personalizados, controles de respuesta, CSS, ajustes de respuesta, animaciones y mucho más.

Al igual que Elementor, puedes utilizar los iconos de dispositivo para aplicar diferentes estilos a distintos dispositivos.

Mientras que sólo se pueden añadir clases CSS e IDs a elementos individuales, Beaver Builder facilita la adición de estilos CSS reales a nivel de página (pero no a nivel de elemento):

Además, una característica única que tiene el Beaver Builder es la opción de configurar puntos de ruptura personalizados en los ajustes globales (estos puntos de interrupción se aplican a todo su contenido Beaver Builder).

Elementor frente a Beaver Builder: ¿cuál es la mejor opción?

Tanto el Elementor como el Beaver Builder ofrecen mucho control sobre cada elemento de la página. Los dos están muy cerca en términos de opciones y facilidad de uso y ambos ofrecen un control finito sobre todo lo que se ve en la página.

Una vez más, aquí encontramos muy poco entre lo que elegir.

Elementor frente a Beaver Builder: Funcionalidad de las plantillas

Tanto el Elementor como el Beaver Builder le ofrecen la posibilidad de construir una hermosa página a partir de un lienzo en blanco.

Pero a veces uno no quiere empezar de cero.

Y con tantas plantillas bonitas para Elementor y Beaver Builder, no tendrá que hacerlo.

En su lugar, sólo tiene que importar una plantilla, retocarla según sea necesario y disfrutar de un sitio web de gran aspecto.

Plantillas Elementor

A partir de Elementor 3.0, Elementor divide sus plantillas en dos categorías:

• Páginas - Se trata de diseños de página completa que son totalmente funcionales desde el momento en que los importas (sólo tienes que personalizar el contenido).
• Bloquea - Los bloques forman secciones específicas de una página. Por ejemplo, puedes utilizar un bloque para añadir una sección de contacto a una página personalizada.

En su versión gratuita, Elementor ofrece más de Plantillas de 40 páginas así como un mayor número de bloques.

Elementor Pro te da acceso a más de 200 plantillas premium de páginas y bloques.

Una vez creados tus propios diseños, también puedes guardarlos como plantillas para reutilizarlos más adelante. Por ejemplo, puedes crear un bloque personalizado y guardarlo como plantilla. A continuación, puedes acceder a esa plantilla desde el menú de la izquierda en Elementor para utilizarla en cualquier página.

Es un gran ahorro de tiempo si reutilizas elementos a menudo.

Al igual que los widgets, también es posible utilizar plantillas de terceros. De hecho, eso es lo que hemos hecho para las capturas de pantalla de ejemplo. Hemos importado un sitio de demostración completamente construido basado en Plantillas Elementor utilizando Plantillas de sitios web de Astra.

Plantillas Beaver Builder

Beaver Builder no incluye plantillas prediseñadas en la versión gratuita. Pero en la versión de pago, Beaver Builder te ofrece una gran variedad de plantillas de páginas divididas en dos secciones:

• Páginas de destino - Una selección de páginas de aterrizaje que cubren la mayoría de los nichos.
• Páginas de contenido - Una amplia selección de páginas interiores para completar su sitio web.

Beaver Builder no ofrece el equivalente de los bloques de Elementor en la versión gratuita. Pero puedes encontrar plugins de terceros que te ofrecen ese mismo tipo de funcionalidad (se llaman secciones de fila).

Al igual que Elementor, también puedes crear tus propias plantillas para reutilizarlas más adelante.

Si desea acceder a plantillas adicionales, Beaver Builder le facilita enormemente el acceso a nuevas plantillas a través de desarrolladores externos.

Por ejemplo, el Plugin Ultimate Addons for Beaver Builder añade más 60 módulos únicos, Más de 200 secciones y Más de 100 plantillas de páginas. También puede utilizar la misma función Starter Templates para Beaver Builder.

Funcionalidad de las plantillas Elementor frente a Beaver Builder: ¿cuál es la mejor?

Ambos constructores de páginas ofrecen una selección de opciones para diseñar y trabajar con plantillas. Ambos facilitan la importación, creación y reutilización de elementos y simplifican al máximo la creación de la página.

Sin embargo, la falta de opciones en la versión gratuita de Beaver Builder lo descalifica a nuestros ojos. Elementor ofrece muchas más funciones, lo que lo convierte en el claro ganador en cuanto a valor, aunque no necesariamente en cuanto a productividad.

Elementor vs Beaver Builder: Construcción de temas

La creación de temas es una potente función que te permite diseñar todo tu sitio WordPress utilizando la misma interfaz fácil de usar del constructor de páginas que ha visto anteriormente.

Tanto el Elementor como el Beaver Builder ofrecen una construcción temática completa, pero lo hacen de formas diferentes.

Elementor lo incluye en el Complemento Elementor Promientras que el Beaver Builder requiere la compra de un extensión separada Beaver Themer.

Las herramientas de creación de temas de ambos plugins también son totalmente compatibles con la aplicación Tema Astra. Sí, aunque utilice un creador de temas para diseñar todo el sitio, es importante elegir un tema de calidad (he aquí por qué).

Por ejemplo, el tema Astra proporciona una base de carga rápida que le permite controlar los estilos globales de su creador de temas, lo que le ahorra mucho tiempo.

Elementor Funcionalidad de construcción de temas

Con el constructor de temas Elementor, puede crear y gestionar su tema desde el Mis plantillas zona.

Cuando creas una nueva plantilla, puedes elegir qué parte de tu tema quieres que sustituya, así como darle un nombre.

A continuación, puedes elegir entre uno de los bloques preconstruidos para empezar tu diseño, o puedes construirlo desde cero.

La interfaz de creación de temas es idéntica a la interfaz Elementor normal. Sólo que ahora dispones de un nuevo conjunto de Elementos Temáticos para construir tu diseño.

Estos Elementos Temáticos le permiten insertar información dinámica extraída de la funcionalidad principal de su sitio WordPress. Por ejemplo, si añade el elemento Título del puesto y Información postal (ejemplo siguiente), Elementor insertará el contenido real de la entrada específica que el usuario está visitando.

Los Elementos Temáticos disponibles dependen del tipo de contenido que estés creando.

Una vez creado el diseño, puedes elegir exactamente dónde quieres utilizarlo. Puedes utilizarlo en todas partes o puedes optar por usarlo solo, por ejemplo, en un sitio concreto:

• Categoría de las entradas del blog
• Tipo de entrada personalizado
• Formato del puesto
• Pie de página
• Página

Una vez creado, puede elegir dónde mostrarlo utilizando criterios similares a los anteriores. Por ejemplo, puede seleccionar que se muestre en un único tipo de entrada personalizada o para un autor en particular. Tienes todo el control que necesitas incorporado.

Hemos realizado un guía para crear un blog con Elementor¡Mira esto!

Beaver Builder Funcionalidad de construcción de temas

Si tiene la extensión Beaver Themer para Beaver Builder, puede crear y gestionar las distintas partes de su tema yendo a Beaver Builder → Diseños Themer.

Cuando crees un nuevo diseño Themer, le darás un nombre y elegirás qué parte de tu tema quieres reemplazar. Puedes crear:

• Cabeceras
• Pies de página
• Páginas
• Puestos individuales
• 404 páginas
• Y más...

A continuación, tienes dos desplegables para controlar dónde se muestra tu diseño:

• Ubicación - Le permite aplicar su plantilla a todo el contenido, o sólo a categorías, etiquetas o tipos de entrada específicos.
• Usuarios - Una característica única que le permite aplicar su diseño basado en el usuario individual. Por ejemplo, podría mostrar su diseño sólo cuando un usuario ha iniciado sesión o para roles de usuario específicos.

Esta herramienta de diseño basada en reglas es muy útil en determinadas circunstancias, como los sitios web de socios o LMS cuando se desea controlar quién ve qué contenido en diferentes circunstancias.

A continuación, puede hacer clic en el botón Lanzamiento Beaver Builder para diseñar realmente su parte temática.

Cuando estés construyendo tu diseño, obtendrás un nuevo grupo de Módulos Temer que le permiten insertar dinámicamente el contenido de su sitio.

Elementor vs Beaver Builder Construcción de temas - ¿Cuál es mejor?

En la superficie, Elementor es una mejor opción debido a las opciones incluidas en el addon Pro. Tener que pagar más por la creación de temas en Beaver Builder no es bueno y puede desanimar a algunas personas.

Sin embargo, la opción basada en reglas de Beaver Builder podría marcar una gran diferencia en algunos sitios web y podría ser suficiente para que la compra adicional valga la pena.

Elementor frente a Beaver Builder: otras consideraciones

Hay algunas funciones que no encajan bien en este formato de comparación...

Para eso está esta sección.

Estas son algunas de las características exclusivas que ofrece el Elementor:

• Widgets globales - Puede utilizar widgets globales en varias posiciones de su sitio web y actualizar todas las instancias al mismo tiempo.
• Incrustar en cualquier lugar - Puede incrustar plantillas Elementor con shortcodes o widgets. Esto le permite utilizar Elementor para diseñar una llamada a la acción en su barra lateral, por ejemplo.

Y aquí hay algo que sólo Beaver Builder ofrece:

• Marca blanca - Si está creando sitios para clientes, esto le ayuda a crear un producto final personalizado y de marca blanca. El tema Astra también admite la marca blancapor lo que si se combina Beaver Builder con Astra se puede crear un 100% solución de marca blanca.

Hay un plugin de terceros que le permite a la marca blanca Elementor pero no lo hemos probado.

Elementor vs Beaver Builder Otras consideraciones - ¿Cuál es mejor?

Los widgets globales suponen un claro triunfo para Elementor. Aunque la marca blanca puede ser adecuada para algunas agencias, se trata de una oferta de nicho. El valor de productividad de los widgets globales y las funciones de incrustación en cualquier lugar hacen que Elementor sea una elección fácil.

Elementor frente a Beaver Builder: Precios

Existen versiones gratuitas de Elementor y Beaver Builder que puedes probar. Ambas pueden descargarse y utilizarse con cualquier sitio web que desees, aunque la versión gratuita de Elementor te ofrece más flexibilidad gracias a su mayor biblioteca de widgets.

Si desea las versiones premium de cualquiera de los dos plugins, aquí tiene los precios...

Hay tres Planes Elementor Pro:

• Personal - 1 emplazamiento - $49 al año
• Más - 3 sitios - $99 al año
• Experto - 1.000 centros - $199 al año

No hay opción vitalicia. Todos los planes se facturan anualmente. Cada plan incluye una garantía de devolución del dinero de 30 días.

Para Beaver Builder, también hay tres planes premium.

• Estándar - Sitios ilimitados - $99 al año
• Pro - Sitios ilimitados - $199 al año
• Agencia - Sitios ilimitados - $399 al año

No existe la opción de plan vitalicio. Todos los planes se facturan anualmente. Beaver Builder ofrece reembolsos si se solicitan en los primeros 30 días.

Beaver Builder funciona de forma ligeramente diferente, ya que no hay límites de sitios. En cambio, las funciones están restringidas en función del plan que elija. Estándar no incluye Beaver Builder ni Multisitio. Pro añade esas funciones. Agencia añade la marca blanca.

Además, si desea acceder a Beaver Themer hay una cuota adicional de $147 para su uso en sitios ilimitados.

Precios de Elementor frente a Beaver Builder: ¿cuál es mejor?

Tanto Elementor como Beaver Builder deben ser aplaudidos por ofrecer versiones gratuitas de su plugin page builder. Ambos incluyen una serie de funciones que ofrecen una gran libertad de diseño.

Sin embargo, sólo cuando compras Premium obtienes toda la potencia de cada uno. Elementor es más barato, pero restringe el número de sitios web con los que se puede utilizar. El Beaver Builder es más caro pero no restringe el número de sitios web.

Dependiendo de la situación de cada usuario, se encontrará una mejor relación calidad-precio, por lo que no hay un claro ganador.

Reflexiones finales sobre Elementor frente a Beaver Builder

Elementor y Beaver Builder son dos creadores de páginas que están en lo más alto de su sector. Esa es una de las razones por las que hemos creado plantillas de sitios web utilizando tanto Elementor como Beaver Builder.

También hemos hecho todo lo posible para garantizar que el Tema Astra se integra perfectamente con ambos creadores de páginas en lo que respecta a los controles a nivel de página y la creación de temas.

Elementor ofrece una amplia gama de opciones, plantillas y elementos de página. Además, tiene una interfaz atractiva, funciona bien y es relativamente barato teniendo en cuenta la potencia que proporciona.

Beaver Builder es más rápido de usar y de cargar los menús, pero la interfaz no es tan interesante para trabajar. El menú lateral también carga todo el contenido de una vez en lugar de tener que desplazarte para encontrar un elemento como haces con Elementor.

Ambos constructores de páginas ofrecen versiones gratuitas decentes y se actualizan con regularidad para corregir errores, añadir funciones y mejorar la oferta general.

Si nos tenía Para establecer una diferencia entre los dos creadores de páginas, la mayoría de la gente dice que el Beaver Builder es un poco más adecuado para desarrolladores, mientras que el Elementor es un poco más adecuado para diseñadores.

Pero, sinceramente... No te equivocarás al elegir cualquiera de estos creadores de páginas, ya que ambos son muy buenos en lo que hacen.