Seleccionar página

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.

Puedes ver algún ejemplo aquí: Elemento blog Avada

 

iii.- Button (Botón): con este elemento podremos crear y añadir botones. Los botones son muy personalizables y también se les puede aplicar efectos de movimiento.

Aquí puedes ver algunos ejemplos: Botones Avada

 

iv.- Checklist (lista): con este elemento podremos establecer una lista de textos precedidos por un icono a modo de lista para chequear. Puedes ver un ejemplo aquí: Elemento Checklist

 

Checklist element Avada

Ejemplo elemento Checklist del page builder de AVADA

 

v.- Code block: este elemento sirve para introducir código HTML

 

vi.- Content Boxes (Cajas de contenido): este elemento sirve para añadir un bloque compuesto de un icono + un título + texto descriptivo + un botón.

Este tipo de bloques se utilizan asiduamente en las páginas web de hoy en día. Este elemento dispone de un montón de opciones de personalización. Aquí puedes ver un montón de ejemplos: Elemento Content Boxes Avada

 

elemento content builder del fusion builder

Elemento Content Boxes del page builder de Avada

 

vii.- Countdown (cuenta atrás): con este elemento de Avada podremos crear un bloque con una cuenta atrás (semana + días + horas + minutos + segundos) hasta una determinada fecha y hora. Puedes ver un ejemplo aquí: Elemento Countdown Fusion Builder

 

Element Countdown del page builder de avada

Elemento Countdown del Fusion Builder

 

viii.- Counter Boxes (caja con contador): con este elemento del Fusion Builder podremos añadir cajas con texto + icono + contador. El contador partirá desde cero hasta el número que establezcamos en pocos segundos. Puedes ver aquí algunos ejemplos: Elemento Counter Box

 

ix.- Counter Circles (Contadores circulares): un círculo en movimiento en tiempo real hasta una determinado porcentaje y con un elemento central es lo que permite hacer el elemento Counter Circles. Puedes ver aquí algunos ejemplos: Elemento Counter Circles Avada

 

x.- FAQ (Preguntas frecuentes): elemento formado por botones desplegables (título + descripción) que además podremos clasificar en diferentes pestañas. Recurso habitualmente utilizado para crear una página de preguntas frecuentes. Puedes ver aquí un ejemplo: Elemento FAQ Fusion Builder

 

xi.- Flip Boxes (cajas que dan la vuelta): con este elemento podremos crear cajas con texto. Si ponemos el ratón sobre dichas cajas están se dan media vuelta y muestran otro contenido diferente. Además de texto se pueden mostrar imágenes e iconos. Puedes ver un ejemplo aquí: Flip Boxes

 

xii.- Font Awesome Icon (Iconos): con este elemento podrás mostrar un icono de la Fuente Awesome. En el siguiente enlace puedes ver todos los iconos y su nombre: Font Awesome Icon Avada

 

xiii.- Fusion slider: Elemento para mostrar un slider que previamente debe haber sido creado desde la herramienta Fusion Slider

 

xiv.- Gallery (galería de imágenes): con este elemento podremos crear galerías de imágenes. Al hacer clic sobre una imagen aparecerá una ventana emergente en la que podremos pasar el resto de imágenes. Puedes ver un ejemplo aquí: Gallery Avada

 

xv.- Google Map: Con este elemento podrás añadir el típico mapa de Google. Puedes ver ejemplos aquí: Google Map Avada

 

xvi.- Image Carousel (Carrusel de imágenes): con este elemento podremos crear un carrusel de imágenes. Imágenes que aparecen en una sola línea y que se pueden pasar como un slider, pero que a diferencia de este muestran varias imágenes. Aquí puedes ver un ejemplo: Elemento Carrusel Imágenes Avada

 

xvii.- Image Frame (Imagen): con este elemento de Avada podremos añadir una imagen con diferente efectos hover de movimiento y marco. Mira un ejemplo: Elemento Image Frame

 

xviii.- Lightbox: con este elemento podremos crear un lightbox con una imagen o un vídeo.

 

xix.- Menu anchor: este elemento es un id de anclaje que podremos utilizar para fijar posiciones en una web realizada en una sola página.

 

xx.- Modal: Con este elemento podremos crear una ventana emergente que se muestre al hacer clic sobre un determinado elemento. Puedes ver un ejemplo aquí: Elemento Modal

 

xxi.- Modal text link: con este elemento podemos crear el enlace para abrir el elemento Modal del apartado anterior. Es decir, con este elemento crearemos el lanzador.

 

xxii.- Person (persona): con este elemento podremos crear la típica página de “Equipo” con las imágenes, descripción y enlaces sociales de los miembros del equipo que forma la empresa. Puedes ver un ejemplo aquí Elemento team member

 

elemento para crear la página de equipo con avada

Elemento Team member de la plantilla AVADA

 

xxiii.- Porfolio: este elemento del Fusion Builder de Avada sirve para mostrar un porfolio clasificado y filtrado por categorías o a través de un carrusel de proyectos. Puedes ver una demo aquí: Elemento Porfolio

 

xxiv.- Post slider (slider entradas): este elemento sirve para mostrar entradas del blog a modo de slider. Aquí puedes ver varios ejemplos: Elemento post slider

 

xxv.- Pricing table (tabla de precios): este elemento de Avada sirve para mostrar la tradicional tabla de precios que vemos por todo internet. Aquí puedes ver un ejemplo: Elemento Pricing Table

 

Elemento para mostrar tablas de precio

Elemento pricing table de Avada

 

xxvi.- Progress bar: con este elemento o módulo de Avada podrás crear barras con movimiento que muestran datos con diferentes unidades.

Puedes ver un ejemplo aquí: Elemento Progress bar

 

xxvii.- Recent Posts: elemento muy interesante que sirve para mostrar entradas de blog en diferentes formatos y estructuras. Puedes ver un ejemplo aquí: Elemento Recent posts

 

xxviii.- Section Separator: elemento para incluir diferente formas cuya finalidad sea la de separar diferentes secciones de contenido de una página.

 

xxix.- Separator: elemento visible o no visible que separa varios elementos o contenidos. Puedes ver un ejemplo aquí: Elementos Separator

 

xxx.- Sharing box: elemento que aporta una caja con iconos de compartir contenido en redes sociales.

 

xxxi.- Slider: elemento para crear un slider de imágenes

 

xxxii.- Social links: elemento de Avada para mostrar iconos de redes sociales con su correspondiente enlace. Puedes ver ejemplos aquí: Elemento Social Links Avada

 

xxxiii.- Soundcloud: este elemento sirve para añadir postcasts de Soundcloud a través de la introducción de su url

 

xxxiv.- Table (tabla): elemento que genera el código html necesario para crear una tabla de forma sencilla sin saber html.

 

xxxv.- Tabs (pestañas): con este elemento de Avada podrás mostrar contenido (texto + imágenes) clasificado en diferentes pestañas. Puedes ver un ejemplo aquí Tabs

 

xxxvi.- Tagline box: elemento de call to action (llamada a la acción) con diferentes diseños, rebordes y sombreados con título, descripción y botón. Puedes ver ejemplos: elemento Tagline box

 

ejemplo llamada a la acción con page builder de Avada

Call to action de Avada

 

xxxvii.- Testimonials (testimonios): con este elemento se pueden crear los típicos testimonios de clientes que vemos en cientos de web por internet. Puedes ver un ejemplo: Testimonials

 

xxxviii.- Text block: un bloque fundamental que sirve para introducir texto con el típico editor de wordpress.

 

xxxvix.- Title: con este elemento podremos crear títulos y podremos definir el tipo de título en HTML.

 

xl.- Toggles: con este elemento de Avada podrás crear los típicos contenidos desplegables que vemos en muchos sitios web. Podrás configurar para que se comporten como un acordeón (cuando un elemento se despliega se pliega el anterior abierto) como como desplegables independientes. Puedes ver un ejemplo: Toggles

 

xli.- User Login, los password y register: con estos elementos podremos crear una caja de acceso para iniciar sesión, gestión de usuario y opción de recuperación de contraseña para el inicio de sesión.

 

xlii.- Vimeo: elemento para insertar un vídeo de Vimeo

 

xliii.- Widget área: elemento para insertar un área de widgets en el cual posteriormente podremos insertar widgets desde “Apariencia > Widgets”

 

xliv.- Youtube: elemento para insertar un vídeo de YouTube

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com