Comparativa Divi vs Beaver Builder (2020)

¿Qué tienen estos editores para ofrecer?

Compararemos a estos editores entre sí observando las estructuras que utilizan, los módulos que ofrecen y la configuración de los módulos, así como las opciones avanzadas de personalización.

Repasaremos las plantillas, los temas y los precios en las siguientes secciones.

Estructura

Beaver Builder utiliza un editor de frontend, por lo que verás cada cambio a medida que lo hagas. Puede utilizar el editor en páginas, mensajes y tipos de mensajes personalizados. Puede empezar desde cero o importar una plantilla y modificar su diseño y contenido.

De cualquier manera, cuando quieras añadir nuevo contenido a tu página, añadirás lo que Beaver Builder llama «filas» a tu diseño. Puede colocar varias columnas en estas filas, vertical y horizontalmente.

Actúan como contenedores para los módulos de contenido que usted agregará a su página.

El editor tiene nueve marcos de columnas para elegir, que se muestran en esta captura de pantalla, pero puede agregar o quitar columnas a su gusto e incluso redimensionarlas en la página que desee.

El Divi Builder puede ser usado tanto en el front-end usando el constructor visual como en el back-end anulando el editor estándar de WordPress. De cualquier manera, puedes usar el editor en páginas, mensajes y tipos de mensajes personalizados.

El editor es similar a Beaver Builder en el sentido de que construye sus páginas en secciones que presentan filas, agrega columnas a esas filas y agrega módulos a las columnas. Hay 20 plantillas de columnas para elegir, que se muestran en esta captura de pantalla.

Puede cambiar el tamaño de las columnas a su gusto.

Módulos de contenido de WordPress Page Builder

Beaver Builder ofrece unos 30 módulos básicos, que organiza en seis categorías diferentes, además de un conjunto de módulos de widgets de WordPress, que le permiten añadir widgets de WordPress en cualquier parte de su diseño de contenido.

Los módulos Básicos son elementos de contenido estándar, como encabezados, texto, vídeo, botones y un módulo HTML que inserta código y marcas directamente en la página HTML renderizada.

También hay un módulo dedicado a la Llamada a la Acción en la categoría Acciones.

Este módulo tiene un encabezado, un editor de texto y un botón incorporado, lo que le permite agregar llamadas a la acción a su página de manera eficiente. El formulario Callout incluye todo eso más una imagen opcional.

El formulario de contacto y el formulario de suscripción son módulos adicionales que puede utilizar para animar a posibles clientes potenciales a que tomen medidas en sus páginas.

La categoría Medios tiene módulos que puede utilizar para agregar testimonios, galerías, mapas, deslizadores e iconos de fuentes impresionantes a su página. La captura de pantalla anterior muestra módulos en las categorías Medios y Acciones.

Puede mostrar datos, imágenes y otra información con los módulos de la categoría Diseño, que incluye una tabla de precios y un módulo de barra lateral que le permite agregar cualquiera de las barras laterales de WordPress definidas en el tema.

Las dos últimas categorías tienen módulos basados en posts que puede utilizar para añadir blogsrolls a sus páginas de varias maneras, además de elementos de cuenta atrás y de contador.

Los módulos de Divi no están categorizados, sino que aparecen en una lista por orden alfabético, que se muestra en la siguiente captura de pantalla.

Divi no tiene un módulo de encabezado separado. En su lugar, añada títulos al módulo de editor de texto. Aunque no es un gran problema, puede hacer que el proceso de construcción sea un poco tedioso.

Tampoco puedes añadir widgets de WordPress a Divi Builder de la misma manera que con Beaver Builder.

Y no puede agregar las barras laterales de su tema en el diseño de contenido de Divi Builder.

Aparte de eso, estos dos editores no son muy diferentes. Ofrecen muchos de los mismos módulos pero los manejan de manera diferente. Por ejemplo, Beaver Builder ofrece un único módulo de contador de números que puede configurar para que utilice sólo números, un contador de círculos o un contador de barras, mientras que Divi ofrece un módulo diferente para cada uno de ellos.

Ambos editores tienen módulos para plugins de terceros como WooCommerce, que estarán disponibles cuando tengas WooCommerce instalado. Estos módulos le permiten mostrar productos en sus páginas habituales de varias maneras.

Estilismo

En Beaver Builder, cada módulo tiene ajustes que puede configurar, divididos en pestañas que se relacionan con el contenido y las características específicas del módulo o su estilo, como los colores, la fuente y la alineación.

Puede ajustar los colores con un selector de color incorporado o especificando un valor hexadecimal o RGBA.

Las fuentes personalizadas se integran a través de Google, o puede añadir otras fuentes web con un pequeño código. Esta captura de pantalla muestra parte de la pestaña Estilo de un módulo de botones.

Para las filas, puede personalizar el fondo añadiendo un color, un degradado de color, una imagen, un vídeo o una presentación de diapositivas, y además puede añadir un borde y efectos de borde que cambien el aspecto del límite horizontal de la fila. Las columnas tienen configuraciones más restringidas pero similares.

En el caso de los módulos Divi, la sección Contenido lleva el nombre adecuado porque es donde se añadirá y configurará el contenido que se desee añadir al módulo. Personalizarás los estilos de tus módulos en la sección Diseño.

Cada módulo tiene al menos una configuración única. Por ejemplo, el módulo Blurb tiene una configuración que puede utilizar para personalizar la imagen o el icono que utiliza el elemento.

Los ajustes para la mayoría de los módulos Divi incluyen ajustes de texto, que puede utilizar para personalizar fuentes, colores de texto y alineación, ajustes de ancho y alto, y ajustes de margen y relleno.

También puede personalizar los bordes, las sombras de los cuadros y las animaciones en esta sección. También se pueden aplicar filtros, incluyendo filtros para saturación, brillo, contraste y tono sepia.

Opciones avanzadas de personalización

Casi todas las filas, columnas y módulos de Beaver Builder tienen la misma pestaña Avanzado, que contiene ajustes que puedes usar para configurar la forma en que el elemento aparece y se comporta más allá del estilo básico.

Estos incluyen el ajuste de márgenes y relleno con la capacidad de establecer diferentes valores dependiendo del tamaño del dispositivo. La configuración HTML le permite seleccionar el tipo de elemento HTML utilizado para identificar el módulo en el código de la página, así como asignar los IDs o clases que debe utilizar.

Puede configurar varios ajustes de visibilidad, como la posibilidad de elegir entre una larga lista de animaciones y establecer el retraso y la duración de cada animación. También puede ocultar el módulo para determinados tamaños de dispositivo y restringirlo para que sólo se muestre a los usuarios que han iniciado o cerrado sesión.

En la sección Avanzado de Divi, puedes añadir ID de CSS y clases, así como CSS personalizado a cada módulo.

También puede ocultar el módulo en dispositivos específicos y personalizar la transición que utiliza.

Plantillas de diseño incorporadas

Al crear una página, puede empezar desde cero o utilizar una plantilla de diseño prediseñada y modificarla. Tanto Beaver Builder como Divi ofrecen una gama de plantillas para elegir.

Beaver Builder ofrece un número moderado de plantillas de diseño para que usted elija. La selección es diversa, y todos están bien diseñados.

Hay páginas de destino para diferentes nichos y propósitos, como la venta de productos. También hay páginas de contenido para tu blog, la página del equipo, la página Acerca de y más.

Divi tiene cientos de plantillas para que elijas. Esta captura de pantalla muestra los detalles del diseño de una de las plantillas.

Cubren un amplio surtido de nichos, propósitos y páginas de contenido.

Desactivación

Algunos creadores de páginas dependen de los códigos abreviados para añadir módulos a sus páginas. Rodean su contenido con estos códigos abreviados, pero no son visibles mientras el generador de páginas esté activo en su sitio. Pero algunos creadores de páginas dejan estos códigos cuando usted los desactiva, lo que puede crear mucho trabajo para usted, tanto para eliminar los códigos abreviados como para recuperar el contenido que una vez mostraron.

Beaver Builder es conocido por ser uno de esos creadores de páginas que preserva tu contenido cuando desactivas el plugin. Los diseños y efectos de fondo se pierden, pero el texto y las imágenes de primer plano permanecen. Esta captura de pantalla muestra una fila de Beaver Builder a la izquierda y la misma fila a la derecha después de la desactivación.

Hace que la transferencia de contenido a un nuevo creador de páginas sea rápida y sencilla.

Divi, por otro lado, es famoso por ser difícil de alejar. Su contenido estará lleno de atajos si decide desactivar el tema o el plugin.

El fundador y CEO de Elegant Themes, Nick Roach, prometió lanzar una solución que permitiría a los usuarios de Divi mover su contenido con facilidad en 2015. Lamentablemente, cuatro años después no existe tal solución. En su lugar, tendrá que confiar en terceros para realizar el trabajo.

Temas oficiales de WordPress Page Builder

Beaver Builder ofrece el tema Beaver Builder con dos de sus paquetes premium. Además de estar totalmente integrado con el plugin Beaver Builder, este tema adopta completamente el customizador de temas en vivo incorporado de WordPress. Esta captura de pantalla muestra las pestañas del Personalizador para el tema Beaver Builder.

Puede configurar algunos de los ajustes predeterminados que utiliza su sitio, como los estilos de encabezado y pie de página, las fuentes, los tamaños de texto, los estilos de botones, los vínculos sociales y mucho más.

El tema utiliza el conocido y bien soportado marco de trabajo Bootstrap CSS y, por lo demás, está bien codificado, lo que garantiza que su sitio funcione bien sin verse estancado por el tema.

Divi ofrece el tema oficial de Divi, que tiene Divi Builder incorporado.

Tiene una amplia variedad de opciones de temas que puede personalizar. Incluyen todo, desde encabezados, texto y opciones de diseño de blog predeterminadas hasta diseños de anuncios. Su panel Personalizador se muestra en la siguiente captura de pantalla.

Está bien diseñado y puede personalizar ciertas opciones de temas con el personalizador de temas en directo.

Precios y Soporte

Beaver Builder tiene una versión gratuita del plugin, como se ha dicho anteriormente. Esto significa que puede empezar gratis y desbloquear más funciones cuando se actualice a un plan premium.

Hay tres planes disponibles:

• Estándar a $99 – Desbloquea licencias de sitio ilimitadas, así como todos los módulos y plantillas premium.

• Pro a $199 – Además desbloquea el tema Beaver Builder y la capacidad multi-sitio.

• Agencia a $399 – Además, desbloquea la configuración de red de varios sitios y el etiquetado en blanco.

Todos los planes vienen con un año de soporte y actualizaciones, que puede renovar anualmente con un 40% de descuento. Todos los planes también están respaldados por una política de reembolso de 30 días.

El soporte está disponible a través de un sistema de tickets. También puedes ponerte en contacto con otros usuarios de Beaver Builder a través de la comunidad del plugin en Facebook, Slack y sus propios foros. También ofrecen una amplia base de conocimientos y tutoriales en su blog.

El tema Divi y el plugin Divi Builder no son productos gratuitos. Son parte del programa de membresía de Elegant Themes. Hoy en día, Elegant Themes ofrece una pequeña colección de cinco temas y plugins, que no se pueden adquirir individualmente.

Hay dos planes:

• Acceso anual a $89/año – Acceso a licencias de sitio ilimitadas, todos los productos de ET, y soporte y actualizaciones durante un año.

• Acceso de por vida a $249 (Cuota única) – Acceso a todo lo que ofrece el plan anual, pero con una vida de soporte y actualizaciones.

El soporte está disponible las 24 horas del día, los 7 días de la semana a través de un sistema de chat en vivo. También hay documentos y foros comunitarios bien desarrollados. Todos los planes están respaldados por una garantía de devolución de dinero de 30 días.

Conclusión

Dado que ambos plugins se integran perfectamente con los temas creados por los propios desarrolladores, ambos pueden utilizarse como soluciones»todo en uno». También son compatibles con casi cualquier tema.

Esto es lo que dificulta la elección entre ellos.  Divi y Divi Builder son excelentes productos que ofrecen opciones temáticas ampliadas, interfaces de usuario bien diseñadas, numerosos módulos de contenido y mucho espacio para la personalización. Haz clic para twittear

A pesar de sus ventajas, el uso del Divi Builder es un poco lento en comparación con otros creadores de páginas. Iniciar el generador de páginas funciona bien en su mayor parte, pero operaciones como la inserción de nuevos módulos y la apertura de los ya existentes a veces pueden llevar más tiempo del que deberían.

Casi todo parece requerir unos cuantos clics extra que con Beaver Builder.

También es difícil alejarse de Divi, como se mencionó anteriormente.

Los partidarios del uso intensivo de los códigos abreviados de Divi afirman que no debería importar cuántos códigos abreviados queden al desactivar el generador de páginas, ya que de todos modos necesitarás reconstruirlas.

Sin embargo, todavía tendrá que pasar por el problema de eliminar cada código abreviado de su contenido antes de copiarlo y pegarlo en un nuevo editor. Esto será especialmente incómodo si usas Divi en las entradas del blog.

Beaver Builder, por otro lado, es extremadamente rápido para trabajar con él, y ofrece una interfaz de usuario intuitiva, módulos de contenido bien diseñados y suficientes opciones de temas para que usted pueda personalizar su sitio a su gusto. El código está limpio, y no tendrás un montón de atajos si planeas alejarte del plugin.

Puedes probar la versión premium de Beaver Builder o descargar la versión gratuita para probarla. Elegant Themes también ofrece una demo de Divi.

Pruebe Beaver Builder | Pruebe Divi

Y si quieres ayuda para configurar los plugins de WordPress o necesitas un mantenimiento más general del sitio y planes de cuidado, aquí en WP Buffs te tenemos cubierto también. Ya se trate de la velocidad del sitio o de la seguridad que desea controlar, nosotros podemos administrarlo por usted.