Cómo crear un menú superpuesto a pantalla completa en Elementor

Los menús superpuestos a pantalla completa son ideales para sitios más pequeños con menos contenido de página, o pueden utilizarse para ampliar la navegación ocultando y mostrando más enlaces. Utilice la función Widget de menú avanzado PowerPackEncontrará más información al respecto en el Elementor Cree fácilmente menús superpuestos fuera del lienzo y a pantalla completa sin escribir ningún código.

Paso 1: Añadir el widget de menú avanzado de Elementor

Antes de añadir el widget, decide primero dónde quieres que aparezca. Si solo quieres que el menú superpuesto aparezca en una única página (como una página de inicio de sesión), puedes añadir el widget directamente a esa página para que el menú solo aparezca en ella.

Si quieres que el menú de anulación aparezca en todo el sitio o en todas las páginas, puedes añadir el widget a una cabecera personalizada creada con Elementor para que el menú aparezca en todos los lugares en los que se encuentre la cabecera, normalmente en todo el sitio.

Solo tienes que abrir la página o la cabecera en el editor de Elementor y arrastrar y soltar el widget de menú avanzado de PowerPack en su lugar.

Paso 2: Configurar el menú superpuesto a pantalla completa

A continuación, seleccione el menú que desea mostrar en la lista de menús de WordPress.

A continuación, desplácese hacia abajo por las opciones hasta encontrar la sección "Respuesta". Seleccione "de principio a fin" como punto de interrupción y cambie el tipo de menú a "Pantalla completa".

También puede cambiar la alineación de los botones, el estilo de los botones, etc. desde la configuración dada. Una vez realizados los cambios en la pestaña Contenido, el menú a pantalla completa tendrá el siguiente aspecto:

Paso 3: Personalizar el estilo del menú superpuesto a pantalla completa

menú principal: En esta sección puede definir los estilos de los elementos del menú principal, como el color del texto, la tipografía, los márgenes interiores, etc.

menú desplegableAquí puede ajustar el estilo de los elementos del menú desplegable, incluyendo la tipografía, el color del texto, el color de fondo, el borde, el radio del borde, el margen interior y el separador.

botón de cambioMenú superpuesto a pantalla completa: el menú superpuesto a pantalla completa se activa al pulsar un icono o un botón; puede personalizarlo en esta sección. Puede cambiar el color, el fondo, el tamaño, el grosor, el borde y las etiquetas (si las etiquetas están activadas en la pestaña de contenido). Estos ajustes sólo se aplican a los botones de alternancia.

receptivoAquí puedes ajustar la apariencia del menú en diferentes dispositivos. Antes de empezar a ajustar, haz clic en el botón de alternancia para activar el menú y poder previsualizar los cambios realizados en tiempo real.

alineación: Cambia la alineación del menú al Centro.
Colores de fondo y de los enlaces: Cambia el color de fondo del menú y el color del enlace (elemento del menú).
efecto hoverPara los submenús, también puede personalizar el color de los márgenes interiores, etc. Para los submenús, también puede personalizar el color, los márgenes interiores, etc.
marco: Cambia fácilmente el color del borde, su anchura, etc.
Cerrar iconoPermite ajustar el color y el tamaño del icono de cierre.

Resumen:

Los menús superpuestos a pantalla completa son una solución de navegación adecuada para sitios web pequeños para ocultar y mostrar más enlaces y ampliar la funcionalidad de navegación. Con PowerPack Advanced Menu Widget y Elementor, puedes crear menús superpuestos fuera del lienzo y a pantalla completa sin escribir código. En unos sencillos pasos, puedes decidir dónde colocar los menús, seleccionar qué menús mostrar y establecer cómo responden y qué estilo tienen. Las opciones de personalización incluyen elementos de menú principal, menús desplegables, botones de alternancia y ajustes de respuesta para garantizar que los menús se muestren bien en distintos dispositivos. Esta herramienta flexible y potente le permite ofrecer una experiencia de navegación profesional y atractiva para su sitio web.

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