Beaver Builder constructor visual

Todo sobre el constructor visual Beaver Builder en español

Cuando se trata de crear páginas web, todo el mundo tiene sus herramientas, vas probando y probando hasta que usas las que te ofrecen mejores prestaciones, buscas aquellas que te son cómodas y más efectivas para ayudarte a conseguir tu propósito. Para mi ya desde hace más de un año esa herramienta es el constructor visual Beaver Builder.

Hace mucho tiempo que tengo ganas de escribir este post pero entre unas cosas y otras, me he visto obligado a posponerlo, así que ya no puedo dejarlo pasar más tiempo, me parece justo hablar de una de las herramientas que uso en mi trabajo diario y de como está a mejorado mi vida profesional.

¿Por qué me decidí a usar un constructor visual o page builder?

Es una pregunta bastante lógica ya que tengo conocimientos muy avanzados en HTML5 y CSS3.

Hasta hace poco más de un año todo lo que hacía lo hacía picando código es decir la primera versión de está página en la que estas creativolandia.com fue primero diseñada en photoshop, después maquetada enteramente en HTML5 y CSS3 , y posteriormente este código lo convertí en un tema de wordpress de mi propia cosecha.

Desde finales de 2012 deje de usar temas de otros para crear los míos propios, entre otras cosas porque en aquel tiempo sólo usaba temas de themeforest.com y mi forma de trabajar era un poco diferente:

  1. Creaba el diseño de la web en photoshop.
  2. Posteriormente buscada un tema lo más similar posible a mi diseño.
  3. Adaptaba ese tema a mi diseño.

Esta forma de trabajar me hacía perder incontables horas, básicamente porque…

  1. Cada tema se configuraba de una manera y muchos de ellos no eran lo que se dice interfaces usables
  2. Perdía mucho tiempo leyendo y viendo documentación de un tema que quizás nunca volviera a usar.
  3. Gastaba mucho tiempo en modificar el código para que se adaptara a mis diseños.

Todo esto finalmente me llevó a crear mis propios temas, pues tenía mayor control sobre lo que quería hacer, me sentía menos frustrado y los resultados de cara a los clientes eran mejores.

Después me dí cuenta que mis temas eran vulnerables frente a las actualizaciones de WordPress por lo que tras conocer Genesis Framework decidí usar el framework como base para mis diseños ya que tiene un equipo de desarrolladores detrás que constantemente están mejorando el framework y yo podía crear temas hijos sobre Genesis y hacer literalmente los diseños que me diera la real gana.

De hecho adapte creativolandia.com como tema hijo de Genesis Framework.

Mis diseños serían la chapa y pintura, WordPress el chasis y génesis framework el motor de mis creaciones

Hay que tener en cuenta que el producto final debía ser pensado para que fuera usable por mis clientes.

Esto era un problema ya que si yo lo hacía todo en HTML5 y CSS3 cada vez que mis clientes quisieran cambiar una frase, me tendrían que llamar ya que no tienen el control sobre su propio proyecto.

Y es aquí donde entra la idea del page builder, básicamente necesitaba que mis clientes no se volvieran locos a la hora de poder editar sus propias páginas y pudiesen hacerlo fácilmente.

 

¿Por qué Beaver Builder frente a otros constructores visuales ?

El caso es que cada vez hay más editores visuales.

Empecé a probar muchos, pero todos cargaban incontables estilos y scripts en todas las páginas que solo usaban en algunas.

Todos los que he probado hasta el momento y no son pocos, si decides dejar de usarlos, te sumergen en el denominado efecto lock in:

  1. Bien te dejan innumerables shortcodes huérfanos por todo el sitio
  2. Algunos hacen desaparecer tu contenido como si de magia se tratase.

Ambas son unas grandiosas putadas más si cabe la de perder el contenido

beaver builder constructor visual

Este defecto que te he comentado es lo que pasa con los 3 editores visuales más usados :

  • Visual composer
  • Thrive content builder
  • Divi

Entonces descubrí Beaver Builder.

Cuando me pase a Genesis y empece a investigar leí que dentro de la comunidad de Genesis Framework escuche que era el más recomendado por esta.

Gente como Chris Lema uno de los influencers más bestia de la comunidad wordpress en estados unidos, recomendaba Beaver Builder altamente.

beaver builder es mi constructor visual favorito

Beaver Builder es un constructor visual que trabaja directamente sobre el frontend es decir trabajas el resultado final, estas viendo y modificando el diseño en tiempo real

Total que me decidí a probarlo y descubrí que :

  • No te carga nada (estilos o scripts) en las paginas que no se activa.
  • Una vez lo activas solo carga los estilos y scripts de los módulos que usas en la página.
  • crea hojas de estilo y hojas de scripts específicos por página
  • Es muy intuitivo y fácil de usar.
  • Si lo desactivas de una página borra únicamente las clases y el html que el usa para funcionar y deja tu contenido intacto, no pierdes textos ni imágenes.
  • Te permite añadir estilos o scripts globales para todas las páginas que usen beaver builder o solo para algunas en particular
  • Puedes crear plantillas de página, de fila, de módulos, para reutilizarlos posteriormente en todo el sitio.
  • Estas plantillas las puedes integrar en cualquier parte del sitio mediante un shortcode
  • Viene con plantillas de pagina y de contenido incluidas.
  • Puedes duplicar una pagina con un sólo click
  • 30 módulos integrados en las versiones premium.
  • Te permite usar los widgets que tengas en tu instalación de wordpress como si fueran módulos
  • Puedes exportar tus plantillas a otras instalaciones de beaver builder
  • Hay todo un ecosistema a su alrededor mogollon de empresas estan creando addons para este builder, algunos de ellos realmente espectaculares.

Beaver Builder –  Version gratuita  o Version Premium

Hay dos versiones de Beaver Builder  y varias licencias

Version gratuita 

Beaver Builder y su versión gratuita

Hay una version gratuita de Beaver Builder para poder probarlo.

  • Opciones de estructura filas y columnas
  • NO puedes usar las plantillas integradas ni crear propias.
  • Módulos básicos  (con algunas restricciones)
  • Widgets

Version Premium

Beaver builder versión premium

Aparte de lo que incluye la versión gratuita la Premium puede:

  • Algunos módulos básicos extras(botón, separador ,encabezado)
  • Módulos avanzados
  • Usar, guardar, exportar e importar plantillas de página, filas, módulos.
  • Opciones extras en las modales de configuración de filas, columnas y módulos

La versión premium está disponible en varias licencias a elegir que se renuevan anualmente:

Beaver builder licencias disponibles

Paquete Standard

El paquete standard

  • Puedes usar el plugin en sitios ilimitados
  • Soporte durante un año
  • Puedes usar los módulos premium y los templates premium

El precio del paquete standard es de 99$ al año

Paquete Pro

El paquete pro incluye, todo lo incluido en el anterior paquete standard más :

  • El tema de Beaver builder
  • Es compatible con wordpress multisitio

El precio del paquete pro es de 199$ al año

Paquete Agency

El paquete agency aparte de todo lo incluido en los anteriores paquetes más:

  • Te permite cambiar todo el branding del mismo plugin y ponerle el tuyo propio.
  • Incluso te permite cambiar las plantillas que vienen de serie con él y poner las tuyas propias.

El precio del paquete Agency es de 399€ al año


Todos los paquetes se renuevan anualmente con un descuento del 30%

Módulos que trae Beaver Builder

Beaver Builder viene con varios módulos para hacerte la vida muy fácil

Distribución de filas y columnas

No son exactamente módulos, más bien son opciones estructurales que te permiten usar el sistema de columnas incorporado en beaver builder.

Un sistema muy sencillo de usar y muy intuitivo que te permite crear de manera muy rápida hasta 6 columnas.

Puedes añadir columnas de manera muy sencilla a una fila existente.

Te permite estilizar tanto la fila como la columna con multiples opciones:

  • Color de texto
  • Color de encabezados
  • Color de encabezados
  • Color de fondo
  • Poner una foto de fondo
  • Superposición de color entre la foto de fondo y el contenido
  • Añadir bordes
  • Cambiar paddings y margenes
  • Visibilidad en dispositivos
  • clases e identificadores css personalizados
  • etc

Puedes cambiar el ancho de las columnas solo tirando de un manejador

Puedes cambiar el orden de filas y columnas e incluso duplicarlas u ocultarlas en dispositivos.

Módulos básicos

Los módulos básicos son las herramientas elementales para poder trabajar con beaver builder y créeme sólo con esto y la estructura de columnas que aporta la versión lite, ya tienes juego.

Listado de modulos básicos:

  • Encabezados: sirve para crear títulos configurables 100% (no disponible en la versión lite)
  • Editor de texto: te permite incluir el editor de texto de wordpress
  • Botón : puedes  añadir y estilizar al 100% tus botones (no disponible en la versión lite)
  • HTML: editor html para trabajar directamente en código y con código de color
  • Separador: te permite añadir separadores completamente customizables en tamaño, color, anchura (no disponible en la versión lite)
  • Audio: te permite insertar audios
  • Video: te permite insertar videos tanto de tu misma instalación como de otros proveedores como youtube , vimeo
  • Imagen : te permite insertar imágenes con varias opciones de configuración

Módulos avanzados (no disponibles en la versión lite)

  • Acordeón.
  • Barra lateral.
  • Botones sociales.
  • Call out.
  • Carrusel de entradas
  • Contador circular o en barra
  • Slider
  • Cuenta regresiva.
  • Entradas.
  • Formulario de contacto
  • Formulario de suscripción con los proveedores de Email marketing más relevantes.
  • Galería.
  • Grupo de iconos.
  • Icono.
  • Llamado a la acción.
  • Mapa.
  • Menú.
  • Pestañas o tabs.
  • Presentación.
  • Slider de entradas.
  • Tablas de precios.
  • Testimonios.

Widgets

Te permite usar los widgets existentes en tu instalación como si de los propios módulos de beaver builder se tratase.

Todos los widgets te aparecerán en un listado, bastará con que los arrastres dentro de una columna.

Se configuran igual que si fueran módulos directamente sobre el diseño de tu página

Es decir que puedes añadir módulos nuevos mediante los widgets que existan.

Páginas, Filas y módulos guardados (no disponibles en la versión lite)

Tendrás siempre accesibles las plantillas de páginas filas y módulos que guardes

Podrás añadir las plantillas de filas y módulos a tu diseño simplemente arrastrando.

Beaver Builder incluye numerosas plantillas de página que podrás insertar en tu diseño o sustituir todo el diseño, en un par de clicks, del mismo modo podrás guardar las tuyas propias para usarlas como base de otras páginas que crees.

Beaver Builder incluye un gran número de plantillas listas para usar

Beaver Builder incluye su propio exportador de plantillas aunque también puedes usar el propio de wordpress para importar y exportar estas.

 

Cosas que echo de menos en Beaver Builder

Como todo en la vida la perfección es algo que todo tiende a alcanzar y Beaver Builder no es la excepción por lo hay  dos cosas fundamentales que echo de menos en Beaver Builder:

  1. Columnas anidadas: columnas dentro de columnas , me consta que están trabajando en ello pero en más de una ocasión lo he necesitado , aunque puedo decir que no es una cualidad que otros constructores visuales posean, ya es
  2. No se puede volver atrás: Como lo lees, ya que no tiene flechas para volver atrás, ni historial, ni nada parecido , esto si que es una cosa que a mi me jode personalmente mogollón, he de decir que me los toca y mucho.

Video para que veas Beaver Builder en funcionamiento


Por supuesto que me encantaría saber qué piensas acerca de Beaver Builder, ¿lo has probado? ¿te resistes?¿Crees que hay otro mejor?¿por que ?

Me encantaría saber tu opinión, te espero en los comentarios, un fuerte abrazo!!!

En este post he incluido links de afiliado, ¿por qué?
Personalmente creo que ganar dinero no está reñido con enseñar, yo ofrezco recursos y comparto gran parte de mi saber y de la experiencia acumulada de forma gratuita, te aconsejo sobre productos que creo son los mejores en relación calidad precio.
No, no estás obligado a comprar a través de mis enlaces.
Si finalmente decides comprar esos productos y lo haces a través de mis enlaces, yo voy a ganar una comisión, me estas ayudando de algún modo a mantener este blog, ya que esos enlaces de afiliados representan una pequeña parte de mis ingresos, y yo te voy a estar infinitamente agradecido

Acerca del autor

Oscar Fernández Herrero

Diseñador gráfico y web ¿ Te gustaría mejorar el aspecto visual de tu proyecto? Ayudo a bloggers y a emprendedores a mejorar su credibilidad por medio del diseño, ya que una primera buena impresión puede ser definitiva a la hora de conseguir tu próxima conversión. ¿Te animas?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable del fichero: Óscar Fernández Herrero.Finalidad:moderar comentarios. La Legitimación; es gracias a tu consentimiento.Destinatarios: tus datos se encuentran alojados en mi plataforma de hosting de Webempresa. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos enviando un email a oscar@creativolandia.com o ante la Autoridad de Control.Encontrarás más información en política de privacidad

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.

Comentarios

  1. Interesante artículo.

    Me ha sorprendido que los mencionados, dejen shortcodes. Ya lo sabía por Divi, gracias a Joan Boluda, pero no me lo esperaba de los otros dos, ya que son tan elogiados.

    Yo uso el maquetador visual de SiteOrigin, no deja rastro de shortcodes, una vez desactivas la opción previa maquetación. Tiene historial, clonación de páginas/entradas y posibilidad de exportar/importar todo el código HTML de la página que hayas maquetado.

    Lo único que no posee es un widget que te facilite hacer un formulario de suscripción. Yo tuve que ingeniármelas con Magic Action Box, cambiándole totalmente de estilo CSS, gracias a otro plugin de SiteOrigin, el cual es una maravilla.

    Saludos Oscar, gran aporte 🙂
    Pd.: Guarde tu tutorial en un articulo que hice sobre maquetadores visuales.

    • Buenas Joan,

      Divi y Visual composer dejan shortcodes, Thrive Content Builder una vez lo desactivas no deja nada de lo que hayas creado con él, es decir te deja la página en blanco, hace desaparecer por arte de magia tu contenido.

      También en su momento probé SiteOrigin el problema de esté, es que se trabaja muy lento ya que no es un constructor visual, lo maquetas todo desde el backend con un sistema drag and drop, está muy bien por que es gratuito, pero recuerdo que cuando lo probé estaba bastante limitado.

      En este sentido puedes usar Beaver Builder versión free y obtener los mismos resultados, pero con la oportunidad de usar un constructor visual desde el frontend.

      Si no recuerdo mal con SiteOrigin, sí se podían utilizar widgets, con instalar por ejemplo genesis enews extended ya hubieras podido usarlo.

      Gracias por tu comentario.
      Un abrazote!!!

  2. ¡Hola, Oscar! ¡Muchas gracias por la información! Solo preguntarte (sé que mucha gente querría saberlo) si ¿es obligatorio renovar la licencia cada año? En la página de la empresa pone lo siguiente:

    Do I have to renew each year for your products to work?
    Absolutely not! Beaver Builder will continue to work after a year. Our annual fees are there so we can continue to provide updates and outstanding support.

    ¿Quiere decir eso que se puede utilizar el plugin sin renovar la licencia? ¿Y las actualizaciones?

    • Buenas Olga,

      El plugin funciona de por vida, lo que no tienes, si no renuevas la cuota, son actualizaciones y soporte técnico, al cabo de un año te hacen un descuento del 40% en la cuota, es decir que el primer año pagas 99$ y los siguientes 59,4$.

      Espero haberte contestado y no te cortes, puedes preguntar lo que quieras que para eso estamos.

      Un fuerte Abrazo!!!

  3. Buenas Tardes, muy interesante tu post. Por lo que lei usted usa ese constructor para crear sus web. Este constructor trate para crear ese tipo de texto 3d que se observa al principio de su web el que dice “DISEÑAR PARA CONVERTIR”. Gracias…

    • Buenas Jose,

      No, ese texto es CSS puro y duro, si te gusta puedes verlo desde el inspector de tu navegador, copiarlo y aplicarlo donde quieras.

      Un fuerte abrazo!!!

  4. Hola óscar Excelente post.
    Los maquetadores visuales nos ahorran mucho tiempo, también trabajo con genesis framework solo que la home page las diseño a puro código sin usar maquetadores o utilizo Thrive Architect.

    Voy a probar Beaver Builder a ver qué tal pero con la versión gratuita tendré muchas limitaciones así que veré como hago.

    Saludos

close

¡NO ESPERES MAS! AHORRA MÁS DE 300 EUROS

CONSIGUE HOY EL TUTORIAL PASO A PASO GRATIS: DISEÑA UN LOGOTIPO ATRACTIVO EN UNA TARDE CON CANVA

Responsable: Oscar Fernández Herrero
Finalidad: envío de mis publicaciones así como correos comerciales.
La Legitimación; es gracias a tu consentimiento.
Destinatarios: tus datos se encuentran alojados en mis plataformas de email marketing Active Campaign suscrita al PrivacyShield.
Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos
Encontrarás más información en la página de política de privacidad