Correcto
Ajustes de diseño de navegación
Controla la alineación y el espaciado de la navegación en los diseños de encabezado de escritorio y móvil.
Use este grupo de ajustes para controlar dónde aparece la navegación en el encabezado en escritorio y móvil. Le permite mantener la navegación dentro de la fila principal o darle una fila independiente de ancho completo cuando el menú necesita más espacio.
Para una visión general más amplia de la interfaz, consulte documentación de Shopify sobre el editor de temas
Ajustes de diseño
Sección titulada «Ajustes de diseño»El diseño de escritorio y móvil se controla por separado, por lo que puede mantener una disposición compacta en un tamaño de pantalla y una más amplia en el otro. Izquierda, centro y derecha colocan la navegación dentro de la fila principal del encabezado. Ancho completo la mueve debajo de esa fila, a su propia línea.
Esta elección afecta tanto a la visibilidad como al equilibrio. Mantener la navegación en la fila principal ayuda a crear un encabezado más compacto, mientras que una fila de ancho completo da más espacio a los elementos del menú y hace que la navegación se perciba más destacada.
Para obtener más detalles sobre cómo se comportan la alineación y la agrupación, consulte Ajustes de diseño de navegación.
Ancho completo hace más que cambiar la alineación. Coloca la navegación en una fila separada debajo de la fila principal del encabezado.
Ubicación en escritorio y móvil
Sección titulada «Ubicación en escritorio y móvil»En escritorio, izquierda y derecha pueden funcionar bien cuando la navegación necesita situarse junto a la marca, la búsqueda o los iconos de acción. Centro suele ser la mejor opción cuando la navegación debe sentirse como el foco visual del encabezado.
En móvil, priorice la claridad sobre la simetría. Si el encabezado se siente recargado, mover la navegación a una fila de ancho completo puede hacer que el diseño sea más fácil de revisar y reducir la competencia con otros elementos del encabezado.
Rellenar el espacio disponible
Sección titulada «Rellenar el espacio disponible»Rellenar el espacio disponible estira el área de navegación para usar el espacio restante en la fila de escritorio. Esto puede ayudar a que el encabezado se sienta más equilibrado cuando la navegación está junto a elementos más pequeños y, de otro modo, habría espacio vacío.
Es más útil cuando la navegación permanece en la fila principal. Si las etiquetas del menú son largas o el encabezado ya se siente denso, pruébelo con cuidado para que el ancho adicional mejore el equilibrio sin que el espaciado resulte extraño.
Notas de uso
Sección titulada «Notas de uso»- Ajuste el diseño a la longitud del menú. Use ancho completo cuando la navegación de nivel superior necesite más espacio horizontal.
- Ajuste cada tamaño de pantalla por separado. Elija el diseño más claro para escritorio y móvil en lugar de forzar la misma ubicación en ambos.
- Use ancho completo para reducir la saturación. Si la navegación, la marca y los elementos de utilidad compiten por una sola fila, mover la navegación debajo suele crear un encabezado más limpio.
- Amplíe el espacio con intención. Active rellenar el espacio disponible cuando la fila de escritorio tenga espacio sobrante y la navegación deba ayudar a anclar el diseño.
- Revise el equilibrio general del encabezado. Después de cambiar la alineación, compruebe que la navegación siga percibiéndose intencional junto a los otros elementos del encabezado.
- Compruebe ambos viewports. Un diseño que se siente equilibrado en escritorio puede saturar el encabezado en móvil, así que revise ambos tamaños antes de publicar.