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.
¿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.
Entre las ventajas de utilizar este tipo de herramientas podemos enumerar:
En cuanto a las desventajas tenemos:
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.
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).
Una vez que tengas instalado el plugin, si creas una página nueva vas a encontrar opciones adicionales.
En el editor de la página ahora hay dos solapas:
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.
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.
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.
Arrastramos la fila con dos columnas y la soltamos en la página vacía.
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.
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.
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.
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.
Lo soltamos en la columna más grande y automáticamente se abre la ventana para que podamos escribir.
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.
Si queremos insertar una imagen vamos nuevamente a Módulos Básicos y arrastramos el que dice Imagen hasta la columna que queramos.
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.
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.
Similar al anterior pero para insertar pistas de audio. Permite definir si se reproduce de forma automática y si es reproducción continua.
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.
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.
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.
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.
Luego arrastramos un módulo de texto a cada una de las columnas para agregar contenido.
Ya que son todos iguales podemos copiarlos y arrastrarlos de una columna a la otra.
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.
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.
Las herramientas para filas son las siguientes:
Y las herramientas para columnas son estas:
Si abrimos la configuración de fila ingresamos a un cuadro con dos solapas: Estilo y Avanzado.
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:
Alineación del contenido. En caso de que selecciones Altura completa te pedirá elegir cómo alinear el contenido.
COLORES. Luego siguen las opciones de colores que permite ajustar el color de los siguientes elementos:
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:
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:
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:
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.
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.
MÁRGENES INTERIORES. Es la distancia en píxeles desde el borde de la fila hasta el contenido de la misma.
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.
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.
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.
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:
Si decidimos publicar los cambios, guarda todo y nos lleva directamente a la página ya publicada.
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]
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…
