Menú principal

Enlaces destacados

1. Documentación de Company XYZ sobre el bloque Main menu
2. Documentación de Shopify sobre secciones y bloques
3. Documentación de Company XYZ sobre los ajustes de colores del banner
4. Documentación de Company XYZ sobre los ajustes de visibilidad
5. Documentación de Company XYZ sobre el uso de vídeo
6. Documentación de Company XYZ sobre los iconos

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Use este bloque para mostrar un menú de navegación estándar con menús desplegables automáticos cuando el menú seleccionado incluya enlaces anidados. También puede añadir un banner opcional y una barra de características, lo que hace que este bloque sea útil para combinar la navegación con una promoción ligera o mensajes de marca. Consulte Menú principal.

Para obtener una visión general más amplia de la estructura del tema, consulte documentación de Shopify sobre secciones y bloques

En dispositivos móviles, todos los bloques Menu y Mega menu se combinan en una sola interfaz de navegación. Revíselos juntos para que el menú móvil siga siendo claro y fácil de usar.

Ajustes básicos

Empiece por elegir el menú que este bloque debe mostrar. Después decida si el banner opcional o la barra de características añaden contexto útil, como una promoción, un anuncio de temporada o algunos breves aspectos destacados del servicio.

Use estos extras con cuidado. La navegación debe seguir sintiéndose primero como navegación, así que evite añadir tanto contenido de apoyo que resulte más difícil descubrir los enlaces.

Ajustes de alineación

Estos ajustes refinan dónde se sitúa el menú dentro del bloque en escritorio. Suelen importar más cuando el bloque está ocupando espacio adicional o usando un diseño de escritorio más ancho.

Si los cambios de alineación parecen sutiles, revise primero las opciones de diseño. El diseño suele tener el efecto más grande, mientras que la alineación actúa más como un ajuste final.

Ajustes de diseño

Use estos ajustes para controlar cuánto espacio horizontal utiliza el menú en escritorio y cómo se posiciona a lo largo de la fila. Los diseños de izquierda, centro y derecha encajan mejor con configuraciones de encabezado más tradicionales, mientras que un diseño de ancho completo puede hacer que la navegación se sienta más equilibrada en encabezados más anchos.

Fill available space es útil cuando el bloque debe extenderse para ocupar el espacio restante en lugar de mantenerse compacto. Como esto solo se aplica en escritorio, previsualice siempre el resultado en tamaños de pantalla más grandes.

Consejo

Si el encabezado se ve descompensado, pruebe a ajustar el diseño antes de cambiar la alineación. Un diseño más ancho suele resolver los problemas de espaciado de forma más limpia.

Fondo del banner

Estos ajustes controlan el medio detrás del banner opcional. Puede usar un fondo de imagen o video, y puede establecer medios móviles independientes cuando el recurso de escritorio no se recorte bien en pantallas más pequeñas.

Elija medios de fondo que respalden el mensaje sin restarle protagonismo. Las imágenes sencillas y los videos breves, con poca distracción, suelen funcionar mejor en áreas de navegación.

Precaución

Los medios de fondo recargados o de alto contraste pueden dificultar la lectura del contenido relacionado con el menú. Si la legibilidad disminuye, simplifique los medios o aumente el overlay y el contraste del texto.

Para orientación sobre la configuración de video, consulte best practices for video files.

Primer plano del banner

Estos ajustes controlan el contenido superpuesto sobre el fondo del banner. Los campos vacíos permanecen ocultos, así que puede mantener el banner minimalista o crear un mensaje promocional más completo.

Use el icono, el caption, el heading y el subheading para crear una jerarquía de contenido clara. Los campos de icono aceptan emoji o iconos con nombre, lo que puede ser útil para dar énfasis si se usan con moderación y de forma coherente. Para consejos sobre el formato de iconos, consulte la icon guidance.

Los ajustes del botón le permiten añadir una acción directa y controlar su estilo, la colocación del icono y el ancho en móvil. Si activa un estilo de enlace de bloque completo, los enlaces dentro del texto del subheading se eliminan, por lo que esa opción funciona mejor cuando todo el banner debe enviar a los visitantes a un solo destino.

Elija un patrón de interacción principal para el banner. Si todo el banner es clicable, evite superponer enlaces adicionales en competencia o mensajes demasiado complejos.

Medios del primer plano del banner

Añada una imagen de primer plano cuando el banner necesite un logotipo, una insignia, una imagen de producto u otro gráfico que deba situarse encima del fondo. Esto funciona especialmente bien cuando el fondo es más atmosférico y la imagen de primer plano aporta el foco real.

Use el ajuste de ancho de la imagen para mantener el gráfico en proporción con el texto. Un tratamiento de imagen a ancho completo puede funcionar para ilustraciones llamativas, pero los anchos más pequeños suelen ser mejores para logotipos y elementos visuales de apoyo.

Si hace clicables los medios del primer plano, mantenga ese destino coherente con el resto del banner para evitar una mezcla confusa de destinos de enlace.

Colores del banner

Estos ajustes reemplazan las opciones de color del banner más amplias solo para este bloque. Úselos cuando este banner necesite un contraste distinto, una marca más fuerte o más control sobre cómo el texto se sitúa sobre los medios. Consulte documentación de Company XYZ sobre los colores del banner

Los controles de overlay son especialmente útiles para la legibilidad. Aumente el overlay solo lo necesario para dar soporte al texto, ya que los overlays intensos pueden hacer que el banner se vea plano o denso.

Ajustes estándar del bloque

Ajustes de visibilidad

Use los controles de visibilidad para mostrar u ocultar este bloque según el tamaño del dispositivo. Esto es útil cuando desea una disposición de navegación diferente en escritorio y móvil. Consulte documentación de Company XYZ sobre los ajustes de visibilidad

Como la navegación móvil combina los bloques basados en menús en una sola interfaz, compruebe siempre el resultado completo en móvil después de cambiar la visibilidad.

Ajustes del editor

Use el título del editor para renombrar el bloque en la barra lateral del editor. Esto resulta útil cuando tiene más de un bloque relacionado con el menú y desea etiquetas más claras mientras edita.

Notas de uso

1. Mantenga centrados los enlaces de nivel superior. Use etiquetas de menú concisas y añada solo niveles de desplegable que realmente ayuden a los visitantes a encontrar contenido más rápido.
2. Revise el móvil en su conjunto. Dado que los bloques basados en menús se combinan en móvil, valore la experiencia final de navegación móvil en lugar de este bloque por sí solo.
3. Use el banner con moderación. Añada contenido promocional solo cuando favorezca el descubrimiento sin competir con la navegación principal.
4. Priorice la legibilidad. Cuando use fondos de imagen o video, ajuste los colores y los overlays hasta que el texto y las acciones sigan siendo fáciles de leer de un vistazo.
5. Adapte el diseño al espacio del encabezado. Use diseños más anchos o basados en relleno cuando el menú deba equilibrar un encabezado amplio, y diseños más compactos cuando otros elementos del encabezado necesiten prioridad.
6. Compruebe ambos puntos de interrupción. Los controles de escritorio y móvil pueden afectar de manera distinta al diseño, la alineación y la visibilidad de los medios, así que previsualice ambos tamaños antes de publicar.
7. Use las sustituciones de medios con intención. Mantenga alineadas las opciones de fondo de escritorio y móvil con el contenido y el comportamiento de recorte que desee, y espere que los medios independientes se sientan más desconectados del resto del encabezado.