Compositor visual vs Beaver Builder

Nuestra comparación de todos los principales creadores de páginas de arrastrar y soltar de WordPress demostró ser muy popular. El artículo destacó las mejores características de las soluciones gratuitas y premium de creación de páginas de arrastrar y soltar.

No tengo ninguna duda de que encontrará útil el artículo de comparación, sin embargo, pensamos en poner dos de los creadores de páginas favoritos de la comunidad de WordPress frente a frente y examinar sus fortalezas y debilidades con más detalle.

Visual Composer fue el complemento de WordPress que realmente definió lo que son los creadores de páginas de arrastrar y soltar y sigue siendo el creador de páginas de arrastrar y soltar más vendido para WordPress. Beaver Builder es una solución más nueva que se ha ido fortaleciendo desde su lanzamiento en 2014 y realmente se está haciendo un nombre este año.

¿Cómo se comparan estas excelentes soluciones? Echemos un vistazo más de cerca y veamos.

Compositor visual

Visual Composer no solo es el complemento de WordPress más vendido en CodeCanyon, sino que también se incluye con una gran cantidad de temas de WordPress en ThemeForest. Esto ayuda a explicar por qué el complemento se usa en más de 500,000 sitios web.

Visual Composer lo ayuda a crear diseños receptivos en minutos utilizando una interfaz fácil de usar. Le permite crear diseños en el backend o frontend de su sitio web. Funciona con cualquier tema de WordPress y tiene soporte para WordPress Multisite y WooCommerce.

Se incluyen más de diez paquetes de idiomas con el complemento y es compatible con el complemento multilingüe de WordPress. El complemento también incluye una gran variedad de elementos de contenido y diseños predefinidos.

Visual Composer es compatible con todos los tipos de publicaciones personalizadas disponibles. Eso significa que puede usarlo para modificar cualquier publicación de blog, página y tipos de publicaciones personalizadas agregadas a través de temas y complementos de WordPress.

Una de las mejores funciones de Visual Composer es lo flexible que es. Hay muchas opciones de desarrollador disponibles dentro del complemento y hay más de cien complementos disponibles en CodeCanyon.

Fui una de las primeras personas en probar y revisar Visual Composer y desde su lanzamiento han agregado más características y funcionalidades cada año.

Usando el compositor visual

Una vez que se haya instalado Visual Composer, verá una nueva barra de Visual Composer en sus pantallas de edición. Uno carga el editor backend, el otro carga el editor frontend (esta barra se muestra incluso si ha desactivado el editor visual de WordPress).

Cuando carga el editor de fondo, su área de contenido se transforma en un lienzo para construir su página. Un botón titulado "Modo clásico" reemplaza el botón del editor de fondo en el que hizo clic anteriormente y lo ayuda a regresar al modo de edición predeterminado de WordPress.

En la parte superior de la interfaz hay cinco botones: tres a la izquierda y dos a la derecha.

A la izquierda, el ícono de Visual Composer lo lleva al sitio web oficial del complemento, el símbolo más le permite agregar elementos a su página y el ícono T abre el cuadro de plantilla. A la derecha hay un ícono de configuración que abre un cuadro para agregar un código CSS personalizado y un botón para cambiar al editor de interfaz.

Si aún no ha agregado ningún contenido, verá una explicación sobre cómo agregar contenido rápidamente. Puede optar por agregar un elemento, agregar un bloque de texto o elegir uno de los diseños predefinidos. Por ejemplo, puede agregar una página de destino o una página de producto con solo hacer clic en un botón.

En mi artículo de comparación de creadores de páginas de arrastrar y soltar de WordPress, noté que los módulos de contenido tienen muchos nombres. Algunos desarrolladores los llaman módulos, algunos los llaman bloques, otros los llaman widgets. Visual Composer los llama elementos. Todos se refieren a los pequeños bloques de contenido que te ayudan a construir tu diseño.

La cantidad de elementos disponibles es impresionante. En total, la versión actual de Visual Composer ofrece cuarenta y ocho elementos de contenido (este número incluye widgets predeterminados de WordPress). También están disponibles siete elementos de contenido obsoletos más antiguos y se pueden agregar elementos de contenido adicionales mediante el uso de extensiones de complementos.

Puede crear páginas complejas utilizando estos elementos. Puede agregar gráficos, galerías de imágenes, videos, mapas, cuadrículas de publicaciones, íconos, botones para compartir en redes sociales y más.

Agregar elementos de contenido y luego colocarlos en filas y columnas es simple. Las filas y los elementos se pueden arrastrar hasta donde desee colocarlos. El número de columnas mostradas en una fila se puede determinar seleccionando una de las once estructuras de columnas, por ejemplo, 2/3 + 1/3. Alternativamente, puede crear su propia estructura personalizada.

Hay opciones para eliminar elementos, columnas y filas. Se pueden agregar nuevos elementos a columnas y filas seleccionando el símbolo más. También puede clonar filas enteras de contenido.

Una gran cantidad de configuraciones están disponibles tanto para columnas como para filas.

En la pestaña general hay opciones para usar un fondo de video, estirar la fila/columna y agregar CSS personalizado. La pestaña de diseño le permite diseñar la columna o fila de la forma que desee. Puede definir el margen, el borde, el relleno y los colores.

Los ajustes disponibles para elementos individuales dependen del elemento que se esté modificando. Un elemento básico, como un botón Me gusta de Facebook, solo le permite seleccionar el tipo de botón, mientras que los elementos más complejos pueden tener docenas de opciones diferentes.

Cualquier diseño que cree puede guardarse como plantilla y aplicarse a otras páginas de su sitio web. Se proporcionan cuarenta y cuatro diseños prefabricados predeterminados para ayudarlo a comenzar. Esto incluye una plantilla de preguntas frecuentes, una plantilla de ayuda, una plantilla de servicios y varias plantillas para su página de información.

Puede activar el editor de interfaz haciendo clic en el botón de interfaz en su editor de publicación/página. Si ha iniciado sesión en su sitio web, también verá un enlace "Editar con Visual Composer" en la barra de administración de WordPress en la parte superior de cada página. Al hacer clic en este enlace, se cargará el editor de interfaz para que pueda editar esa página.

El editor backend y frontend funcionan de manera similar. Verá los mismos botones en la parte superior de la página para agregar elementos y abrir el cuadro de plantilla. En el lado derecho, verá un botón que lo devuelve al editor de backend y un botón de actualización para guardar los cambios que haya realizado.

El botón de guías le permite modificar su página. Puede hacer todo lo que pueda en el editor de fondo, como editar elementos y mover columnas y filas.

Al hacer clic en el ícono de la pantalla, puede cambiar su vista del modo de escritorio al modo horizontal y vertical de tabletas y teléfonos inteligentes. Esto es útil para ver cómo se verá su página en dispositivos móviles.

Siempre he encontrado que el editor de back-end de Visual Composer es mucho más fácil de usar que el editor de front-end. Puedo crear diseños profesionales en minutos usando el editor de backend, pero con el editor de frontend siento que mover las cosas es más torpe y menos fluido. Todavía funciona como debería, pero no me parece tan fácil de usar.

Sin embargo, sé al leer los comentarios de otros usuarios de Visual Composer que muchos prefieren usar el editor frontend al editor backend, por lo que tal vez sea una cuestión de qué interfaz está acostumbrado a usar (el editor frontend se introdujo en Visual Composer mucho más tarde así que tengo más experiencia con el editor backend).

Configuración del compositor visual

El área de configuración de Visual Composer le permite modificar muchas características y opciones diferentes.

En la página de configuración general, puede definir en qué tipos de publicaciones Visual Composer estará activo. Cualquier tipo de publicación personalizada adicional agregada a través de su tema, o a través de complementos, se enumerará aquí. También puede deshabilitar elementos de contenido receptivo y habilitar subconjuntos de fuentes de Google.

La parte central de esta página le permite controlar el acceso a Visual Composer para cada grupo de usuarios de WordPress. Puede definir si un grupo de usuarios ve Visual Composer, si ve Visual Composer y el editor predeterminado, y si solo ve Visual Composer (es decir, deshabilitar el editor predeterminado).

En la página de opciones de diseño, puede cambiar los colores predeterminados de los elementos de contenido. También puedes modificar el margen en la parte inferior de los elementos, el espacio entre columnas y el ancho de la pantalla del móvil.

El código CSS personalizado se puede agregar sin necesidad de modificar los archivos del complemento principal.

Se proporciona una licencia de producto cuando compra Visual Composer. Es válido para un sitio web y garantiza soporte continuo y actualizaciones automáticas a través de su área de administración.

Los códigos cortos proporcionados por complementos de terceros se pueden asignar a elementos de contenido de Visual Composer.

En la página acerca de hay una página de bienvenida que le informa sobre las últimas incorporaciones al complemento. También hay una página de preguntas frecuentes que tiene enlaces a muchos tutoriales excelentes y una página de recursos que enlaza con una base de conocimientos, una academia de videos y las cuentas de redes sociales de los desarrolladores.

Constructor de cuadrícula avanzado

Visual Composer le permite agregar nuevos elementos de cuadrícula para los siguientes elementos de contenido: cuadrícula posterior, cuadrícula posterior de mampostería, cuadrícula multimedia y cuadrícula multimedia de mampostería. Estos son los elementos de contenido que se pueden usar para mostrar publicaciones de blog, galerías y otro contenido en su sitio web.

El video a continuación lo muestra exactamente cómo funciona el generador de cuadrículas. Recomiendo verlo para comprender mejor cómo se combina todo, ya que cuando visita la página del generador de cuadrículas por primera vez, no está claro cómo puede ayudarlo.

Precios del compositor visual

Visual Composer se vende al por menor a solo $ 34. No hay cuotas de renovación anual. Una vez que haya comprado el complemento, puede recibir soporte y actualizaciones indefinidamente.

Tenga en cuenta que para calificar para el soporte y las actualizaciones automáticas, debe ingresar su clave de licencia en el área de configuración.

Técnicamente, Visual Composer no es compatible con GPL. A pesar de que WordPress no permite restringir el uso, los desarrolladores piden a todos los clientes que compren una licencia normal para cada sitio web en el que utilicen Visual Composer.

Afortunadamente, el complemento aún funciona correctamente sin ingresar su clave de licencia. Por lo tanto, no hay nada que le impida usar el complemento en cada sitio web que posea.

Constructor de página de arrastrar y soltar de Beaver Builder

Al igual que Visual Composer, Beaver Builder lo ayuda a crear páginas profesionales fácilmente mediante una interfaz de arrastrar y soltar. Una de las mayores diferencias entre las dos soluciones es que toda la edición con Beaver Builder se realiza en la interfaz de su sitio web.

Todos los diseños responden y el editor visual es compatible con publicaciones de blog, páginas y todos los demás tipos de publicaciones personalizadas. Debido a su compatibilidad con códigos cortos y widgets, Beaver Builder funciona bien con la mayoría de los complementos de WordPress. Por ejemplo, podría integrar fácilmente elementos de otros complementos en sus diseños, como formularios, tablas y galerías.

Beaver tiene un buen soporte para WooCommerce y el complemento multilingüe de WordPress y debería funcionar con casi cualquier tema de WordPress. También tiene soporte para WordPress Multisite, pero desafortunadamente esta función no está incluida en la licencia estándar de Beaver Builder (más información sobre las opciones de precios más adelante).

La característica de Beaver Builder que realmente se destaca para mí es su sistema de plantillas de página. Le permite crear grandes páginas detalladas en segundos. Todo lo que tiene que hacer es seleccionar la plantilla de página que desee. Por ejemplo, puede crear una página de contacto comercial con solo hacer clic en un botón.

Las licencias de mayor precio de Beaver Builder también vienen con el tema de WordPress de Beaver Builder.

Usando Beaver Builder

Beaver Builder se integra con WordPress de la misma manera que Visual Composer. Una vez que se haya activado el complemento, puede cargar el editor haciendo clic en la pestaña "Generador de páginas" en su editor de publicaciones.

Alternativamente, si ha iniciado sesión, puede hacer clic en el enlace "Generador de páginas" en la barra de administración de WordPress en la parte superior de cada página.

Cuando el generador de páginas se activa por primera vez, se mostrará una superposición que muestra plantillas de diseño. Como sugiere el nombre, las plantillas de inicio están diseñadas para usarse en la página de inicio de su sitio web.

Hay disponibles catorce plantillas de diseño de página de inicio únicas. Alternativamente, puede optar por utilizar una página en blanco.

Las plantillas de diseño de contenido lo ayudan a crear páginas comunes rápidamente. Por ejemplo, hay diseños para su página acerca de, su página de contacto y su página de blog.

En total, hay trece plantillas de contenido para elegir. Por supuesto, puede guardar cualquier página que cree manualmente como plantilla y usarla en cualquier otro lugar de su sitio web.

Beaver Builder tiene una interfaz fácil de usar que no toma mucho tiempo entender.

En la barra de administración hay enlaces en la parte superior derecha: Plantillas, Herramientas, Listo y un icono de ayuda. En el lado derecho hay menús desplegables para diseños de filas, módulos básicos, módulos avanzados y widgets de WordPress.

El botón de plantillas carga el cuadro de plantillas de diseño que destaqué anteriormente.

Al hacer clic en el cuadro de herramientas, aparecen algunas opciones. Duplicar la página generará una copia de la publicación/página/tipo de publicación con el mismo diseño. También hay una opción para guardar su diseño como plantilla.

Al seleccionar "Editar configuración global", se cargará el cuadro "Configuración del creador de páginas". Desde aquí puede modificar la configuración del encabezado de página predeterminado, las filas, los módulos y el diseño receptivo.

Al hacer clic en el botón Listo, puede publicar los cambios que realizó o guardarlos como borrador. Si elige descartar los cambios, todas las modificaciones que haya realizado se perderán y la página volverá a la última versión guardada.

El ícono de ayuda muestra opciones para realizar un recorrido interactivo, ver un video tutorial de siete minutos y saltar a la base de conocimientos o foros de Beaver Builder.

Recomiendo hacer el recorrido cuando carga Beaver Builder por primera vez. Le dará una buena visión general de cómo funciona todo.

La primera opción en el menú del lado derecho es el diseño de filas. Puede elegir tener de una a seis columnas de contenido. También se pueden agregar barras laterales izquierda y derecha.

Todo lo que tiene que hacer es seleccionar las columnas o la barra lateral que desee y luego arrastrarla al área de contenido. Funciona muy bien.

Puede eliminar, duplicar o mover filas. También puede modificar la configuración de las filas.

Eliminar una columna reducirá automáticamente el número de filas en esa fila en particular. Por ejemplo, reducirlo de tres columnas a dos, etc.

Los mismos ajustes están disponibles para filas y columnas. Puede ajustar el ancho, el texto, cambiar de un color de fondo a una foto de fondo, modificar la configuración de fondo y definir su borde. En la pestaña avanzada, puede modificar los márgenes y el relleno, su diseño receptivo y los selectores de CSS.

Guardará sus cambios tan pronto como haga clic en el botón Guardar. Encontré que todo funcionó perfectamente. Por ejemplo, de forma predeterminada, el ancho de una fila de dos columnas será del 50 % cada una, pero si ajusta una al 70 % de ancho, la otra columna cambiará automáticamente al 30 % de ancho.

Hay cinco módulos básicos de contenido: encabezado, foto, separador, editor de texto y video.

Como era de esperar, simplemente arrastre y suelte los módulos de contenido en su página en la columna y fila que desee. Una vez que lo haga, puede modificar la configuración de ese módulo de contenido. Al igual que Visual Composer, la configuración que se muestra depende del módulo de contenido que esté modificando.

Es posible que esté un poco confundido después de agregar su primer módulo de contenido, ya que desaparece el menú en el lado derecho de la página. Para que el menú regrese, debe hacer clic en el botón "Agregar contenido" en la parte superior de la página.

Veintidós módulos avanzados están disponibles. Esto incluye acordeones de publicaciones, controles deslizantes, tablas de precios y formularios de suscripción.

Doce widgets predeterminados de WordPress también están disponibles. Esto eleva el número total de módulos de contenido a treinta y nueve.

Una vez que haya creado su página, debe guardar el borrador o publicar la página. También recomiendo guardar su diseño como una plantilla.

Tema del constructor del castor

El tema Beaver Builder se incluye con las versiones profesional y de agencia de Beaver Builder (más información sobre los planes de precios más adelante). El tema es esencialmente un lienzo en blanco que le permite crear el sitio web que desea.

En los últimos años, WordPress ha alentado a los desarrolladores de temas a integrar el personalizador de temas de WordPress en su diseño. La tasa de adopción ha sido lenta, y la mayoría de los desarrolladores de temas todavía usan su propia página de configuración de temas.

Sin embargo, los desarrolladores del tema Beaver Builder han adoptado el personalizador de temas. Cada opción de tema y configuración se pueden encontrar allí. Esto se relaciona muy bien con el complemento de WordPress Beaver Builder, ya que significa que todos los cambios que realice en su sitio web se pueden previsualizar en tiempo real.

Hay una gran cantidad de opciones de configuración disponibles. Puede modificar su encabezado, pie de página, widgets, colores y más. También se incluye una herramienta de importación y exportación.

Estaba satisfecho con la cantidad de opciones que se ofrecían y me resultó muy fácil cambiar los colores, los fondos y las fuentes.

Está claro que el tema Beaver Builder se creó para los usuarios del complemento, ya que el tema en sí es muy básico. Le permite personalizar una gran cantidad de configuraciones de su diseño, pero hay pocas opciones para cambiar la estructura de su sitio web. En ese sentido, el tema me parece anticuado.

Sin embargo, hay diez preajustes de temas diferentes disponibles. Estos ajustes preestablecidos cambiarán el esquema de color de su sitio web.

Si bien el tema Beaver Builder es una buena adición, carece de las características y extras que ofrecen la mayoría de los temas modernos de WordPress. Por el dinero extra que Beaver Builder quiere para este tema, sería mejor que comprara un tema de WordPress todo en uno como Divi, ya que ofrece mucho más.

Configuración del creador de páginas

El área de configuración del complemento Beaver Builder se muestra en una página. En el menú se muestran diez secciones.

La primera sección es una opción para ingresar su clave de licencia para recibir actualizaciones y soporte remotos. El complemento seguirá funcionando correctamente si no ingresa su clave.

Todos los módulos básicos y avanzados se pueden desactivar desde la sección de módulos.

También puede deshabilitar los widgets de WordPress para la selección, sin embargo, no hay opción para deshabilitar los widgets de forma individual.

En la sección de plantillas, puede habilitar todas las plantillas, habilitar solo las plantillas principales, habilitar las plantillas de usuario (es decir, las plantillas que guardó) y deshabilitar todas las plantillas.

También hay opciones para editar las plantillas del creador de páginas en el área de administración y para anular las plantillas principales.

Todos los tipos de publicaciones disponibles en su sitio web de WordPress se muestran en la sección de tipos de publicaciones. Puede deshabilitar cualquier tipo de publicación en la que no desee que Beaver Builder esté activo.

Se incluyen tres conjuntos de iconos diferentes con el complemento. Estos se pueden desactivar en la sección de iconos. También hay una opción para cargar su propio conjunto de iconos.

En la sección de edición, puede definir el nivel de capacidad de WordPress requerido para editar Beaver Builder.

La marca blanca está disponible para aquellos que compran la licencia de agencia de Beaver Builder. Puede introducir su propia marca y definir el icono de su propia empresa.

Hablé anteriormente sobre lo que sucede cuando haces clic en el ícono de ayuda en el generador de páginas. Puede desactivar este icono si lo desea. Alternativamente, puede deshabilitar elementos individuales. También se puede definir la URL para el video de ayuda, la base de conocimientos y los foros.

Si ha transferido su sitio web a un nuevo plan de alojamiento, es posible que deba borrar el caché del complemento.

Me complació ver una opción de desinstalación incluida con Beaver Builder. Al hacer clic en el botón de desinstalación, se eliminará el complemento y todos los datos asociados con él.

Como puede ver, Beaver Builder tiene muchas opciones útiles para configurar en la página de configuración. Lo único que creo que realmente necesita es la capacidad de modificar los permisos según el rol del usuario (es algo que tiene Visual Composer).

Precios del constructor de castores

Los desarrolladores de Beaver Builder han adoptado la popular estrategia de precios de tres opciones de licencia diferentes. Las opciones son estándar, pro y agencia.

Todas las licencias le permiten utilizar Beaver Builder en un número ilimitado de sitios web durante el tiempo que desee. El soporte y las actualizaciones se brindan durante un año y los años siguientes están disponibles a una tarifa con descuento del 40 % del precio original (aunque puede continuar usando el complemento si no renueva).

El equipo de soporte también lo ayudará a crear módulos personalizados para su sitio web.

Una licencia estándar para Beaver Builder se vende al por menor a $99. Esta licencia proporciona una copia completa del complemento de Beaver Builder, pero no incluye el tema de WordPress de Beaver Builder ni la compatibilidad con WordPress Multisite. Para recibir esas dos adiciones, debe actualizar a la licencia profesional que cuesta $ 199.

La licencia más cara es la de agencia. Eso se vende a $ 399. Ofrece todo lo que hace la licencia profesional, pero también ofrece funciones de marca blanca. Se le permite reemplazar todas las referencias a Beaver Builder con el nombre de su propia empresa y la capacidad de modificar las plantillas de página principal de Beaver Builder.

A menos que necesite soporte para WordPress Multisite, creo que la licencia estándar de $ 99 le brinda todo lo que necesita, ya que el tema Beaver Builder no vale la pena pagar $ 100 más.

Visual Composer vs Beaver Builder: Resumen

Como ha visto, Visual Composer y Beaver Builder tienen sus fortalezas y debilidades. Personalmente, no creo que haya mucho entre las dos soluciones en lo que respecta a la creación de diseños, ya que ambas pueden usarse para crear sitios web de gran apariencia.

Si prefiere crear diseños en la interfaz de su sitio web, creo que Beaver Builder lo bordea ligeramente ya que la interfaz es más fluida (aunque no hay una gran cantidad entre ellos).

Si prefiere crear diseños en el backend de su sitio web, Visual Composer es el indicado para usted, ya que Beaver Builder no ofrece esta funcionalidad.

Después de crear diseños con ambas soluciones, llegué a la conclusión de que prefiero crear diseños en el backend usando Visual Composer. Esto podría deberse en parte a que tengo más experiencia con el complemento, pero sentí que podía crear las páginas que quería más rápido usando Visual Composer. Sin embargo, creo que realmente se trata de su propia preferencia en cuanto a qué interfaz prefiere, ya que aunque Beaver Builder puede no parecer tan profesional, encontré que su interfaz simple es un placer de usar.

Para ayudarlo a decidir, recapitulemos rápidamente los pros y los contras de ambos complementos.

Profesionales del compositor visual

• Significativamente más barato que Beaver Builder
• Le permite crear diseños en el backend y frontend de su sitio web
• Tiene una gama más amplia de módulos de contenido en oferta.
• Ofrece muchas opciones para desarrolladores y hay una amplia gama de complementos de WordPress disponibles que agregan funcionalidades adicionales

Contras del compositor visual

• El complemento no es compatible con GPL y los desarrolladores esperan que compre una licencia para Visual Composer para cada sitio web que posee (aunque técnicamente puede usar el complemento en varios sitios web de todos modos)
• El editor frontend podría estar un poco más pulido

Profesionales del constructor de castores

• Tiene una interfaz fácil de usar que es muy fácil de entender.
• Se puede utilizar en un número ilimitado de sitios web
• Tiene una buena variedad de módulos de contenido y widgets.

Contras del constructor de castores

• Más caro que Visual Composer
• Solo puede editar diseños en la interfaz de su sitio web
• Las licencias profesionales y de agencia de mayor precio no justifican su costo adicional (particularmente porque el soporte multisitio viene de serie con Visual Composer)

Espero que hayas encontrado útil este artículo comparativo. Para obtener más información sobre estos complementos de WordPress, visite las páginas de información de Visual Composer y Beaver Builder.

Gracias por leer.

Kevin