Banners

El propósito de este componente es permitirte destacar características o información sobre tu tienda, con contenido que puede ir desde promociones, categorías o productos destacados, entre otros que se te ocurran.

Configuración del componente

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán cómo se verá y comportará la sección, así como sus subcomponentes (Banners). Las opciones disponibles para este componente son las siguientes:

Ancho

Permite definir el ancho máximo que el componente ocupará dentro de la ventana del navegador.

Puedes leer más sobre cómo esta opción afectará al componente en esta página.

Nota: el tamaño de las imágenes que puedes subir dentro de cada Banner variará dependiendo de la opción que elijas aquí. Esto se explica en detalle en esta sección de la página.

Número de columnas en escritorio

Permite definir la cantidad de banners que se mostrarán en una sola fila horizontal para dispositivos de escritorio con un ancho igual o mayor a 768px.

Nota: Al elegir 4 columnas, la cantidad de banners en dispositivos de escritorio pequeños se ajustará automáticamente a 2 columnas, para mantener una buena visibilidad del contenido dentro de ellos.

Número de columnas en móvil

Permite definir la cantidad de Banners que se mostrarán en una sola fila horizontal para dispositivos móviles con un ancho igual o menor a 767px.

Espacio entre

Esta opción permite definir si habrá espacio entre los banners.

Nota: solo será visible y utilizable si lo definido en la opción Espaciado dentro de Configuración del tema > Diseño > Estilos del tema es distinto de Ninguno.

Visualización

Permite definir si el contenido del componente se mostrará dentro de una sección de tipo Carousel o Grid.

Puedes leer más sobre las diferencias entre estos dos tipos en esta página.

Opciones del Carousel

Este grupo de opciones se mostrará cuando elijas Carousel y te permitirá personalizar su comportamiento.

Puedes encontrar la lista completa de opciones en esta página.

Contenido de Banners

Al habilitar esta opción:

• Los Banners mostrarán elementos de contenido (por ejemplo, título, descripción, etc.).
• Se mostrarán varias opciones dentro de la configuración del componente que te permitirán personalizar cada uno de esos elementos.
• Se mostrarán varias opciones en cada Banner para personalizar aspectos de ellos manualmente.
• Las imágenes de los banners se usarán como fondos, y se adaptarán según la opción de Proporción de imagen que definas.

Las opciones que se mostrarán en el panel principal del componente serán las siguientes:

• Posición: permite definir la posición en la que aparecerá el contenido de los banners:
  • Sobre la imagen: el contenido se mostrará encima de las imágenes, haciendo que la imagen controle la altura de cada banner.
  • Después de la imagen: el contenido se mostrará después de la imagen.
• Proporción de imagen: permite definir las dimensiones de los banners. Las imágenes se adaptarán al espacio disponible, tanto vertical como horizontalmente.
• Opciones de elementos: dentro de este grupo encontrarás opciones para personalizar elementos como título, subtítulo y descripción/texto, que se explican en detalle en esta página.
  • Nota: las opciones para personalizar descripciones solo aparecerán si la opción Posición es igual a Después de la imagen.

Opciones de encabezado

Al habilitar esta opción, se mostrará una sección de Encabezado antes del contenido del componente. Puedes encontrar la lista de opciones en esta página.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Paquete de colores para el componente.

Animaciones

La opción Personalizar opciones permite ajustar las animaciones para este componente específico. Puedes leer cuáles están disponibles en esta página.

---

---

Configuración del subcomponente

El subcomponente de un Banners se llama Banner, y puedes agregar tantos como desees. Las opciones para este subcomponente son las siguientes:

Opciones de imagen

Las siguientes opciones te permitirán definir las imágenes para cada banner y cómo se verán y comportarán:

• Imagen: muestra dos opciones de imagen para subirlas. Al subir la primera, se habilitará una segunda para dispositivos móviles. Si no lo haces, la anterior se usará para todos los dispositivos.
• Superposición: permite definir la opacidad (o transparencia) de este elemento. Puedes leer más sobre esto en esta página.
• Opciones de escritorio: permiten definir la posición horizontal y vertical de la imagen en dispositivos de escritorio.
• Opciones móviles: permiten definir la posición horizontal y vertical de la imagen en dispositivos móviles.

Nota 1: El posicionamiento vertical y horizontal se nota más cuando las imágenes son más grandes que el área del slide, por ejemplo, si el área es vertical y la imagen subida tiene una dimensión rectangular.

Nota 2: Escritorio considerará dispositivos con un ancho igual o superior a 576px. En cambio, Móvil será para dispositivos con un ancho igual o inferior a 575px.

Opciones de enlace

A continuación encontrarás varias opciones para añadir un enlace al banner:

• Enlace: permite añadir un enlace a cualquier contenido de la tienda, como categorías, productos, páginas, etc.
• Texto del enlace: texto que se mostrará dentro del botón.
• Enlace externo: si está habilitado, el enlace se abrirá en una nueva pestaña del navegador.
• Enlace visible: si está habilitado, se mostrará un botón junto con el contenido del banner y se habilitarán las siguientes opciones:
  • Enlace como texto: permite cambiar el estilo del botón para que sea solo texto.
  • Estilo contorno: si el estilo es de botón, mostrará un borde y fondo transparente; si es texto, mostrará un borde en la parte inferior.
  • Flecha en enlace: muestra un ícono de flecha al lado derecho del texto del enlace.

Opciones de contenido

En este grupo encontrarás varias opciones para agregar contenido a un banner, las cuales solo serán visibles en la tienda si has habilitado la opción Contenido de Banners dentro de la configuración principal del componente:

• Ancho máximo en escritorio: permite definir el espacio máximo que ocupará el contenido dentro del slide.
• Los siguientes elementos de contenido estarán disponibles:
  • Subtítulo
  • Título
  • Descripción: solo si la opción Posición en la configuración principal del componente es igual a Después de la imagen.
• Colores del contenido: permite definir el Paquete de colores que se usará en el banner, afectando los colores de todos los elementos dentro de él.
• Escritorio: permite definir la alineación y posición del contenido en dispositivos de escritorio.
• Móvil: permite definir la alineación y posición del contenido en dispositivos móviles.

Nota: Para opciones de alineación y posición, Escritorio considerará dispositivos con un ancho igual o mayor a 576px; Móvil será para dispositivos iguales o menores a 575px.

---

---

Tamaños de imágenes

Las dimensiones sugeridas en las tablas de abajo variarán según la combinación y variaciones de varias opciones en la configuración principal del componente.

Cuando eliges habilitar las opciones Mostrar contenido de Banners, Número de columnas en escritorio y Número de columnas en móvil en la configuración del componente:

Contenido de Banners: habilitado

Al habilitar esta opción, la dimensión de las imágenes dependerá de lo que elijas en las siguientes opciones:

• Columnas en escritorio
• Columnas en móvil
• Proporción de imagen

Nota: considera que las siguientes dimensiones son sugerencias desde un punto de vista de medidas mínimas.

Escritorio

Proporción / Número de columnas	4 columnas	3 columnas	2 columnas	1 columna
Horizontal	306 x 172 px	416 x 234 px	636 x 358 px	1296 x 729 px
Vertical	306 x 408 px	416 x 555 px	636 x 848 px	1296 x 1728 px
Rectangular	306 x 230 px	416 x 312 px	636 x 477 px	1296 x 972 px
Cuadrada	306 x 306 px	416 x 416 px	636 x 636 px	1296 x 1296 px

Móvil

Proporción / Número de columnas	2 columnas	1 columna
Horizontal	366 x 206 px	527 x 297 px
Vertical	366 x 488 px	527 x 703 px
Rectangular	366 x 275 px	527 x 396 px
Cuadrada	366 x 366 px	527 x 527 px

Contenido de Banners: deshabilitado

Al deshabilitar esta opción, solo se especificará el Ancho mínimo sugerido, ya que la Altura de cada Banner dependerá de los píxeles de cada imagen subida, combinados con las definiciones de Número de columnas tanto para escritorio como para móvil.

Escritorio

4 columnas	3 columnas	2 columnas	1 columna
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px

Móvil

2 columnas	1 columna
366 px	527 px
366 px	527 px
366 px	527 px
366 px	527 px