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:
- Creaba el diseño de la web en photoshop.
- Posteriormente buscada un tema lo más similar posible a mi diseño.
- Adaptaba ese tema a mi diseño.
Esta forma de trabajar me hacía perder incontables horas, básicamente porque…
- Cada tema se configuraba de una manera y muchos de ellos no eran lo que se dice interfaces usables
- Perdía mucho tiempo leyendo y viendo documentación de un tema que quizás nunca volviera a usar.
- 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:
- Bien te dejan innumerables shortcodes huérfanos por todo el sitio
- 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
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 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
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
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:
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 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:
- 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
- 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!!!
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
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!!!
¡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!!!
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!!!
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
Muy interesante. Respecto al defecto de que no se puede tirar atrás, si a lo que te refieres es al ‘undo’ de toda la vida, si se puede.. Simplemente usas control + z y ya está. En Mac sería manzana + z.
Saludos!
Mil gracias Por tu aclaración, Gerard.
ten en cuenta que esto se escribió cuando Beaver Builder iba por la versión 1.X y las cosas han cambiado mucho desde entonces, está claro que el artículo necesita ya una actualización, de cualquier forma ahí dejo tu granito de arena.
Abrazote!!!