Tutorial: cómo crear un menú a pantalla completa con WordPress y Elementor Pro
Si quieres huir de un menú clásico y que ocupe toda la pantalla del móvil u ordenador, te explico cómo he creado yo el mío solamente con WordPress y Elementor Pro (sin otros plugins). Es fácil y rápido.
¿Qué elementos necesitamos para crear nuestro menú a pantalla completa?
- Ventana emergente con el menú
- Plantilla de cabecera con un icono o botón
Tutorial «Cómo crear un menú a pantalla completa con Elementor Pro» en vídeo
En el siguiente vídeo te cuento cómo he creado el menú a pantalla completa de mi web https://liliguinot.com/ sin plugins extras, solo con WordPress y Elementor Pro.
Cómo crear un menú a pantalla completa con Elementor Pro paso a paso
Consigue tu menú a pantalla completa con WordPress y Elementor Pro siguiendo el tutorial paso a paso:
Paso 1. Crear una ventana emergente con el menú
Para crear tu menú en una ventana emergente tendrás que ir a «Plantillas» –> «Mensajes emergentes» –> «Añadir nueva».
Se abrirá el editor de Elementor. Podemos crear el menú de 0 o importar una plantilla. Lo más importante es comprobar que el ancho de la sección es igual a 100 VW. También hay que comprobar que se ve correctamente en todos los despositivos y que, por lo tanto, la ventana emergente es responsive.
Al guardar la ventana emergente, no hay que añadir ninguna condición. Simplemente hay que hacer click en «guardar y cerrar».
Paso 2. Crear una plantilla tipo cabecera con un icono o botón
Para crear una plantilla tipo cabecera tendrás que ir a «Plantillas» –> «Plantillas guardades» –> «Añadir nueva» y seleccionar el tipo «Cabecera».
Igual que con la ventana emergente, se abrirá el editor de Elementor. Podemos crear el menú de 0 o importar una plantilla. Recuerda que hay que comprobar que se ve correctamente en todos los despositivos y que, por lo tanto, la cabecera es responsive. El menú debe contener un botón o icono y hay que enlazarlo a la ventana emergente que hemos creado en el paso 1. Para ello editaremos el icono o botón, seleccionaremos un enlaze dinámico y, concretamente, la ventana emergente que nos interesa.
Fin. Con estos dos sencillos pasos ya podemos disfrutar de nuestro menú a pantalla completa la web. Espero que el tutorial sea de utilidad y, si lo has puesto en práctica, me encantaría que dejaras en enlace a tu web en comentarios.