La pestaña Layout define hasta qué ancho puede llegar el contenido de tu tienda en pantallas grandes. Evita que los textos y los productos se estiren demasiado en un monitor ancho.
Dónde encontrarlo
Abre el constructor, haz clic en el icono del engranaje y abre la pestaña Layout. La sección se llama Page layout y tiene un solo ajuste: Page width.
Page width
Mueve el control deslizante para elegir el ancho máximo de tu contenido, en píxeles. Va de 900 a 1400, en pasos de 100. El valor predeterminado es 1200.
- 900 o 1000: una página estrecha. Las líneas de texto son cortas y fáciles de leer. Ideal para una tienda con pocos productos o mucho texto.
- 1100 o 1200: un ancho equilibrado que va bien a la mayoría de las tiendas.
- 1300 o 1400: una página ancha. Caben más productos en cada fila en pantallas grandes.
El constructor lo explica así: Sets the maximum width for desktop large screens. But on mobile screens width is always 100%. En un móvil o una pantalla pequeña, tu contenido siempre ocupa todo el ancho de la pantalla, elijas lo que elijas aquí.
Ancho de página y secciones de ancho completo
La mayoría de las secciones tienen su propio ajuste Width con dos opciones:
- Page: el contenido de la sección se queda dentro del ancho de página que definiste en la pestaña Layout.
- Full: la sección va de un borde de la pantalla al otro e ignora el ancho de página.
Una configuración habitual es un hero o un pase de diapositivas en Full arriba, y ancho Page para las secciones de debajo, así las imágenes se ven grandes y el texto sigue siendo fácil de leer.
Tareas habituales
- Mi tienda se ve demasiado estirada en una pantalla grande: baja el ancho de página a 1100 o 1000.
- Quiero más productos por fila en ordenadores: sube el ancho de página y luego revisa el número de columnas en tus secciones de productos.
- Un banner debe tocar los bordes de la pantalla: pon el Width de esa sección en Full. No necesitas cambiar el ancho de página.
- El diseño en mi móvil no cambió: es lo normal. Los móviles siempre usan todo el ancho de la pantalla.
Compruébalo en la vista previa
El ancho de página solo se nota en pantallas más anchas que el ancho que elegiste. Usa la vista previa de escritorio del constructor para ver la diferencia. Consulta Modos de vista previa.
Lo que el ancho de página no cambia
- Columnas: cuántos productos o tarjetas aparecen en una fila se define en cada sección, no aquí.
- Espaciado: el espacio encima y debajo de una sección es su relleno (padding), que también se define en la sección.
- Tamaño del texto: se define en cada texto, no aquí.
Bueno saberlo
- El ancho de página pertenece al mercado que estás editando y se aplica a todas sus páginas.
- También puedes pedírselo a la IA en el constructor, por ejemplo "Pon el ancho de página en 1100". Consulta Crear con IA.
- ¿Cambiaste de idea? Deshaz el cambio en el constructor. Consulta Atajos, deshacer y rehacer.
- Los cambios se publican cuando haces clic en Publish.