El Fusion Builder de Avada es uno de los plugins obligatorios de la plantilla. Se trata del potente constructor visual que tiene el tema Avada. Con el Fusion Builder podremos contruir páginas increíbles (también entradas de blog y de portfolio). Con él tenemos infinidad de posibilidades para crear casi cualquier página web.

En esta entrada veremos por encima sus opciones de configuración y veremos qué es el Theme Builder (que es parte del Fusion Builder). Sin emabargo, nos centraremos más en la creación de páginas con su estructura de contenedores, columnas y elementos de diseño.

Opciones del Fusion Builder

El plugin Fusion Builder tiene su propio menú con varias secciones en su interior.

Opciones del menú del Fusion Builder

Si entramos en él nos llevará a la página de bienvenida, donde se muestra un vídeo con sus novedades. En mi versión de Avada se muestra un vídeo del nuevo constructor visual en el frontend de Avada Live, merece la pena un artículo solo para él. Estas son las secciones que trae:

  • Welcome. Bienvenida y vídeo de novedades.
  • Support/FAQ. Para soporte y documentación (en inglés).
  • Settings. Ajustes del plugin Fusion Builder, lo veremos a continuación.
  • Library. En la librería de Fusion Builder puedes guardar tus configuraciones (de plantillas, contenedores, columnas y elementos de diseño) para poder usarlos posteriormente.
  • Icons. Puedes subir tus propias colecciones de iconos para después usarlas en los elementos de diseño que usen iconos. Si te interesa podemos verlo en un nuevo artículo.
  • Theme Builder. Este apartado tiene su propio artículo. Con Theme Builder creamos nuevos layouts. Nos da aún más libertad de crear nuestro propio diseño web. Con él podremos modificar el layout general (en todas las páginas) o crear nuevos layouts para tipos de páginas (proyectos de portfolio por ejemplo, o ciertas categorías del blog…) y hasta crear secciones de layouts… Un sinfín de posibilidades más añadidas a las que ya tenemos de por sí dentro de Avada.
  • Add-ons. Podemos añadir algunos add-ons de pago a nuestro Fusion Builder.
  • Redes sociales. Enlaces a las redes sociales de la empresa Theme Fusion.

Ajustes en el Fusion Builder

Hay un par de ajustes que pueden ser muy interesante que configures aquí.

Elementos de diseño del Fusion Builder

Antes de nada recuerda que las opciones globales de configuración de los elementos de diseño no están aquí, puedes modificarlas en las opciones del tema de Avada.

El primer y más importante ajuste que podemos hacer es el de desactivar los elementos de diseño del Fusion Builder que no estés utilizando. Servirá para optimizar tu sitio web.

En ajustes, desactivar algunos elementos de diseño del Fusion Builder

Hay hasta más de 70 elementos de diseño dentro del Fusion Builder, es imposible que los estés usando todos, así que empieza a desactivar como loco/a. Siempre puedes volver a activar alguno si lo necesitas.

Tipos de publicación

El otro ajuste que puedes hacer es el de hacer que el constructor NO aparezca en ciertos tipos de publicación. En mi caso procuro utilizar el constructor visual de Fusion Builder solo en páginas.

En ajustes, desactivar el Fusion Builder de algunos tipos de publicación

En el caso en que decidas cambiar de plantilla en un futuro deberás volver a diseñar las páginas que hiciste en Avada. ¿Quizás sean 5, 10, 15 páginas? Imagina un blog con cientos de entradas que han sido maquetadas con el Fusion Builder. Si cambias de plantilla en un futuro tendrás que limpiar de shortcodes todas esas entradas…

Otros ajustes

Podemos hacer que se active automáticamente el Fusion Builder al editar nuestras publicaciones, cosa que no recomiendo. También desactivar o activar el botón fijo de publicar. Además nos permite la exportación e importación del Fusion Builder Content.

El constructor visual Fusion Builder

Antes de anda te comentaré que en esta entradas vamos a ver el constructor visual de Avada en el back end. En otro artículo de la serie de tutoriales de Avada también vemos el constructor visual de Avada en el front end. No confundir Fusion Builder (back end) con Fusion Builder Live (front end).

Ahora sí, veamos cómo funciona el Fusion Builder a la hora de contruir una página. Como ejemplo voy a usar una página que ya tiene contenido de ejemplo y vamos a mejorarlo con el maquetador visual de Avada. Voy a usar el Fusion Builder clásico, desde el backend. Veremos los elementos estructurales y añadiremos algunos elementos de diseño.

Elementos de diseño en Avada

Empezando con el maquetador. Estructura del contenido

Una vez hayamos creado una nueva página tenemos que darle al botón de Fusion Builder para activar el maquetador visual en el backend. Con una página en blanco deberíamos tener algo como esto:

Empezar diseño de página desde cero con Fusion Builder

En otro artículo vimos cómo importar una página demo de Avada, con el botón Pre-Built Page o desde Library. Sim embargo aquí nos centraremos en diseñar nosotros mismos nuestra página desde cero con el editor visual. Lo primero que debemos saber es cómo es la estructura de una página con el page builder de Avada.

Estructura de páginas. Contenedor, columnas y elementos de diseño

El contenido de las páginas que hagamos será de un contenedor, dentro de este tendremos que añadir una o varias columnas, y dentro de estas columnas podremos añadir los elementos de diseño que necesitemos. Una misma página puede tener varios contenedores. En el siguiente esquema vemos un contenedor, en su interior 2 columnas, dentro de cada columna hay varios elementos de diseño.

Estructura con contenedor, columnas y elementos de Fusion Builder

Crear una estructura básica

Para comenzar a construir nuestra página desde cero, deberemos añadir un contenedor (+ Container). Desde aquí podemos elegir entre un contenedor vacío o directamente con una o varias columnas. Tenemos multitud de opciones con las columnas que posteriormente podremos cambiar si no nos convence.

Insertar contenedor y columnas

Una vez nos hemos decidido por un contendor con sus respectivas columnas tendremos algo así:

Ejemplo de contenedor con sus columnas y elemento de diseño

En la imagen podemos distinguir las partes del Fusion Builder y los elementos de estructura que hemos creado como ejemplo:

  • En azul el contedor que hemos añadido, enmarcando el resto de elementos. Al contenedor podemos cambiarle el nombre para reconocerlo más fácilmente (Nombre del contenedor).
  • Las 2 columnas que cada una de ellas ocupa una mitad. Esto podemos cambiarlo en cualquier momento pinchando en 1/2 (columna marcado en rojo) y eligiendo otra fracción (1/1, 1/3, 1/4…)
  • Dentro de la primera columna he añadido un elemento de diseño como ejemplo, se trata de un Título.
  • +Container. Situado abajo, añade un nuevo contenedor a continuación
  • +Columns. Añade nuevas columnas
  • +Element. Inserta nuevos elementos, como ves solo se pueden añadir dentro de las columnas.
  • Acciones para los elementos añadidos. En la barra azul del contenedor he marcado 4 iconos (con texto en rojo). Estos iconos son comunes para los contenedores, columnas y elementos de diseño. Para este último coloca el ratón encima y se verán. También puedes acceder a estas opciones clicando con el botón derecho del ratón.
    • Opciones: Edita el elemento, ya sea contenedor, columna o elemento de diseño. Cada uno de ellos tendrán distintas opciones.
    • Duplicar. Crea un elemento exactamente igual para facilitarnos la creación. Clona tanto el elemento como su contenido. En el caso del contendor clonará el contendor, las 2 columnas y el elemento de título.
    • Guadar. Esta acción guarda el elemento en la biblioteca para poder utilizarlo en otra ocasión.
    • Eliminar. Borra el elemento y el contenido si es el caso.
  • CSS personalizado. Para añadir estilo a esta página en concreto.
  • Historial. Nos permite volver atrás si no nos gusta el resultado, cada cambio queda registrado aquí.

Todos estos elementos pueden moverse para cambiarlos de posición fácilmente arrastrando y soltando (drag and drop). Puedes mover una columna de un contenedor a otro, cambiar el orden de los contenedores o mover elementos de diseño incluso de una columna a otra.

Contenedores. Opciones de configuración

A la hora de maquetar nuestra página el contenedor es la estructura primera que debemos añadir, la que contiene las columnas, que a su vez contienen los elementos de diseño.

Estos contenedores tienen un montón de opciones. Estas se dividen en opciones generales, de diseño, de fondo y extra. Antes de entrar a ver estas opciones te aconsejo que cambies la plantilla de página.

Plantilla de página al 100% de ancho

Si estás editando la página, tienes un panel de Atributos de Página (a la derecha normalmente). Cambia la plantilla por defecto por 100% Ancho. No en todos los casos será necesario pero para la mayoría de las páginas lo uso así.

Una vez hecho esto, nos vamos al contenedor que hemos añadido a nuestra página y pinchamos en el botón de opciones para editar el contendor. Veremos todas estas opciones:

Es buena idea si no estás familiarizado que, tanto para contenedores como para columnas, le apliques un color de fondo para que veas el espacio que están ocupando. Haz esto lo primero antes de comenzar a tocar todas las opciones, te será más sencillo.

Opciones generales del contenedor

Aquí encontramos opciones como ampliar el contenido al 100% del ancho o dejarlo al ancho del sitio. ¡Ojo! El contenedor ya ocupa el 100% de ancho gracias al cambio que hemos hecho en la plantilla de página. Esta opción aplica al contenido, por los que las columnas que contenga también ocuparían el 100% del navegador.

El 100% height hace que el contendor ocupe el todo el alto del navegador. Si lo activamos nos mostrará un par de opciones más.

Igualar las alturas de las columnas que contiene.

Name of the anchor. No es más que el nombre de ancla. Nos servirá para añadir enlaces de ancla dentro de la misma página.

Visibilidad del contendor. Si queremos que este contenedor se muestre en todos los anchos de dispositivos o solo en algunos (ordenador, tablet o móvil).

Estado de publicación. Podemos decirle al contenedor que esté publicado (lo más normal), en modo borrador (no publicado) e incluso ponerle una fecha desde la que esté publicado y otra fecha para que deje de estar publicado.

CSS class e id. Aplica una clase CSS o un ID al contenedor.

Diseño del contenedor

En la parte de diseño del contenedor podemos aplicar un color distinto a los enlaces que haya dentro (también para hover). También nos permite añadir un border con distintos tamaños, estilos y colores. Además podemos controlar el margen superior e inferior del contendor y el relleno (padding).

Fondo (background)

Aquí es donde añadirmos un color de fondo a nuestro contendor. Te recomiendo que apliques uno bien visible para que veas lo que ocupa realmente. Tenemos varios tipos de fondo:

  • Color. Un color de fondo (un color sólido).
  • Gradient. Podemos aplicar un degradado (gradiente) de fondo con 2 colores. Elegimos los colores, dónde comienza y dónde acaba, si es linea o circular. Si es lineal podemos cambiar el ángulo y si es circular (radial) nos permite elegir dónde está posicionado el centro.
  • Imagen. Si añades alguna imagen de fondo te mostrará algunas opciones como la posición, si se repite, animación de desvanecimiento, efecto parallax (imagen fija o en movimiento hacia arriba, abajo o los lados), si quieres aplicar el parallax a móviles, la velocidad del movimiento y el modo de mezcla. Estos modos de mezcla te sonarán si usas Photoshop o similar. Son el modo multiplicar, oscurecer, diferencia… Pueden dar un aspecto distinto si también usas un color de fondo.
  • Vídeo. Puedes añadir un vídeo que subas a WordPress o si lo tienes en Youtube o Vimeo. Al añadirlo te mostrará algunas opciones para el vídeo.

Ten en cuenta que puedes añadir todos a la vez (color, gradiente, imagen y vídeo) pero hazte a la idea que están dispuestos por capas. De abajo a arriba serían color, degradado, imagen y vídeo. Por tanto si añades una imagen tapará al degradado y al color de fondo.

Extras

En extras se añaden filtros al contenedor. ¡Ojo! Porque estos filtros se aplicarán también a las columnas que estén dentro e incluso a los elementos de diseño dentro de estas columnas.

Además estos filtros pueden aplicarse al contenedor normal y en hover (cuando el ratón está encima), con lo que podemos conseguir un efecto muy dinámico.

  • Hue. Matiz de color, los 360 grados del círculo cromático
  • Saturación del color. Dejarlo a cero significa que será en tonos grises
  • Brillo
  • Contraste
  • Invertir colores
  • Tono sepia
  • Opacidad controla la trasparencia del contenedor (y su contenido)
  • Blur. Es un efecto de difuminado

Editar las columnas

Redimensionar columnas

No está dentro de las opciones de edición de la columna como tal pero lo vamos a ver antes. Pinchando sobre el icono de Redimensionar Columna (1/2 en la imagen) nos mostrará las opciones de redimensión que tenemos.

Redimensionar columnas en el builder de Avada

Podemos cambiarlo a una columna que ocupe el 100% (1/1), un tercio (1/3), un cuarto (1/4), dos quintos (2/5), etc. Pruébalo, es muy sencillo. Si tienes 2 columnas, para que ocupen todo el ancho, deberán sumar 1/1. Por ejemplo si una columna es de 1/3 la otra deberá ser de 2/3. De todas formas visualmente lo puedes comprobar también.

Opciones generales de las columnas

Column spacing. Es el espacio que hay entre esta columna y la siguiente (el margen derecho). Para ver este efecto es buena idea como te dije que apliques colores de fondo tanto al contendor, como a las columnas.

Center content. Centra verticalmente el contenido de la columna. Esta opción solo se aplica si en las opciones generales del contenedor le hemos dicho que iguale las alturas de las columnas. En muchas ocasiones nos puede servir, hace que el contenido se vea más ordenado.

Ignore equal heights. Esto hará que para esta columna en concreto no se aplique lo de igualar las alturas de las columnas de un contenedor.

Link url. Si rellenamos este campo convertirá toda la columna en un enlace. Podemos decirle que se abra en la misma o en otra ventana.

Las demás opciones son comunes a los contenedores (y otros elementos). Son que se muestre la columna o no según el ancho de la pantalla, una clase CSS y un ID.

Diseño de las columnas

Hover type. Efecto hover (al pasar el ratón por encima). Puedes elegir entre acercar, alejar o subir. Para que este efecto se note necesitarás tener aplicado un borde o un fondo en la columna. Además este efecto anulará los efecto hover que tengan los elementos de diseño dentro de esta columna.

Tamaño de borde. El tamaño el píxeles del borde de la columan. Al añadirlo aparecerán además el estilo y el color del mismo. También la posición del mismo, por si quieres que solo se aplique el borde en uno de los lados.

Border radius. Redondea las esquinas de la columna.

Sombra de la columna. Al cambiar el box shadow a Yes aplicará la sombra y aparecen nuevas opciones para esta sombra. Podemos controlar la posición de la sombra, el difuminado, el tamaño, el color y el estilo (sombra normal o interior).

También desde aquí podemos controlar el relleno o padding y el margen.

Elementos de diseño

Vamos a ver por fin cómo añadir un elemento de diseño de Fusion Builder. Como te he comentado se añaden siempre dentro de una columna. Por lo tanto, para añadir un elemento de diseño, primero deberán haber añadido almenos un contenedor con alguna columna.

Solo tenemos que darle a +Element para insertar un elemento de diseño y no aparecerá un cuadro de diálogo con todos los que hay disponibles.

Insertar elemento de diseño con Fusion Builder

Como ya sabíamos son muchos. Algunos como Image, Button o Text Block son muy evidentes, pero otros puede que no sepas qué son. Puedes mirar en este enlace de la web de Avada donde están todos estos elementos de diseño. Aunque está en inglés, entrando en cada uno de ellos verás muchos ejemplos que te pueden servir.

Aquí no podemos verlos todos pero sí que vamos a añadir alguno para que veas que no tiene mucho misterio. Cada uno de estos elementos, eso sí, tienen sus propias opciones de configuración.

Añadir un Título con Fusion Builder

Vamos a añadir por ejemplo un Title. Este elemento de diseño no es más que un título (un encabezado H1, H2, etc.). Le damos a +Element y vemos las opciones que tiene.

Como ves para añadir un «simple» título o cabecera tenemos infinidad de opciones. Tendremos las opciones generales, de diseño y extras, las comentamos sin entrar mucho en detalle:

  • Opciones generales de título. Dependiendo de si elegimos el tipo de título como Text, Rotating o Highlight tendremos unas opciones distintas. Te sugiero que las pruebes.
    • Text. Es el más sencillo, solo tendremos que rellenar el texto de nuestro título
    • Rotating. Es un título donde una de las palabras (o un conjunto de palabras) va cambiando con una animación.
    • Highlight. En este caso una de las palabras (o conjunto de palabras) se resalta con un efecto (subrayado, círculo, tachado…).
  • Diseño. Aquí elegimos si nuestro título o encabezado es un H1, H2, H3, etc. y estilos del texto. Estos estilos son el tamaño, color, tipografía…
  • Extras. Aquí podemos añadirle un tipo de animación de cómo aparecerá nuestro título (desvanicimiento, desplazamiento…), la dirección de la animación, velocidad y a partir de dónde empieza la animación.

Ejemplos de estilos de títulos en Avada

Estos son algunos ejemplos de estilos de títulos. Son un título de texto con líneas punteadas; un título con texto en rotación, en este caso aparece con el efecto typing (escribiéndose) la palabra «ejemplo»; y un título con efecto de resaltado (highlight) en círculo.

Ejemplo de página construida con Fusion Builder

He querido hacer una página completa con el Fusion Builder para que veas, ya no cómo se vería el resultado en el frontend, si no también cómo se vería el backend con los elementos de estructura y de diseño del Fusion Builder.

En este caso he cogido la página de inicio de una supuesta web de un fotógrafo. Vamos a usar textos e imágenes de ejemplo para ello. La imagen siguiente es el resultado, puedes ampliarla si quieres para verla mejor.

Ejemplo de contenido de página web construida con Fusion Builder

Antes de nada comentarte que tanto la cabecera, como la barra de título como el pie de página no lo configuramos con el Fusion Builder, lo deberíamos hacer con las opciones del tema. Con el Fusion Builder desde el backend contruiremos el contenido de la página.

Dicho esto, para llegar a este resultado he usado varios contenedores, 5 contenedores en total.

  • Destacado. En este contenedor, con color de fondo gris claro, he añadido 3 columnas (1/6, 1/3, 1/6), aunque solo en la central he añadido elementos de diseño. Estos son un elemento de título y un bloque de texto.
  • Texto, lista y content boxes. En este contenedor de fondo blanco he añadido varias filas de columnas. Al principio de todo en la primera columna he añadido un Section Separator, para conseguir la división en diagonal con el contendor anterior. Después un par de columnas (1/2 y 1/2) donde van título, texto y botón en el primero, y un checklist en el segundo. Una columna más de 1/1 donde he añadido un content boxes. Este content boxes es un elemento de diseño que se puede disponer en columnas, 2 en este caso.
  • Frase con imagen de fondo. Este contenedor tiene como fondo una imagen. Dentro de él tenemos una columna de 1/1 con un bloque de texto. En dicho bloque de texto lleva un blockquote. Podría haber añadido un título o un texto normal.
  • Portafolio. Se trata de un contenedor con una columna de 1/1. Llev dentro 2 elementos de diseño: un título y un bloque de portfolio configurado para mostrarse solo las imagenes en masonry para hacerlo muy visual. Pueder esta entrada para ver cómo crear una página de portfolio con Avada.
  • Contacto. En este contenedor tenemos una columna con un elemento de diseño, un Tagline Box. Este me permite añadir un título, subtítulo y un botón. Muy útil si nuestro call to action es el de llevarte a la página de contactar.

Conclusión final

Con el Fusion Builder de Avada podemos construir casi cualquier tipo de contenido. Es sencillo estructurar nuestras páginas y tenemos muchos elementos de diseño para hacer casi de todo. La gran cantidad de opciones que tienen cada elemento de diseño como los contenedores y columnas hace que sea más complejo a cambio de mayor control.

Evitaría en principio eso sí, usar el constructor de Avada para las entradas de blog. Esto es por el miedo a que un cambio de plantilla en un futuro llene todo nuestro blog de shortcodes.

Hemos visto cómo funciona el contructor visual, sin embargo he pasado muy por encima de los elementos de diseño ya que son demasiados. Seguramente me pare en algunos de ellos en futuras entradas para ver todas las posibilidades que tienen. Si estás interesado en ver alguno en concreto no tienes más que decírmelo en los comentarios.