Banner

Enlaces destacados

1. documentación de Shopify sobre secciones y bloques
2. documentación de Company XYZ sobre el uso de videos
3. documentación de Company XYZ sobre iconos
4. documentación de Company XYZ sobre los ajustes de colores del banner
5. documentación de Company XYZ sobre los ajustes de espaciado de la sección
6. documentación de Company XYZ sobre los ajustes de fondos de sección
7. documentación de Company XYZ sobre los ajustes de separadores
8. documentación de Company XYZ sobre los ajustes de visibilidad
9. documentación de Company XYZ sobre los ajustes de anchos de diseño
10. documentación de Shopify sobre la personalización de secciones
11. documentación de Shopify sobre el editor de temas

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use Banner para crear una única función promocional con medios, texto y una llamada a la acción opcional superpuestos. Funciona bien para secciones hero, anuncios, campañas estacionales y mensajes de marca, y puede expandirse si su contenido necesita más altura de la que proporciona la relación seleccionada. Para una visión general más amplia, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Los ajustes principales de diseño controlan la forma del banner en escritorio y móvil. Elija una relación de aspecto fija cuando quiera un marco visual sólido, o use la relación predeterminada cuando la longitud del contenido pueda cambiar y el banner necesite adaptarse de forma más natural.

En móvil puede usar su propia relación, lo cual resulta útil cuando el recorte de escritorio queda demasiado bajo en pantallas más pequeñas. Una relación móvil más alta suele dar más espacio al texto, los rostros y los detalles del producto sin requerir una imagen separada.

Consejo

Si las partes importantes del fondo se ven apretadas en móvil, pruebe una relación móvil más alta antes de reemplazar el recurso.

Fondo del banner

Este grupo controla el área de fondo propia del banner, separada del fondo de la sección exterior. Puede usar una imagen o un video y, opcionalmente, proporcionar medios específicos para móvil cuando la versión de escritorio no se recorta bien en pantallas más pequeñas.

El ajuste de la imagen de fondo determina si los medios rellenan el área del banner o permanecen completamente visibles dentro de ella. Use un enfoque de relleno cuando el banner deba sentirse envolvente, y un enfoque contenido cuando preservar toda la obra sea más importante que cubrir de borde a borde.

Si añade contenido en primer plano, recuerde que el banner puede crecer en altura para adaptarse a él. Esa altura adicional puede cambiar cómo se recortan los medios de fondo.

Revise los banners con texto más largo o medios adicionales en primer plano tanto en escritorio como en móvil, ya que la altura del contenido puede cambiar notablemente el recorte del fondo.

Para fondos de video, mantenga los clips cortos y visualmente claros para que el mensaje siga funcionando sin sonido. La guía sobre archivos de video está disponible en documentación de Company XYZ sobre el uso de video.

Primer plano del banner

Este grupo controla el contenido superpuesto sobre el fondo. Puede combinar un icono, un subtítulo, un encabezado, texto de apoyo y una acción principal, y cualquier contenido en blanco permanecerá oculto.

La alineación horizontal y vertical ayuda a posicionar el mensaje dentro del banner. La alineación inferior suele ser adecuada para banners centrados en imágenes, mientras que la colocación centrada normalmente funciona mejor para mensajes promocionales sencillos.

Elija el tipo de encabezado según el papel del banner en la página. Use un nivel de encabezado cuando el banner introduzca una sección principal, y use un estilo de párrafo cuando el texto sea más decorativo o se repita en otro lugar.

Los ajustes del botón controlan la etiqueta, el icono, el tamaño y el diseño. Los botones móviles a ancho completo pueden mejorar la comodidad al tocar cuando el banner actúa como punto de entrada principal.

El estilo del enlace cambia cuán clicable es el banner. Los estilos de bloque completo pueden hacer que el banner sea más fácil de usar, pero eliminan los enlaces del texto del subtítulo.

Precaución

Si su subtítulo contiene enlaces de texto importantes, evite un estilo de enlace de bloque completo para que esos enlaces sigan siendo utilizables.

Para los iconos, puede usar emojis o nombres de iconos compatibles. La guía de iconos está disponible en documentación de Company XYZ sobre iconos.

Medios en primer plano del banner

Use medios en primer plano cuando el banner necesite una capa visual adicional, como un logotipo, una insignia, un recorte de producto o una imagen secundaria. Estos medios aparecen junto al contenido de texto y no detrás de él.

El estilo de la imagen ayuda a que los medios tengan un aspecto más editorial o más parecido a una insignia. Los tratamientos redondeados o circulares suelen ser adecuados para logotipos y retratos, mientras que el estilo predeterminado suele ser mejor para imágenes de productos.

El ancho máximo de la imagen es la herramienta principal para mantener los medios proporcionados con el texto. Si la imagen empieza a dominar el banner, reduzca su ancho antes de acortar el texto.

También puede añadir un enlace a la imagen en primer plano. Esto resulta útil cuando la imagen representa una marca, colección o producto destacado y debe actuar como su propio punto de entrada visual.

Colores del banner

Estos ajustes sustituyen las opciones de color habituales del banner solo para esta sección. Úselos cuando el banner necesite una paleta específica de campaña, un contraste de texto más fuerte o un tratamiento de superposición personalizado.

El color y la opacidad de la superposición son especialmente útiles cuando la imagen o el video de fondo tienen mucha carga visual. En muchos casos, ajustar la superposición mejora la legibilidad de forma más limpia que cambiar todos los colores del texto.

Si usa tanto un color sólido como un degradado, el degradado tiene prioridad cuando corresponde. Lo mismo se aplica a los degradados de superposición.

La orientación sobre colores para banners está disponible en documentación de Company XYZ sobre colores de banner.

Ajustes estándar de sección

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo de la sección Banner. Use un espaciado más ajustado cuando el banner deba conectarse estrechamente con el contenido cercano, y uno más generoso cuando necesite destacarse como un momento destacado.

Como los banners suelen tener mucho peso visual, pequeños cambios de espaciado pueden tener un gran efecto en el ritmo de la página. Revise el espaciado tanto en escritorio como en móvil.

Ajustes de fondo de sección

Ajustes de fondo de sección afectan al contenedor exterior de la sección y no al banner en sí. Esto resulta útil cuando quiere que el banner se sitúe dentro de un área enmarcada más amplia o cuando la sección circundante necesita su propia imagen, video, color o superposición.

Tenga cuidado al combinar un fondo de sección exterior con los medios de fondo propios del banner. Usar ambos puede dar sensación de saturación, salvo que esté creando intencionalmente un diseño superpuesto o incrustado.

Ajustes de separador

Ajustes de separador añaden una línea en la parte superior o inferior de la sección. Ayudan a definir el banner cuando se sitúa entre secciones con colores o espaciado similares.

Mantenga los separadores sutiles si el banner ya incluye imágenes, bordes o contrastes marcados. Demasiados bordes visuales pueden hacer que el diseño se sienta pesado.

Ajustes de visibilidad

Ajustes de visibilidad le permiten mostrar u ocultar esta sección según el tamaño del dispositivo. Esto es útil cuando quiere un diseño de banner diferente para escritorio y móvil.

Si crea versiones específicas para cada dispositivo, mantenga coherentes el mensaje y el destino para que los visitantes no vean promociones distintas según el tamaño de pantalla.

Ajustes de ancho

Ajustes de ancho controlan tanto el ancho del contenido dentro del banner como el ancho del contenedor de la sección. Use el ancho del contenido para gestionar la legibilidad, y el ancho de la sección para decidir si el banner se siente contenido, de ancho completo o de borde a borde.

Estos cambios pueden verse diferentes en el editor que en la página publicada, especialmente en diseños más anchos. Previsualice las actualizaciones de ancho en la tienda online antes de finalizarlas. Para los controles del editor, consulte documentación de Shopify sobre la personalización de secciones y documentación de Shopify sobre el editor de temas

Notas de uso

1. Ajuste la relación al mensaje. Use relaciones fijas para campañas centradas en imágenes, y use la relación predeterminada cuando el texto más largo o los medios añadidos necesiten una altura flexible.
2. Planifique pronto el recorte en móvil. Añada una relación o un recurso de medios específico para móvil cuando el fondo de escritorio oculte puntos focales importantes en pantallas más pequeñas.
3. Revise ambos puntos de ruptura. Los controles de escritorio y móvil pueden producir una alineación, visibilidad y comportamiento de medios diferentes, así que previsualice el banner en ambos tamaños de ventana antes de publicarlo.
4. Use superposiciones para mejorar la legibilidad. Ajuste el color y la opacidad de la superposición del banner antes de reescribir el texto o cambiar varios colores de texto.
5. Mantenga clara la acción. Use un botón fuerte y elija estilos de enlace de bloque completo solo cuando todo el banner deba llevar a un único destino.
6. Previsualice el comportamiento real del ancho. Compruebe la página publicada después de cambiar el ancho o los ajustes de fondo, ya que las vistas previas del editor pueden infravalorar los cambios de espaciado y recorte.