Al terminar sabrás
- Dar color, altura, borde y sombra a la barra
- Poner una imagen de fondo en la barra
- Diseñar las subcategorías
En el panelTu Menú › Diseño del menú › Vitrina › Zonas fijas › Navegación › Opciones de fondo de la barra
El fondo de la barra
- Color de la barra y Ícono de búsqueda.
- Altura de la barra y Grosor del borde.
- Interruptores Sombra de la barra e Imagen de fondo.
Color de la barraEl fondo de la barra entera, detrás de los botones.Una barra del mismo tono que el fondo se ve integrada; una distinta se ve como una banda.
Ícono de búsquedaEl color de la lupa.
Altura de la barraEspacio extra arriba y abajo de los botones, de 0 a 40 px. Es por dispositivo.
Grosor del bordeDe 0 a 16 px. Con un valor mayor que cero aparece su Color y su Grosor. En cero dice «(sin)».
Sombra de la barraUn interruptor. Encendido ofrece Color de sombra, H, V, Blur y Opacidad.
Imagen de fondoUn interruptor que pide una imagen (JPG, PNG, GIF o WEBP, de hasta 4 MB). Con la imagen cargada puedes ajustar su opacidad, cómo se ajusta, su posición y un desplazamiento automático.Una textura sutil queda elegante; una foto cargada compite con las categorías.
Subcategorías
Si tu menú tiene subcategorías (por ejemplo, «Bebidas» con «Cafés», «Jugos» y «Cervezas»), la barra muestra filas adicionales. El grupo Opciones de subcategoría («Aplica a las filas 2 y 3 de la barra») las diseña con el mismo criterio que las categorías.
Tipografía de subcategoríaReposo y Activo, igual que los botones de categoría.
Panel de subcategorías › Color del panelEl fondo de la zona donde se muestran las subcategorías.
Panel de subcategorías › Altura del panelEspacio extra del panel, de 0 a 40 px.
Sombra · botones de subcategoríaUn interruptor con Color, H, V, Blur y Op.
Una barra que se integra con tu menú
- Pon como Color de la barra el mismo tono de fondo de tu menú.
- Sube la Altura de la barra unos 6 a 10 px para dar aire.
- Enciende un Grosor del borde de 1 px con un color suave para marcar la separación.
- Revisa en el lienzo que la lupa se vea: ajusta Ícono de búsqueda si hace falta.
OpcionalPon a prueba lo que aprendiste2 ejercicios
¿Algo no coincide con lo que ves en tu panel? Cuéntanos.