Banner Grande

Este componente te permite mostrar una sección para destacar y resaltar algo importante sobre tu tienda. Algunos ejemplos de uso pueden ser:

• Mostrar una característica.
• Destacar una categoría relevante.
• Destacar un producto que quieras que los clientes vean o que tenga un gran descuento.

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 se comportará la sección. 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 variará dependiendo de la opción que elijas aquí. Esto se explica en detalle en esta sección de la página.

Tipo de medio

Permite definir qué tipo de elemento de medio se usará como fondo del componente:

• 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á en todos los dispositivos.
• Video: muestra una opción de Fuente de video para añadir y usar un video desde una URL externa o desde YouTube. Al hacerlo, aparecerá una segunda opción para subir un video diferente para dispositivos móviles.

Al elegir Imagen, aparecerán las siguientes opciones para definir aspectos de ellas:

• 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 es más notorio cuando las imágenes son más grandes que el área de la sección, por ejemplo, si la sección tiene una dimensión vertical y la imagen subida tiene una proporció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.

Al elegir Video, este se centrará horizontal y verticalmente y cubrirá toda el área del componente.

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.
• Mostrar imagen del enlace: permite mostrar la imagen del enlace seleccionado (para productos, categorías o páginas), si fue añadida desde el panel de administración.
• Texto del enlace: texto que se mostrará dentro del enlace.
• Enlace externo: si está habilitado, el enlace se abrirá en una nueva pestaña del navegador.

Si has habilitado la opción Mostrar contenido del Banner que aparece más abajo, estarán disponibles las siguientes opciones:

• Enlace como botón: si está habilitado, se mostrará un botón junto con el contenido del banner.
• Estilo contorno: permite que el botón tenga un borde alrededor y un fondo transparente.
• Flecha en el botón: muestra un ícono de flecha en el lado derecho del texto del botón.

Mostrar contenido del Banner

Al habilitar esta opción:

• El banner mostrará 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.
• Las imágenes se usarán como fondos y se adaptarán según el ancho y alto que definas.

Las opciones que se mostrarán son las siguientes:

• Altura: permite definir una altura mínima para todo el banner, basada en las siguientes opciones:
  • Ajustar al contenido: la altura de la sección se determinará en función del contenido que agregues dentro del componente, como Título, Descripción, etc.
  • Pequeña: la altura mínima de la sección será de 420px.
  • Mediana: la altura mínima de la sección será de 560px.
  • Grande: la altura mínima de la sección será de 720px.
  • Navegador: la altura mínima de la sección será igual a la altura de la ventana del navegador donde se visualiza tu tienda, por lo tanto puede variar según el dispositivo.
• Ancho máximo del contenido en escritorio: permite definir el espacio máximo que ocupará el contenido dentro del banner.
• Borde interno: permite mostrar un borde alrededor de todos los lados del banner.
• Superposición (Overlay): permite definir la opacidad (o transparencia) de este elemento. Puedes leer más sobre esto en esta página.
• Posición de la imagen: este grupo de opciones permite definir cómo se comportarán las imágenes subidas en dispositivos de escritorio y móviles.
• Opciones de elementos: dentro de este grupo encontrarás opciones para personalizar elementos como título, subtítulo y descripción/texto, explicadas en detalle en esta página.
• Opciones de escritorio y móviles: encontrarás dos grupos de opciones que te permitirán definir la alineación y posición del contenido dentro del banner, tanto para escritorio como para dispositivos móviles.

Nota 1: se habla de una altura mínima porque esta variará según la cantidad o longitud del contenido que agregues dentro del componente.

Nota 2: el tamaño de las imágenes que puedes subir variará dependiendo de la combinación de ancho y altura que definas. Esto se explica en detalle en esta sección.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Colores del contenido: permite elegir el Paquete de colores para el contenido del componente, cuando la opción Mostrar contenido del Banner esté habilitada.
• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Color de fondo del componente: permite elegir el Paquete de colores para el componente, que solo afectará su color de fondo.

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.

---

---

Tamaños de imágenes

Las dimensiones mínimas sugeridas en las tablas siguientes variarán según la combinación de las opciones Ancho y Altura dentro de la configuración del componente.

Las dimensiones para dispositivos de escritorio considerarán aquellos con un ancho igual o mayor a 576px, mientras que para móviles serán aquellos con un ancho igual o menor a 575px:

Ancho: Grid

Altura	Escritorio	Móvil
Ajustar al contenido	1320 x 300 px	575 x 320 px
Pequeña	1320 x 420 px	575 x 420 px
Mediana	1320 x 560 px	575 x 560 px
Grande	1320 x 720 px	575 x 720 px
Navegador	1320 x 850 px	575 x 820 px

Ancho: Mediano

Altura	Escritorio	Móvil
Ajustar al contenido	1620 x 300 px	575 x 320 px
Pequeña	1620 x 420 px	575 x 420 px
Mediana	1620 x 560 px	575 x 560 px
Grande	1620 x 720 px	575 x 720 px
Navegador	1620 x 850 px	575 x 820 px

Ancho: Grande

Altura	Escritorio	Móvil
Ajustar al contenido	1920 x 300 px	575 x 320 px
Pequeña	1920 x 420 px	575 x 420 px
Mediana	1920 x 560 px	575 x 560 px
Grande	1920 x 720 px	575 x 720 px
Navegador	1920 x 850 px	575 x 820 px

Ancho: Extra Grande

Altura	Escritorio	Móvil
Ajustar al contenido	2220 x 300 px	575 x 320 px
Pequeña	2220 x 420 px	575 x 420 px
Mediana	2220 x 560 px	575 x 560 px
Grande	2220 x 720 px	575 x 720 px
Navegador	2220 x 850 px	575 x 820 px

Ancho: Navegador

Altura	Escritorio	Móvil
Ajustar al contenido	2800 x 300 px	575 x 320 px
Pequeña	2800 x 420 px	575 x 420 px
Mediana	2800 x 560 px	575 x 560 px
Grande	2800 x 720 px	575 x 720 px
Navegador	2800 x 850 px	575 x 820 px

Nota: al definir Navegador dentro de las opciones de Ancho y Altura, se recomienda probar cómo se ven las imágenes en diferentes dispositivos para asegurarte de que no se pixelen.