Al terminar sabrás
- Diseñar el botón en reposo y el botón activo
- Ajustar forma, tamaño y espacio entre botones
- Añadir contorno y sombra
En el panelTu Menú › Diseño del menú › Vitrina › Zonas fijas › Navegación › Opciones de categoría
Cada botón tiene dos caras: Reposo (la categoría en la que no estás) y Activo (la categoría que tu cliente está viendo). La diferencia entre las dos es lo que le dice dónde está parado. Se editan en el grupo Opciones de categoría, dentro de Tipografía, con dos pestañas.
- Las pestañas Reposo y Activo.
- Color de fondo y Color de texto del estado elegido.
- Tamaño, grosor, estilo, espacio entre letras, interlineado y transformación.
Por cada estado (Reposo y Activo)
FuenteLa letra de los botones. Se elige igual que en Branding.
Color de fondoEl fondo del botón.En Reposo suele ir transparente o muy suave; en Activo, tu color primario.
Color de textoEl color de la etiqueta.El contraste entre Reposo y Activo es la pista visual más importante.
TamañoEn píxeles. El campo muestra 14 como punto de partida.
Grosor, Estilo, Esp. letras, Interlineado, TransformaciónLos controles de tipografía de siempre. «— heredar —» usa el valor por defecto.
Forma y espaciado
FormaEl redondeo de las esquinas, de 0 a 32 px. Dos atajos: Recto (esquinas vivas) y Píldora (extremos totalmente redondos).
Tamaño del botónEl relleno interno, de 4 a 24 px: más relleno, botones más grandes.
Espacio entre btnLa separación entre botones, de 0 a 24 px.
ContornoUn interruptor. Encendido muestra un Color y un Grosor de borde para los botones.
Sombra · categoríaUn interruptor. Encendido ofrece Color, H (horizontal), V (vertical), Blur y Op. (opacidad) de la sombra de los botones.
Un botón activo que se note
- Abre Opciones de categoría › Tipografía y elige la pestaña Reposo. Deja el fondo suave y el texto en tu color de texto.
- Pasa a la pestaña Activo. Pon como Color de fondo tu color primario y como Color de texto, uno que contraste.
- En Grosor, elige Negrita para el activo: una pista más.
- Abre Forma y espaciado y pon Píldora si quieres un estilo redondeado.
- Mira el lienzo en móvil: confirma que se leen todos los botones sin cortarse.
Haz esto
- Que Activo se distinga a simple vista de Reposo.
- Tamaños que se toquen cómodo con el dedo: no demasiado pequeños.
- Pocos efectos: o contorno, o sombra, rara vez ambos.
Evita esto
- Activo y Reposo casi iguales: el cliente no sabe dónde está.
- Texto de Activo del mismo color que su fondo.
- Una sombra muy marcada en la barra: distrae del menú.
OpcionalPon a prueba lo que aprendiste2 ejercicios
¿Algo no coincide con lo que ves en tu panel? Cuéntanos.