Configuración de banners

Configurando tu banner

Personaliza cada aspecto de tu banner con nuestro completo panel de configuración. El panel de configuración proporciona control preciso sobre programación, comportamiento de reproducción y dimensiones.

Programador

Configura cuándo aparece tu banner:

  • Visibilidad permanente - Siempre visible (predeterminado)

    Tu banner se mostrará constantemente en tu tienda sin restricciones de tiempo.

  • Rango de fechas - Puedes establecer fechas y horas de inicio y fin específicas
    • Fecha de inicio: Selecciona el día, mes, año y hora en que tu banner debe empezar a aparecer. Si se deja vacío, el banner será visible inmediatamente después de publicar.
    • Fecha de fin: Selecciona el día, mes, año y hora en que tu banner debe dejar de aparecer. Si se deja vacío, el banner permanecerá visible indefinidamente.

Consejo profesional: Programa banners con anticipación para ventas navideñas o eventos especiales. Esto asegura que tus promociones se activen automáticamente en el momento perfecto, incluso fuera del horario comercial.

Opciones de reproducción

Ajusta cómo transicionan y se comportan los slides de tu banner:

  • Reproducción automática - Activar/desactivar la progresión automática del cambio de slide
  • Pausa al pasar el cursor - Activar/desactivar la opción de detener la progresión automática de slides cuando un usuario pasa el cursor sobre el banner. Útil para dar a los usuarios más tiempo para leer el contenido.
  • Flechas de navegación - Mostrar/ocultar las flechas izquierda y derecha para navegación manual de slides
  • Puntos de navegación - Mostrar/ocultar los puntos indicadores en la parte inferior del banner
  • Velocidad de animación - Controla qué tan rápido ocurre la animación de transición del slide (100ms - 2000ms, típicamente 500ms recomendado)
  • Tipo de animación - Elige entre slide (movimiento horizontal) o fade (transición cruzada)
  • Intervalo (intervalo de slide) - Establece cuánto tiempo se muestra cada slide antes de avanzar automáticamente al siguiente (1000ms - 30000ms). Los intervalos más largos funcionan bien para slides con mucho contenido.

Nota: El tipo de animación 'slide' crea un movimiento de deslizamiento horizontal entre slides, mientras que 'fade' crea un efecto de fundido cruzado suave. Elige según el estilo visual de tu banner.

Configuración recomendada

  • Tiempo de intervalo: 5-7 segundos por slide es el punto óptimo para la mayoría de los banners. Esto da a los usuarios suficiente tiempo para absorber el contenido sin sentirse apurados.
  • Pausa al pasar el cursor: Activa esto para que los usuarios controlen el ritmo. Es especialmente útil para slides con mucho texto o cuando los usuarios podrían querer hacer clic en enlaces.
  • Reproducción automática: Genial para banners hero y showcases de imágenes. Considera desactivarlo para anuncios críticos donde los usuarios deberían ver todos los slides.
  • Controles de navegación: Muestra tanto flechas como puntos para máximo control del usuario, u ocúltalos para un aspecto más limpio en banners simples de un solo slide.

Dimensiones

Controla el tamaño y comportamiento responsivo de tu banner.

Por defecto, las dimensiones del banner se calculan en base a dos factores:

  • Ancho: 100% del contenedor (se estira para llenar el espacio horizontal disponible)
  • Altura: El valor establecido en el campo 'Altura máxima de banners' (en píxeles)

Configuración global: La 'Altura máxima de banners' es una configuración global que se encuentra en Configuración > Configuración del tema. Este valor se aplica a todos los banners por defecto y asegura alturas consistentes en tu tienda.

Modos de anulación de altura

Puedes anular el comportamiento de altura predeterminado para banners individuales:

  • Predeterminado - Usa la altura fija definida en 'Altura máxima de banners'
    • Mejor para mantener alturas de banner consistentes en tu tienda
    • Recomendado para la mayoría de los casos de uso
  • Porcentaje - Establece la altura como un valor de porcentaje de la altura del viewport (vh)
    • Ideal para diseños responsivos que se adaptan a diferentes tamaños de pantalla
    • Ejemplo: 50% significa que el banner ocupará la mitad de la altura de la ventana del navegador
    • Ten cuidado con la pixelación en pantallas más grandes - proporciona imágenes de alta resolución
  • Altura de ventana completa - El banner se estira para llenar el 100% de la altura del viewport (100vh)
    • Perfecto para secciones hero y experiencias de landing a pantalla completa
    • Crea primeras impresiones impactantes e inmersivas
    • Funciona mejor con imágenes o videos de alta calidad y gran tamaño
  • Personalizado - Establece una altura específica en píxeles solo para este banner
    • Anula la configuración global con un valor específico del banner
    • Útil cuando un banner necesita dimensiones diferentes a otros
    • Recuerda probar en dispositivos móviles para evitar banners excesivamente altos

Mejores prácticas:

  • Para banners hero, considera Altura de ventana completa o valores de porcentaje altos (70-100%)
  • Para banners de anuncios, mantente en modo Predeterminado y mantén alturas modestas (300-500px)
  • Siempre prueba en móvil, tablet y escritorio para asegurar que tus dimensiones elegidas funcionen bien en todos los dispositivos
  • Si usas porcentaje o altura de ventana completa, asegúrate de que tus imágenes sean de alta resolución (al menos 1920px de ancho) para evitar borrosidad en pantallas grandes

Márgenes

Añade espaciado alrededor de tu banner configurando valores de margen para cada lado. Los márgenes controlan el espacio vacío entre el banner y los elementos de la página circundantes.

Modos vinculado y desvinculado

El control de márgenes incluye un botón de vínculo que te permite alternar entre dos modos:

  • Vinculado (uniforme) - Cuando el icono de vínculo está activo, los cuatro lados comparten el mismo valor de margen. Cambiar cualquier campo actualiza automáticamente todos los demás. La insignia muestra el valor uniforme (ej.: "20px").
  • Desvinculado (independiente) - Cuando el icono de vínculo está inactivo, cada lado puede tener su propio valor de margen. Esto te permite establecer diferentes espaciados para Superior, Derecha, Inferior e Izquierda de forma independiente. La insignia muestra "Mixed" cuando los valores difieren.

Campos de margen

Hay cuatro campos de margen disponibles. Cada campo admite píxeles (px) o porcentaje (%) como unidad, y la unidad se puede cambiar de forma independiente para cada lado:

  • Superior: Espacio por encima del banner
  • Derecha: Espacio a la derecha del banner
  • Inferior: Espacio por debajo del banner
  • Izquierda: Espacio a la izquierda del banner

Mejores prácticas:

  • Usa el modo vinculado para un espaciado rápido y uniforme alrededor del banner
  • Usa el modo desvinculado cuando necesites márgenes laterales más ajustados pero más espacio vertical (o viceversa)
  • Un margen pequeño en la parte superior e inferior (ej.: 10-20px) ayuda a separar el banner del contenido adyacente
  • Establece los márgenes izquierdo y derecho en 0 si quieres que el banner se extienda de borde a borde dentro de su contenedor
  • Considera usar píxeles (px) para los márgenes superior e inferior para mantener un espaciado vertical consistente, mientras que el porcentaje (%) puede funcionar mejor para los márgenes izquierdo y derecho, ya que se adapta proporcionalmente a diferentes anchos de pantalla
← Anterior: Tipos de slides Siguiente: Ubicación de banners →