Editor de Wix Studio: diseñar los menús desplegables en un menú
8 min de lectura
Después de agregar y configurar un menú desplegable, puedes adaptar su diseño para que se vea tal y como quieras. Cambia el aspecto y la alineación tanto del contenedor como del menú para crear un aspecto personalizado para los clientes y reforzar su imagen de marca.
Antes de comenzar:
Los menús desplegables solo se pueden agregar desde nuevos menús en el Editor de Wix Studio. Si tienes la experiencia anterior de los menús, puedes crear submenús y agregar megamenús.
En este artículo, obtén más información sobre lo siguiente:
Ajustar el estilo de los menús desplegables
Según el tipo de menú (barra de navegación, menú de hamburguesa, etc.), puedes usar el panel Estilo para establecer qué se muestra en el menú o el ancho del menú desplegable. También puedes adaptar el espaciado y la alineación para que se adapten al aspecto del menú principal.
Para ajustar el estilo de los menús desplegables:
- Ve al editor.
- Haz clic en el menú o en el botón de menú.
- (Menús de hamburguesa) Haz clic en Editar menú para abrir el modo de edición tipo hamburguesa y selecciona el menú.
- Haz clic en el icono Estilo
.
- Selecciona la pestaña Menú desplegable.
- Usa las opciones para ajustar el estilo:
- Ancho del contenedor: elige el ancho del contenedor del menú desplegable y ajústalo como quieras:
- Estirar: el contenedor desplegable ocupa el ancho total de la pantalla. Puedes ajustar el ancho configurando los márgenes (en px).
- Ajustar al menú: el menú desplegable tiene el mismo ancho que el menú principal que lo aloja.
- Adaptar contenido: el contenedor "adapta" los ítems del menú desplegable. Puedes elegir si deseas alinearlo a la izquierda, al centro o a la derecha del menú principal.
- Visualización de los ítems: selecciona si los elementos del menú desplegable se contraen o están desplegados para que se vean siempre.
- Espacio sobre el contenedor: agranda o reduce el espacio entre el menú desplegable y el menú principal.
- Número de columnas: elige cuántas columnas se muestran en el menú desplegable.
- Espaciado: ajusta el espaciado de los ítems en el menú desplegable. Si has agregado subítems, también puedes cambiar el espacio entre ellos y sobre ellos.
- Espacio entre ítems: ingresa el espacio horizontal y vertical entre los ítems del menú desplegable.
- Espacio entre los subítems: haz que el espacio entre los subítems sea más pequeño o más grande.
- Espacio sobre los subítems: elige el espacio sobre los subítems en el menú.
- Relleno: adapta el espacio alrededor de cada parte del menú desplegable para que se adapte a tus necesidades:
- Relleno de ítems: haz que el espacio alrededor de los ítems del menú desplegable sea más pequeño o más grande.
- Relleno de subítems: ajusta el espacio alrededor de los subítems en el menú desplegable.
- Relleno del contenedor: haz que el espacio alrededor del contenedor desplegable sea tan grande o pequeño como necesites.
- Alineación: alinea los ítems y los subítems del menú desplegable a la izquierda, a la derecha o al centro del contenedor.
- Ancho del contenedor: elige el ancho del contenedor del menú desplegable y ajústalo como quieras:
Nota:
Las opciones que se muestran dependen del tipo de menú que elijas (barra de navegación o hamburguesa) y de la orientación (horizontal o vertical).
Personalizar el diseño de los menús desplegables
Puedes diseñar cada parte de un menú desplegable para que complemente el aspecto del menú principal, desde los contenedores hasta los ítems y los subítems.
Para personalizar el diseño de los menús desplegables:
- Ve al editor.
- Haz clic en el menú o en el botón de menú.
- (Menús de hamburguesa) Haz clic en Editar menú para abrir el modo de edición tipo hamburguesa y selecciona el menú.
- 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:
- Contenedor desplegable
- Contenedor del menú desplegable
- Ítems del menú desplegable
- Subítems del menú desplegable
- (Ítems/subítems del menú desplegable) Selecciona el estado correspondiente: Normal, Efecto cursor o Seleccionados.
- Diseña el menú desplegable con las opciones disponibles:
- Relleno de fondo: cambia el color del fondo del menú desplegable o agrega un degradado llamativo. Puedes ajustar la opacidad y agregar varias capas para que se adapte a tus necesidades de diseño.
- Bordes: ajusta el ancho y el color de los bordes del contenedor desplegable.
- Esquinas: haz que las esquinas del menú desplegable sean más redondeadas o más rectangulares ajustando el radio.
- Texto: ajusta el estilo y el formato de los elementos y de los subelementos del menú desplegable.
- Sombra: agrega sombras al menú desplegable y personaliza el ángulo, el color, la distancia y más.
¿Cuál es la diferencia entre los contenedores?
- Contenedor desplegable: esto muestra todos los elementos y menús que hayas agregado al ítem del menú desplegable.
- Contenedor del menú desplegable: esto muestra solo los ítems del menú desplegable. Está anidado dentro del contenedor desplegable.
Diseñar los menús desplegables de forma individual
Los cambios que realices en el diseño y en el estilo de un menú desplegable se aplican a todos los menús desplegables del menú. Sin embargo, puedes "separar" los menús desplegables en los menús de barra de navegación horizontal para personalizarlos por separado.
Nota:
Esta opción no está disponible en los menús de hamburguesa ni en los menús de la barra de navegación vertical.
Para separar y personalizar menús desplegables individuales:
- Haz clic en el menú horizontal en el editor.
- Haz clic en Administrar menú.
- Pasa el cursor sobre el menú desplegable correspondiente y haz clic en Editar.
- Elige cómo quieres diseñar el menú desplegable:
Ajustar el estilo del contenedor
Ajustar el estilo del menú desplegable
Personalizar el diseño del contenedor
Personalizar el diseño del menú
Nota:
Las palancas Editar solo este menú desplegable en el Inspector profesional y en el panel Estilo están conectadas entre sí, lo que significa que habilitar o deshabilitar una palanca habilita o deshabilita automáticamente la otra.