Table of Contents
Preparar las imágenes para el carruselCómo cargar y editar las imágenes en el carruselLos diseños Amazonas, Atlántico, Bahía, Cubo e Idea están especialmente adaptados para pantallas de dispositivos móviles. Es por eso que el carrusel de imágenes funciona de forma tal que, en celulares, se adapta para mostrarse más grande y ocupa casi toda la pantalla.
Para garantizar que tus clientes tengan una experiencia de navegación óptima al navegar tu tienda desde el celular, es importante que utilices las herramientas disponibles en el Administrador de Tiendanube al configurar el texto y los botones de tus banners, así como imágenes que se adapten al carrusel.
En este tutorial, te enseñamos cómo usar correctamente el carrusel de imágenes en estas plantillas de diseño, en dos partes:
- Sugerencias para preparar las imágenes para el carrusel
- Cargar y editar las imágenes en el carrusel
Preparar las imágenes para el carrusel
Te proponemos que subas imágenes con el alto y ancho sugerido en tu Administrador, según la plantilla que tengas.
Estas dimensiones son las adecuadas para dispositivos con pantallas grandes como computadoras de escritorio y notebooks. Sin embargo, hoy en día el mayor tráfico en las tiendas online, así como la mayoría de las ventas, son desde dispositivos móviles, y esta tendencia va en aumento.
Por eso, no pierdas de vista cómo se van a mostrar estas imágenes en los celulares. Es más, recomendamos que la imagen sea principalmente contemplada para celulares y que se adapte de forma correcta en pantallas más grandes.
Algunas recomendaciones para tener en cuenta:
- Te sugerimos probar la imagen en la visualización "mobile" o celular para ver cómo quedaría en tu tienda. Esto podés hacerlo después de subir la imagen en tu Administrador, presionando el botón en la parte superior de la pantalla.
- Si tenés tu título o botón incluido en la imagen, te sugerimos ubicarlos de forma central en un ancho menor a 400px, para que en dispositivos móviles se vea de forma completa.
- Sin embargo, la mejor opción es incluir los textos y el botón directamente desde tu Administrador de Tiendanube, como explicamos más abajo.
- Te sugerimos no incluir información destacada o texto cerca de los bordes, y que la imagen se pueda entender si está cortada.
Veamos un ejemplo:
Para una imagen de 1580px de ancho, tendrías un área (remarcada en celeste) donde podrías ubicar información importante para usuarios que visiten la tienda desde computadoras.
Pero, si dentro de la imagen querés agregar un título, texto y botón, deberías ubicarlos en el área central de 400px de ancho, para que quienes visiten la tienda desde sus celulares puedan ver todo el contenido, ya que la imagen se recorta para adaptarse mejor.
Este es un ejemplo de una buena utilización de la imagen, en donde el contenido principal del banner se puede entender desde cualquier dispositivo:
Cómo cargar y editar las imágenes en el carrusel
Cada imagen que vas a incluir representará uno de tus banners dentro del carrusel. Es posible cargar la cantidad que quieras, pero recomendamos no agregar más de cinco, para que tu tienda no quede sobrecargada.
Además, en estas plantillas, podés agregar un link, título, descripción y botón a cada banner del carrusel desde el Administrador de Tiendanube.
Este contenido va a aparecer por encima de la imagen, de forma central y se va a ajustar para que siempre esté visible en cualquier dispositivo, tanto en celulares como en computadoras.
Para este paso, podés seguir el tutorial general para todos los diseños:
📝¿Cómo agregar un carrusel de imágenes en mi tienda?
Info
Con los diseños Amazonas, Atlántico, Bahía e Idea (no con Cubo) podés usar imágenes diferentes para el carrusel en computadoras y celulares, como te contamos en ese tutorial.