Review de Beaver Builder

Ya hace tiempo que en el mundo de WordPress se han hecho muy populares los page builders o constructores visuales. Esos temas o plugins que te permiten diseñar y construir páginas con solo arrastrar y soltar elementos, de manera visual. Sin ir más lejos, Divi, un tema de WordPress que lleva integrado un constructor visual, fue el tema más vendido de 2018. Y luego tenemos los constructores que no son temas en sí mismos, sino plugins. Estamos hablando de Beaver Builder, Elementor o WPBakery Page Builder, por nombrar los más populares.

En esta entrada vamos a analizar y a hacer una pequeña «review» de Beaver Builder.

¿Qué es Beaver Builder?

Buena pregunta. Deberíamos empezar por aquí. Beaver Builder es un page builder o constructor de páginas creado por FastLine Media, una compañía fundada por 3 chicos en California. No es un tema de WordPress, sino un plugin, y funciona «encima» de los temas, proporcionándoles un editor visual con el que jugar con el ratón a arrastrar y soltar módulos. Estos módulos pueden ser, por ejemplo, un módulo de texto, un módulo de imagen, uno de vídeo, uno de formulario de contacto, etc. Se ve así:

En Beaver Builder, la organización de una página se divide en filas, columnas y módulos. En una página puedes tener múltiples filas; en cada fila múltiples columnas; en cada columna, múltiples módulos.

A parte del plugin principal, el cual está en versión gratuita y de pago (incluyendo más características), también disponemos de varios otros componentes.

• Beaver Themer: este otro plugin te permite extender las posibilidades de Beaver Builder. Es lo que le falta a Beaver Builder, ya que mientras este te permite construir páginas, Beaver Themer te permite modificar el diseño de las páginas de archivo, los resultados de búsqueda, la página 404, la cabecera y el pie de página. Además, puedes crear plantillas para tus entradas, tus productos, tus categorías… Lo que sería la parte «dinámica» de tu web.
• Beaver Builder Theme: los chicos de Beaver Builder nos ofrecen un tema liviano y bien programado que se integra perfectamente con el plugin Beaver Builder. Esto significa que este tema junto con los dos componentes anteriores harán que probablemente no tengas que comprar ningún otro tema en tu vida.

Características

Beaver Builder dispone de las siguientes características:

• Edición del diseño de las páginas en tiempo real. Es decir, WYSIWYG, que son las iniciales de «What You See Is What You Get», que en español significa «lo que ves es lo que obtienes». Lo que hablábamos antes de arrastrar y soltar módulos para crear la página.
• Diseño adaptativo. Mientras el tema que uses sea adaptativo, todo lo que construyas con Beaver Builder lo será también.
• Soporte para WPML. WPML es el plugin más popular de traducción de páginas WordPress.
• Soporte para WooCommerce, el cual es el plugin más popular para crear tiendas online.
• Funciona con casi cualquier tema.
• Soporte para WordPress multisitio.
• Soporte para shortcodes y widgets. No te hará falta instalar ningún plugin extra para usarlos en cualquier sitio de tu página.
• Modo «editor». Beaver Builder puede configurarse para que ciertos roles de usuario solo puedan editar el contenido, y así no puedan «romper» ninguna página web.
• Aplicación de CSS por página o global, para todas las páginas.
• Importador y exportador de filas, columnas y módulos.
• Soporte de idiomas RTL (de derecha a izquierda), como el hebreo o el árabe.
• Plantillas de contenido incluidas.
• Edición en modo adaptativo (responsive en inglés), para poder editar el diseño visualmente también en tablets y móviles.
• Modo oscuro en el editor visual.

Instalación

La instalación de Beaver Builder es bien sencilla. Si optas por instalar la versión gratuita y limitada, solamente tienes que instalarlo desde la página de plugins de WordPress, como cualquier otro. Aquí lo tienes.

Si por el contrario optas por la versión completa, te la tienes que descargar primero desde la página de Mi cuenta de la web de Beaver Builder. Luego, vuelve a tu web y ve a la sección de Plugins. Si tenías la versión gratuita instalada, desactívala y elimínala. A continuación, sube el archivo .zip que te has descargado y activa el plugin cuando te lo pida. Por último, tendrás que activar la licencia en el menú Ajustes > Beaver Builder, en la pestaña Licencia.

¡Ya está!

Opciones

Vamos a dar un repaso a las opciones que nos podemos encontrar. Nota: es posible que algunas de las opciones que vayamos a ver no las tengas tú en tu instalación al tratarse de una versión inferior o gratuita.

• Vayamos a Ajustes > Beaver Builder > Módulos.
  
  
  Aquí podemos encontrar todos los módulos disponibles en la creación de páginas, en el constructor visual. Recordemos, cada módulo te proporciona una funcionalidad diferente. Uno será una imagen, otro un vídeo, otro un botón… Esta página es para desactivar o activar los que nos interese. Si desactivamos uno, no nos aparecerá en el constructor visual.
• Ajustes > Beaver Builder > Tipos de Entrada: Esto es para establecer donde podremos activar el constructor visual y dónde no. Por ejemplo, en mi caso, yo prefiero crear una plantilla con Beaver Themer para cada entrada de mi blog, desactivar Beaver Builder en las entradas, y así solo usar el editor clásico de WordPress para escribir entradas.
  
• Ajustes > Beaver Builder > Plantillas: Las plantillas son básicamente diseños ya hechos con Beaver Builder para reutilizar en otras páginas. Estos pueden ser módulos, columnas, filas o páginas enteras, ya sean guardados por el usuario o provenientes del mismo Beaver Builder (este te proporciona de entrada unas plantillas para que las uses como quieras).
  
  Entonces, teniendo en cuenta que las plantillas originales y las plantillas de usuario se muestran aquí…
  
  
  …podemos habilitar y deshabilitar unas y otras.
  
• Ajustes > Beaver Builder > Acceso de Usuario: Una función muy útil para los que tienen más de un rol de usuario en el sitio. Aquí es donde se establece quién puede acceder a qué. Tenemos las siguientes partes para restringir:
  • Acceso al Builder: controla básicamente si se puede acceder al editor visual o no.
  • Edición sin Restricciones: controla si el usuario puede editar el diseño o solo el contenido de la página. Es decir, esto es edición sin restricciones…
    
    
    y esto con restricciones…
    
    
    Como se ve, si le edición es con restricciones, uno solo puede editar el contenido, y no puede mover los módulos o eliminarlos, o sea cambiar el diseño.
  • Hileras Globales y Edición de Módulos: Las filas y los módulos se pueden guardar para poder ser globales, así lo que se cambia en una página se cambiará en las otras páginas. Esto permite o no la edición de tales filas y módulos.
  • Admin del Builder: para controlar el acceso a los ajustes de Beaver Builder en el panel de administración.
  • Exportador de Datos de Plantilla: para controlar si el usuario podrá exportar las plantillas (filas, módulos, columnas o páginas).
• Ajustes > Beaver Builder > Iconos: Este es fácil, activa o desactiva los packs de iconos integrados en el sitio web.
• Ajustes > Beaver Builder > Herramientas: Diversas herramientas para usuarios avanzados, entre las cuales se encuentra el poder desinstalar completamente Beaver Builder, sin dejar rastro en el sistema de ficheros o la base de datos.

Opciones del editor visual

Luego tenemos las opciones globales en el editor visual. Estas son las opciones que se van a aplicar en todas las páginas que construyamos con Beaver Builder. Para llegar a ellas, hay que abrir cualquier página con el editor visual de Beaver Builder y hacer clic en el botón alargado de arriba a la izquierda, y luego en Configuración global.

• Encabezado de Página Predeterminado: aquí se establece si cada página va a mostrar el título de página justo debajo de la cabecera. Además, si se establece en No, puedes establecer la clase CSS que contiene el título en tu tema para que automáticamente no se muestre. Por defecto está la clase CSS que usa el tema de Beaver Builder, así que si usas este tema no hace falta que toques el campo Selector CSS.
• Filas, Columnas y Módulos: estas tres pestañas configuran los márgenes, relleno (padding) y ancho de las filas, columnas y los módulos por defecto. Se pueden cambiar individualmente luego al diseñar la página.
• Diseño adaptable: una sección importante, donde se definirá a partir de cuántos píxeles de anchura de la ventana el diseño se reorganizará para tablets y cuándo para móviles.

A parte, en la misma Configuración global tenemos los apartados de CSS y JavaScript, que permitirán aplicar código CSS y JavaScript de manera global en la web, sea cual sea la página en la que nos encontremos.

Módulos

Estos son los módulos que Beaver Builder incluye por defecto. Una parte de ellos son los que se incluyen en la versión gratuita. Esto es con lo que se construirá nuestro sitio web.

• Imagen (también en versión gratuita): inserta una foto desde una URL o desde la Biblioteca de medios.
• Editor de texto (también en versión gratuita): añade texto enriquecido, como en el editor de entradas de WordPress.
• Vídeo (también en versión gratuita): inserta un vídeo desde una URL o desde la Biblioteca de medios.
• Separador: inserta una línea para separar secciones o contenido.
• Acordeón: crea un acordeón interactivo. Útil para una sección «Preguntas más frecuentes», por ejemplo.
• Encabezado: se usa para encabezados o títulos.
• Botón: crea un botón con redirección a una URL interna o externa.
• Llamado de acción: la llamada de acción te permite llamar la atención (valga la redundancia) a alguna parte del contenido. Por ejemplo, servicios específicos que se ofrezcan o algo especial.
• Callout: el módulo de callout es un método más robusto para llamar la atención de el contenido, muy similar al módulo de Llamado de acción anterior.
• Formulario de Contacto: lo que indica el nombre.
• Contenido Deslizante (Slider): se utiliza para crear presentaciones de diapositivas de contenido con imágenes y/o texto enriquecido.
• Galería: inserta una galería de imágenes de tu Biblioteca de medios o desde SmugMug.
• Pestañas: crea fácilmente contenido basado en pestañas como las de tu navegador.
• Contador: crea círculos, números y contadores en barra.
• Formulario de Suscripción: crea formularios de registro en boletines de noticias que se integran con MailChimp, Mad Mimi, Constant Contact y muchos otros.
• HTML (también en versión gratuita): usado para insertar código HTML o shortcodes.
• Barra lateral (también en versión gratuita): inserta cualquiera de las barras laterales de WordPress que contienen widgets (las que se encuentran en Apariencia > Widgets.
• Icono: muestra un icono. Están disponibles los iconos de FontAwesome, Foundation y Dashicons.
• Grupo de iconos: inserta un grupo de iconos. Es útil para construir botones de redes sociales.
• Mapa: muestra un mapa de Google basado en una dirección concreta.
• Entradas: crea listados de entradas para tu blog. Se puede filtrar por etiquetas o categorías.
• Carrusel de Entradas: genera un carrusel animado de entradas, o de tipos de contenido personalizado. Se puede filtrar por etiquetas o categorías.
• Deslizador de entradas: genera una presentación de diapositivas animada de entradas. Se puede filtrar por etiquetas o categorías.
• Tabla de Precios: crea una tabla de precios simple, como la que se ve en https://www.wpbeaverbuilder.com/pricing/
• Presentación de diapositivas: Muestra una presentación de diapositivas de imágenes de la biblioteca de medios o de SmugMug.
• Botones Sociales: inserta iconos sociales para que los visitantes puedan tuitear, dar Me gusta o compartir contenido en las redes sociales.
• Testimonios: crea un slider de testimonios con varias opciones de estilo. Útil para mostrar lo que los clientes piensan de uno.
• WooCommerce: un módulo superútil si tienes una tienda online. Te permite mostrar partes de la tienda como un producto en concreto, el botón de añadir al carrito, un listado de productos en concreto, etc.
• Menú: muestra uno de los menús que hayas configurado en WordPress con diferentes opciones de diseño y formato.
• Cuenta Regresiva: lo que indica el nombre, una cuenta atrás personalizable.

Como vemos, solo 5 de ellos están en la versión gratuita, así que para sacarle partido de verdad a Beaver Builder, es mejor ir a por la versión Standard como mínimo.

Además, cabe mencionar que hay otros desarrolladores que han creado más módulos (y muy chulos). Dos de los más famosos son Ultimate Addons for Beaver Builder (UABB), que también han desarrollado el famoso tema de WordPress Astra, y PowerPack for Beaver Builder. Ambos te traen muchísimos módulos más, así que vale la pena darles un vistazo.

Precio

Beaver Builder tiene 4 planes: el gratuito, el Standard, el Pro y el Agency. Con el gratuito nos da para crear una web muy sencilla, ya que solo tenemos los 5 módulos gratuitos que hemos mencionado antes. Luego, estas son las diferencias entre los otros 3 planes.

	Standard	Pro	Agency
Precio	$99	$199	$399
Características	Módulos «premium»	Todo lo que incluye el plan Standard	Todo lo que incluye el plan Pro
	Soporte técnico durante 1 año	Tema Beaver Builder	Ajustes de multisitio en red
		Soporte para multisitio	Soporte para «Marca blanca»

Para un usuario normal, creo que solo vale la pena ir a por el plan Pro si es muy importante que el plugin y el tema se integren a la perfección, sin ajustes duplicados y garantizándote un perfecto funcionamiento. Para la mayoría de usuarios el plan Standard será la mejor opción, ya que hay multitud de temas que se adaptan a Beaver Builder por menos de $100, que es la diferencia entre el plan Standard y el Pro. El plan Agency, como su nombre indica, será el adecuado para agencias que quieran poner su nombre a sus implementaciones y que vayan a hacer muchas implementaciones en multisitio.