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.)

Paso 2:

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

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.

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

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.

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.

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.

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.

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

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

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.

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

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

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.

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

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.

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.

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.

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.

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.

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.

– Á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.

– Tamaño de fuente del encabezado: ajuste el tamaño de fuente del texto del encabezado introduciendo un valor numérico. Por ejemplo, 60.

– Color de encabezado: seleccione un color para la fuente del encabezado introduciendo un código hexadecimal. Por ejemplo, # fff.(blanco)

–  Fondo de encabezado: elige  mostrar un fondo semitransparente detrás del texto del encabezado. Elige entre Sí o No.

– Color de fondo del encabezado: selecciona un color para el fondo del encabezado ingresando un código hexadecimal. Por ejemplo, # 000000.

– 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.

– 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.

– Color del subtítulo: selecciona un color para la fuente del subtítulo introduciendo un código hexadecimal. Por ejemplo, # 000000.

–  Fondo de subtítulos: elige mostrar un fondo semitransparente detrás del texto del subtítulo. Elige entre Sí o No.

 

– Color de fondo del subtítulo: selecciona un color para el fondo del subtítulo introduciendo un código hexadecimal. Por ejemplo, # 000000.

– 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.

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.

Paso 8:

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

Paso 8:

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

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.

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.