Imagen

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre ajustes de encabezados
3. Documentación de Company XYZ sobre ajustes del espaciado de sección
4. Documentación de Company XYZ sobre ajustes de fondos de sección
5. Documentación de Company XYZ sobre ajustes de separadores
6. Documentación de Company XYZ sobre ajustes de visibilidad
7. Documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Use esta sección para mostrar una sola imagen con controles de visualización flexibles y contenido de apoyo opcional. Para obtener una visión general más amplia del contenido de tema basado en secciones, consulte la documentación de Shopify sobre secciones y bloques. Funciona bien para fotografía editorial, banners simples, llamadas promocionales y separaciones visuales vinculadas entre otras secciones.

Ajustes de imagen

Estos ajustes controlan la propia imagen, incluida su forma, ancho, comportamiento de recorte y enlace opcional. Las opciones más importantes suelen ser el ancho y la relación de aspecto, ya que son las que más influyen en lo prominente que se percibe la imagen en el diseño.

Use el ajuste de ancho máximo de imagen para decidir si la imagen debe sentirse inmersiva o contenida. Una imagen a todo el ancho crea más impacto, mientras que un ancho limitado suele verse más limpio y es más fácil de combinar con el contenido circundante.

Los ajustes de relación de aspecto le permiten mantener una forma de imagen coherente incluso cuando las imágenes de origen varían. Elija la relación natural cuando la composición sea lo más importante, y use una relación fija cuando quiera un diseño más uniforme en toda la página. La relación móvil independiente es especialmente útil cuando un recorte de escritorio parece demasiado ancho o demasiado ajustado en pantallas más pequeñas.

El estilo de imagen le ofrece un tratamiento visual rápido sin editar el archivo en sí. Las esquinas redondeadas suelen encajar en diseños editoriales más suaves, mientras que un recorte circular funciona mejor cuando la imagen cargada ya es casi cuadrada.

Las relaciones de aspecto forzadas pueden recortar la imagen. Compruebe tanto la vista de escritorio como la de móvil para que las partes importantes de la imagen sigan visibles.

Si añade un enlace, manténgalo muy relacionado con la imagen para que la sección se perciba intencional y no decorativa.

Ajustes de subtítulo

Use el área de subtítulo para añadir una nota breve encima o debajo de la imagen. Esto funciona bien para créditos fotográficos, una breve descripción o un pequeño contexto de apoyo que deba permanecer asociado al medio.

Los subtítulos superiores ayudan a presentar la imagen antes de que aparezca, mientras que los subtítulos inferiores suelen funcionar mejor para créditos o detalles secundarios. Mantenga el texto del subtítulo breve para que apoye la imagen en lugar de competir con ella.

Ajustes de superposición

Los ajustes de superposición añaden un color sólido o un degradado sobre la imagen. Esto resulta útil para suavizar una imagen recargada, añadir ambiente o mejorar el contraste cuando la imagen está junto a otros elementos visuales.

Una superposición sutil suele hacer más con el menor coste visual. Las superposiciones intensas pueden ser eficaces para imágenes dramáticas, pero también pueden ocultar detalles si se llevan demasiado lejos.

Ajustes estándar de sección

Ajustes de encabezado

Use los Ajustes de encabezado compartidos para añadir un subtítulo, encabezado, subencabezado, icono y un botón opcional encima del área de la imagen. En esta sección, el encabezado resulta útil cuando la imagen necesita contexto o cuando desea convertir la sección en una llamada visual sencilla con una acción clara.

Mantenga el botón muy vinculado al mensaje de la imagen o del encabezado. En móvil, la posición del botón y el comportamiento a ancho completo pueden ayudar a que la llamada a la acción sea más fácil de ver y pulsar.

Ajustes de espaciado

Use los Ajustes de espaciado compartidos para controlar el espacio por encima y por debajo de la sección. Más espaciado ayuda a que una imagen destacada se sostenga por sí sola, mientras que un espaciado más reducido ayuda a que se sienta conectada con el contenido cercano.

A menudo merece la pena ajustar por separado el espaciado de escritorio y el de móvil, ya que las imágenes grandes pueden verse equilibradas en escritorio pero excesivamente altas en pantallas más pequeñas.

Ajustes de fondo de sección

Use los Ajustes de fondo de sección compartidos para añadir color, degradados, imágenes o vídeo detrás de la sección. Esto puede ayudar a enmarcar la imagen como un bloque de contenido diseñado en lugar de un recurso independiente.

Las opciones de fondo en blanco o transparente suelen conservar el estilo del tema circundante. Los colores de fondo, degradados o medios más explícitos hacen que la sección se sienta más autónoma.

Si la imagen principal ya está visualmente recargada, use los efectos de fondo con moderación para que la sección no se sienta abarrotada.

Ajustes de separador

Use los Ajustes de separador compartidos para colocar una línea en la parte superior o inferior de la sección. Esta es una forma sencilla de distinguir la imagen del contenido circundante sin añadir peso visual extra.

Los estilos de separador sutiles suelen funcionar mejor cuando la imagen en sí es el foco principal.

Ajustes de visibilidad

Use los Ajustes de visibilidad compartidos para mostrar u ocultar la sección por dispositivo. Esto resulta útil cuando quiere un tratamiento de imagen para escritorio y un recorte o una sección de reemplazo diferentes para móvil.

La visibilidad específica por dispositivo y las opciones de medios pueden cambiar el diseño, la alineación y la legibilidad, así que revise ambos tamaños de ventana antes de publicar.

Oculte la sección en un dispositivo solo cuando otra sección o elección de diseño lo haga claramente mejor allí.

Ajustes de ancho

Use los Ajustes de ancho compartidos para controlar el ancho del contenido y el ancho externo de la sección. En esta sección, el ancho del contenido afecta a lo ancho que pueden verse la imagen y el contenido del encabezado, mientras que el ancho de la sección importa sobre todo cuando añade un fondo o desea que el contenedor de la sección se extienda más.

Un ancho más estrecho puede hacer que la sección se sienta más editorial, mientras que unos ajustes más amplios crean una presentación más inmersiva. Obtenga una vista previa de los cambios de ancho en la página en vivo cuando sea posible, ya que es posible que el editor no siempre refleje el diseño final con exactitud.

Notas de uso

1. Proteja la composición. Revise los recortes en escritorio y móvil siempre que use una relación de aspecto forzada.
2. Haga coincidir el ancho con el propósito. Use anchos más amplios para dar impacto y anchos más estrechos para un aspecto más contenido y editorial.
3. Mantenga breves los subtítulos. Los subtítulos cortos añaden contexto sin desviar la atención de la imagen.
4. Use las superposiciones con cuidado. Añada solo la intensidad de superposición necesaria para mejorar el ambiente o la claridad sin aplanar la imagen.
5. Simplifique los elementos que compiten. Si la imagen, el encabezado, el botón y el fondo exigen atención, reduzca uno o dos para que la sección tenga un foco claro.