Inicio/Guías/Diseño/Personalizar tu diseño

¿Cómo agregar la sección Rotator / Carrousel?

diciembre 27, 2022

Un rotador o carrusel de imágenes en nuestra tienda online puede ser una forma efectiva de atraer la atención de nuestros clientes para promocionar productos y promociones especiales.

Al mostrar imágenes atractivas y llamativas de forma rotativa, se puede captar la atención de nuestros clientes para motivarlos a comprar.🤩

Tabla de contenido🤓

  • Paso a paso👣 para agregar la sección Carrousel
  • Imágenes
    • Estilos
    • Layout
  • ⚙️Configuración
    • Visual
      • Título de la sección
      • Descripción de la imagen
      • Alto de las imágenes
      • Cantidad de imágenes
      • Cantidad de imágenes visibles por fila
      • Cantidad de filas visibles
    • Rotación
      • Rotación automática
      • Velocidad de rotación automática
      • N° de imágenes por rotación
      • Curva y velocidad de efecto
  • 🖥️Disposición
    • Margen
    • Relleno
    • Contenedor
    • Visibilidad
  • 🖌️Estilos
    • Fondo de sección
  • Guardar los cambios o publicar

Paso a paso👣 para agregar la sección “Carrousel”

1. Dentro del Diseñador vamos a hacer clic🖱️ en «Botón turquesa (+)

2. Ahora se abrirá una ventana con todas las secciones que podemos agregar, lo siguiente es seleccionar la sección Carrousel

La sección «Carrousel» viene por defecto con 2 imágenes (se pueden agregar hasta 12 imágenes!), rotación automática, puntos de navegación en la parte interior y un par de flechas.😁

Es la misma sección que se utiliza para mostrar las características de los servicios de nuestro negocio:

3. Para editar la sección tenemos que pasar el cursor por encima de la misma y hacer clic🖱️ en Editar

4. Ahora abrirá una ventana con las ediciones que podemos realizar!

🖼️Imágenes

Para agregar las imágenes a nuestro Carrousel tenemos que cliquear🖱️ en donde dice Imagen 1, Imagen 2, etc. (La cantidad de imágenes que podemos colocar en nuestro Carrousel lo definimos en la Configuración)

Dentro del apartado de una imagen, seleccionado “Click para subir” podremos agregar la imagen a nuestro carrousel.

Ejemplo👇

Así se ve en la versión Mobile👇

También vamos a poder agregar un Link para nuestras imágenes!

Ejemplo: Vamos a enlazar la imagen con una página interna de nuestra web o micrositio 👇 mirá como crearlo acá 

Luego de haber cliqueado🖱️ en el botón se nos abrirá una ventana con las formas en la que podemos vincular nuestra imagen, nosotros vamos a hacer clic🖱️ en Seleccionar una página

Ahora vamos a buscar nuestra página creada y la vamos a seleccionar

Y listo, imagen enlazada con la página!

🚩 Es recomendable que cada imagen esté linkeada a una marca o una página del sitio para mejorar la performance general del sitio. Siempre que se linkee a un resultado de búsqueda, se relentizará el funcionamiento de la web.

Estilo

En la pestaña estilo vamos a poder editar el diseño de la imágen

Sombreado

Podemos agregar 5 tipos distintos de sombras a nuestra imagen.

Ejemplo: Sombra #4👇

Ejemplo en la versión Mobile👇

💡En el ejemplo anterior se utiliza una imagen PNG, ósea con un fondo transparente, por eso se obtiene ese efecto en donde parece que la sombra se aplica a un contenedor y no a la imagen, a continuación voy a dejar un ejemplo de una imagen JPEG de un diseño para que vean la diferencia😁👇

Radio de borde

Esta opción solo la vamos a poder visualizar si estamos utilizando las sombras! Podemos agregar un radio a los bordes de nuestra imágen:

Ejemplo de radio de borde a 5%

Ejemplo en la versión Mobile👇

Color

Vamos a poder seleccionar el porcentaje % de intensidad del color de la imagen.

Ejemplo: 1o%👇

Foco

Podemos elegir el porcentaje % de enfoque de nuestra imagen.

Ejemplo: 50%👇

Opacidad

Vamos a poder seleccionar el porcentaje % de opacidad de la imagen.

Ejemplo: 50%👇

Alineación

Podemos elegir la alineación de la imagen, las opciones son:

  • Izquierda
  • Centrado
  • Derecha

Layout

En esta sección podemos configurar el Margen de la imagen.

🚨Las siguientes configuraciones las podemos hacer tanto para la vista de Desktop como para la vista Mobile independientemente.

El Margen es la distancia entre el borde de una sección y la siguiente sección.

Ejemplo👇

⚙️Configuración

Dentro de configuración tendremos dos pestañas para editar Visual y Rotación.

Visual

En la pestaña Visual podremos elegir si queremos mostrar el Título de la sección, la Descripción de la imagen, también podremos definir el Alto de las imágenes y seleccionar la Cantidad de imágenes, Cantidad de imágenes visibles por fila y la Cantidad de filas visibles.

Vamos a repasar y dar ejemplos de cada una de estas opciones!

Título de la sección

Podremos elegir si queremos agregar un título a la sección.

Ejemplo con la opción “Mostrar título”👇

❗El texto lo podemos cambiar como cualquier editor de texto normal.

En la versión Mobile👇

Descripción de la imagen

Podremos agregar una descripción y un título a cada una de las imágenes de nuestro Carrousel

Solo título ejemplo👇

En la versión Mobile👇

Título y descripción ejemplo👇

En la versión Mobile👇

Alto de las imágenes

Podremos seleccionar la altura en pixeles de las imágenes, esta es una buena opción por ejemplo, si subimos imágenes que no tiene el mismo alto, o por si queremos aumentar o disminuir el tamaño de las mismas.

En este caso como estamos haciendo la imitación, voy a colocar un alto de 285 px.

Cantidad de imágenes

Podemos seleccionar el número de imágenes que queremos mostrar en nuestro Carrousel, con un mínimo de 1 y un máximo de 12.

En nuestro ejemplo vamos a seleccionar 4 imágenes (Son las que estábamos mostrando)👇

Cantidad de imágenes visibles por fila

Podemos seleccionar el número de imágenes a mostrarse por fila en nuestro Carrousel, con un mínimo de 1 y un máximo de 6 por fila.

En nuestro ejemplo vamos a seleccionar “Mostrar 4 imágenes por fila”

🚨En la versión Mobile siempre se van a mostrar 3 imágenes por fila para esta sección.

Cantidad de filas visibles

Vamos a poder seleccionar la cantidad de filas que queremos que se muestren, con un mínimo de 1 y con un máximo de 6.

Nosotros vamos a mantener “1 fila de imágenes”

Rotación

En la pestaña Rotación vamos a poder seleccionar la Rotación automática, la Velocidad de rotación automática, el N° de imágenes por rotación y la Curva y velocidad de efecto de la rotación.

Rotación automática

Podemos seleccionar si queremos que la rotación de las imágenes sea Automática o Manual.

Velocidad de rotación automática

Si tenemos seleccionada la opción de “Rotación automática” con este apartado vamos a poder elegir la velocidad de la rotación! Con un mínimo de 1 segundo y un máximo de 6 segundos.

N° de imágenes por rotación

Vamos a tener dos opciones en este apartado:

  • Rotar todos los visibles: Si tenemos 4 productos en una fila los productos que van a rotar van a ser 4.
  • Rotar uno por vez: El rotador se deslizará cada 1 producto.

Curva y velocidad de efecto (CSS3 Easing)

Es en la velocidad que va a ocurrir la rotación.

💻Disposición

🚨Las siguientes configuraciones las podemos hacer tanto para la vista de Desktop como para la vista Mobile independientemente.

Dentro del apartado de Disposición vamos a poder editar el Margen y el Relleno de nuestra sección!

El Margen es la distancia entre el borde de una sección y la siguiente sección.

Ejemplo👇

Ejemplo en le versión Mobile👇

El Relleno es la distancia entre el borde de una sección y su contenido.

📝Por defecto todas las secciones vienen con un relleno superior e inferior de 35px

Ejemplo👇

Ejemplo en la versión Mobile👇

Dentro de Disposición tenemos el Contenedor, que define si el contenido se mostrará con un ancho completo o con un ancho reducido.

Ejemplo: Si seleccionamos “No limitar el ancho de sección” (Ancho completo)

Ejemplo en la versión Mobile👇

Y por último tenemos la Visibilidad, esta función define en que tipos de pantalla se va a mostrar nuestra sección.

Podemos seleccionar:

  • Mostrar en Desktop (Computadoras) y Mobile (Celulares)
  • Mostrar solo en Desktop
  • Mostrar solo en Mobile

🖌️Estilos

En los 🖌️Estilos vamos a poder editar el Fondo de la sección.

Fondo de la sección

Vamos a poder elegir un fondo personalizado para nuestra sección! Lo podemos hacer a través de colores, imágenes y texturas precargadas que también son combinables con los colores! Además podremos elegir un tipo de sombra para nuestro fondo.

💡Te recomendamos que pruebes todas las opciones que puedas, y que al final elijas la que más te guste!

Ejemplo de fondo de sección👇

Para este ejemplo utiliza la pestaña de imagen y subí una desde freepik

Así es como se ve en la vista Desktop👇

Ejemplo en la vista Mobile👇

💡Cuando termines de realizar las ediciones recordá que podes salir del diseñador sin publicar los cambios o lo podes publicar inmediatamente en el portal público!

Fin del post!📃 Buen trabajo👏

Tags:Check

¿Te fue útil?

1 Sí  No
Artículos relacionados
  • ¿Cómo agregar un rotador de productos con imagen?
  • ¿Qué es una sección? Todo lo que tenés que saber
  • ¿Cómo personalizar el Pie de página de mi tienda?
  • ¿Qué es un favicon y cómo agregarlo a mi tienda?
  • ¿Qué es un logotipo y cómo agregarlo a mi tienda?
  • ¿Cómo agregar la sección Imagen 2?
Personalizar tu diseño
  • ¿Cómo agregar la sección Rotator / Carrousel?
  • ¿Cómo personalizar el Pie de página de mi tienda?
  • ¿Qué es un favicon y cómo agregarlo a mi tienda?
  • ¿Qué es un logotipo y cómo agregarlo a mi tienda?
  • ¿Cómo agregar la sección Imagen 2?
  • ¿Cómo agregar la sección Imagen 1?
View All 27  
Artículos populares
  • Medidas recomendadas para un slider 
  • ¿Cómo agregar el botón de continuar con Google en mi Tienda?
  • ¿Cómo verificar mi catálogo para Instagram Shopping?
  • ¿Cómo activar la tienda de Facebook y crear mi catálogo de productos? Versión clásica
  • ¿Cómo editar la información de facturación de un pedido?
Categorías
  • Video tutoriales
  • Integraciones
    • Mercado Libre
  • Mobile
    • Mobile Configuración
  • Primeros pasos
    • Configuraciones Iniciales
    • Preparación
  • Catálogo | Productos
    • Acciones masivas
    • Descuentos
    • Combos de productos
    • Variables
    • Agregar un nuevo producto
  • Diseño
    • Secciones
    • Personalizar tu diseño
  • Configuraciones
    • Medios de pago
    • Fidelización
  • Marketing
    • Herramientas externas
  • Información general
    • Conocé lo que podés hacer con Batitienda
  • Envíos
    • Todo sobre envíos
  • Canales de ventas
    • Mercado Libre / Instagram Shop / Facebook
  • Pedidos
    • Mis Ventas

© 2025 Tiendastic - Todos los derechos reservados.