¿Cómo usar el plugin Beaver Builder para crear un sitio web?

¿De verdad el plugin Beaver Builder puede ayudarme a que yo mismo cree mi propia web?

Como a buen seguro estarás haciéndote esta pregunta, compartiré contigo una situación que quizás te pueda ser familiar:

Llega un momento en la vida en que todo emprendedor digital necesita tener una web profesional, donde ofrezca sus servicios y productos. En el caso de no disponer de un presupuesto demasiado generoso como para contratar a un profesional, comienzas a crearla tú mismo, a través de tutoriales y artículos escritos por otros profesionales.

Esto está bien durante un tiempo, para ir enterándote sobre cómo contratar un hosting e instalar el mejor CMS para tu proyecto. Pero claro, llega un momento en que, dado que dispones de conocimientos limitados, te encuentras con una instalación WordPress limpia, con el tema y plantilla que vienen por defecto y sin saber qué hacer.

Por tanto, te preguntas: ¿cómo continuar creando mi propia web de la manera más fácil?

Si continúas leyendo este artículo, te mostraré cómo hacerlo con el plugin Beaver Builder…

Aquí tienes 2 opciones para ponerte tu camiseta de Juan Palomo y empezar a montar tu web:

• Opción 1: Ir a ThemeForest o mercados de plantillas parecidos, pasarse unas buenas horas eligiendo, entusiasmado, una super plantilla con muchos fuegos artificiales y efectos, que se vende como churros.
• Opción 2: Instalar mediante un plugin en tu web, un Page Builder Drag & Drop o lo que es lo mismo, un constructor de páginas web de Pincha y Arrastra. Este es el caso de Beaver Builder, del que te hablaré hoy.

La primera opción no te la recomiendo, si lo que quieres es tener una web escalable, sólida y bien hecha, pues a nivel técnico, la gran mayoría están muy mal preparadas para WordPress.

Puede (y coge este puede con pinzas) servir para webs muy sencillitas para salir del paso, que una vez hechas, van a ser algo estáticas.

La segunda opción es la que vamos a utilizar en este artículo. El único lado difícil es elegir el mejor Page Builder.

Yo he usado casi todos los que hay (al menos los más conocidos) y te puedo asegurar que algunos me han decepcionado bastante.

¿Qué es Beaver Builder?

---

En este artículo te hablaré sobre Beaver Builder, el que a mi modo de ver, es el mejor Page Builder que he usado hasta la fecha (y no, este artículo no está patrocinado por ellos). 

Escribo esta guía porque la gran mayoría de mis proyectos web los llevo a cabo con este plugin y aún no me ha decepcionado en más de 3 años.

A lo largo de este artículo, te indicaré las ventajas de usar este plugin y lo analizaremos en vivo, para que veas lo fácil que es montar una página web con él, en la que tú tendrás todo el poder en el presente y en el futuro de la misma.

Ventajas de usar Beaver Builder

---

El hecho de usar un page builder tiene sus ventajas e inconvenientes, todo hay que decirlo.

Pero como ya nos vamos conociendo y sé que eres un emprendedor nato, imagino que quieres hacer (o re-hacer) una web para tu PYME (o si no es para ti, es para tus clientes).

Con lo cual, con esto te sobra para alcanzar tu objetivo.

Merece la pena (y mucho) adquirir este plugin. Aquí expongo las ventajas que yo creo que tiene:

• Su precio es bajo, para todo lo que ofrece. (99 $ anuales por la versión standard).
• El soporte que te dan es muy bueno.
• Hay mucha gente que lo usa, por lo que puedes encontrar tutoriales, trucos y complementos por doquier.
• Lo puedes usar en sitios ilimitados.
• Van añadiendo módulos y secciones (lo vemos más abajo) continuamente.
• Es perfectamente compatible con otros plugins (WooCommerce, Jetpack, etc).
• Mi favorito: en el caso de que algún día lo desinstales, no deja código basura ni shortcodes.

Funcionalidades más importantes del plugin

---

Una vez instalado, sirve para cualquier Custom Post Type que tengas. Desde los básicos que vienen por defecto con WordPress (posts o páginas), hasta los que tú mismo te hayas creado (portfolio, equipo, etc).

Si tu negocio o empresa se mueve por landing pages, para las promociones que hagas, este plugin es ideal, porque te permite crear una página de aterrizaje de una manera muy fácil y sin complicaciones (lo veremos en los vídeos más adelante).

La empresa que ha lo creado, ofrece tres tipos de soluciones para WordPress. Todo depende de la licencia que tengas con ellos:

• Beaver Builder Plugin: es el que vemos en este artículo. Se trata del plugin que viene con la licencia estándar, el cual se instala en tu página de WordPress por el método tradicional y tú mismo lo configuras con un panel fácil y manejable.
• Beaver Theme: no es un plugin, es una plantilla. Se instala como cualquier otra plantilla y su manejo es incluso más fácil que el plugin. Para que funcione bien, tienes que tener Beaver instalado. Por eso, esta plantilla se considera como extensión del mismo y se adquiere con la licencia PRO.
• White Label: cuando compras el plugin o la plantilla con las otras licencias, siempre aparece el logo en el panel de control. Esta solución White Label (o marca blanca) está pensada para agencias.

Como agencia se entiende una empresa que tiene un servidor propio, en donde aloja webs de clientes y, dicha agencia, ofrece este constructor web como una de sus soluciones de negocio y el cliente en ningún momento verá su logo, sino el de la agencia.

Esta función se adquiere con la licencia Agency. 

• Beaver Themer: es la solución más reciente (desde mediados del 2017). Se considera una extensión de éste, aunque hasta ahora se vende por separado, independientemente de la licencia que tengas. Lo que hace esta extensión es crear plantillas de contenido para páginas.

Por ejemplo: sin esta extensión, cada vez que creas una página o entrada, tienes que hacerlo con las funciones básicas del plugin (pero a la hora de mostrar un producto de WooCommerce, por ejemplo, no controlas cómo se ve). Esta extensión te permite controlar cómo se pueden ver los elementos dinámicos de tu web (productos, posts de blog, etc. y realizar cambios en todos a la vez).

La última extensión de la “familia” cuesta un poco comprenderla, pero es bastante útil, si tu sitio web es muy complejo (por ejemplo si tienes un negocio tipo PYME, con apartados de Inicio, Servicios, Sobre nosotros, Contacto, etc, no te va a hacer falta).

En mi opinión, han creado esta última extensión para que éste se aplique a sitios web más grandes, como: tiendas online, blogs de mucha envergadura, etc. y abarcar así más mercado.

Lo bueno de estas licencias es que son para públicos muy diferentes.

Puedes empezar probando la versión demo de Beaver Builder de manera gratuita, para posteriormente poder adquirir la licencia que más se adapte a tu tipo de negocio u objetivo que persigues.

Además, si tienes la demo delante mientras miras el vídeo donde explico cómo funciona, mejor que mejor.

Y ya dejando de lado la parte teórica, vamos a pasar a lo que de verdad te interesa: cómo descargar, instalar y utilizar este Page Builder. 

¿Cómo descargar, instalar y configurar Beaver Builder?

---

Para descargarlo, basta con que vayas a la web oficial del plugin y te crees una cuenta personal. Antes de comprarlo, te recomiendo que busques algún cupón descuento a través de Internet.

A veces la propia empresa hace descuentos dependiendo del periodo del año (por ejemplo, en el próximo “Black Friday” seguro que algo harán, así que estate atento y aprovéchate de ello).

Una vez ya lo tengas instalado en tu web, lo debes instalar como cualquier otro complemento de WordPress y, por si acaso tienes alguna duda, puedes echarle un ojo al siguiente vídeo, en el que doy un repaso a todas las opciones que tiene:

¿Cómo crear una página desde cero con Beaver Builder?

---

Una vez instalado y configurado, vamos a entrar en su corazón, para crear una página sencilla, revisando todos sus módulos.

Cada uno de los módulos que trae por defecto cumplen una determinada función. Dichos módulos van integrados en filas y columnas, que puedes crear y mover a tu elección.

Los módulos por defecto son:

Módulos básicos

• Audio: te permite insertar un audio desde tu disco local o desde un link.
• Botón: puedes crear un botón y customizarlo a tu gusto.
• HTML: te permite insertar un código HTML, CSS, Javascript o lo que necesites a nivel de desarrollo.
• Título: crea un título y le da estilos.
• Foto: inserta una foto o imagen desde tu ordenador o desde una URL.
• Separador: separa un contenido de otro de una manera elegante.
• Editor de texto: te permite editar texto con el editor de textos de siempre.
• Vídeo: te permite subir un vídeo desde tu ordenador o insertarlo desde una URL o por código de embebido.

Módulos avanzados

• Acordeón: crea una tabla flexible de contenido a modo de acordeón.
• Llamada a la acción: el famoso Call to action (CTA) para invitar al usuario a realizar una acción concreta.
• Destacado: destaca un contenido personalizado para que tenga más visibilidad en la web.
• Formulario de contacto: inserta un formulario de contacto.
• Slider de contenido: crea un slider (algo así como un pase de diapositivas) del contenido que elijas.
• Cuenta atrás: inserta una cuenta atrás desde la fecha que quieras, y te da opciones al terminar la cuenta atrás.
• Galería: inserta una galería de las fotos que quieras.
• Icono: inserta un icono desde una librería propia.
• Grupo de iconos: crea un grupo de iconos, los cuales puedes enlazar a donde quieras.
• Mapa: inserta un mapa (Google Maps).
• Menú: inserta un menú que hayas creado previamente en el apartado correspondiente en WordPress.
• Contador: crea un contador en forma de barras, círculo o abanico.
• Post: inserta un post en concreto.
• Carrusel de posts: crea un carrusel para mostrar posts dinámicos.
• Slider de posts: crea un slider con los posts que quieras.
• Barra lateral: simula una barra lateral donde puedes incluir widgets o contenido.
• Slideshow: crea una presentación de diapositivas.
• Botones sociales: inserta fácilmente botones sociales con tu presencia online.
• Formulario de suscripción: crea un formulario de suscripción a tu web.
• Pestañas: crea contenido estático separado por tabs o pestañas.
• Testimonios: crea un slider de testimonios de clientes.

Widgets de WordPress

En esta opción, puedes insertar cualquier widget de WordPress que venga por defecto con tu instalación, o que se cree a través de un plugin independiente.

Por ejemplo, los últimos productos añadidos en WooCommerce, un widget que muestre tu timeline de Twitter, etc.

Creación de filas y columnas

También te permite crear filas y dividirlas hasta un máximo de 6 columnas, personalizando el ancho de las mismas, a tu gusto, y de manera muy fácil.

Guardar filas y módulos para reutilizarlos

Cuando has creado una sección de tu web entera, y quieres reutilizarla en otra parte de tu web, tienes la opción de guardar cualquier elemento, módulo, sección y página completa, de manera individual o en modo “Master”. 

En este modo, cuando cambias algo en el elemento guardado, se cambiará automáticamente en todas las partes de la web en donde esté incluido dicho elemento.

Voy ahora a mostrarte, a través de este vídeo, cómo podemos crear fácilmente una página para nuestro negocio.

Crear tu sitio web en pocos minutos con plantillas por defecto

---

Una opción incluso más fácil que te ofrece es crear páginas a partir de plantillas que ellos mismos crean, que vienen por defecto en la instalación del plugin.

Puedes aplicar fácilmente dichas plantillas y personalizarlas a tu gusto e incluso añadirle módulos extra y filas ya creadas por ti en otros proyectos.

¡Las posibilidades son infinitas!

Complementos para Beaver Builder. Receta profesional para una web sólida

---

En la propia página oficial, recomiendan complementos extra para utilizar con el plugin.

Personalmente he utilizado casi todos los recursos que mencionan y en ellos se puede encontrar gran cantidad de contenido extra y ayuda para montar tu web con él.

Como te mencioné al principio de este artículo, después de haberlo utilizado durante 3 años, la mezcla que utilizo en todos mis proyectos y que me permite crear o simular cualquier plantilla o diseño que me envíe un cliente, es la siguiente:

• Framework: Genesis (StudioPress).

• Extra para framework: Genesis Extender (Cobalt Apps).

• Page builder: Beaver Builder Plugin.

• Extra para Page Builder: Ultimate Addons or Beaver Builder (UABB).

• Extra para Page Builder: Beaver Themer (muy útil y que posiblemente veamos de manera independiente en otro post).

• Formularios: Gravity Forms.

Conclusión

Esta receta de utilidades de Beaver Builder es la que a mí personalmente me funciona con la gran mayoría de mis clientes.

Obviamente, sabemos que cada proyecto es un mundo y unos requieren más y otros menos funcionalidades web, sin embargo, la base de mi trabajo es esta y es una base flexible, profesional y que no te dará dolores de cabeza en un futuro.

¿Entiendes ahora que todos mis proyectos los lleve a cabo con el plugin Beaver Builder?

Si tienes cualquier duda o comentarios acerca de su funcionamiento o funcionalidades, puedes darme tu feedback a través de Twitter.