Editor de Wix Studio: diseñar menús
6 min de lectura
En el Editor de Wix Studio, puedes personalizar el aspecto de los menús hasta el más mínimo detalle. Accede al panel Inspector profesional para diseñar el menú para cada estado individual (por ejemplo, efecto cursor, seleccionado), ajustando opciones como el color de relleno, el estilo del texto, el sombreado y mucho más.
En este artículo, aprende cómo diseñar cada tipo de menú:
¿Estás usando interacciones de efecto cursor?
Al agregar una interacción de efecto cursor a un menú, esta no aparece en tabletas ni dispositivos móviles. En su lugar, puedes agregar una interacción de clic si quieres que se muestre en todos los breakpoints.
Diseñar menús horizontales
Desde el panel Inspector profesional, puedes diseñar los menús horizontales para tres estados diferentes: Normal, Efecto cursor y Clic, para que los visitantes obtengan una experiencia de navegación más interactiva.
Dependiendo del preajuste elegido, usa las opciones disponibles para que el menú coincida con el aspecto del sitio. Por ejemplo, algunos menús horizontales incluyen botones o separadores que puedes personalizar.
Para diseñar un menú horizontal:
- Selecciona el menú horizontal.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor. - Desplázate hacia abajo hasta la sección Diseño.
- Selecciona el elemento que deseas diseñar en el menú desplegable:
- Contenedor del menú
- Elementos del menú
- Contenedor del submenú
- Elementos del submenú
- (Elementos del menú o submenú) Selecciona el estado correspondiente: Normal, Efecto cursor o Página actual.
- Diseña el menú con las opciones disponibles:
- Relleno de fondo: cambia el color del fondo del menú o del submenú y ajusta la opacidad a tu gusto. Si tu diseño incluye separadores, puedes colorearlos desde aquí.
- Bordes: ajusta el ancho y el color de los bordes del menú.
- Esquinas: haz que las esquinas del menú o submenú sean más redondeadas o más angulosas ajustando el radio.
- Sombreado: agrega sombras al menú y personaliza el ángulo, el color, la distancia y más.
- Texto: ajusta el estilo y el formato de los elementos del menú y del submenú.
- Estilo: ajusta el relleno alrededor de los elementos del menú.
Diseñar menús verticales
Puedes diseñar menús verticales para dos estados diferentes, Normal y Seleccionados, para que los visitantes siempre sepan en qué página están. Cambia el color de relleno del menú, el submenú y la flecha (cuando corresponda) y personaliza otras áreas como el texto, el borde, el sombreado, etc.
Nota:
Los ajustes disponibles dependen del menú específico que hayas seleccionado en el panel Agregar elementos.
Para diseñar un menú vertical:
- Selecciona el menú vertical.
- Haz clic en la flecha Abrir Inspector profesional en la parte superior derecha del Editor.
- Desplázate hacia abajo hasta la sección Diseño.
- Diseña el menú con las opciones disponibles:
- Color y opacidad del relleno: cambia el color del fondo del menú o submenú y ajusta la opacidad a tu gusto. Si tu diseño incluye una flecha, puedes colorearla desde aquí.
- Borde: selecciona un estilo para el borde del menú y ajusta el ancho y el color.
- Sombreado: agrega una sombra al menú y personaliza el ángulo, el color, la distancia y más.
- Texto: ajusta el estilo y el formato de los elementos del menú y del submenú.
- Espaciado: ajusta el espacio vertical entre los elementos del menú, así como el desplazamiento del texto y del submenú (en px).
Consejo:
Puedes fijar el menú vertical a la página para que permanezca flotando a medida que los visitantes se desplazan hacia arriba y hacia abajo.
Diseñar menús de anclas
Elige qué mostrar en el menú de anclas seleccionando un preajuste en el panel Inspector profesional. Puedes mostrar texto, botones o un preajuste que combine los dos. Un preajuste incluso te permite mostrar el nombre del ancla cuando los visitantes se desplazan a esa área en concreto.
Luego, puedes personalizar el diseño para dos estados separados: Normal y Clic, para que los visitantes obtengan una indicación clara del ancla que están viendo en ese momento.
Para diseñar un menú de anclas:
- Selecciona el menú de anclas.
- Haz clic en la flecha Abrir Inspector profesional en la parte superior derecha del Editor.
- Desplázate hacia abajo hasta la sección Diseño.
- Selecciona un preajuste en la parte superior.
- Selecciona el estado correspondiente: Normal o Clic.
- Diseña el menú con las opciones disponibles:
- Color y opacidad del relleno: cambia el color del fondo del menú o submenú y ajusta la opacidad a tu gusto. Si tu diseño incluye una flecha, puedes colorearla desde aquí.
- Texto: ajusta el estilo y el formato de los elementos del menú y del submenú.
- Espaciado: ajusta el espacio vertical entre los elementos del menú, así como el desplazamiento del texto y del submenú (en px).
Diseñar menús tipo hamburguesa
Los menús tipo hamburguesa incluyen varios elementos que puedes diseñar según tus necesidades: el menú en sí, su contenedor y los iconos que lo abren y lo cierran.
Para diseñar un menú de hamburguesas:
- Selecciona el menú de hamburguesas.
- Elige qué área del menú quieres diseñar:
Icono del menú
Contenedor del menú
El menú en sí
El botón "Cerrar menú"
¿Te ha sido útil?
|