Si estamos trabajando con Slider Revolution, es importante saber que este plugin nos permite crear slides responsivos, es decir, para los distintos tamaños de pantalla y cambiar la relación de aspecto para cada una de ellas (Desktop, Notebook, Tablet y Smartphone).

Dicho lo anterior, es importante haber visto el video tutorial exclusivo que tiene Segurihost para clientes Woocommerce, para entender que no debemos trabajar las imágenes con texto pegado, ya que, en nuestra versión móvil, lo más seguro es que ese texto se vea cortado, ya que la relación de aspecto cambia bruscamente (de tener una imagen alargada horizontalmente a una cuadrada o alargada verticalmente).

Otra cosa importante es manejar fotos cuyos fondos no entorpezcan los textos que serán incluidos desde nuestro panel, así nos aseguraremos de que sean legibles. Estos textos que se agregan con Revolution Slider podremos ir dándole distinta posición, pero aun así es mejor evitar fondos con elementos. Si queremos mostrar elementos dentro de la foto, es mejor que estén separados del fondo (ver Alternativa 1 más abajo).

Lo que debemos conseguir:

Entonces, importante recordar trabajar en al menos 2 versiones, la de computador (desktop) y celulares (mobile) e incorporar los textos directamente con el editor de Slider Revolution (Importante solicitar el tutorial si no disponen de éste, para aprender a trabajar los textos sobre las imágenes).

A la hora de editar nuestro slider con Revolution Slider, tenemos 2 alternativas. En ambas alternativas nuestro ancho de imagen para el fondo será de 1920 pixeles de ancho (altura a decisión) y en formato JPG idealmente para que no pese demasiado.

Alternativa 1 - Edición profesional con elementos por separado:

Es recomendable manejar las imágenes del banner por separado por varias razones:

1. Control y personalización: Al manejar las imágenes por separado, tenemos un mayor control sobre cada una de ellas. Podemos ajustar y personalizar individualmente los efectos, transiciones, duración y tamaño de cada imagen. Esto nos permite crear presentaciones de diapositivas más dinámicas y atractivas, adaptadas a necesidades específicas.

2. Optimización de rendimiento: Las imágenes suelen ser elementos pesados en una página web y pueden afectar el rendimiento (velocidad de carga). Al manejar las imágenes por separado, podemos optimizarlas individualmente para reducir su tamaño sin comprometer la calidad. Esto ayuda a mejorar la velocidad de carga del sitio web y proporcionar una experiencia de usuario más rápida y fluida.

3. Reutilización y actualización simplificadas: Al manejar las imágenes por separado, podemos reutilizarlas y ordenarlas fácilmente en diferentes diapositivas/slides dentro del mismo Slider. Si necesitamos actualizar una imagen en particular, solo debemos que reemplazarla en un solo lugar, y se actualizará automáticamente en todas las versiones donde se haya utilizado (desktop, mobile, tablet, etc). Esto nos ahorra tiempo y evita la necesidad de editar cada diapositiva individualmente.

Cuando hablamos de manejar los elementos por separado, nos referimos a que el texto se incluye desde la herramienta de revolution slider y cada imagen sobre el fondo es una foto en formato PNG con fondo transparente. El tamaño de esta foto con transparencia dependerá de cuán grande queramos que se vea dentro del banner, pero se aconseja que no sea menor a 500 pixeles de ancho y/o alto, ni mayor a 1000 pixeles de ancho y/o alto.

En este ejemplo, encerramos en verde cada elemento que es trabajado de forma independiente:

Si reordenamos estos elementos en la versión mobile, podemos llegar a este resultado:

Elementos (fotos PNG con fondo transparente):

1. Foto de la persona (foto PNG)
2. Foto del suplemento (foto PNG)
3. Foto del humo (foto PNG)
4. Texto normal escrito (no es foto)

De fondo tenemos una foto en JPG con ancho de 1920 pixeles, cuyo ajuste en distintas pantallas no es un problema, ya que es plana, no tiene elementos dentro que se puedan ver cortados en algún dispositivo o equipo.

A cada elemento se le dio un efecto de entrada (animación), haciendo que luzca como un banner profesional.

 

Alternativa 2 - Edición fotos listas:

Podemos también en algunos casos, manejar 2 fotos independientes como fondo para nuestro banner, una para versión móvil y otra para versión computador, donde las dimensiones no tienen un estándar (además de que son configurables desde Slider Revolution), pero si hay que saber que las pantallas hoy en día llegan a tamaños de 1920 pixeles de ancho para computadores y en celulares tenemos un máximo de 480 pixeles. Si ya pensamos en hacer una slide para la versión Tablet, entonces pensaremos en un ancho aproximado de 800 pixeles como máximo (contemplar que los dispositivos móviles tienen rotación) y la altura quedará sujeta al tamaño que ajustemos en la herramienta de Slider Revolution > Module General Options  >  Layout  >  Layer Area Size, como se muestra en la siguiente imagen:
 

Finalmente armaremos el tamaño (ancho y alto) de nuestras fotos de acuerdo a lo que configuremos en esta pantalla, o bien podemos utilizar las que vienen por defecto, así simplificamos nuestra labor.

Si lo hacemos de esta manera, conseguiremos un resultado como el que se muestra en la siguiente imagen, donde se cargaron estas fotos tal cual se ven:
 

 

El resultado se puede ver similar a la alternativa 1, pero aquí ya no podemos trabajar efectos de movimiento separado por elemento. Las animaciones aquí ya no existen y si queremos modificar el texto u otro elemento, debemos ir a nuestro editor normal de imágenes (Photoshop, Illustrator u otro), hacer el cambio y volver a cargar una imagen nueva.
 

Resumen:

En la buena práctica, debemos no solo manejar los textos en Revolution Slider, también debemos manejar los elementos por separado como imagen con fondo transparente (lo marcado en verde en la foto de venta de suplementos). De esta manera, podremos mover cada elemento y acomodarlos para cualquier dispositivo.

Por otro lado, si manejamos un banner normal (no manejar versión móvil) para toda versión de pantalla (móvil, Tablet y PC por igual), tendremos problemas como los que se evidencian en la siguiente imagen, donde la foto se fue redimensionando hasta no ser legible.

 

Entonces es aquí cuando debemos aplicar la práctica de ajustar la relación de aspecto de acuerdo al tamaño de pantalla, dejando una imagen de fondo y trabajando los textos e imágenes (elementos que la componen) sobre ella (sobre el fondo). Para móviles es recomendado 4:5, 2:3 o 9:16 como se puede apreciar en la siguiente imagen: