Tutorial fusion slider Avada

La plantilla Avada incorpora entre sus plugin premium, un sistema de diapositivas muy sencillo pero a la vez práctico.

Para realizar un fusion slider de Avada lo vamos a dividir en dos partes, la primera sería la configuración del slider y la segunda la configuración de las diapositivas o slides

CONFIGURACIÓN DE SLIDER

Paso 1: 

Navega a la pestaña fusion Slider> Agregar o editar fusion slider en el panel de administración de WordPress.( nota: Si no aparece la opción de fusion slider ve a «Avada», «opciones del tema», «avanzado», «características del tema» y ahí activar fusion slider en el caso que esté desactivado.)

Tutorial fusion slider avada 2

Paso 2:

Asigna un nombre a tu slider ingresándolo en el campo «Nombre».

Tutorial fusion slider avada 3

Paso 3:

Cada slider  que hagas se puede usar como un shortcode en una página o publicación. Ingresa un nombre único de shortcode en el campo «Shortcode». Aunque este código no hace falta si lo estableces de manera general en el header editando la página y eligiendo el slider en «fusion page options»

Explicamos como insertamos el slider una vez terminado al final de este articulo.

Tutorial fusion slider avada 4

Paso 4:

En la opción «Tamaño del slider», puedes ingresar el ancho y la altura del slider.

Paso 5:

Si deseas que tu slider tenga el ancho completo de la ventana del navegador, puede establecer la altura del slider al 100%. De lo contrario, configúrela en cualquier valor de píxel para mostrar un ancho fijo

Tutorial fusion slider avada 5

Paso 6:

Si deseas que tu slider esté en pantalla completa, puede marcar la casilla de  «Control slider pantalla completa». Esto permite que tu slider muestre 100% de ancho y 100% de altura del área de visualización.

Tutorial fusion slider avada 6

 

Paso 7:

Si deseas que tu slider tenga un efecto de desplazamiento de parallax, puedes marcar la casilla  «Efecto de desplazamiento parallax». Asegúrate de leer la información importante para esta opción a continuación en la sección Opciones de Fusion Slider.

Tutorial fusion slider avada 7

Paso 8:

Hay muchas otras opciones que puedes personalizar, como las opciones de navegación, reproducción automática, bucle de diapositivas, animación y similares.

Mostrar flechas de navegación: marca esta casilla  para mostrar las flechas de navegación a cada lado del slider.

Tamaño de la caja de navegación: te permite establecer un valor de píxel para el ancho y el alto del slider. Por ejemplo, 63px.

Tutorial fusion slider avada 8

 

Tamaño de flecha de navegación: te permite establecer un valor de píxel para el tamaño de las flechas de navegación. Por ejemplo, 25px.

Tutorial fusion slider avada 9

Reproducción automática: marca esta casilla  para habilitar la función de reproducción automática en las diapositivas.

Tutorial fusion slider avada 10

 

Slide Loop: maca la casilla  repetir slider para habilitar la función de bucle y hacer que sus diapositivas se repitan infinitamente.

Tutorial fusion slider avada 11

Ordenar por: controla cómo se deben ordenar las diapositivas. Elige entre Fecha, ID, Título, Modificado o Aleatorio.

Orden: controla el orden de clasificación de las diapositivas. Elige entre descendente o ascendente.

Tutorial fusion slider avada 12

Tipo de animación: te permite establecer un tipo de animación para las transiciones de diapositivas. Elige entre Fade o Slide.

Tutorial fusion slider avada 13

 

Velocidad de presentación de diapositivas: te permite establecer un valor numérico que controla la velocidad de su presentación de diapositivas. Por ejemplo, 1000 es igjual a 1 segundo, 7000 igual a 7 segundos

Tutorial fusion slider avada 14

Velocidad de animación: te permite establecer un valor numérico que controla la velocidad de la transición de diapositiva. Por ejemplo, 1000 es igual a 1 segundo.

Tutorial fusion slider avada 15

 

Sensibilidad de tipografía receptiva: te permite configurar la sensibilidad de tipografía para el diseño responsivo en el slider.

Tutorial fusion slider avada 16

 

Factor de tamaño de fuente mínimo: te permite establecer la distancia mínima entre los encabezados y el texto del cuerpo del slider.

Tutorial fusion slider avada 17

Paso 9:

Una vez que hayas  terminado de personalizar tu slider , haz clic en el botón «Agregar slider» en la parte inferior para guardarlo. Todos los sliders creados nos aparecerán en una lista de la parte derecha de la página.

Tutorial fusion slider avada 18

CONFIGURACIÓN DE LAS DIAPOSITIVAS O SLIDES

Una vez que hayas creado un Slider, ahora puedes crear Diapositivas o slides que puedes asignar a cualquier Slider existente. Las diapositivas son donde crea y carga tu contenido para que se muestre en el slider.

Paso 1:

Navega a la pestaña fusion slider> Agregar o editar slides en el panel de administración de WordPress.

Tutorial fusion slider avada 19

Paso 2:

Haz clic en el botón «Adicionar nuevo slide» en la parte superior de la página.

Paso 3:

Cuando crees una nueva diapositiva, no olvides darle un nombre.

Tutorial fusion slider avada 20

Paso 4:

Elige el tipo de fondo que deseas utilizar. Puede elegir entre Imagen, Video autohospedado, Youtube o Vimeo. Aquí vamos a introducir un fondo de imagen.

Tutorial fusion slider avada 21


Paso 5:

Personaliza la configuración del contenido del slider. Introduce encabezados, subtítulos, botones y más.

– Alineación de contenido: selecciona si el contenido está alineado a la izquierda, a la derecha o al centro.
Tutorial fusion slider avada 22
– Área de encabezado: introduce el título de la diapositiva . También puedes optar por insertar código HTML y códigos cortos de Fusion, como un separador, en el campo de texto.
Tutorial fusion slider avada 23
– Tamaño de fuente del encabezado: ajuste el tamaño de fuente del texto del encabezado introduciendo un valor numérico. Por ejemplo, 60.
Tutorial fusion slider avada 24
– Color de encabezado: seleccione un color para la fuente del encabezado introduciendo un código hexadecimal. Por ejemplo, # fff.(blanco)
Tutorial fusion slider avada 25
–  Fondo de encabezado: elige  mostrar un fondo semitransparente detrás del texto del encabezado. Elige entre Sí o No.
Tutorial fusion slider avada 26
– Color de fondo del encabezado: selecciona un color para el fondo del encabezado ingresando un código hexadecimal. Por ejemplo, # 000000.
Tutorial fusion slider avada 27
– Subtítulo: introduce un subtítulo de texto para tu diapositiva. También puedes optar por insertar marcado HTML y códigos cortos de Fusion, como un separador, en el campo de texto.
Tutorial fusion slider avada 28
– Tamaño de fuente del subtítulo: ajusta el tamaño de fuente del texto del subtítulo introduciendo un valor numérico. Por ejemplo, 60.
Tutorial fusion slider avada 29
– Color del subtítulo: selecciona un color para la fuente del subtítulo introduciendo un código hexadecimal. Por ejemplo, # 000000.
Tutorial fusion slider avada 30
–  Fondo de subtítulos: elige mostrar un fondo semitransparente detrás del texto del subtítulo. Elige entre Sí o No.
Tutorial fusion slider avada 31
 
– Color de fondo del subtítulo: selecciona un color para el fondo del subtítulo introduciendo un código hexadecimal. Por ejemplo, # 000000.

Tutorial fusion slider avada 32

Paso 6:

personaliza la configuración del enlace.

– Elige vincular un botón o la diapositiva completa. Si la diapositiva va a estar enlazada de algún modo a otra sección o página se puede configurar un botón o pinchando en la dapositiva completa

– Dirección del enlace: si no quieres enlazarlo se deja en blanco

– Abrir enlace en una nueva ventana: elige entre si o no.

 

Tutorial fusion slider avada 33


Paso 7:

Para asignar la diapositiva a un  slider, selecciona el nombre del slider que creaste en el cuadro de opción «fusion sliders» en la barra lateral derecha. Cualquier diapositiva que crees puede asignarse a cualquier slider creado.

Tutorial fusion slider avada 34

Paso 8:

Introducir la imagen: a la derecha dónde pone imagen destacada introducimos la imagen que queremos mostrar en la diapositiva.

Tutorial fusion slider avada 35

Paso 8:

Cuando hayas terminado, haga clic en el botón «Publicar» para guardar la diapositiva.

Tutorial fusion slider avada 36

CÓMO APARECE EL SLIDER EN LA WEB.

Los sliders lo podemos poner en cualquiera de las páginas de la web y dónde queramos.

PONER EL SLIDER EN EL HEADER:

Editamos la página dónde queremos que aparezca y nos vamos abajo del todo dónde pone «fusion page option»,  seleccionamos tipo de presentación «fusion slider» y en selecciona el fusion slider seleccionamos el slider que hemos creado previamente.

Tutorial fusion slider avada 37

PONER EL SLIDER EN CUALQUIER OTRO LUGAR DE LA PÁGINA

Solo tienes que añadir el fusion slider con la opción del fusion builder «builder elements», ahí te saldrá para insertarlo en cualquier lugar de la página o sección.