Contenido de la página
- Documentación de Shopify sobre secciones y bloques
- Documentación de Company XYZ sobre los ajustes de espaciado de sección
- Documentación de Company XYZ sobre los ajustes de fondos de sección
- Documentación de Company XYZ sobre los ajustes de separadores
- Documentación de Company XYZ sobre los ajustes de anchos del diseño
Use esta sección para mostrar el contenido principal del cuerpo de una página y controlar cómo aparece dentro del diseño. Funciona mejor para páginas con mucho texto, donde la legibilidad, el espaciado y la jerarquía visual importan.
Ajustes básicos
Sección titulada «Ajustes básicos»La principal decisión es si mostrar el título de la página dentro de esta sección. Para una visión más amplia de cómo el contenido de la página encaja en el diseño de un tema, consulte la documentación de Shopify sobre secciones y bloques. Mantenerlo activado mantiene el encabezado de la página simple y coherente, mientras que desactivarlo le da más libertad para introducir la página con otra sección o un diseño de encabezado personalizado.
Si desactiva Show title, añada un encabezado H1 en otra parte de la página para que el contenido siga teniendo un encabezado principal claro.
Esta sección es mejor para presentar contenido de página bien estructurado, no para reemplazar el formato del contenido. Los encabezados, párrafos y listas limpios en el cuerpo de la página harán que la sección sea más fácil de leer, independientemente de los ajustes de diseño que elija.
Ajustes de color
Sección titulada «Ajustes de color»Use estos ajustes para anular solo el color de texto predeterminado de esta sección. Esto es especialmente útil cuando el contenido de la página se sitúa sobre un fondo personalizado o cuando necesita más contraste del que ofrecen los colores globales del tema.
Antes de publicar, revise juntos los párrafos largos, los enlaces y los encabezados. Un color de texto que se ve bien en contenido corto puede resultar de bajo contraste o cansado de leer en páginas más largas.
Ajustes estándar de sección
Sección titulada «Ajustes estándar de sección»Ajustes de espaciado
Sección titulada «Ajustes de espaciado»Use los Ajustes de espaciado compartidos para controlar el espacio encima y debajo del contenido. Los valores separados para escritorio y móvil facilitan mantener la sección amplia en pantallas grandes sin hacer que las pantallas pequeñas se sientan demasiado vacías.
Para contenido de formato largo, normalmente funciona mejor un espaciado moderado. Aumente el espaciado cuando esta sección necesite destacarse de las secciones cercanas, y redúzcalo cuando la página deba leerse como un flujo más continuo.
Ajustes de fondo de sección
Sección titulada «Ajustes de fondo de sección»Use los Ajustes de fondo de sección compartidos para añadir un color, degradado, imagen o video detrás del contenido. Estos ajustes pueden dar a una página sencilla un aspecto más de marca o editorial, pero también tienen el mayor efecto sobre la legibilidad.
Los ajustes de degradado anulan los ajustes de color plano, y los degradados de superposición anulan los colores de superposición. También puede proporcionar contenido multimedia de fondo específico para móvil cuando la versión de escritorio no se recorta bien en pantallas más pequeñas.
Ajustes de separador
Sección titulada «Ajustes de separador»Use los Ajustes de separador compartidos para añadir una línea encima o debajo de la sección. Esta es una forma sencilla de separar el contenido de la página de las secciones vecinas sin depender de grandes cambios de espaciado ni de un tratamiento completo de fondo.
Si deja el color del separador transparente, la sección usa el color de borde del tema. Normalmente es la opción más fácil cuando quiere un divisor sutil que se mantenga visualmente coherente en toda la página.
Ajustes de ancho
Sección titulada «Ajustes de ancho»Use los Ajustes de ancho compartidos para controlar el ancho del contenido y el ancho exterior de la sección. Para esta sección, el ancho del contenido suele ser lo más importante porque afecta directamente la longitud de las líneas y la comodidad de lectura.
Los anchos de contenido más estrechos suelen funcionar mejor para páginas de políticas, páginas de historias y otros diseños con mucho texto. El ancho de la sección se vuelve más notable cuando añade un fondo, ya que cambia hasta dónde se extiende ese fondo más allá de la columna de texto.
Notas de uso
Sección titulada «Notas de uso»- Mantenga claro el encabezado de la página. Use el título integrado a menos que otra sección ya esté proporcionando un H1 claro.
- Optimice para la lectura. Elija un ancho de contenido y un color de texto que hagan cómodos de revisar los párrafos largos.
- Use los fondos de forma selectiva. Añada contenido multimedia de fondo solo cuando respalde la página sin competir con el contenido.
- Ajuste el espaciado al propósito de la página. Dé más espacio a las páginas editoriales y mantenga más compactas las páginas de utilidad para una revisión más rápida.
- Compruebe la presentación en móvil. Revise el espaciado, el ancho y el comportamiento del fondo en pantallas más pequeñas antes de publicar.
- Compare ambos viewports. Los ajustes de escritorio y móvil pueden producir comportamientos diferentes de alineación, visibilidad y contenido multimedia, así que revise la sección en ambos tamaños antes de finalizarla.
- Trate las anulaciones de forma intencional. Los valores vacíos o transparentes suelen mantener el estilo de respaldo del tema, mientras que los colores, degradados o selecciones de contenido multimedia explícitos hacen que esta sección sea más autónoma.
- Revise cuidadosamente el contenido multimedia configurado. Cuando el contenido multimedia de escritorio y móvil se establece por separado, confirme que el recorte, la carga, el comportamiento de respaldo y la legibilidad del texto siguen funcionando bien en ambas versiones.