Beaver Builder es un plugin con el que podrás diseñar las distintas secciones de tu página en WordPress de una forma fácil y con excelentes resultados.

¿Qué te parece la idea de arrastrar y soltar elementos?

Hoy vas a conocer una herramienta que te va a permitir hacer diseños para los que normalmente deberías tener mucha práctica con código HTML y CSS, pero de una forma muy simple, intuitiva y visual.

Y si eres de los que se manejan bien con el código presta atención, porque este plugin te va a ahorrar muchísimas horas de trabajo.

 

¿Qué es un page builder?

¿Escuchaste hablar de los constructores de páginas o page builder? Se les llama así a las herramientas que te permiten diseñar una página de tu sitio web seleccionando elementos y colocando cada uno en la ubicación deseada, además de configurarlo sin necesidad de tocar el código.

WordPress nació como un gestor de contenidos para blogs y con el tiempo fue incorporando cada vez más herramientas y posibilidades. Tal es así que, al día de hoy, es utilizado para crear cualquier tipo de sitios web, incluso de los más complejos como podrían ser tiendas online y plataformas para cursos online con membresía.

Pero en algunos aspectos todavía conserva esa esencia de blog.

Si por ejemplo queremos crear la sección Servicios de nuestro sitio web, lo que hacemos es añadir una nueva página y nos ponemos a llenarla con la información.

Pero resulta que el editor nativo de WordPress solo nos ofrece un área para escribir o colocar imágenes, es parecido a Word pero más básico.

Si quisiéramos estructurar esa página en filas con diferente cantidad de columnas para distribuir mejor el contenido la cosa se nos complica. Únicamente podemos hacer ésto editando el HTML de la página y el CSS del tema que estemos utilizando, si es que tenemos cierta experiencia con este tipo de códigos.

Para dar una solución a quiénes no saben y no les interesa aprender a programar, y para simplificarnos la vida a los que sí sabemos, nacieron los constructores de páginas como Beaver Builder.

 

Yo soy alguien que antes de aprender WordPress aprendió a hacer páginas web escribiendo directamente el HTML y el CSS, y programando en PHP. Por eso siempre fui algo reacio a este tipo de herramientas.

Porque lo que hacen es generar el código de forma automática y el código generado de esta manera nunca es tan limpio como cuando se lo escribe manualmente y a conciencia.

Sin embargo hace poco me animé a probar Beaver Builder, gracias a una recomendación de Javier Gobea, y creo que me voy a quedar un buen tiempo con este plugin. Es uno de los mejores constructores de páginas que hay y también es muy bueno respecto al código que genera, evitando sobrecargar innecesariamente la página.

 

Ventajas y desventajas de utilizar un page builder

Entre las ventajas de utilizar este tipo de herramientas podemos enumerar:

  • Facilidad en el armado de la página.
  • Rapidez, no es necesario escribir código y hacer cientos de pruebas.
  • Intuitivo, consiste en arrastrar y soltar elementos.
  • Visual, podemos ir viendo en directo el resultado final.
  • Mejor calidad del diseño, ya que te permite hacer cosas que de otra forma no podrías.

 

En cuanto a las desventajas tenemos:

  • Dependencia, si desinstalamos la herramienta perdemos el trabajo realizado.
  • Mayor cantidad de código HTML.

Admito que lo del código como desventaja puede ser cuestionable, ya que es difícil analizar exactamente qué impacto tienen unos milisegundos más en el tiempo de carga de la página, para un sitio web de un profesional independiente con 100 o 200 visitas/días.

Si tienes un blog con altísimo volumen de tráfico, de 1.000 visitas/días en adelante, deberías sí plantearte esta cuestión.

Respecto a la dependencia, si estás decidido a aprovechar las ventajas de utilizar un constructor de páginas debes aceptar que vas a depender de la herramienta.

Existen plantillas para WordPress que traen constructores incorporados. Estos sí que no te los recomendaría.

Porque cuando quieras cambiarte a otro tema vas a tener que armar todas las páginas de nuevo. Y no es nada raro que en algún momento quieras darle una lavada de cara a tu página cambiando el tema o pasándote a un tema premium.

 

Beaver Builder es un plugin, ésto significa que es independiente del tema que utilices y que puedes cambiar de plantilla libremente sin tener que rehacer todo el trabajo. Pero si usas algún otro plugin que no sea muy bueno o que, a la larga no te da buenos resultados, se te va a complicar cambiarlo.

Yo me animé con Beaver Builder solo porque viene recomendado por personas que saben mucho del tema.

 

Pero ya voy por las 750 palabras escritas y todavía no te mostré cómo funciona el plugin… así que vamos.

 

Video Tutorial: Conociendo Beaver Builder

Beaver Builder significa literalmente castor constructor y el logo de la empresa es justamente un castor. Así lo puedes encontrar en el repositorio de plugins de WordPress.org, directamente en la sección de plugins de tu WordPress.

Este plugin tiene una versión gratuita y otra de pago con más herramientas. De todas formas con la gratuita ya se pueden hacer muchísimas cosas, y es la que yo estoy utilizando por ahora.

Pon el siguiente video en pantalla completa y elige la resolución más alta (720 HD).

 

Comenzando con Beaver Builder

Una vez que tengas instalado el plugin, si creas una página nueva vas a encontrar opciones adicionales.

Beaver Builder nueva pagina

 

En el editor de la página ahora hay dos solapas:

  • Editor de Texto: que te permite utilizar el editor nativo de WordPress.
  • Page Builder: para construir la página con el constructor de Beaver Builder.

Beaver Builder activar constructor

 

Si haces clic en la solapa Page Builder se abre el constructor.

Beaver Builder es un constructor muy visual así que lo primero que vemos es la página en blanco como se vería publicada, con el encabezado, pie de página y barras laterales si hubiera. Vamos a trabajar directamente sobre la vista previa.

A la derecha tenemos una barra vertical del plugin que contiene todos los elementos que podemos arrastrar hacia la página.

Beaver Builder barra lateral

 

Básicamente lo que vamos a hacer es agregar filas que pueden contener una, dos, tres y hasta seis columnas. Después dentro de estas columnas vamos a poner los elementos de texto e imágenes que queramos.

 

Agregando Filas y Columnas

Lo primero que tienes que hacer es añadir una fila con la cantidad de columnas que quieras. En este ejemplo voy a Distribución de Fila y arrastro la que dice 2 Columnas.

Beaver Builder arrastrar y soltar

Arrastramos la fila con dos columnas y la soltamos en la página vacía.

Beaver Builder arrastrar y soltar 2

 

Y en la siguiente captura puedes ver como quedó mi fila con 2 columnas. Por ahora las columnas están vacías, por eso las muestra con línea de puntos y sombreado.

Podemos cerrar la barra lateral para que no moleste y nos deje ver todo.

Beaver Builder crear varias columnas

 

Arrastrando hacia la derecha o izquierda podemos ajustar el ancho de cada columna.

Luego, para insertar más elementos abrimos nuevamente la barra lateral haciendo clic en el botón Añadir Contenido.

Beaver Builder abrir barra lateral

 

Los Módulos Básicos

Los módulos básicos de Beaver Builder son los principales y los más utilizados ya que te permiten agregar a la página bloques de texto y multimedia de diversas fuentes. Vamos a verlos.

Módulo de Texto

El módulo de texto es el más importante y utilizado de todos los módulos disponibles en Beaver Builder. Permite insertar bloques de texto en la página, ajustar sus propiedades, tamaño y color.

Para añadir uno tenemos que buscarlo en Módulos Básicos y arrastrarlo hacia una de las columnas agregadas en el paso anterior.

Beaver Builder editor de texto

Beaver Builder editor de texto 2

Lo soltamos en la columna más grande y automáticamente se abre la ventana para que podamos escribir.

Modulo Editor de Texto de Beaver Builder

Se trata de un editor de texto muy similar al estándar de WordPress, con su barra de herramientas, solapas Visual y Texto, y el botón Añadir Objetos. Añade la posibilidad de ajustar el tamaño del texto.

A medida que vas escribiendo en el editor, tu texto aparece en la vista previa que está debajo. Puedes mover la ventana del editor para ver cómo va quedando la página con el nuevo contenido que estás agregando.

Beaver Builder insertar imagen

Módulo de Imagen

Si queremos insertar una imagen vamos nuevamente a Módulos Básicos y arrastramos el que dice Imagen hasta la columna que queramos.

Beaver Builder Modulo de Imagen

Al soltar el módulo, se abre la ventana para que podamos seleccionar la imagen deseada desde la Biblioteca Multimedia. En este ejemplo voy a añadir una flecha.

También nos permite definir lo siguiente:

Recortar / Crop. La forma en que se recortará la imagen.

Alineación. Cómo se alinea la imagen dentro de la columna.

Leyenda. Si la leyenda de la imagen se muestra o no y dónde.

Enlace. Podemos indicar una url a donde enlazará la imagen. Muy útil para crear botones.

 

Así va quedando mi página, llevamos menos de 2 minutos.

Beaver Builder vista previa

Módulo de Video

Te permite colocar en la página un video, ya sea desde la Librería multimedia (no recomendado) o bien insertado desde Youtube, Vimeo, etc.

Módulo de Audio

Similar al anterior pero para insertar pistas de audio. Permite definir si se reproduce de forma automática y si es reproducción continua.

Módulo HTML

El último de los Módulos Básicos que Beaver Builder nos ofrece es un editor de código que te permite insertar cualquier trozo de HTML en tu página.

Es útil por ejemplo para insertar un formulario provisto por una aplicación externa o cualquier herramienta provista por una aplicación externa que requiera insertar código en tu página.

También podrías utilizarlo para insertar videos y audio de fuentes externas, en reemplazo de los módulos respectivos.

Es cierto que el código HTML también podrías insertarlo utilizando la solapa Texto del módulo de texto, como siempre en WordPress.

Pero el módulo HTML ofrece una forma más práctica y cómoda, ya que al ser editor de código numera las líneas y nos muestra con diferentes colores las etiquetas, lo que favorece la lectura y corrección del mismo.

Modulo HTML Beaver Builder25

 

Módulos Avanzados

Los Módulos Avanzados forman parte de la versión premium del plugin y no están disponibles en la versión gratuita por lo que voy a pasarlos por ahora.

Si quieres puedes ver una demo de la versión premium en la página de Beaver Builder.

 

Módulos de Widgets

Desde la opción WordPress Widgets puedes agregar a la página que estás creando módulos con cualquiera de los widgets que tengas disponible en WordPress o en tu plantilla.

Funcionan como cualquiera de los módulos ya vistos, con similares opciones de ajustes en cuanto a los estilos.

Lo genial de ésto es que te permite añadir un widget en cualquier lugar de la página, no solo en las barras laterales o en el pie de página como es habitual en WordPress.

 

Filas con más de 2 columnas

Ahora voy a agregar una nueva fila, pero esta vez de 3 columnas. Para ello simplemente buscamos en Distribución de fila la que dice 3 columnas y la arrastramos hasta el lugar deseado, igual que antes.

beaver-builder-13

Luego arrastramos un módulo de texto a cada una de las columnas para agregar contenido.

 

Beaver Builder crear 3 columnas

Ya que son todos iguales podemos copiarlos y arrastrarlos de una columna a la otra.

 

Beaver Builder 3 columnas

 

Y así va quedando la página ya casi terminada. En las columnas de abajo quizás podría haber puesto imágenes en lugar de textos. También podría seguir agregando filas. Van unos 5 minutos.

Beaver Builder 3 columnas

 

Configurando las Filas y Columnas

Ahora vamos a ver cómo configurar las filas y las columnas creadas con Beaver Builder.

Si pasamos el mouse por arriba de una fila o columna aparecen unas pequeñas barras de herramientas. Hay herramientas para filas y herramientas para las columnas.

Beaver Builder configurar filas y columnas

Las herramientas para filas son las siguientes:

  • Mover
  • Configuración: para acceder a los ajustes de la fila.
  • Copiar
  • Eliminar

Y las herramientas para columnas son estas:

  • Mover
  • Configuración: para acceder a los ajustes de la columna.
  • Copiar
  • Añadir columnas.
  • Eliminar

 

Ajustes de Fila

Si abrimos la configuración de fila ingresamos a un cuadro con dos solapas: Estilo y Avanzado.

Solapa Estilo

Las primera opciones que aparecen aquí se refieren al ancho y a la altura de la fila y de su contenido.

ANCHURA Y ALTURA DEL CONTENIDO. Cómo el ancho de la página depende mucho de la plantilla que estés utilizando es recomendable que pruebes que resultados te da cada opción en tu propio caso. No hay una regla fija respecto de ésto.

Altura. Puedes elegir entre dos opciones:

  • Predeterminado: la altura se ajusta al contenido de la fila.
  • Altura completa: la altura se ajusta al alto de la pantalla.

Alineación del contenido. En caso de que selecciones Altura completa te pedirá elegir cómo alinear el contenido.

Configuracion de Fila Beaver Builder Estilo

COLORES. Luego siguen las opciones de colores que permite ajustar el color de los siguientes elementos:

  • Texto.
  • Enlace.
  • Enlace on Hover (cuando pasas el puntero por encima de un enlace).
  • Encabezado.

Abrir la paleta de colores. Haciendo clic en el gotero que aparece junto a cada opción puedes seleccionar un color desde la paleta visual o introducir un código de color.

Guardar colores. Si hace clic en el signo + que hay junto al código de color lo guardas para usar en otros elementos de la página. Esto es muy útil para no tener que estar buscando el color exacto cada vez.

Utilizar un color guardado. Para reutilizar un color guardado debes acceder con el botón que está debajo de la paleta visual: Pre-Ajustes de Color.

 

FONDO. Luego de elegir los colores puedes seleccionar el tipo de fondo para la fila. Estas son las posibilidades:

  • Ninguno, fondo blanco.
  • Color de fondo definido.
  • Imagen.
  • Video.

Y según lo que elijas te dará más opciones…

Color: Deberás seleccionar el color y un porcentaje de opacidad o transparencia.

Imagen:

  • Imagen: para elegir la imagen desde la Biblioteca Multimedia o cargar una nueva.
  • Repetir: indica si la imagen se repite en Mosaico, Horizontal, Vertical o si no se repite.
  • Posición: indica cómo se ubica la imagen de fondo, si centrada, izquierda, derecha, etc.
  • Adjunto: para definir si la imagen quedará fija cuando hagamos scroll o si se moverá con el resto de la página.
  • Escala: para indicar si la imagen cubre todo el fondo o si se escala a su tamaño.
  • Color de fondo: a su vez podrás elegir un color de fondo por si la imagen no lo cubre en su totalidad.
  • Color de superposición: puedes elegir un color para que se superponga a la foto con cierta transparencia y así otorgarle una tonalidad especial.

Truco. Si asignas una imagen de fondo puedes superponer un color blanco con cierto porcentaje de transparencia para que la imagen no impida leer los textos que estén encima de ella.

Video:

  • Fuente: indica si el video se carga desde la Biblioteca Multimedia o desde url externa. No es para nada recomendable la primera opción.
  • Url del video.
  • Foto de suplencia. es una foto que se mostrará en caso de que el video no pueda cargarse.

Y también dispones de las opciones Superposición de fondo y Opacidad, igual que en Imagen de fondo.

 

BORDE. Dentro de las opciones de borde podrás elegir: tipo, color, opacidad, ancho.

Solapa Avanzado

Desde la solapa Avanzado podemos ajustar:

MÁRGENES. Se refiere a la distancia en píxeles desde el borde de esta fila hasta otros elementos de la página.

  • Superior: distancia hasta la fila superior o cabecera de la página.
  • Inferior: distancia hasta la fila inferior o pie de página.
  • Izquierda: distancia hasta el borde izquierdo de la página.
  • Derecha: distancia hasta el borde derecho de la página.

 

MÁRGENES INTERIORES. Es la distancia en píxeles desde el borde de la fila hasta el contenido de la misma.

Configuracion de Fila Beaver Builder Avanzado

DISEÑO ADAPTABLE. Desde esta opción Beaver Builder te permite elegir si esta fila se mostrará en todos los tamaños de pantalla o solo en tamaños grandes, medianos o pequeños.

Es muy útil para definir qué contenido se muestra en dispositivos móviles y cuál en equipos de escritorio.

 

VISIBILITY. Te permite definir qué tipo de usuario puede ver este contenido.

 

SELECTORES CSS. Aquí puedes definir los identificadores CSS (id y clase) para esta fila si quieres aplicarle estilos avanzados desde una hoja de estilos externa.

 

Lo que acabo de hacer en este ejemplo es eliminar los márgenes derecho e izquierdo de la primera fila. Puedes ver que dicha fila se ensanchó hasta los límites de la página y tengo más espacio para escribir o colocar imágenes.

Compara la siguiente vista previa con la que te mostré más arriba.

beaver-builder-21

 

Ajustes de Columna

Si accedemos a la configuración de columnas también encontramos dos solapas Estilo y Avanzado, muy similar a la configuración de la fila con la diferencia de que, en este caso los ajustes que hagamos afectarán solo a la columna actual, no a toda la fila.

DISEÑO ADAPTABLE. En esta opción aparecen 3 ajustes que no estaban en la fila.

Esto se debe a que además de permitirnos decidir en qué pantallas mostrar cada columna nos deja definir un ancho específico para dispositivos medianos y pequeños.

Y también en qué orden mostrar las columnas en dispositivos pequeños.

 

Ajustes de Editor de Texto y demás Módulos

Antes habíamos visto cómo añadir un módulo de texto y de imagen. Para volver a editar un módulo ya insertado es suficiente con darle clic encima del elemento en la página.

Estos módulos tiene también tiene una solapa Avanzado desde la que se pueden configurar los diversos ajustes de cada uno que, en general, son los mismos que ya venimos viendo con algunas particularidades.

Por ejemplo no tenemos los márgenes internos, solo los externos. Pero por otro lado se agrega una opción muy interesante.

ANIMACIÓN. Con la animación podemos indicarle cuántos segundos tienen que transcurrir para que aparezca el elemento en la pagina y con qué efecto.

Ajustes del Editor de Texto de beaver Builder

 

Publicando la página

Una vez que terminamos hay que hacer clic en el botón Hecho que tenemos en la parte superior de la página.

Beaver Builder te va a dar 3 opciones:

  • Publicar Cambios
  • Guardar Borrador
  • Descartar Cambios

 

beaver-builder-22

Si decidimos publicar los cambios, guarda todo y nos lleva directamente a la página ya publicada.

 

beaver-builder-23

 

Como puedes ver, es exactamente igual a la vista previa sobre la que veníamos trabajando.

Si te fijas en la barra superior de WordPress ahora tenemos una nueva opción: Page Builder, por si queremos volver al constructor para hacerle algunos cambios.

 

Beaver Builder tiene algunas cosas más de las que vimos en esta guía, y la versión premium cuenta con muchísimos módulos más todavía, y trae plantillas pre-diseñadas listas para usar. Puedes ver una demo en la página del plugin.

Cómo te habrás dado cuenta Beaver Builder es un constructor de páginas muy intuitivo y visual, de rápido aprendizaje, y con un poco de ingenio se pueden lograr diseños muy buenos combinando filas y columnas de diferentes anchos con bloques de texto e imágenes.

Ésto es solo una introducción para darte una idea sobre el plugin, la mejor experiencia es probarlo uno mismo y ver hasta dónde puedes mejorar el diseño de tu página con esta herramienta y algo de imaginación.

 

Te invito a instalarlo y hacer pruebas creando una nueva página, después cuéntame:
¿Cómo fue tu experiencia con Beaver Builder? ¿Ya conocías algún otro constructor de páginas? [avd_registPais]