Tutorial avada slider, paso a paso
Tutorial avada slider, paso a paso
Table of Contents
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.
Nuestras redes sociales
Busca en nuestro Blog
Razones para tener página web
7 razones para tener página web Toda gran empresa tiene un sitio web. Pero ¿qué tan necesario es una página web para la empresa? Pero muchos de la pequeña empresa ven innecesario y estresante [...]
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 [...]
Por qué debes usar las redes sociales
Hoy en día, una de las herramientas más utilizadas para potenciar un negocio son las redes sociales. Vamos a ver por qué debes usar las redes sociales en tu empresa. Por qué son importantes [...]
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 [...]
Cuánto cuesta crear una tienda online
¿Cuánto cuesta crear una tienda online? Muchos usuarios nos preguntan cuanto cuesta crear una tienda y la respuesta suele ser siempre la misma "depende"... ¿que necesitas exactamente?¿Que productos quieres vender? Vamos a argumentar todo [...]
No vender a Canarias con Woocommerce
Cuando realizamos una tienda online en woocommerce nos topamos con el problema de vender o no a Canarias, Ceuta y Melilla debido a sus distintas imposiciones de impuestos y gastos de envios muchas veces [...]
Web optimizada para Seo: ¿Saldré en los primeros puestos de Google?
Muchas empresas nos venden la web optimizada para Seo, lo cuál está muy bien pues es un gran trabajo muy necesario e imprescindible para posicionar la web en Google, ¿pero significa esto que una [...]
Estafas en internet. Cuidado con dnscorp.org/godomainweb.org – estafadores
Si tienes registrado un dominio y un día recibes un mensaje a través del formulario de tu pagina web de "dnscorp.org" , que te dice , en inglés, que si no pagas en un [...]