Configuración de espaciado de sección

Enlaces destacados

1. Documentación de Company XYZ sobre los ajustes de espaciado de sección
2. Documentación de Shopify sobre secciones y bloques
3. Documentación de Shopify sobre el editor de temas

Videos útiles

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

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

Use estos ajustes para controlar el espacio encima y debajo del contenido de una sección. Le ayudan a ajustar con precisión qué tan abierto, compacto o conectado se siente cada parte de una página en distintos tamaños de pantalla. Para una visión general más amplia del diseño basado en secciones, consulte la documentación de Shopify sobre secciones y bloques

Ajustes de espaciado

Este grupo le ofrece controles separados de espaciado superior e inferior para escritorio y móvil. Esto facilita crear un ritmo vertical coherente sin obligar a que todos los dispositivos usen el mismo espaciado.

En pantallas grandes, el espaciado tiene un efecto importante en la sensación de pulido y amplitud de un diseño. Más espacio puede ayudar a que el contenido destacado resalte, mientras que un espaciado más ajustado puede mantener en movimiento las páginas con mucho producto o información.

En pantallas pequeñas, a menudo es necesario reducir el espaciado. Un valor que se siente equilibrado en escritorio puede parecer demasiado grande en móvil, especialmente cerca de la parte superior de una página, donde el espaciado adicional empuja el contenido importante más abajo.

Para obtener más orientación sobre cómo se comportan estos controles, consulte Configuración de espaciado de sección o la documentación de Shopify sobre el editor de temas

Consejo

Ajuste el espaciado mientras visualiza las secciones encima y debajo de la que está editando. Las decisiones de espaciado son más fáciles de valorar en contexto que en una sola sección por sí sola.

Equilibrar el espaciado superior e inferior

El espaciado superior e inferior no tiene por qué coincidir. Distintos valores pueden crear transiciones más suaves entre áreas de contenido y ayudar a que una sección se sienta más conectada de forma natural con lo que viene antes o después.

Por ejemplo, un espaciado superior adicional puede dar más presencia a una nueva área de contenido, mientras que reducir el espaciado inferior puede acercar visualmente la siguiente área. Esto es especialmente útil al combinar banners, secciones de texto, colecciones o contenido centrado en imágenes.

Si dos secciones vecinas usan ambas un espaciado generoso, el espacio entre ellas puede parecer mucho mayor de lo esperado. Cuando el espaciado se vea demasiado holgado, reduzca primero un lado antes de cambiar ambas secciones.

Estrategia de espaciado para escritorio y móvil

Los controles separados para escritorio y móvil le permiten mantener un diseño espacioso en pantallas grandes mientras hace que las pantallas pequeñas sean más fáciles de revisar. En la mayoría de los casos, lo mejor es establecer primero el espaciado de escritorio y luego ajustar los valores de móvil solo donde el diseño se sienta demasiado alto o demasiado comprimido.

El espaciado cero puede ser útil cuando quiere que las áreas vecinas se sientan conectadas visualmente. Úselo con cuidado, sin embargo, porque eliminar demasiado espacio puede hacer que el contenido se sienta apretado o reducir el contraste entre distintos tipos de contenido.

Notas de uso

1. Ajuste el espaciado al contenido. Use más espaciado para contenido destacado y menos espaciado para áreas más densas y orientadas a tareas.
2. Revise las secciones en conjunto. Compruebe el espaciado con el contenido vecino para que la página completa se sienta equilibrada y no desigual.
3. Ajuste el móvil de forma independiente. Reduzca el espaciado en móvil cuando el contenido aparezca demasiado abajo en la pantalla o la página se sienta demasiado estirada.
4. Use el espaciado desigual a propósito. Diferentes valores superior e inferior pueden crear mejores transiciones que un espaciado perfectamente coincidente.
5. Vigile los espacios acumulados. Un espaciado grande en secciones adyacentes puede crear espacio vacío innecesario, incluso cuando cada sección se ve bien por separado.
6. Previsualice ambos viewports. El espaciado en escritorio y móvil puede sentirse notablemente diferente, así que revise la sección en ambos tamaños antes de terminar.