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.
Cuando pensamos en los controles deslizantes en los sitios web, generalmente pensamos en los horizontales "normales" que se desplazan de izquierda a derecha. Sin embargo, cada vez más diseñadores optan por soluciones menos convencionales para sus controles deslizantes. Hoy, vamos a hablar sobre un tipo de control deslizante impresionante y de aspecto moderno que en realidad es bastante fácil de hacer: el deslizador vertical. Estos controles deslizantes suelen ocupar toda la página, en lugar de solo la parte superior, como los horizontales. Esto los hace aún más impresionantes, ya que hacen que la página parezca muy dinámica y, sin embargo, proporcionan suficiente espacio para otros elementos, como texto o botones, como puede ver en el ejemplo siguiente, de nuestro tema Goodwish.
Cómo crear un control deslizante vertical
Gracias a Slider Revolution, el proceso de creación de un control deslizante vertical, incluso uno que abarque toda la página, no es nada complicado. De hecho, es bastante sencillo, como la mayoría de las cosas en este excelente plugin.
Uno nota IMPORTANTE antes de continuar: si planea crear un control deslizante vertical Slider Revolution en pantalla completa, asegúrese de que el tamaño de las imágenes que utilizará cubra el intervalo de pantalla completa (1920x1100px).
Para comenzar, diríjase a Slider Revolution desde su panel de administración. Lo primero que debe hacer es, naturalmente, elegir el tipo de control deslizante que desea crear. Aquí, seleccione el tipo llamado Deslizador.
Debajo Dimensionamiento, Seleccione Pantalla completa.
Su próximo movimiento debería ser establecer la dirección de desplazamiento del mouse. Dirigirse a Navegación> Viñetas. Enciende el Tipo de viñetas cambiar primero. Entonces, bajo Posición> Orientación, Seleccione Vertical.
Lo siguiente que debe hacer es decidir si desea que su control deslizante se repita después de llegar a la última diapositiva. Le recomendamos que elija esta configuración, ya que parecerá más dinámica, mientras que el control deslizante que simplemente se detiene puede parecer que algo anda mal.
Ir Ratón> Navegación con desplazamiento del ratón y seleccione la opción que dice Carrusel.
Además, los controles deslizantes verticales realmente no necesitan flechas, por lo que puede continuar y desactivarlos debajo Flechas> Tipo de flecha.
Deslizadores verticales en dispositivos más pequeños
Ahora, debe tener en cuenta el hecho de que muchas personas navegan por la web utilizando sus dispositivos portátiles, sobre todo, sus teléfonos inteligentes. Si su sitio web tiene un control deslizante vertical de pantalla completa, debe asegurarse de que se vea y funcione bien en esos dispositivos también. La dirección de deslizamiento predeterminada para los controles deslizantes es horizontal: para llegar al siguiente control deslizante, el usuario se deslizará hacia la izquierda y el control deslizante cambiará. Con los controles deslizantes verticales, la dirección, por supuesto, tendrá que ser vertical (hacia arriba y hacia abajo), por lo que también debe configurarlo si desea asegurarse de que su control deslizante funcione correctamente en pantallas más pequeñas.
Para ajustar la configuración, dirígete a Toque> Opciones de navegación. Aquí, configure la dirección de deslizamiento (Deslizar Dir) a Vertical.
Y eso es todo lo que hay que hacer. Ahora puede comenzar a agregar sus diapositivas y capas, como lo haría con un control deslizante horizontal normal.
En conclusión
Con Slider Revolution, los controles deslizantes verticales son fáciles de crear y pueden ayudarte mucho en términos de la impresión que dejarán en tus visitantes. Si está buscando inspiración, hay muchos temas premium de WordPress que cuentan con deslizadores verticales hermosos y completamente funcionales, así que asegúrese de revisarlos.