Collage

Combine medios, productos, texto y promociones en una sección flexible de estilo bento.

Todas las secciones Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Use Collage para crear un diseño de dos columnas con contenido mixto y un aspecto más editorial, de estilo bento. Es una opción sólida para páginas de destino y diseños narrativos en los que desea combinar promociones, medios, productos, testimonios y texto de apoyo en una sola sección estructurada. Para el modelo de sección más amplio detrás de este tipo de diseño, consulte documentación de Shopify sobre secciones y bloques

El diseño presenta automáticamente el primer bloque como el bloque grande. Puede obtener más información sobre el comportamiento de la sección.

Ajustes básicos

Los controles principales del diseño determinan cómo fluye el collage en escritorio y en móviles. Estos ajustes son los más importantes cuando combina distintos tipos de bloques e intenta crear una jerarquía visual clara.

Collage style controla si el bloque destacado grande aparece primero a la izquierda o al final a la derecha en escritorio. En móviles, esa misma elección también determina si el primer bloque aparece en la parte superior o inferior.
Stack on mobile cambia la sección a un diseño móvil de una sola columna. Úselo cuando los bloques lado a lado se vean demasiado comprimidos o cuando quiera un flujo de lectura más simple.
Stretch content vertically hace que los bloques de la misma fila coincidan en altura con el bloque más alto. Esto suele crear una cuadrícula más limpia cuando combina texto, tarjetas y medios con distintas alturas naturales.

El primer bloque siempre es el bloque grande. Si un elemento específico debe encabezar el diseño, coloque ese bloque primero.

Ajustes de color

Este grupo le permite anular los colores del texto, el subtítulo y los iconos de la sección sin cambiar la paleta general de su tema. Es especialmente útil cuando añade un fondo personalizado de sección o quiere que esta sección tenga un aspecto visual distinto.

Revise cuidadosamente el contraste si usa una imagen, un degradado o un video detrás del contenido. Una rápida anulación de color aquí suele ser suficiente para mantener legibles los encabezados y el texto de apoyo.

Tipos de bloque admitidos

Banner
Blog post
Contact form
Image
Product
Rich text
Testimonial
Video

Use Banner para promociones, mensajes de campaña o una tarjeta destacada visualmente rica. Admite su propio medio de fondo, contenido en primer plano, imagen en primer plano opcional y comportamiento de enlace, lo que lo convierte en uno de los bloques más flexibles de esta sección. Obtenga más información sobre el bloque Banner.

Use Banner primero cuando quiera un bloque principal de estilo hero.
Mantenga el texto breve si quiere que el bloque conserve una forma más controlada.
Los estilos de enlace de bloque completo funcionan mejor cuando el banner tiene un único destino claro.

Entrada de blog

Use Blog post para destacar contenido editorial dentro del collage. Incorpora un artículo seleccionado y le permite ajustar la presentación de la tarjeta para que encaje con el resto del diseño. Obtenga más información sobre el Entrada de blog.

Use ajustes de texto compactos cuando el artículo sea un elemento de apoyo y no el foco principal.
Las tarjetas de estilo Banner dan más peso visual a la imagen destacada.

Formulario de contacto

Use Contact form cuando quiera un bloque centrado en la respuesta dentro del collage, como consultas, mensajes de soporte o captación de clientes potenciales. Incluye sus propios controles de encabezado, botón, fondo y color. Obtenga más información sobre el Formulario de contacto.

Mantenga breve el texto introductorio para que el formulario siga siendo fácil de revisar.
Un fondo de bloque personalizado puede ayudar a que el formulario destaque frente a los bloques de contenido cercanos.

Imagen

Use Image para fotografía, recursos de marca, elementos visuales de apoyo o mosaicos visuales enlazados. Incluye controles de relación de aspecto, leyenda, superposición, alineación y color para una presentación flexible. Obtenga más información sobre el Imagen.

Elija cuidadosamente las relaciones de aspecto cuando coloque bloques de imagen junto a contenido con mucho texto.
Use leyendas solo cuando la imagen necesite contexto o un significado adicional.

Producto

Use Product para añadir artículos seleccionados al collage sin cambiar a una sección de producto dedicada. Funciona bien para merchandising basado en historias, guías de regalo y páginas de campaña. Obtenga más información sobre el Producto.

Mantenga coherentes los estilos de tarjeta de producto en varios bloques de producto para lograr un diseño más limpio.
Active los selectores de variantes solo cuando esa interacción adicional aporte un valor claro.

Texto enriquecido

Use Rich text para texto de apoyo, narración, instrucciones o pequeños destacados entre bloques más visuales. Le ofrece un mosaico compacto basado en texto con controles opcionales de icono, encabezado, cuerpo de texto, botón, fondo y color. Obtenga más información sobre el Texto enriquecido.

Un texto más breve suele funcionar mejor que párrafos largos en este diseño.
Los ajustes de fondo y color pueden ayudar a que el bloque se sienta como una tarjeta diseñada y no como texto simple.

Testimonio

Use Testimonial para añadir prueba social junto a productos, medios o contenido promocional. Puede incluir una cita, valoración, origen, producto relacionado e imágenes o video opcionales. Obtenga más información sobre el Testimonio.

Las citas breves son más fáciles de equilibrar dentro de la cuadrícula.
Vincular el testimonio a un producto ayuda a que respalde tanto la confianza como la conversión.

Video

Use Video para contenido de video incrustado o alojado dentro del collage. Admite relación de aspecto, imagen de portada, comportamiento de reproducción automática, superposiciones, leyendas y opciones de alineación. Obtenga más información sobre el bloque Video.

Añada una imagen de portada cuando quiera una primera impresión más limpia antes de que empiece la reproducción.
Revise juntos la reproducción automática y las opciones de superposición para que el comportamiento de reproducción resulte intencional.

Ajustes estándar de sección

Ajustes de encabezado

Use Ajustes de encabezado para añadir un subtítulo opcional, un encabezado, texto de apoyo, un icono y un botón sobre el collage. Esto ayuda a enmarcar el contenido y da a la sección una estructura más clara en páginas largas.

Mantenga el encabezado conciso para que introduzca la sección sin competir con los bloques destacados. Si añade un botón de sección, considérelo la acción principal a nivel de sección.

Ajustes de fondo de sección

Use Ajustes de fondo de sección para añadir un color, degradado, imagen o video detrás de toda la sección. Esto es útil cuando quiere que el collage destaque frente al contenido circundante.

Los medios de fondo pueden hacer que la sección se sienta más dramática, pero también pueden afectar la legibilidad y la percepción del espaciado. Use superposiciones cuando necesite más contraste sin perder el tratamiento de fondo.

Ajustes de espaciado

Use Ajustes de espaciado para controlar el espacio encima y debajo del collage. Pequeños cambios aquí pueden hacer que la sección se sienta más ajustada y orientada a la utilidad, o más amplia y premium.

Un espaciado mayor suele funcionar mejor cuando la sección tiene su propio fondo. Un espaciado más ajustado puede ayudar cuando esta sección se sitúa en un flujo de página denso.

Ajustes de separador

Use Ajustes de separador para añadir una línea en la parte superior o inferior de la sección. Esto da al collage un límite más claro sin cambiar su espaciado ni su fondo.

Normalmente basta con un separador sutil. Si el color del separador es transparente, la sección usa el color de borde predeterminado de los ajustes de su tema.

Ajustes de visibilidad

Use Ajustes de visibilidad para mostrar u ocultar la sección según el tamaño del dispositivo. Esto resulta útil cuando quiere una disposición de contenido diferente en pantallas más pequeñas.

Use la visibilidad específica por dispositivo con cuidado para no crear contenido duplicado innecesario. Si crea versiones separadas, mantenga alineados el mensaje y los enlaces.

Ajustes de ancho

Use Ajustes de ancho para controlar tanto el ancho del contenido como el ancho exterior de la sección. En Collage, los cambios de ancho pueden afectar mucho a la sensación de apertura, densidad o estilo editorial del diseño.

El ancho del contenido es la principal restricción del diseño, mientras que el ancho de la sección importa sobre todo cuando usa un tratamiento de fondo. Vista previa de los cambios de ancho en la tienda online en vivo cuando sea posible, ya que el editor puede hacer que el espaciado parezca más limitado de lo que será en la página.

Notas de uso

Empiece con intención. Coloque primero su bloque más importante o más visual, porque siempre se convertirá en el bloque destacado grande.
Planifique el orden en móvil. Si el flujo en móviles importa, pruebe ambas opciones de estilo de collage y decida si el apilado le ofrece una historia de arriba a abajo más clara.
Equilibre bloques pesados y ligeros. Combine bloques con mucho texto con bloques visuales más simples para que un lado del diseño no se vea recargado.
Use alturas iguales con criterio. El estiramiento vertical ayuda a crear una cuadrícula más ordenada, pero revíselo si un bloque contiene mucho más contenido que los demás.
Revise el contraste después de aplicar estilos. Cada vez que añada fondos personalizados o anule colores, vuelva a comprobar la legibilidad en escritorio y en móviles.
Revise ambos puntos de ruptura. Los controles de escritorio y móviles pueden producir un comportamiento diferente de diseño, alineación, visibilidad o medios, así que confirme la sección en ambos tamaños de ventana gráfica.
Trate los formularios y productos como interactivos. Los bloques de contacto y de producto pueden cambiar según la entrada del cliente, los estados de validación, las variantes seleccionadas, la cantidad y la disponibilidad, así que verifique los estados vacíos, de éxito y de error, así como las acciones de comercio.
Use las anulaciones de medios con moderación. Los valores vacíos o de estilo predeterminado suelen conservar el estilo de reserva, mientras que los colores explícitos, los degradados o las opciones de medios separadas para escritorio y móviles hacen que el área local se comporte de forma más independiente y pueden afectar al recorte, la carga y la legibilidad.

Align v2.0