Banner

Enlaces destacados

1. Documentación de Company XYZ sobre el bloque Banner
2. Documentación de Shopify sobre secciones y bloques
3. Documentación de Company XYZ sobre el uso de vídeos
4. Documentación de Company XYZ sobre iconos
5. Documentación de Company XYZ sobre los ajustes de color de Banner
6. Documentación de Company XYZ sobre los ajustes de visibilidad
7. Documentación de Shopify sobre el editor de temas

Videos útiles

video de Shopify Academy: Personalización de su tienda

video de Shopify Academy: Personalización de su tienda

Use el bloque Banner para crear desde una franja de anuncio simple hasta una promoción más visual con medios de fondo, texto superpuesto y una llamada a la acción clara. Admite medios móviles separados, imágenes de primer plano opcionales y control de color por bloque, para que pueda adaptar cada banner al mensaje que necesita transmitir. Para la referencia a nivel de campo, consulte documentación de Company XYZ sobre el bloque Banner.

Para una visión general más amplia de cómo funcionan los bloques en el editor, consulte documentación de Shopify sobre secciones y bloques

Ajustes principales

Empiece eligiendo la relación de aspecto del banner. Las relaciones fijas son útiles cuando desea una forma más diseñada y centrada en la imagen, mientras que Default funciona mejor cuando el contenido debe determinar la altura.

Puede definir una relación móvil independiente si la forma de escritorio resulta demasiado alta, demasiado baja o demasiado ajustada en pantallas pequeñas. Si la relación móvil permanece en Default, sigue el ajuste principal de relación.

Nota

El bloque se expande si su contenido necesita más espacio del que permite la relación seleccionada. Esto ayuda a evitar que el texto y los botones se recorten.

Fondo del banner

Este grupo controla el tratamiento del fondo propio del banner. Úselo para añadir la capa visual principal detrás del contenido de primer plano.

Puede usar una imagen o video, con versiones móviles separadas cuando sea necesario. Esto es especialmente útil cuando el recorte del arte de escritorio queda poco favorecido en pantallas pequeñas o cuando desea una composición móvil más ligera y centrada.

El ajuste de ajuste de imagen de fondo controla cómo el medio de imagen llena el área del banner. Cover suele ser la mejor opción para arte inmersivo, mientras que Contain es mejor cuando la imagen completa debe permanecer visible.

Evite colocar texto esencial o detalles del producto dentro del arte de fondo, a menos que haya comprobado cómo se recorta tanto en escritorio como en móvil.

Si usa video, manténgalo breve y visualmente simple para que el contenido de primer plano siga siendo legible. Para orientación sobre archivos y consejos prácticos de configuración, consulte using video.

Primer plano del banner

Este grupo controla el contenido que se muestra sobre el fondo. Cualquier campo que deje en blanco permanecerá oculto, lo que facilita mantener el bloque minimalista.

Use la alineación horizontal y vertical para colocar el contenido donde resulte más natural dentro del banner. Los diseños centrados suelen funcionar bien para mensajes simples, mientras que los diseños alineados al borde o a la parte inferior suelen funcionar mejor para promociones centradas en la imagen.

Puede combinar un icono, una leyenda, un encabezado y un subtítulo para crear una jerarquía de contenido clara. Para los campos de icono, puede introducir un emoji o un nombre de icono; consulte la icon guide para ver los usos admitidos.

Elija el tipo de encabezado según la función del banner en la página. Un nivel de encabezado más fuerte se adapta a un mensaje promocional principal, mientras que un estilo de texto más ligero es mejor cuando el banner es más de apoyo que dominante.

Los ajustes de botón controlan la acción principal del banner, incluido el texto, el tratamiento del icono, el tamaño y el diseño. Un botón móvil de ancho completo puede mejorar la usabilidad táctil cuando el banner está centrado principalmente en la acción.

El estilo del enlace cambia hasta qué punto el banner se vuelve clicable. Un enlace de bloque completo puede facilitar la interacción con los banners promocionales, pero afecta a los enlaces dentro del área de texto.

Precaución

Los estilos de enlace de bloque completo eliminan los enlaces del texto del subtítulo. Úselos solo cuando todo el banner deba apuntar a un único destino.

Abra los enlaces en una pestaña nueva solo cuando ese comportamiento apoye claramente el recorrido del cliente, como al enlazar a una campaña externa o a un recurso de apoyo.

Medios de primer plano del banner

Use medios de primer plano cuando desee mostrar una imagen adicional junto con el texto, como un logotipo, una insignia, un recorte de producto o un gráfico de campaña. Esto funciona bien cuando el fondo es más atmosférico y la imagen promocional necesita mantenerse nítida y controlada.

El estilo de imagen ayuda a ajustar el tratamiento visual al resto del banner. El ajuste de ancho le permite mantener la imagen discreta o hacerla más dominante, y configurarlo en 0 permite que se extienda por todo el espacio disponible.

También puede añadir un enlace a la imagen de primer plano. Si el bloque ya tiene un botón principal sólido o un estilo de enlace de bloque completo, mantenga simple el comportamiento de clic para que la acción principal siga siendo clara.

Colores del banner

Estos ajustes anulan el tratamiento de color predeterminado del banner solo para este bloque. Úselos cuando un banner necesite un estilo específico de campaña, mayor contraste o un tratamiento de superposición personalizado. Para ver los detalles del ajuste, consulte documentación de Company XYZ sobre Ajustes de color del banner.

Puede ajustar los colores de fondo, borde, encabezado, icono, subtítulo, texto y superposición, incluidas las opciones de degradado. En la mayoría de los casos, la decisión más importante es si el contenido de primer plano sigue siendo legible sobre el medio de fondo elegido.

La opacidad de la superposición es especialmente útil cuando la imagen o el video de fondo están cargados. Una superposición ligeramente más fuerte suele mejorar la legibilidad de forma más limpia que cambiar agresivamente cada color de texto.

Ajustes estándar de bloque

Ajustes de visibilidad

Use los controles de visibilidad para mostrar el bloque en todos los dispositivos, solo en escritorio o solo en móvil. Esto es útil cuando desea diseños de banner o arte diferentes para distintos tamaños de pantalla. Para ver los detalles del ajuste, consulte documentación de Company XYZ sobre Ajustes de visibilidad.

Si crea versiones separadas para escritorio y móvil, mantenga alineados el mensaje y el destino para que los clientes no encuentren promociones contradictorias. Para conceptos básicos del editor, consulte documentación de Shopify sobre el editor de temas

Notas de uso

1. Elija la relación según el propósito. Use una relación fija para promociones visuales y una configuración más flexible cuando el banner incluya texto más extenso o varios elementos de contenido.
2. Planifique los medios móviles por separado. Añada imágenes o video específicos para móvil cuando el fondo de escritorio se recorte mal o resulte demasiado cargado en pantallas pequeñas.
3. Mantenga una acción principal. Use los botones, los medios de primer plano enlazados y los enlaces de bloque completo con cuidado para que el banner siga teniendo una única ruta de clic clara.
4. Priorice la legibilidad. Ajuste juntos la intensidad de la superposición y los colores del texto hasta que el mensaje siga siendo fácil de leer en todos los medios de fondo.
5. Use la visibilidad por dispositivo de forma intencional. Cree banners separados para escritorio y móvil solo cuando el diseño o el arte realmente necesiten cambiar.
6. Revise ambas vistas. Compruebe la alineación, el recorte de los medios y la visibilidad de los controles en escritorio y móvil antes de publicar, ya que cada diseño puede comportarse de forma diferente.
7. Conserve el estilo de respaldo cuando sea posible. Deje sin definir los campos de color cuando quiera que el banner herede el aspecto del entorno; use colores, degradados o anulación de medios explícitos solo cuando el banner deba destacarse.
8. Mantenga legibles los estados del formulario. Si el banner incluye entrada del cliente, asegúrese de que los estados vacíos, enviados, de validación y de error sigan siendo fáciles de leer sobre el medio elegido.