Tutorial avada slider, paso a paso

Tutorial avada slider, paso a paso

Con las últimas versiones de Avada el que fuera «fusion slider» ahora se llama «avada slider», un slider muy lígero y fácil de crear.  la creación del «Avada slider» es muy similar a la antigua fusion, si álguien actualizó su plantilla el fusion slider que tenía se adaptará al avada slider sin problemas. En este tutorial empezaremos desde el principio para su creación tanto si queremos crar un nuevo slider o modificar algún otro que viniese con la demo instalada o incluso modificar el fusion antiguo que se cambió con la actualización.

No os asusteis con este tutorial avada slider si parece muy largo pero es muy sencillo y se hace en un pis pás.

Por defecto el avada slider viene activado y te de debe aparacer en el escritorio «Avada», «sliders», si no te aparece lo activas en las opciones de avada, «avanzado», «post types»

Tenemos que realizar dos configuraciones  la primera sería la configuración del slider  en sí , todos los parámetros de tamaños, velocidad…., basicamente la base dónde introducimos las diapositivas y la segunda la configuración de las diapositivas o slides (cada una de las fotografías o diapositivas y textos que queremos mostrar dentro de ellas)

PARTE 1: CREACIÓN DE LOS AVADA SLIDERS (LA BASE DE LAS DIAPOSITIVAS)

Cuando entremos en la opción «sliders» lo primero que vemos es una lista de los sliders que están creados porque se exportaron con la demo o ninguno si no tenemos ninguno,  podremos modificarlos o crear uno nuevo, para modificarlos pulsar botón «editar» y para crear uno nuevo navegamos más abajo de la lista y rellenamos los campos siguientes:

1.Nombre del AVADA Slider que le quieras poner

2. Shortcode

Cada slider de avada 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» o en cualquier parte de la web con el «builer elements»

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

3. Tamaño del avada slider

Ingresar el ancho y la altura del slider. El ancho 100% cogerá el ancho de cada tipo de pantalla y es lo habitual aunque puedes introducir un valor en pixeles para un ancho concreto , la altura puede ser más alto  o más bajo según el gusto introducido en pixeles(px)

4.Ancho máximo para el contenido del slider de avada

Controla el ancho del contenido. En píxeles, p. Ej .: 850px. Déjelo en blanco para el ancho del sitio.

5. Avada Slider a plantalla completa

Si deseas que tu slider de avada 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.

6. Efecto de desplazamiento parallax o scroll

Marca esta casilla para habilitar un efecto de desplazamiento de paralax o scroll. Esto solo funciona cuando se asigna el control deslizante en las opciones de la página y no para el elemento. Cuando está habilitado, la altura del control deslizante que ingresa no será exacta debido al margen negativo que se basa en el tamaño general del encabezado. ej .: 500px se mostrará como 415px. Ajústalo en consecuencia.

7. Indicadores de slider de avada

Elige si deseas mostrar el círculo de paginación o el indicador de desplazamiento hacia abajo

8. Elegir el color del indicador

9. Mostrar flechas de navegación

Marcar para mostrar las flechas a izquierda y derecha para poder pasar las diapositivas

10.Tamaño de las flechas de navegación y tamaño de la caja

11. Velocidad de presentación.

Controla la velocidad a la que van pasasando las diapositivas , 1000 equivale a 1 segundo  por lo tanto  7000 equivale a 7 segundos.

12.Repetir slider

Marcar casilla para que se vuelva a repetir las diapositivas una y otra vez

13.Reproducción automática

Para que los sliders se reproduzcan solos.

14.Order by

Ordena la aparición de los sliders por  fecha, id, título, modificado o aleatorio

15.Orden

Controla el orden de clasificación de las diapositivas. Elige entre descendente o ascendente, es decir los primeros que creastes o los últimos.

16. Animación.

Elige el tipo de animación de la transición entre el cambio de diapositivas.

16. Velocidad de la animación

Controla la velocidad de la transición entre las diapositivas, 1000 equivale a 1 segundo, 6000 equivale a 6 segundos.

17. Sensibilidad de la tipografía en diseño responsivo

Para ajustar la fuente en los distintos tamaños de pantallas,v alores inferiores a 1 disminuyen el tamaño y valores superiores a 1 lo aumentan

18. Factor mínimo para el tamaño de fuente.

El tamaño de fuente mínimo de los elementos responsives es el tamaño de fuente del cuerpo multiplicado por este factor.

El tamaño mínimo de la tipofrafía responsive será el tamaño de fuente del cuerpo multiplicado por ese factor

19. Añadir slider

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, dónde se podrán modificar o eliminar.

PARTE 2: CREACIÓN DE LOS SLIDES O DIAPOSITIVAS

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, fotos y textos de slogan.

Navega a la pestaña Avada slider y en la franja de arriba dónde pone sliders se abre un submenú y pinchamos en «slides»

1.Agregar un slide nuevo

Nos saldrá la lista de los slides creados, si tenemos. Vamos a añadir uno nuevo pinchando en «adicionar nuevo slider»

2. Nombre

Le damos un nombre a la diapositiva, lo mejor es darle algún referente al slider al cuál lo queramos añadir.

2.Tipo de fondo

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

3.Alienación del contenido

Seleccionamos dónde queremos alinear los textos, izquierda , derecha o centro

4.Área de encabezado

Aquí ponemos el texto o slogan que queremos mostrar, se puede usar código html para personalizar o simplemente escribir el texto sin códigos cogerá los estilos de la plantilla.

5. Tamaño del título.

Elige el tamaño que quieras para el título.

6. Tamaño de fuente del encabezado

Introduce sin px el tamaño para el título

7. Color del encabezado

Introduce el color para el título

8. Fondo del encabezado

Selecciona para poner un fondo semitransparente detrás del título, esto se realiza cuando la imagen no permite que se lea bien el título y de esta manera se destaca. Cuando se selecciona esta opción se nos abrirá otra opción para poner el color del fondo.

9. Área de leyenda (subtítulos) y tamaño

La leyenda es una breve frase o subtítulos que ponemos debajo del título, podemos introducir html para personalizarla o simplemente escribir la frase y se cogerán los estilos establecidos en la plantilla. Elegimos también el tamaño de la frase o subtítulos en «tamaño de etiqueta».

10. Tamaño fuente subtitulos y color

Establecemos el tamaño de los subtítulo sin px el color

11. Fondo de la leyenda o subtítulos

Al igual que con el título si no podemos leer bien la leyenda debido a la foto podemos establecer un color semitransparente en el fondo para mayor claridad

12. Opciones del enlace

Esta opción nos permite poner un enlace en nuestro slide, si no queremos enlace dejamos vacio el campo para introducir la dirección de la url.

PARTE 3: INTRODUCIR LA FOTO DEL SLIDE Y PUBLICAR

1.Imagen del slide

Finalmente vamos a introducir la fotografía que queremos que aparezca en el slide, en la parte derecha dónde pone «imagen destacada»,  pinchamos en «establecer imagen destacada», Hay que asegurarse que esta imagen tenga un tamaño apropiado para que encaje bien en el slide y que sea de buena calidad para que no se vea pixelada.

2. Seleccionar slider

En esta parte derecha nos sale también una caja dónde debemos asignar de la lista de sliders que creamos en la primera parte en cuál de ellos queremos que salga el slide o diapositiva creado en la 2 parte. Cualquier diapositiva se puede seleccionar a cualquier slider.

Si quieres que salgan varias fotografías en un mismo slider solo tienes que crearlas y asignarlas al mismo.

3.Publicar

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

PARTE 4: COMO SALE EL SLIDER EN LA WEB

3. En la cabecera de página

Editamos la página dónde queremos que aparezca y nos vamos abajo del todo dónde pone «Avada page options», seleccionamos tipo de presentación «fusion slider» y en selecciona el fusion slider seleccionamos el slider que hemos creado previamente. Luego le damos a actualizar para guardarla o a publicar si es una página nueva.

4.En cualquier parte de la web

Solo tienes que añadir el  «avada 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.

Si tienes alguna duda puedes preguntarnos en los comentarios de este post, estaremos encantados de resovértelas.