Cómo crear mega menús ricamente estructurados y bellamente diseñados con Elementor

Super Menu es una herramienta que le ofrece flexibilidad para crear menús elegantes y potentes, perfectos para añadir más opciones de navegación y elementos visuales a su sitio web. Si buscas añadir creatividad y personalidad al sistema de navegación de tu sitio web, los mega menús son una excelente opción. En este artículo, repasaremos cómo crear un menú grande, ricamente estructurado y bellamente diseñado utilizando el mega menú de elementor. Haremos que elPanaderíaLa plantilla de sitio web se utiliza como ejemplo para demostrar cómo crear un mega menú en la cabecera de un sitio web.

I. Funciones experimentales necesarias para activar el mega menú

Antes de empezar a crear un mega menú, debe asegurarse de que las siguientes características experimentales están activadas:

1. Contenedores flexiblesPermite un diseño más flexible.
2. elemento anidado: Se pueden anidar varios elementos dentro de un contenedor.
3. menúFunción diseñada para crear mega menús.

tome nota deCuando se activen estas funciones, los widgets de menú de navegación existentes se sustituirán por los nuevos widgets de menú y widgets de menú de WordPress. Los nuevos widgets son más potentes y admiten más opciones de personalización.

II. Creación de un supermenú

Los supermenús suelen colocarse en la cabecera o en el pie de página de un sitio web, pero pueden colocarse en otras ubicaciones según sea necesario. En este tutorial, tomaremos como ejemplo la cabecera y explicaremos en detalle cómo crear un mega menú.

1. Crear una cabecera utilizando el constructor de temas

En primer lugar, cree una nueva página:

Utilice el constructor de temas para crear un nuevo título de cabecera.

El creador de temas ofrece una gran cantidad de opciones de personalización que pueden ayudarte a diseñar fácilmente una cabecera que se adapte al estilo de tu sitio web.

2. Añadir widgets de menú

Una vez creado el contenedor en la cabecera, arrastra y suelta el widget de menú en ese contenedor.

También es posible añadir un nuevo contenedor específico para el menú según sea necesario. Esto garantiza que el menú tenga espacio suficiente para mostrarse en la cabecera y no desentone con otros elementos.

3. Creación de elementos de menú de nivel superior

Empezamos con Panadería Plantilla de sitio web por ejemplo, el menú contendrá tres elementos de menú de nivel superior:Inicio, Nuestro pan, Nuestra historia.

Los pasos son los siguientes:

• En la pestaña Contenido del menú, haga clic en el elemento #1.

• Escriba "Inicio" en el cuadro de texto Título.

4. Añadir enlaces a los elementos del menú

Cada elemento del menú requiere un enlace a la página correspondiente. Al añadir un enlace a "Inicio", puede introducir manualmente la URL de la página de inicio, pero es más recomendableUso de enlaces dinámicospara que cuando cambie la URL de la página, el enlace del menú también seactualización automática.

Vinculación del menú a la página de inicio.Los pasos son los siguientes:

• Haga clic en el icono de etiqueta dinámica situado junto al cuadro de texto del título.
• Seleccione Sitio > URL interna.

• Haga clic en "Enlaces internos".

• En el menú desplegable Tipo, seleccione Contenido.

• En el cuadro Buscar y seleccionar, introduzca el nombre de la página a la que desea enlazar (por ejemplo, "Inicio"), introduzca una búsqueda y selecciónela.

Repita los pasos anteriores para las páginas "Nuestro pan" y "Nuestras historias". De este modo, los elementos del menú quedarán vinculados a las páginas respectivas.

5. Visualización y ajuste de la estructura de menús

Tras completar la creación del elemento de menú, la estructura de la cabecera debería tener un aspecto similar al siguiente:

• Inicio
• Nuestro pan
• Nuestra historia

En este punto, puede previsualizar el aspecto del menú y ajustar la posición y el orden de los elementos del menú según sea necesario para asegurarse de que el menú se muestra de forma ordenada y orgánica en la página.

III. Añadir elementos de diseño al mega menú

Más que una simple herramienta de navegación, un mega menú le permite añadir una variedad de elementos de diseño para hacer el menú más vivo e interactivo. En esta sección, vamos a cubrir cómo añadir elementos de diseño a los elementos de menú, tales comoImagen o iconoEl menú está diseñado para mejorar su aspecto visual.

1. Añadir contenido desplegable a los elementos de menú

Seleccione una opción de menú en la pestaña "Contenido", por ejemplo "Inicio".

Haga clic en el conmutador desplegable de contenido.

Este conmutador convierte un elemento de menú en un supermenú, lo que le permite añadir contenido enriquecido al elemento de menú, como imágenes, texto, botones, etc.

2. Añadir widgets de imagen

Cuando el área de contenido desplegable está abierta, puede arrastrar widgets de imagen a ella.

Cuando el usuario pase el ratón por encima de este elemento del menú, se mostrará la imagen que usted haya configurado.

Los pasos son los siguientes:

• Arrastre el widget de imagen en el área de contenido.
• Seleccione la imagen que aparecerá cuando el usuario pase el ratón por encima de un elemento del menú.
• Cierre el área de contenido y guarde la configuración.

Esto se puede repetir para otros elementos del menú, añadiendo diferentes imágenes u otros elementos de diseño a cada elemento del menú. Esto hará que su mega menú no sólo sea potente, sino también visualmente atractivo.

3. Previsualizaciones y ajustes

En el modo de edición, estas imágenes pueden no ser visibles en la vida real, por lo que se necesita una página de vista previa para ver cómo se muestra realmente el mega menú. La vista previa garantiza que el diseño de cada elemento del menú es el esperado y que todo el contenido desplegable se muestra correctamente.

IV. Resumen

Los mega menús son una gran herramienta para añadir creatividad y navegación personalizada a tu sitio web. Con pasos detallados y sugerencias de diseño, es fácil utilizar Elementor para crear menús grandes, estructurados y visualmente atractivos que proporcionan a los visitantes una mejor experiencia de navegación. Para aprovechar mejor estos efectos y desbloquear funciones más avanzadas, se recomienda utilizar la aplicaciónElementor ProOfrece más opciones de personalización y potentes herramientas para ayudarle a crear mega menús de calidad profesional.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres