Fusion Builder

Este tutorial está basado en las versiones de Avada hasta la 4.0. A partir de la versión 5.0 Fusion Builder cambia por completo. Los usuarios de Avada 5.0 en adelante tendrán nuevos post en el blog.

Si eres usuario/a de Avada 4.0 y piensas actualizarte a la 5.0 te recomiendo los siguientes post:

Próximo lanzamiento de la versión Avada 5.0

El nuevo Fusion Builder en Avada 5.0

Uno de los puntos fuertes de Avada es su maquetador, al que llaman Fusion Builder. Avada ya incorpora Fusion Builder desde la versión 3.6, que vió la luz en Septiembre de 2014 y fueron muy innovadores en ese sentido, siendo uno de los primeros themes en crear su propio maquetador e incorporarlo al core del theme.

Pero esto tiene sus ventajas e inconvenientes.

Desde ese momento el theme empieza a ser mucho más manejable y asequible para cualquier usuario complementando la opción shortcodes (aunque siguen estando presentes y perfectamente operativos para los más nostálgicos) y sin lugar a dudas marca un antes y un después en la usabilidad de Avada.

Pero me imagino que también ha debido ser un dolor de cabeza para los desarrolladores aunar la compatibilidad de todas las prestaciones anteriores y futuras y eso se nota, porque si bien Fusion Builder es tremendamente efectivo, no llega a alcanzar la flexibilidad operativa de otros, como puede ser Visual Composer.

Me imagino que poco a poco irán corrigiendo esos pequeños detalles que son importantes a la hora de trabajar. Piensa que para una web nueva no hay problema, pero para una antigua, reformar los shortcodes puede ser una pesadilla.

Dicho esto, Fusion Builder no deja de ser un maquetador tremendamente bueno que funciona a la perfección y al que en cada nueva versión lo van dotando de nuevas funcionalidades.

Además al estar incorporado en el core, no afecta en modo alguno al rendimiento de la plantilla, ya que no tiene que cargar diferentes archivos css o javascript para cada funcionalidad.

Esto es algo que cualquier theme que utiliza un maquetador externo acusará siempre, ya que se integra a nivel externo en los plugins con su propia operativa y archivos.

No obstante, debes saber que han pensado en todo y si eres un enamorado de otro maquetador, tienes tu web basada en otro y ahora te pasas a Avada o sencillamente no te gusta Fusion Builder por algún motivo, puedes desconectarlo y olvidarte de él. Puedes operar con cualquier otro, pero no es buena idea complementar los dos. Te traerá más incompatibilidades que beneficios.

Fusion Builder es por sí misma una extensa aplicación que requeriría un superpost, así que he pensado que en vez de hacer posts tan grandes como los anteriores, voy a segmentar las opciones en diferentes post y así abordar cada opción o grupo de opciones de forma independiente y más detallada.

Fusion Builder, el maquetador de Avada

Principales elementos de Fusion Builder

Fusion Builder puede ser utilizado en las entradas, páginas y portfolio. El generador de shortcodes puede funcionar de manera independiente al maquetador.

Activar Fusion Builder

 

Con el maquetador de Avada tendrás las siguientes posibilidades:

  • A) Gestionar las columnas.
  • B) Utilizar los shortcodes de Avada.
  • C) Guardar y reutilizar tus propios templates.
  • D) Utilizar templates preconfigurados de Avada.
  • E) Borrar plantillas.
  • F) Funciones Undo/Redo.
  • G) Utilizar contenedores independientes de ancho completo.
  • H) Seleccionar la disposición de las columnas.

Elementos principales de Fusion Builder

Drag & Drop

Por supuesto, puedes interactuar con Fusion Builder en modo Drag & Drop (Arrastrar y Soltar) o bien al ir haciendo clic en cada apartado o shortcode, se irán agregando al final del contenido.

Elementos de edición en Fusion Builder

Opciones de edición en Fusion Builder de Avada

Como ves, en cada elemento puedes realizar varias acciones.

Columnas

En la esquina superior izquierda, ves que existen unos iconos +/-. Esto sirve para aumentar y disminuir el tamaño. A lado aparece el tamaño de columna que estás utilizando. Puedes utilizar cualquier combinación de columnas, desde 1 hasta 6 y cualquier combinación posible entre ellas.

En la esquina superior derecha tienes unos iconos que son comunes a cualquier elemento de Fusion Builder.

De izquierda a derecha son:

Editar características: Accedes a las características de cada elemento y puedes configurarlo a tu voluntad con las opciones que Avada te ofrece (que son muchas).

Clonar: Puedes clonar un elemento y es muy útil si vas a crear elementos similares en configuración. Es decir, configuras el primero y luego lo clonas tantas veces como quieras. Esto supone un gran ahorro de tiempo.

Borrar: Si algo no te gusta o quieres descartarlo, lo borras y ¡listo! 🙂

Desde el apartado superior puedes incluir un contenedor de ancho completo e insertar el tipo de columna que necesites.

¿Qué es el Full Width Container?

Es muy recomendable que lo uses para poder segmentar el contenido como te parezca. Con esta opción puedes crear apartados completamente independientes y te permite trabajar al ancho normal o completo de la página (para ese contenedor concreto). Igualmente te va a permitir dotar a las columnas de ciertas características adicionales que no podrías usar si no lo utilizases.

Shortcodes

Como comenté anteriormente, puedes utilizar los shortcodes disponibles en Avada desde el procesador de texto o bien desde el propio Fusion Builder.

Shortcodes de Fusion Builder

Como puedes observar la cantidad de shortcodes en enorme y variada. Además cada uno de ellos es muy configurable, lo que permite crear todo tipo de combinaciones. Si seleccionas uno de ellos verás que también ofrece las mismas opciones que cualquier otro elemento para editar, clonar y borrar.

Una vez te familiarices con los shortcodes, caerás en la cuenta de que algunos no están incluidos en Fusion Builder. Esto ocurre porque algunos son para utilizar directamente en el texto, por ejemplo, si quieres usar una letra capital tendrás que activarlo directamente desde el procesador de texto, es decir, usas el shortcode Bloque de texto (Text Block) y desde ahí puedes activar la letra capital con el generador de shortcodes.

Añadir columnas o elementos

Puedes hacerlo arrastrando y soltado o bien haciendo clic en el elemento que selecciones.

Arrastrar elementos de Fusion Builder

Arrastrar y soltar desde el panel superior en el área de contenido. Fusión Builder es preciso, y puedes colocar con precisión el elemento en el que ha caído con el ratón. Pasa el ratón sobre el elemento que deseas, haces clic y mantén pulsado el ratón mientras arrastras al punto que quieres. Una vez que lo tienes, suelta el botón del ratón y se posicionará en el lugar que has elegido. El área de contenido se resaltará en azul con un marcador cuando se arrastra y coloca en el lugar.

La otra manera es haciendo clic sobre el elemento que quieres colocar. Al hacer clic en él, Fusion Builder lo agregará al área de contenido. Lo que ocurrirá es que se sumará al elemento anterior en el primer lugar disponible del área de contenido, ¡vamos, que se colocará al final de todo el área de contenido!

También debes saber, que con el método Drag & Drop, puedes mover cualquier elemento de posición a lo largo de todo el área de contenido.

Añadir elementos

Los elementos pueden estar dentro o fuera de las columnas. Esto va a depender de como quieras maquetar la página. En cualquier caso, el sistema es el mismo. Arrastrando y soltando puedes colocar cualquier elemento dentro o fuera.

El Histórial de estados

Bueno, esto es como un Undo/Redo, que te permite volver a un estado anterior o viceversa si tienes necesidad de ello. Te ayudará si te lías por algún motivo y quieres volver atrás.

Historial de cambios en Fusion Builder

 

Cada vez que agregas o quitas algo, lo mueves o realices cualquier tipo de acción, se irá guardando en memoria para que puedas volver a un punto en concreto anterior o posterior. El historial guarda hasta 40 cambios, pero una vez guardes la página, el historial desaparece.

Plantillas predefinidas y personalizadas

Con Fusion Builder podrás echar mano de un montón de plantillas que vienen diseñadas por los desarrolladores del theme y te servirán como punto de partida para un diseño que quieras hacer tú. Luego podrás guardar esos diseños y utilizarlos en cualquier página o post.

Templates en Fusion Builder

Como puedes ver en esta imagen, puedes guardar tu diseño y luego llamarlo cuando y donde quieras.

Si quieres utilizar las plantillas predefinidas, te ahorrarás muchos quebraderos de cabeza. Vienen en gran cantidad así que malo será que algún modelo no te guste. Luego también podrías personalizarlo y guardarlo. Ten en cuenta, que si ya has comenzado el diseño y decides utilizar una plantilla, sustituirás lo que has hecho, por ese diseño ¡ten cuidadín con lo que haces!

Usando y personalizando el Contenedor de Ancho completo

El contenedor de ancho completo (Full witdth container) es muy versátil y determinante en el diseño web con Avada. Es básicamente un contenedor que permite insertar gran cantidad de contenido en el interior, por ejemplo, juegos completos de columna y diferentes códigos cortos. Así y de forma independiente, puedes configurar un espacio completamente personalizado y completo dentro de tu área de contenido. Podrás hacerlo a todo el ancho de la página o respetando las medidas que has creado para el diseño o la plantilla que elijas para maquetar. Podrás personalizar el contenedor con un montón de ajustes, que vamos a ver a continuación:

Opciones generales

Opciones por defecto en Fusion Builder

100% Interior content width
Al seleccionar SI, el contenido ocupará el ancho completo del área de contenido, eliminando el padding por los laterales.
Si selecciona NO, se mantendrá el ancho predefinido en tu plantilla de página.
Set columns to Equal Height
Si marcas Si, le indicas que todas las columnas que incluyas en el contenedor, tendrás siempre la misma altura. Si eliges NO, las alturas serán lo que ocupe el contenido de cada columna.
Nombre del anchor del menú
Aquí le das un nombre al contenedor, que servirá como ID para utilizar en un Menú. Por ejemplo, esto se utiliza para una One page site.
CSS Class
Si controlas CSS y crear tus propios diseños personalizados y aquí puedes aplicar una clase CSS a todo el contenedor.

Opciones de Background

En esta pestaña puedes configurar las opciones de background del contenedor, que como verás son bastantes. Puedes jugar con imágenes y también con videos y en función de eso, configuras las opciones de diferente manera.

Si utilizas imágenes

Opciones de Background en Fusion Builder

A) Background Image
Puedes poner una imagen de fondo a todo el contenedor.
B) Background Parallax
Te permite incluir diferentes efectos parallax al contenedor, respecto a la imagen del background.
C) Velocidad del efecto Parallax
Puedes gestionar la velocidad del efecto parrallax entre 0 y 1 con los pasos intermedios, 0.1, 0.2, 0.3, etc…
D) Enable Parallax on mobile
Puedes desconectar el efecto en los móviles.
E) Background Repeat
Si utilizas una imagen pequeña a modo de fondo puedes hacer que se repita vertical u horizontalmente.
F) Backgrund Position
Puedes ajustar la posición del background para que coincida con lo que tu quieres.
G) Animación efecto Fading
Si marcas si, al hacer scroll hacia abajo, se produce un efecto de difuminación gradual a medida que va desapareciendo la imagen de la pantalla. Este efecto funciona solo para las imágenes.

Opciones de video en Fusion Builder

Si utilizas video

A) URL o ID de video
Aqui puedes incluir un video alojado en Youtube o Vimeo, incluyendo la URL o el ID del video. El Id es el número que aparece en la URL
B) Video Aspect Ratio
Puedes ajustar el aspecto del video, en formato 16:9 Widescreen, cuadrado (4:3) o cualquier otro.
C) Video WebM
Puedes incluir el enlace de un video en el formato que utiliza Google.
D) Video MP4 
Puedes incluir un enlace a un video en mp4 alojado en tu hosting.
E) Video OGV Upload
Aqui enlazas a un video de este tipo de formato.
F) Video Preview image
Incluyes una imagen de previsualización para un video.mp4 alojado en el hosting. Esto es muy interesante si usas este video, porque no suelen funcionar bien en los móviles y así aparecería esta imagen sustituyendo al video.
G) Video Overlay Color
Te permite crear un efecto overlay sobre el video, con el color que tu quieras.
H) Video overlay Opacity
Selecciona la opacidad del efecto
I) Mute Video
Puedes quitar el sonido al video
J)Loop Video
Puedes hacer que el video no pare de reproducirse creando un loop.

Pestaña opciones de diseño

Si necesitas crear un borde al contenedor tienes las siguientes opciones.

Opciones de diseño en Fusion Builder

A) Border Size
Elige el tipo de grosor para el borde.
B) Border Color
Establece el color del borde
C) Estilo del borde
Puedes elegir diferentes estilos para el borde

Opciones de padding en Fusion Builder

Opciones de padding

Como ya sabrás el padding permite crear un espacio de relleno entre diferentes elementos. Con estas opciones puedes realizar diferentes ajustes a tu antojo. Puedes indicar los ajustes en pixeles (px) o en %. Por ejemplo, 5px o 5%

A) Ajusta el padding por la parte superior
B) Ajusta el padding por la parte inferior
C) Ajusta el padding por la izquierda
D) Ajusta el padding por la derecha

Trabajar con las columnas en Fusion Builder

Cuando queremos construir nuestra web, necesitamos organizar el contenido de una manera determinada y trabajar a través de las columnas es esencial para este objetivo. Las columnas nos permiten crear diseños limpios y llevar nuestra creatividad a un plano mucho más profesional.

Con Fusion Builder puedes crear hasta 6 columnas.

Verás expresiones como: 1/1, 1/2, 1/3, 4/5, 3/4, 5/6, etc… ¿Qué significa esto?

Básicamente las partes en las que puedes dividir tu área de contenido.

Por ejemplo:

1/1 significa que es una sola columna a lo largo de todo el ancho de contenido.

1/2 significa que la columna ocupa el 50% del ancho de contenido, por lo que puedes crear dos columnas.

1/3 significa que la columna ocupa el 33,33 % y puedes usar hasta 3 columnas

2/3 significa que divides el área de contenido en 3 partes y esta columna ocupa 2 de las tres, dicho de otra manera, la columna ocupa el 66,66% del área de contenido o el espacio de dos columnas juntas. En este caso podrás incluir una segunda columna que ocuparía el tercio restante.

¡Bueno, pues así con todo! Puedes crear todo tipo de combinaciones posibles, según tus necesidades.

Configurar las columnas

Avada ha ido mejorando continuamente este apartado, ya que es esencial para lograr los mejores resultados en cuanto a diseño. Como dije al principio, aun deben mejorar al respecto, porque hay cosas que puedes hacer en otros maquetadores, que aquí no puedes.

No obstante, verás ahora todas las posibilidades de configuración y te darás cuenta de que son muchas.

Opciones de configuracion en las columnas de Fusion Builder Avada

A) Last Column (Última columna)
Aunque Avada lo hace de forma automática, si por ejemplo mueves o cambias el orden de una columna, debes indicar si es la última. Elige SI o NO
B) Column Spacing
Indica si quieres que exista espacio entre esta y la siguiente columna
C) Center Content
Si activas esta opción el contenido de cada columna aparecerá siempre perfectamente centrado. Debes tener en cuenta, que esta opción solo funciona si has configurado en el contenedor de ancho completo la opción de que las columnas tengan la misma altura. Esta opción tira de Javascript y por lo tanto mi consejo es que la uses si es necesario, de cara a una buena optimización.
D)Hide on Mobile
Puedes hacer que la columna sea visible o no en el móvil.
E) Background color
Elige el color que quieres para el Background.
F)Background image
Puedes poner una imagen de fondo para la columna.
G) Background repeat
La imagen se repite vertical u horizontalmente.
H) Background Position
Puedes centrar o buscar la posición más ideal de la imagen.
I) Border position
Creas un borde alrededor de toda la columna o en parte.
J) Border size
Elige el grosor en px del borde para la columna.
K) Border color
El color del borde que quieras tener.
L) Border Style
Elige que tipo de estilo que quieres para el borde.
M) Padding
Establece un padding general para el interior de la columna.
N) Margin top
Establece un margen superior respecto a otro elemento.
O) Margin Bottom
Establece un margen inferior respecto a otro elemento.
P) Animation type
Selecciona un tipo de animación para la columna.
Q) Direction of animation
Elige la dirección o sentido en el que se animará la columna.
R) Speed of animation
Determina la velocidad a la que irá la animación.
S) Clase CSS
Selecciona la clase de CSS personalizado que quieres aplicar a esta columna.
T) ID Class
Selecciona el ID de CSS personalizado que quieres aplicar a esta columna.

En los próximos tutoriales iremos viendo el uso de los shortcodes, que hacen y como funcionan. ¡Si quieres hacer algún comentario, ya sabes donde puedes hacerlo!

¡Nos vemos en la próxima :)!

COMPRAR

¡Si mi trabajo te ayuda, tu también puedes echarme una manita!

Si la información de este post te ha resultado útil y finalmente decides comprar este theme, puedes colaborar conmigo comprando en Themeforest a través de este botón de compra. Al hacerlo, me ayudas a obtener algunos pequeños ingresos extra que sirven para compensar todo este trabajo.
COMPRAR