Correcto
Ajustes de distribución de bloques
Controle el ancho con el que aparece el contenido en diseños de cuadrícula de escritorio, tableta y móvil.
Use este grupo de ajustes para controlar cuánto espacio horizontal ocupa un elemento de contenido dentro de su cuadrícula principal. Le ayuda a crear una jerarquía visual más clara, incluir más elementos en una fila o dar más espacio al contenido destacado.
Extensión de columnas
Sección titulada «Extensión de columnas»La decisión principal es cuántas columnas debe ocupar el contenido en cada tamaño de dispositivo. Las extensiones más grandes hacen que un elemento destaque más y proporcionan más espacio para el texto, los archivos multimedia o las acciones. Las extensiones más pequeñas son útiles para contenido complementario compacto y diseños más ajustados con varias columnas.
La extensión para escritorio suele establecer la intención general del diseño. Las extensiones para tableta y móvil le permiten mantener esa estructura legible a medida que se reduce el espacio de la pantalla, sin obligar a todos los dispositivos a usar el mismo ancho.
Para obtener una visión más amplia de cómo funcionan estos diseños, consulte la documentación de Shopify sobre secciones y bloques
Comportamiento en tabletas y móviles
Sección titulada «Comportamiento en tabletas y móviles»La tableta puede usar su propia extensión o seguir la extensión para escritorio. Esta alternativa resulta útil cuando el diseño de escritorio ya se adapta bien y no necesita un ajuste específico para tabletas.
El diseño móvil debe configurarse priorizando la legibilidad. Si el texto se ajusta de forma incómoda, los botones parecen demasiado apretados o el contenido se apila de manera desigual, la extensión móvil suele ser el primer ajuste que debe revisar.
Revise la tableta y el móvil por separado, incluso cuando el diseño de escritorio se vea bien. Una extensión equilibrada en una pantalla grande puede comportarse de otra manera cuando se reduce el ancho disponible.
Límites de la cuadrícula principal
Sección titulada «Límites de la cuadrícula principal»Este grupo de ajustes funciona dentro de la estructura de columnas del diseño principal. Si la extensión elegida es mayor que el número de columnas disponibles en el diseño principal, el contenido se extenderá por toda la fila.
Este comportamiento ofrece flexibilidad, pero también puede cambiar la forma en que se ajustan los elementos. Si algo pasa inesperadamente a su propia fila, compare su extensión con las columnas disponibles del diseño principal antes de cambiar el espaciado o el contenido.
Si la extensión seleccionada es mayor que el número de columnas del diseño principal, el contenido ocupará toda la fila.
Comportamiento de la presentación móvil
Sección titulada «Comportamiento de la presentación móvil»Cuando el diseño principal está configurado para mostrarse como una presentación en móviles, la extensión móvil habitual de este grupo de ajustes no controla el ancho móvil final de la forma normal. En su lugar, el comportamiento del diseño móvil sigue el ajuste de columnas móviles del diseño principal.
Si los diseños para teléfonos no coinciden con lo esperado, revise primero los ajustes del diseño móvil principal. Esto es especialmente importante cuando espera una presentación móvil más estrecha o más ancha, pero ve un tamaño basado en una presentación.
Si necesita ayuda para localizar estos ajustes en el editor, consulte la documentación de Shopify sobre el editor de temas
Notas de uso
Sección titulada «Notas de uso»- Adapte el ancho a la importancia. Asigne una extensión mayor al contenido destacado y mantenga más estrechos los elementos complementarios para lograr una jerarquía visual más clara.
- Compruebe primero las columnas principales. Si un elemento sigue pasando a su propia fila, es posible que su extensión sea mayor de lo que permite el diseño principal.
- Use los ajustes específicos para tabletas de forma selectiva. Mantenga la tableta alineada con el escritorio, a menos que la legibilidad o el espaciado necesiten claramente un ajuste independiente.
- Priorice la claridad en móviles. Elija extensiones móviles que eviten el texto apretado, los botones desiguales y los saltos de línea incómodos.
- Pruebe cada ventana gráfica. Revise el escritorio, la tableta y el móvil por separado, ya que la misma extensión puede crear una alineación o un espaciado diferente en cada tamaño.
- Pruebe los diseños de presentación por separado. Cuando la presentación móvil está activa, revise el ajuste de columnas móviles del diseño principal antes de solucionar problemas relacionados con el ancho.