Correcto
Ajustes de ancho del layout
Ajuste el ancho del contenido y de la sección para afinar la legibilidad, el espaciado y el alcance visual.
Utilice estos ajustes para controlar cuán amplia se ve un área en general y cuánto puede extenderse su contenido dentro de ese espacio. Son útiles cuando desea que una parte de la página resulte más legible, más espaciosa o visualmente más distintiva sin cambiar el diseño general.
Ajustes de ancho
Sección titulada «Ajustes de ancho»Este grupo incluye un control para el área de contenido interna y otro para el contenedor externo de la sección. Juntos, determinan cómo el texto, las imágenes y los fondos ocupan la página.
También puede revisar documentación de Company XYZ sobre anchos de layout para ver más ejemplos de cómo funcionan estas opciones de ancho en la práctica.
Para una visión general más amplia de cómo encajan estos ajustes en el layout de su tienda online, consulte la documentación de Shopify sobre secciones y bloques
Ancho del contenido
Sección titulada «Ancho del contenido»El ancho del contenido establece el ancho máximo del material dentro del área. Este suele ser el ajuste más importante porque afecta directamente a la comodidad de lectura, el tamaño de los medios y la densidad o amplitud del layout.
Los anchos más estrechos suelen ser mejores para contenido con mucho texto porque las líneas más cortas son más fáciles de recorrer. Los anchos más amplios suelen adaptarse mejor a layouts centrados en imágenes, cuadrículas de productos y contenido de varias columnas que necesita más espacio horizontal.
Si mantiene el ajuste compartido del tema, el área permanecerá alineada con el resto del sitio. Si elige un ancho personalizado, puede hacer que esa área se sienta deliberadamente más ajustada o más amplia.
El ancho del contenido sigue adaptándose a pantallas más pequeñas, por lo que esta opción afecta principalmente a cómo se percibe el layout en viewports más grandes.
Ancho de la sección
Sección titulada «Ancho de la sección»El ancho de la sección controla el contenedor externo que rodea el contenido. Esto es más importante cuando el área usa un color de fondo, una imagen u otro tratamiento visual que se extiende más allá del propio contenido.
Un contenedor que sigue el ancho del contenido crea una apariencia contenida. Las opciones de contenedor más amplias hacen que el área se sienta más grande y pueden dar más presencia a los tratamientos de fondo.
Los valores de fondo en blanco, transparentes o con estilo predeterminado suelen mantener intacto el estilo circundante del tema. Los colores explícitos, los degradados o los fondos basados en medios hacen que el área se sienta más independiente y pueden separarla visualmente de las secciones adyacentes.
Las opciones de ancho completo y full-bleed son más útiles cuando desea que el área externa se extienda más por la página. En la práctica, esto suele ser una decisión visual más que una decisión de layout de lectura.
Revise el ancho del contenido y el ancho de la sección juntos cuando utilice tratamientos de fondo marcados. Un área externa muy amplia con contenido interno estrecho puede parecer intencional, pero también puede sentirse desequilibrada si el espaciado es demasiado ajustado o demasiado holgado.
Elegir anchos compartidos o personalizados
Sección titulada «Elegir anchos compartidos o personalizados»Use el ajuste compartido del tema cuando quiera un ritmo de página coherente en distintas áreas. Esta suele ser la opción más segura para mantener una alineación limpia de un área a la siguiente.
Use anchos personalizados cuando una zona específica necesite una presentación diferente. Entre los motivos habituales están mejorar la legibilidad de textos más largos, dar más espacio a los medios o hacer que un área destacada resalte.
Previsualizar los cambios con precisión
Sección titulada «Previsualizar los cambios con precisión»Los cambios de ancho pueden verse diferentes en el editor que en la página en vivo, especialmente con layouts más amplios y diseños de borde a borde. Compruebe la vista de la tienda online antes de decidir si el espaciado y el equilibrio son los adecuados.
Para obtener detalles sobre cómo trabajar en el editor, consulte la documentación de Shopify sobre el editor de temas
Notas de uso
Sección titulada «Notas de uso»- Dé prioridad a la legibilidad. Use anchos de contenido más estrechos para textos largos, de modo que la longitud de las líneas siga siendo cómoda de leer.
- Dé espacio a los medios cuando sea necesario. Elija anchos de contenido más amplios para layouts con muchas imágenes o de varias columnas que necesiten más espacio horizontal.
- Use el ancho externo para generar impacto visual. Cambie el ancho de la sección cuando los fondos o el estilo de borde a borde deban tener más peso en la página.
- Mantenga coherente el estilo del fondo. Deje los valores de fondo en blanco o en el valor predeterminado cuando quiera que continúe el estilo circundante del tema; use colores explícitos, degradados o medios cuando quiera que el área destaque.
- Mantenga una alineación intencional. Use el ajuste compartido del tema cuando quiera que las áreas se alineen de forma coherente en todo el sitio.
- Previsualice fuera del editor. Compruebe la vista de la página en vivo antes de finalizar layouts anchos, de ancho completo o full-bleed.