Saltar al contenido

Cómo agregar flechas de navegación y viñetas a Slider Revolution

Cómo agregar flechas de navegación y viñetas a Slider Revolution

Este artículo es parte de nuestra serie continua de tutoriales de Slider Revolution. Puede encontrar todos los artículos de esta serie en nuestra Guía completa de revolución deslizante.

La navegación intuitiva y bien diseñada es la clave para una buena experiencia de usuario. Esto es igualmente cierto para todas las partes individuales de su sitio web como para el sitio en su conjunto. Cuando se trata de su control deslizante, la navegación no solo permite a sus usuarios alternar entre sus diapositivas, sino que también les permite saber de un vistazo que hay más diapositivas para ver. Por eso, hoy veremos cómo agregar navegación a Slider Revolution.

Hay dos tipos básicos de navegación para un control deslizante: flechas y viñetas. Usaremos la navegación por flechas para pantallas más grandes, como computadoras de escritorio y portátiles. Reservaremos la navegación con viñetas para dispositivos más pequeños como tabletas y teléfonos.

Cómo agregar viñetas de navegación a Slider Revolution

Cuando se usa un control deslizante orientado horizontalmente, tiene sentido agregar flechas a los lados izquierdo y derecho de la pantalla. Para activar las flechas en Slider Revolution, vaya a Navegación> Flechas y cambiar Tipo de flecha a EN.

Agregar flechas de navegación a Slider Revolution

Hay varios estilos de flecha predeterminados. Para cambiar el aspecto del estilo de sus flechas, consulte el Estilo de flecha menú desplegable para ver qué opciones están disponibles.

Menú desplegable de estilo de flecha

Una vez que decida el estilo de sus flechas, puede seguir adelante y personalizar cada flecha por separado (izquierda y derecha). Hay bastantes cosas con las que puedes jugar aquí.

Las flechas se pueden alinear con su diapositiva (Dimensiones del módulo), oa sus cuadrículas (Contenido).

Dimensiones del módulo

A continuación, puede establecer la alineación de las flechas y agregar rellenos horizontales y verticales.

Agregue acolchados horizontales y verticales

Las flechas también se pueden animar. La animación que aparece por defecto es una simple Desvanecerse. Si desea cambiar la forma en que ingresa a la pantalla, elija una animación diferente del menú desplegable.

Areows animados

También puede cambiar la velocidad y el retraso de la animación, así como ocultar las flechas en dispositivos más pequeños. Las flechas siempre estarán visibles a menos que gires EN el interruptor al lado de Ocultar debajo. Luego, todo lo que necesita hacer es ingresar el tamaño de pantalla debajo del cual desea que desaparezcan las flechas. Normalmente usamos el valor de 778px. Al hacer esto, ocultamos las flechas en todos los dispositivos táctiles (tabletas y móviles).

Ocultar las flechas en dispositivos más pequeños

El estilo de navegación se puede personalizar con facilidad, y tanto es así que puede crear su propio estilo completamente original sin ningún conocimiento de codificación.

Estilo de la navegación

Agregar viñetas de navegación a Slider Revolution

Como ya mencionamos, dado que las viñetas son más pequeñas y no ocupan tanto espacio en la pantalla, se utilizan principalmente para la navegación en dispositivos táctiles. Sirven como un indicador agradable y sutil de que hay más diapositivas para ver.

Para activar las balas en Slider Revolution, vaya a Navegación> Viñetas y cambiar Tipo de viñetas a EN.

Agregar viñetas de navegación a Slider Revolution

Al igual que las flechas de navegación, las viñetas también tienen un menú desplegable que le permite elegir una variedad de estilos.

Elija una variedad de estilos

Para definir el espacio entre viñetas, simplemente cambie el GRAMOap valor.

Valor de la brecha

Para establecer la dirección de sus viñetas, elija entre horizontal o vertical para el Orientación. Debes usar la dirección vertical cuando tienes un control deslizante vertical. Y, en ese caso, recomendamos usar solo viñetas, sin flechas. Sin embargo, en todos los demás casos, le sugerimos que use viñetas solo para dispositivos más pequeños, con su dirección establecida en horizontal.

Orientación

Para ocultar viñetas en las pantallas de computadoras de escritorio y portátiles, encienda el Ocultar sobre el ancho opción y establezca el ancho en 1024px.

Ocultar sobre el ancho

También puede jugar con el estilo de navegación de sus viñetas si desea crear un aspecto original para ellas.

En conclusión

Y eso es todo lo que hay que hacer. Ahora ya sabe cómo agregar navegación a Slider Revolution. Siempre debe intentar hacer todo lo posible para personalizar sus flechas de navegación y viñetas de navegación para que se ajusten mejor al estilo de su sitio web. Pero incluso con solo agregar los elementos de navegación predeterminados a su control deslizante, aumentará la UX de su sitio y lo hará más intuitivo para sus visitantes.