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.
Ajustar el estilo de los menús desplegables
Según el tipo de menú (barra de navegación, tipo hamburguesa, etc.), se muestran diferentes ajustes en el panel Estilo. También puedes ajustar 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 la barra de menú o en el icono del menú tipo hamburguesa.
- (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:
Elige el ancho del contenedor 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 y número de columnas
- Visualización de los ítems: selecciona si los elementos del menú desplegable se contraen o están desplegados para que se vean siempre.
- Número de columnas: elige cuántas columnas se muestran en el menú desplegable.
- Espacio sobre el contenedor: agranda o reduce el espacio entre el menú desplegable y el menú principal.
- 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, dirección y alineación
- 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.
- Dirección: elige si los ítems se leen de izquierda a derecha o de derecha a izquierda.
- Alineación: alinea los ítems y los subítems del menú desplegable a la izquierda, a la derecha o al centro del contenedor.
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. Elige el texto y el relleno del fondo para reforzar la marca de tus clientes y agrega bordes para que los menús desplegables se destaquen en la página.
También puedes personalizar el diseño de los ítems y de los subítems para estados separados (por ejemplo, efecto cursor, seleccionados).
Para personalizar el diseño de los menús desplegables:
- Ve al editor.
- Haz clic en la barra de menú o en el icono del menú tipo hamburguesa.
- (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 Abrir Inspector profesional
en la parte superior derecha del editor.
- 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.
Los cambios que realices en un menú desplegable se aplican a todos los menús desplegables de ese menú. ¿Quieres crear algo más único? Puedes "separar" los menús desplegables que hayas agregado a los menús de navegación horizontales para tener un control total del diseño.
Para separar y personalizar menús desplegables individuales en los menús horizontales:
- 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
Ajusta el ancho del contenedor que muestra los ítems y los elementos que has agregado al menú desplegable. También puedes establecer el espacio entre el contenedor y el menú principal.
- Selecciona el contenedor desplegable.
- Haz clic en el icono Estilo .
- Haz clic en la palanca Editar solo este menú desplegable para habilitarla.
- Haz los cambios que quieras:
- Ancho del contenedor: selecciona una opción de la lista y ajústala como quieras:
- Estirar: el contenedor desplegable ocupa el ancho total de la pantalla. Puedes disminuir su ancho configurando los márgenes (en px).
- Ajustar al menú: el contenedor desplegable tiene el mismo ancho que el menú principal.
- 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.
- Personalizado: establece el ancho del contenedor moviendo las manillas de arrastre a cada lado. Puedes elegir si deseas alinearlo a la izquierda, al centro o a la derecha del menú principal.
- Espacio sobre el contenedor: agranda o reduce el espacio entre el contenedor desplegable y el menú principal.
Ajustar el estilo del menú desplegable
Este es el menú que muestra los ítems que has agregado al menú desplegable. Puedes establecer cuántas columnas se muestran, ajustar el espacio entre el menú y alrededor de él, y elegir la dirección y la alineación.
- Selecciona el menú desplegable en el contenedor.
- Haz clic en el icono Estilo .
- Haz clic en la palanca Editar solo este menú desplegable para habilitarla.
- Haz los cambios que quieras:
- 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.
- Dirección: cambia la dirección del texto del ítem (de izquierda a derecha o de derecha a izquierda).
- Alineación: alinea los ítems y los subítems del menú desplegable a la izquierda, a la derecha o al centro del contenedor.
Personalizar el diseño del contenedor
Personaliza el relleno del fondo y el radio del contenedor que muestra los ítems y los elementos que has agregado al menú desplegable. También puedes agregar y ajustar los bordes y las sombras para que se destaque en la página.
- Selecciona el contenedor desplegable.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta la sección Diseño.
- Haz clic en la palanca Editar solo este menú desplegable para habilitarla.
- Haz los cambios que quieras:
- Relleno de fondo: cambia el color del contenedor 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 contenedor desplegable sean más redondeadas o más rectangulares ajustando el radio.
- Sombra: agrega sombras al contenedor desplegable y personaliza el ángulo, el color, la distancia y más.
Personalizar el diseño del menú
Personaliza el menú que muestra los ítems del menú desplegable. Puedes ajustar el diseño del contenedor y ajustar los ítems y subítems para cada estado para crear un aspecto verdaderamente personalizado.
- Selecciona el menú desplegable en el contenedor.
- Haz clic en el icono Abrir Inspector profesional en la parte superior derecha del editor.
- Desplázate hacia abajo hasta la sección Diseño.
- Haz clic en la palanca Editar solo este menú desplegable para habilitarla.
- Selecciona el elemento que deseas diseñar:
- Ítems del menú desplegable
- Contenedor del menú desplegable
- Subítems del menú desplegable
- (Ítems/subítems del menú desplegable) Selecciona el estado correspondiente: Normal, Efecto cursoro Seleccionados.
- Haz los cambios que quieras:
- Relleno de fondo: cambia el color del fondo o agrega un degradado llamativo. Puedes ajustar la opacidad y agregar varias capas para que se adapte a tus necesidades de diseño.
- Texto: ajusta el estilo y el formato de los elementos y de los subelementos del menú desplegable.
- Bordes: agrega y ajusta los bordes alrededor del contenedor del menú.
- Esquinas: haz que las esquinas del contenedor del menú sean más redondeadas o más rectangulares ajustando el radio.
- Sombra: agrega sombras al contenedor del menú y personaliza el ángulo, el color, la distancia y más.
