El Fusion Builder es el page builder de la plantilla Avada que viene incluido en la plantilla.

Los desarrolladores de Avada tienen intención de crear un plugin del Fusion Builder para que pueda ser utilizado en cualquier plantilla.

Con la última versión del Fusion Builder que es la versión 5, se ha renovado completamente el constructor con respecto a su versión anterior, se ha hecho mucho más intuitivo y flexible.

 

En este post puedes ver todas las características de Avada, la plantilla más vendida

 

El page builder de Avada hoy en día es un page builder de tipo backoffice, es decir no vemos los cambios en tiempo real. Para ver los cambios hay que hacer pre visualizaciones.

En cualquier caso, Avada tiene intención de añadir al constructor la opción de un formato visual tipo frontend.

QUIERO LA PLANTILLA AVADA

 

Otros post:

 

 

 

 

1.- Activación del fusion builder de Avada

 

Para utilizar el fusion builder de Avada en una página tendremos que hacer clic en el botón: “Use Fusion Builder”.

De esta manera desaparecerá el editor por defecto de wordpress y aparecerá el page builder de la plantilla Avada.

 

Pantalla de inicio del Fusion Builder

Interface del Fusion Builder / El page builder de Avada

 

El page buider de Avada o Fusion builder estará disponible en: páginas wordpress, entradas blog, Portfolio y FAQ.

Podemos hacer que el Fusion builder no se muestre en alguno de estos tipos de páginas desde el panel de administración: “Fusion builder > Settings”

Desde «Fusion builder > Settings» podremos activar o desactivar el Fusion builder de manera general y activar o desactivar elementos.

 

 

2.- Estructura del page builder de la plantilla Avada

 

El page builder de la plantilla Avada está formado por 3 tipos de estructuras:

 

i.- Contenedores (container): los contenedores o containers son las estructuras más grandes del page builder de Avada.

En una página puede haber 1 o más contenedores. Los contenedores marcarán las diferentes secciones de una misma página.

En el interior de los contenedores colocaremos las columnas en una distribución determinada y dentro de las columnas colocaremos los elementos.

 

ii.- Columnas (columns): las columnas dividen el contenedor en varias partes. Existe una amplísima variedad de posibles distribuciones de columnas dentro de un contenedor. De hecho el page builder de Avada es uno de los constructores con una variedad más amplia de distribuciones y eso lo veremos un poco más adelante.

Además el Fusion builder de Avada es de los pocos page builders para wordpress que permiten anidar columnas dentro de una columna.

 

esquema estructura page builder avada

Estructura de contenedores y columnas en el builder de Avada

 

iii.- Elementos (element): Los “elementos” son las estructuras finales del page builder de Avada. Los elementos o elements se colocan dentro de las columnas.

En una columna puede haber 1 elemento o varios. Para insertar una columna debemos haber añadido previamente una columna.

 

A parte del Fusion Builder de Avada existen muchos otros page builders, en el siguiente post puedes ver un análisis de todos ellos: Page builders para wordpress

 

En las columnas aparecerá un botón “+ Element” en los que al hacer clic se desplegarán en una ventana emergente los posibles elementos que podremos añadir a dicha columna.

Existe una gran variedad de diferentes elementos con diferentes funcionalidades, que veremos más adelante. Concretamente 46 elementos diferentes como son: Alert, blog, button, Checklist, code block, Content boxes, Countdown, etc. más 3 elementos específicos para woocommerce que son: Woo Carousel, Woo Featured y Woo Shortcodes.

 

Elementos o elements de Avada

Algunos de los elementos de que dispone el Fusion Builder de Avada

 

QUIERO LA PLANTILLA AVADA

 

 

3.- Contenedores en Fusion Builder de Avada

 

Los contenedores (container) son los bloques principales y más grandes que utiliza el page builder de Avada.

Podemos tener todos los contenedores que queramos en una sola página de wordpress.

Dentro de un contenedor introduciremos una serie de columnas (columns) y elementos (elements) dentro de las columnas.

 

¿Todavía no tienes hosting? con esta mega guía sabrás cual es el que más te interesa: elegir hosting wordpress

 

Habitualmente cuando creamos una página con wordpress dividimos la página en varias zonas con diferentes fondos para separar las diferentes zonas dentro de la página. Pues bien, esas diferentes zonas las crearemos con diferentes contenedores (containers).

 

 

3.1.- Cómo añadir un contenedor (container) con el Fusion Builder

 

Cuando activas el Fusion Builder en una página te aparecerá la interface de gestión del page builder de Avada.

Para añadir el primer contenedor deberás hacer clic en el botón azul “+Container”.

Una vez que hayas añadido el primer contenedor, para añadir otro contenedor sitúa el ratón en la parte inferior derecha del contenedor y te aparecerá un botón “+Container”.

 

añadir contenedores / container en Avada

Botón para añadir un nuevo contenedor a la página

 

 

3.2.- Opciones de configuración de los contenedores (containers) del Fusion Builder

 

Para configurar un contenedor del Fusion Builder de Avada haremos clic en el icono en forma de “pluma” en la parte superior derecha del contendor. Si pones el ratón sobre la pluma te aparecerá la leyenda: “Container Settings”.

Dentro de la configuración de los contenedores tenemos 3 pestañas: General, Background (fondo), y Design (Diseño).

 

 

3.2.1.- Opciones de configuración “General” de los contendores del Fusion Builder

 

En las opciones generales tenemos las siguientes opciones principales:

 

i.- Set column to equal Height: establecer que todas las columnas que haya dentro del contenedor tengan la misma altura. Esto se visualiza y entiende fácilmente si pones un color de fondo a cada columna, algún elemento de texto y pruebas con esta opción.