Slider responsive simple (para dummies) en Slider Revolution

Slider Revolution es un plugin o módulo tanto para WordPress como para Prestashop, diseñado para crear carruseles de banners avanzados y con muchas propiedades. Pero precisamente por su complejidad puede resultar un poco abrumador para personas sin conocimientos de diseño o/y maquetación web.

En este post voy a describir de manera sencilla los pasos para crear un slider simple y responsive (que se adapta a los distintos soportes, ordenador, tablet y móvil), para que personas sin experiencia que dispongan de este módulo pueden editarlo fácilmente.

Como la especialidad de Amarillo Limón es el e-Commerce, realizaré el tutorial sobre Prestashop, pero pueden seguirse los mismos pasos (o muy similares) para WordPress.

Creación de las imágenes para Slider Revolution

Como vamos a hacer un slider simple vamos a utilizar dos imágenes, una para la versión ordenador y otra para la versión tablet y móvil. Debemos crear las imágenes con el tamaño que vamos a necesitar, para optimizar la carga de la página. En nuestro caso vamos a hacer un slider que ocupará el ancho de la pantalla en la que se visualice, así que deben de tener un ancho mínimo para que no pese demasiado pero que tampoco se vea muy mal el pantallas grandes.

En este ejemplo para la pantalla del ordenador utilizaremos un tamaño de 1500x500px. Estos tamaños pueden variar, pero no recomiendo que se exceda mucho el ancho de esta medida, ya que causaría un peso excesivo e innecesario.

Para la imagen de versión tablet y móvil vamos a crear una imagen de 780x575px.

Pongo un par de imágenes de ejemplo al tamaño adecuado, para descargar y usarlas como plantilla.

Primeros pasos: Creación de un slider en Revolution Slider

Comenzamos entrando en el módulo. Normalmente el Slider Revolution tiene su propio botón en la columna de edición de la izquierda del backend de Prestashop. Cuando entramos nos encontraremos cuatro botones bien visibles; pulsamos en “New Blank Module”.

En la columna de la derecha nos aparecerá la primera configuración. Podemos poner nombre a nuestro slider, o no, no es relevante, ya que es solo a título informativo para el backend, no aparecerá en ningún sitio. Lo que si es importante es seleccionar el “hook” (la posición) donde aparecerá nuestro slider.

Vamos a trabajar bajo el supuesto de que lo que queremos crear es un slider clásico de home, o sea, en la portada de nuestra web, en la posición donde suelen aparecer, bajo el menu. Por tanto, le damos a la persiana desplegable de “Select Hook” y escogemos “displayHome”. Esto debería situar nuestro slider en la parte superior de nuestra home.

Pero si la home de su web está hecha con elementor u otro editor es posible que no aparezca en la parte superior, si no debajo del contenido. En tal caso debemos copiar el shortcode del slider y colocarlo en el lugar que deseemos que aparezca el slider, dejando el hook por defecto.

A continuación vamos a configurar el espacio que va a ocupar nuestro slider. Pulsamos en el botón siguiente, “Layout”.

• Si queremos que nuestro slider ocupe todo el ancho de la pantalla dejaremos el apartado “Layout” como viene por defecto (SIider y Full-Width).
• Si queremos que el slider ocupe solo el ancho de nuestra web, seleccionamos “auto” en Sizing.

Nosotros vamos a trabajar con el primer supuesto, que es el más habitual.

Ahora configuraremos los tamaños de nuestro slider. La medidas las tenemos en las imágenes que creamos previamente, solo tendremos que aplicarlas aquí. Configuraremos la versión para pantallas de mas de 1024px y la versión tablet, ya que los otros dos soportes se adaptarán conforme a lo que pongamos en estos dos. Por tanto rellenamos los campos de la manera que se ve en la captura.

Podemos comprobar que los valores de los campos de los soportes que tenemos desactivados varian cuando modificamos los activos.

Guardamos.

Inserción y configuración de los slides (banners) en Revolution Slider

Imagen de ordenador:

Ahora vamos a colocar las imágenes de nuestro slide, que recordemos que son 2; una para ordenador (pantallas grandes y pequeñas), y otra para tablet y móvil.

Hasta ahora hemos estado en la pestaña de configuración general del slider (representado con el icono de un engranaje), ahora vamos a editar nuestro “banner” propiamente dicho. Pulsamos en el icono de “slide options” (representado con el icono de tres imágenes) y en “Background” seleccionamos en la persiana desplegable “Image”.

Pulsamos en “Media Library” y subimos nuestras dos imágenes a la web. Seleccionamos la imagen que hemos creado para la versión ordenador. Con esto, y tener que tocar nada más, ya tendríamos la versión ordenador de nuestro banner.

Ahora vamos a crear la versión móvil.

Imagen para tablet/móvil:

En el menú superior de módulo pulsamos en “Add Layer / Image“. Esto nos abrirá automáticamente a la derecha el editor de las capas. Pulsando en el botón “Media Library” de “Image Layer Content”, y seleccionamos nuestra imagen para tablet/móvil.

Seguidamente pulsamos en el botón “Size & Pos”, y configuramos las alineaciones vertical y horizontal, centradas. Seleccionamos “Covert” en “Size Presents”.

A continuación hacemos click en “Animation”, y configuramos la duración de la animación de salida en 1000 (la misma que la de la imagen de fondo). Esto es para que en móvil y tablet no se nos vea la imagen de fondo al cambiar de slide.

Luego clicamos en el botón “Visibility” y desactivamos los botones de las dos vistas de ordenador.

En el caso de que quisiéramos añadir un enlace a nuestro banner, nos vamos de nuevo a “slide options” (recordemos, icono de las tres imágenes), y clicamos en “Tags & Link”, activamos el botón de “Slide Link” e introducimos nuestro enlace en el campo “URL”. Si queremos que se abra en una ventana nueva, seleccionamos “_blank”.

¡No olvideis guardar!

De esta manera tendremos un banner completamente responsive en nuestra web.

Pero… estábamos hablando de un slider, no de un solo banner, ¿verdad? No hay problema, para colocar más de un banner y convertir nuestro bloque en un slider, solo tenemos que clicar en el menú superior en “Slides / Add Slide(s)”, y repetir los pasos anteriormente descritos desde “Inserción y configuración de las imágenes”. Al añadir más banners (slides) al slider, este está configurado automáticamente con un autoplay que rotará todos los banners que pongamos en el slider, pero no pone las flechas típicas por defecto.

Para poner las flechas de avance y retroceso habituales en un slider solo tendremos que ir a “Navigation Options” (el icono de cruz), clicar en “Arrows” y activarlas, y seleccionar el estilo que más nos guste en la persiana desplegable.

Este sería el modo sencillo de hacer un slider simple para nuestra web. Por supuesto en el Slider Revolution hay muchísimas opciones para hacer vuestros sliders mucho más interesantes que os animo a explorar, pero si no disponéis de tiempo o ganas de investigar, este es un método fácil y rápido para hacer vuestro slider totalmente funcional y responsive en pocos pasos.

¡Espero que os haya resultado de utilidad!