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.

 

ii.- Name of menú anchor: aquí podremos poner un nombre a la sección, que será el que tendremos que utilizar desde el menú para crear una web en una sola página con Avada.

 

iii.- Container Visibility: podemos ocultar o desactivar la sección en: móviles (small screen), tablets (médium screen) o escritorio (Large screen). Selecciona donde quieres que no se muestre.

 

 

3.2.2.- Opciones de configuración “Background” de los contenedores de Avada

 

En la pestaña background encontraremos principalmente opciones generales de diseño de fondo del contenedor como:

i.- Container Background color: Seguramente la opción más importante de configuración de una sección. Desde aquí podremos seleccionar un color de fondo para todo el contenedor.

 

ii.- Background image: desde aquí podremos subir una imagen de fondo para la sección

 

iii.- Video MP4, Video WebM y Video OGV: desde estas opciones podremos subir vídeos en diferente versiones para que aparezcan como fondo del contenedor. Hay que llevar mucho cuidado con estas opciones ya que ralentizan notablemente la carga de la página donde se incluyen dichos vídeos.

 

iv.- You tube / Vimeo Video URL or ID: Opción mucho más interesante que las anteriores para añadir un vídeo, ya que al cargarse directamente desde YouTube o Vimeo el tiempo de carga será mucho menor, y el esfuerzo lo realizarán los servidores de Youtube o Vimeo y no nuestro hosting.

 

 

3.2.3.- Opciones de configuración “Design” de los contenedores de Avada

 

En esta pestaña encontraremos opciones de márgenes exteriores (margin) y márgenes interiores (padding):

i.- Container border size: esta opción sirve para mostrar un borde superior e inferior en el contenedor. Una vez establecido el ancho del borde nos aparecerán dos nuevas opciones. Una denominada (Container border color) donde estableceremos el color del borde y otra denominada (Border style) donde estableceremos si es una línea continua (solid) , discontinua (dashed )o de puntos (dotted).

 

ii.- Margin: aquí estableceremos los márgenes exteriores del contenedor superior e inferior.

 

iii.- Padding: aquí estableceremos los márgenes interiores del contenedor (superior, derecho, inferior e izquierdo)

 

QUIERO LA PLANTILLA AVADA

 

 

4.- Las columnas en el page builder de Avada

 

Las columnas son los elementos que se deben introducir en los contenedores para posteriormente poder añadir los elementos en su interior.

Cuando añadimos un contenedor veremos una ventana en la que se nos indicará que elijamos una distribución de columnas para el contenedor.

Avada dispone de uno de los constructores con más tipos diferente de posibles estructuras.

 

distribuciones de columnas en contenedores o secciones del fusion builder

Algunas de las posibles distribuciones de columnas en los contenedores de Avada

 

Disponemos de las siguientes distribuciones:

1/ 1

1/ 2 + 1/ 2

1/ 3 + 1/ 3 + 1/ 3

1/ 4 + 1/ 4 + 1/ 4 + 1/ 4

2/ 3 + 1/ 3

1/ 3 + 2/ 3

1/ 4 + 3/ 4

3/ 4 + 1/ 4

1/ 2 + 1/ 4 + 1/ 4

1/ 4 + 1/ 4 + 1/ 2

1/ 4 + 1/ 2 + 1/ 4

1/ 5 + 4/ 5

4/ 5 + 1/ 5

3/ 5 + 2/ 5

2/ 5 + 3/ 5

1/ 5 + 1/ 5 + 3/ 5

1/ 5 + 3/ 5 + 1/ 5

1/ 2 + 1/ 6 + 1/ 6 + 1/ 6

1/ 6 + 1/ 6 + 1/ 6 + 1/ 2

1/ 6 + 2/ 3 + 1/ 6

1/ 5 + 1/ 5 + 1/ 5 + 1/ 5 + 1/ 5

1/ 6 + 1/ 6 + 1/ 6 + 1/ 6 + 1/ 6 + 1/ 6

5/ 6 + 0

4/ 5 + 0

3/ 4 + 0

2/ 3 + 0

3/ 5 + 0

1/ 2 + 0

2/ 5 + 0

1/ 3 + 0

1/ 4 + 0

1/ 5 + 0

1/ 6 + 0

 

 

4.1.- Opciones de configuración de las columnas con Avada

 

Para ver las opciones de configuración de una columna deberás hacer clic sobre el icono en forma de pluma que aparece en la parte superior derecha de dicha columna.

Verás tres pestañas diferentes: General, Design y animation

 

 

4.1.1.- Opciones de configuración de la pestaña “General” de las columnas

 

i.- Column spacing: desde aquí estableceremos el espacio de separación entre una columna y la contigua.

 

ii.- Center content: esta opción sirve para centrar el contenido de la columna verticalmente (no horizontalmente).

 

iii.- Hover type: desde aquí podremos establecer el efecto hover que queremos para los elementos enlazables situados en el interior de la columna. El efecto “hover” es el que se produce cuando ponemos el cursor sobre un elemento con un link o enlace.

 

iv.- Link URL: Aquí podemos establecer un enlace de destino si hacemos clic sobre la columna.

 

v.- Ignore Equal Heights: recuerda que en las opciones de configuración del contenedor podíamos establecer que todas las columnas tengan la misma altura. Pues con esta opción podemos establecer que esta columna no tenga la misma altura que el resto de columnas del contenedor.

 

vi.- Column Visibility: al igual que en los contenedores aquí estableceremos los tipos de dispositivos en los cuales no queremos que se muestre esta columna.

 

 

4.1.2.- Opciones de configuración de la pestaña “Design” y “Animation” de las columnas

 

i.- Background color: desde aquí podremos establecer un color de fondo para la columna que estamos personalizando.

 

ii.- Background Image: desde aquí podremos establecer una imagen de fondo para la columna

 

iii.- Border size: desde aquí podremos establecer un borde de color alrededor de la columna. Al marcar el ancho del borde nos aparecerán dos nuevos selectores para color y tipo de línea.

Podemos personalizar que el borde aparezca alrededor de toda la columna o solo en algunos laterales con la opción: Border position

 

iv.- Padding: sirve para establecer el margen interior de la columna

 

v.- Margin: sirve para establecer el margen exterior de la columna

 

En la pestaña “Animation” (Animación) tenemos una única opción:

i.- Animation Type: desde aquí podremos elegir qué tipo de animación se utilizará para mostrar la columna.

 

 

5.- Mega guía de todos los elementos del page builder de Avada

 

Para añadir un elemento (element) a una columna tendremos que hacer clic sobre el botón “+ Element” de la columna en la que quieras insertar el elemento

Cuando hagas clic en el botón “+ Element” te aparecerá una ventana con todos los posibles elementos que podemos añadir a la columna.

 

 

QUIERO LA PLANTILLA AVADA

 

 

Vamos a ver una lista de todos los elementos disponible de la plantilla Avada:

 

i.- Alert (Alerta): es un rectángulo que sirve para avisar o alertar de algo. Podremos elegir entre diferentes tipos de avisos según cual sea su finalidad, lo que afectará al diseño de dicho rectángulo.

El rectángulo dispondrá de un “aspa” para que el visitante pueda cerrar el aviso y se podrán aplicar efectos de movimiento sobre el rectángulo.

Aquí puedes ver varios ejemplos del elemento Alert

 

element Alert page builder Avada

Ejemplos del elemento Alert del Fusion Builder de Avada

 

ii.- Blog: con este elemento podremos añadir un bloque en el cual aparezcan entradas de blog. Podremos elegir entre múltiples diseños, filtros y opciones de configuración.