Slider Revolution - configurar un slide para que se adapte a cualquier formato de pantalla
Resumen de la información que se explica en la página
Manual básico sobre como crear un slider para distintas dimensiones con la herramienta Slider Revolution
Documentaciones
Documentación oficial de Slider Revolution para éste y otros desarrollos.
En las siguientes secciones se documentarán todos los procesos necesarios, sin embargo, existe un tutorial de Slider Revolution para WORDPRESS, que muestra todo el proceso y la configuración que se debe aplicar. Aquellos interesados pueden verlo en el siguiente vídeo:
Configuraciones iniciales
Tipo de contenido: Elegimos el tipo de slider que vamos a crear, por defecto usamos New Blank Module. Si ya hemos creado slides anteriormente, seleccionar alguna de nuestras creaciones que salen debajo, y editarlas.
2. Título: Asignamos el título que tendrá el slider, su alias y obtenemos el código para introducir nuestro slider en una página. Esto lo hacemos desde el panel de configuración a la derecha de la pantalla, Module General Options → Title.
Layout: Aquí elegimos el tipo de slider y sus dimensiones según la funcionalidad deseada. Lo hacemos en el mismo panel del punto anterior, Module General Options → Layout.
1- Para el tipo de slider, por defecto tomamos Slider.
2- Para las dimensiones o sizing debemos tener en cuenta lo siguiente:
Auto: adecúa el slider con margenes sobre la web
Full-width: el slider tomará el total del ancho de la página
Full-screen: el slider tomará el total de alto y ancho de la página.
3- Elegir el tamaño que tendrá el slider para los distintos dispositivos. Los tamaños vienen asociados a las dimensiones de las imágenes que se usaran en el slider ya que aquí fijamos el tamaño del contenedor que luego rellenaremos con la imagen deseada.
Desktop Large: El tamaño para desktop se deja a elección según el tamaño deseado para el slider en la web. Se recomienda que el tamaño sea el mismo de la imagen que se desea mostrar.
Notebook: Es recomendable dejar esta opción en OFF ya que adapta automáticamente la las dimensiones de desktop utilizando la misma imagen.
Tablet: Indicamos el tamaño de la imagen que usaremos para tablet y mobile. Se recomienda que la altura no pase de 415px.
Mobile: Es recomendable dejar esta opción en OFF ya que adapta automáticamente las dimensiones de la imagen utilizada para tablet.
4. Configurar botones del slider:
Habilitamos las flechas que permiten movernos entre los distintos contenidos del slider. Para ellos seleccionamos en el panel de la derecha la opción Navigation → Arrows y habilitamos las flechas.
Vamos a la pestaña "Bullets" para habilitar los botones en forma de puntos, que representan cada imagen del slider, generalmente en la parte inferior del mismo.
Podemos editar distintas configuraciones de estos elementos, un ejemplo es ocultar las "Bullets" cuando el tamaño del dispositivo es menor a una cantidad de px indicados, esto nos permite que en la versión móvil no aparezcan ya que pueden ser de poca utilidad.
En este ejemplo ocultaremos las "bullets" para dispositivos con tamaño de pantalla menor de 778 px, quedando de la siguiente forma:
Añadir imágenes al slider para cada dispositivo configurado
Se pueden añadir imágenes para cada resolución de dispositivos configuradas en el punto 4.2, para nuestro caso configuramos imágenes para desktop y tablet ya que notebook y mobile se adaptan automáticamente.
Para ello accedemos al editor del slider, añadimos un slide por contenido, es decir, si queremos que el slider tenga 5 imágenes, añadimos 5 slides y por cada slide configuraremos 2 imágenes, una para móvil y otro para desktop.
En nuestro ejemplo añadiremos 2 slides.
Sobre el panel de la derecha, seleccionamos Slide Options, donde tenemos las herramientas generales del slide, NO DE LAS IMÁGENES, podemos añadir contenido de fondo y otras configuraciones al slide, para nuestro ejemplo añadiremos un fondo transparente e indicamos el idioma donde nuestro slide estará disponible. En caso de seleccionar una imagen de background, se debe seleccionar el ajuste deseado en BG Fit, donde es recomendable poner “Auto“.
Para indicar el idioma, debemos seleccionar Stores, y habilitar donde dice “Enable store permissions“. Luego elegimos el idioma en que sed va a mostrar nuestro slide. En el ejemplo, elegimos Español.
En el siguiente panel podemos ver los dispositivos configurados anteriormente sobre los que trabajaremos, añadimos un layer por cada dispositivo que tenemos configurado, para nuestro ejemplo son 2 dispositivos, por lo que añado un layer para desktop y otro para movil.
Añadimos el primer layer dando click en Add Layer, indicamos la imagen que queremos cargar y la agregamos:
Una vez añadida y seleccionada la imagen podremos utilizar el resto de herramientas que se ubican sobre el panel, con ellas podemos añadir las configuraciones deseadas para nuestro layer. En el apartado Size & Position, podremos editar la forma en la que queremos que se vea nuestro slide (Cover, Full-width, etc).
Vamos al apartado Visibility y seleccionamos los dispositivos para los que queremos que se visualice nuestro layer. Para este layer solo queremos que se muestre en desktop y notebook por lo que deshabilitamos las otras.
Ahora accedemos a la vista para tablets y veremos como nuestro layer 1 se redimensiona y no logra ocupar el contenido del slider, por lo que añadiremos un segundo layer con una imagen adecuada al dispositivo. Seguimos los mismos pasos que la primera vez para añadir el nuevo layer.
Una vez añadido veremos las dos imágenes sobre el panel. Para trabajar de forma más cómoda seleccionamos la imagen con la que deseamos trabajar, seleccionamos la imagen con la que no vamos a trabajar (en este caso la imagen de desktop) y le damos click al icono del ojito para ocultar su visibilidad. De esta forma solo visualizaremos de momento el layer con el que deseamos trabajar.
Ahora sólo aparecerá el layer seleccionado. Indicamos su ubicación y ocupación sobre el slider.
Vamos al apartado Visibility y le indicamos para cuales dispositivos queremos que se muestre.
Guardamos y repetimos el proceso para el segundo slide, de forma que tendremos un slider con 2 contenidos, cada uno con una imagen para desktop y movil.
Para asegurarnos que los slide se vean correctamente y se ajusten de la manera que esperamos, debemos haber configurado correctamente tres puntos fundamentales:
Global layers → Layout (tamaño del slider)
Slide options → Background → BG Fit (comportamiento del background si es que hemos seleccionado una imagen)
Layer options → Size & Pos → Size presets (comportamiento de cada una de las imágenes de cada slide)
Finalmente el Slider diseñado se verá así para distintos tamaños.
Añadir un slider a una página o bloque CMS
Para añadir un slider accedemos a su configuración y copiamos el código del bloque. Podemos darle directamente al botón Copy Shortcode.
Accedemos a csm de la página o bloque donde lo queremos y añadimos el código
