Puedes hacer que el menú de tu sitio web tenga un aspecto atractivo y extraordinario. Personaliza la apariencia del submenú desplegable a tu gusto, configurando diferentes opciones mientras utilizas el tema Astra.
¿Cuáles son Submenús de WordPress?
Este documento muestra cómo usar y personalizar los sub-menús y menús desplegables de WordPress fácilmente. Un submenú o menú desplegable aparece cuando tienes algunas páginas bajo el diseño del elemento del menú principal y pasas el ratón por encima de este elemento de la página principal en el menú de navegación.
Asegúrese de haber creado su "menú principal" para tener un mejor punto de partida.
¿Cómo añadir un menú desplegable simple?
Para añadir un menú desplegable simple, sólo tienes que ir a tu WordPress Cuadro de mandos > Apariencia > Menús > Cree el menú y simplemente arrastre/suelte los elementos del menú bajo la página del menú de navegación principal, como se muestra en la imagen adjunta a continuación.
Puede crear un nuevo menú o añadir las páginas al menú existente seleccionándolas y haciendo clic en "Añadir al menú".
"Página de muestra" se ha añadido a su menú principal. Simplemente arrástrelo y suéltelo debajo de cualquier elemento de menú existente para crear un submenú.
Asegúrese de hacer clic en el botón 'Guardar menú"para guardar los cambios. Esta página de muestra aparecerá ahora como un elemento secundario dentro de "Todo".
Puede añadir más elementos en este submenú seleccionando y añadiendo más páginas.
Personalizar el submenú
Si utilizas el tema Astra y tu navegación tiene varios niveles, puedes buscar una forma de modificar la apariencia de los submenús, los elementos del menú desplegable.
En esta sección encontrarás una guía detallada sobre cómo personalizar los submenús. Obtén más información sobre cómo cambiar la anchura, la posición e incluso cómo añadir el efecto hover: todo está aquí.
Para personalizar el submenú, vaya a Apariencia > Personalice > Creador de cabeceras > Menú principal > Diseño > Submenú Contenedor Opciones.
En las opciones de estilo, puede ver varias opciones relacionadas con el tamaño del divisor, el desplazamiento superior, la animación del submenú, el borde, el color del submenú y muchas más.
Analicemos aquí todas las opciones posibles.
Tamaño y color del separador
Puede añadir el divisor entre todos los elementos del submenú utilizando esta opción de divisor. Además, puede establecer el ancho y el color para el divisor aquí.
Compensación superior
Aquí puede establecer el valor de desplazamiento superior que desee. Esta es la distancia entre el elemento principal y el submenú.
Animación del submenú
Aplica animación de entrada al contenedor del submenú cuando el usuario pasa el ratón por encima del menú padre. Los estilos de animación son Deslizar hacia abajo, Deslizar hacia arriba y Fundido.
Anchura y color de los bordes
Establezca aquí la anchura y el color del borde de los elementos del submenú.
Caja Sombra
Utilice la opción para establecer la sombra de caja a los elementos del submenú. Esta opción está disponible con nuestro Plugin Astra Pro.
Color del menú
Una vez que tengas el diseño del menú a tu gusto, es hora de personalizarlo con ajustes de color. Utilice la opción Texto/Color del enlace para personalizar el color de los enlaces del menú en estado normal, al pasar el ratón por encima y cuando se trata de la página activa. Utilice los iconos Hover y Activo para editar los diferentes estados.
Menú Fuente
Puede editar el color del texto y la tipografía de los elementos del menú.
Color del texto - Elija el color de su texto.
Tipografía:
Familia - Elija su familia de fuentes
Tamaño - Elija un tamaño para su fuente (px, em)
Peso - Elija el peso de la fuente
Transformar - Elija las propiedades de transformación de la fuente
Altura de línea: utilice el control deslizante para ajustar la altura de línea.
Espaciado y margen del menú
El relleno para sus menús se refiere al espacio fuera de su menú. Utiliza los controles de relleno para aumentar la separación entre tu menú y otros elementos de la cabecera o el pie de página.
Submenú Color
Utilice la opción Texto/Color del enlace para personalizar el color de los enlaces del submenú en estado normal, al pasar el ratón por encima y cuando se trata de la página activa. Utilice los iconos Hover y Activo para editar los diferentes estados.
Nota: Esta opción está disponible cuando se utiliza el plugin Astra Pro.
Haga clic en el botón "Publicar" para aplicar estos cambios.
Nota: La información mencionada en este documento es para la cabecera normal. Si ha activado la cabecera transparente, deberá configurar el submenú desde la cabecera transparente.
Para ello, vaya a Apariencia > Personalizar > Creador de encabezados >. Cabecera transparente > Diseño y hacer la personalización aquí.
Si necesita ayuda, póngase en contacto con nuestro equipo de asistencia.
