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»

Captura1 1

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

Captura3

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.

Captura12

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)

Captura4

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.

Captura13

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.

avada slider

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.

Captura14

7. Indicadores de slider de avada

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

Captura6

8. Elegir el color del indicador

Selecciona un color para el icono del indicador deslizante. Código de color en código html, por ejemplo: #fff. Predeterminado: #fff. Os pongo aquí un link a un tabla de colores por si no estais familiarizados solo teneis que copiar el  códigos HEX resultante y copiarlo en el slider indicator color




https://htmlcolorcodes.com/es/tabla-de-colores/


Icono de Validado por la comunidad

 

espectacular slider en avada

9. Mostrar flechas de navegación

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

crear slider avada fácil

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

Captura16

como crear un slider en avada

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.

tutorial español avada slider

12.Repetir slider

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

como crear fácil avada slider

13.Reproducción automática

Para que los sliders se reproduzcan solos.

como funciona avada slider

14.Order by

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

crear un slider avada

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.

crear avada slider

16. Animación.

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

creación slider en avada

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.

como se crea slider en avada

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

crear slider con avada theme

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

creación de slider en avada

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.

aprender a crear slider avada

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»

Captura45

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»

Captura46

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.

Avada Slider anteriormente conocido como Fusion Slider

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.

Tutorial de Avada Slider (antes Fusion Slider)

3.Alienación del contenido

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

Avada Fusion Slider o Avada Slider

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.

curso avada slider

5. Tamaño del título.

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

avada slider paso a paso

6. Tamaño de fuente del encabezado

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

manejar avada slider

7. Color del encabezado

Introduce el color para el título

aprender avada slider

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.

slide avada

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

tutorial slider avada

10. Tamaño fuente subtitulos y color

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

tema avada wordpress

avada wordpres

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

avada theme slider

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.

avada theme

crear slider avada theme

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.

aprende avada slider

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.

avada slider tutorial español

3.Publicar

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

tutorial avada slider español

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.

tutorial avada slider

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.

Comparte en redes sociales

Nuestras redes sociales

Busca en nuestro Blog

Tu tienda online no vende. 7 Razones y 7 soluciones

¿Porqué mi tienda online no vende? Semanalmente recibimos peticiones y consultas sobre diseño de tiendas online en Sevilla. Muchas de las peticiones son de gente sin conocimientos previos en gestión de tiendas físicas u [...]

5 abril, 2020|Tiendas online, Posicionamiento, Wordpress|

Tutorial fusion slider avada

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 [...]

18 diciembre, 2019|Tutoriales|
Ir a Arriba