¿Quieres crear un menú de pantalla completa en Elementor ? Si es así, este artículo le mostrará cómo hacerlo. No se necesita ningún complemento para crear un menú de pantalla completa en Elementor. Todo lo que necesitas es Elementor Pro.
La versión profesional deElementor viene con un constructor de ventanas emergentes que te permite crear hermosas ventanas emergentes. Puede usar esta función para crear un menú de pantalla completa en Elementor.
Si no ves de lo que queremos hablar hoy, mira este video.
¿Cómo crear un menú de pantalla completa en Elementor?
Antes de comenzar, asegúrese de tener actualizó su Elementor a la versión pro. Una vez que esté listo, vaya a Plantillas -> Ventanas emergentes. Cree una nueva plantilla emergente haciendo clic en el botón Agregar nuevo.
Asigne un nombre a su plantilla emergente y haga clic en el botón CREAR UN MODELO.
Elementor ofrece docenas de plantillas emergentes para que elijas. En este tutorial, crearemos el modelo desde cero. Así que simplemente cierre la biblioteca de plantillas para abrir el editor de Elementor.
Antes de comenzar a crear la plantilla emergente, primero defina el diseño. Para hacer esto, abra la configuración de la ventana emergente haciendo clic en el ícono de ajustes en la esquina inferior izquierda.
En el bloque Disposición, debajo de la pestaña Parámetros, establezca el ancho en VW de 100 y la altura en Ajustar a la pantalla. También puede establecer efectos de animación de entrada y salida.
Después de definir el diseño, comience a crear la plantilla agregando una nueva sección. Puede agregar los elementos que desee a la plantilla. Para agregar elementos de menú, puede usar el widget Menú de navegación o el widget Lista de iconos.
Ver también: Cómo establecer una posición personalizada para el menú móvil en Elementor
En esta guía, utilizaremos el widget Lista de iconos.
Edite cada elemento de la lista. Puede agregar la etiqueta del elemento de menú en el campo textos y agregue el enlace en el campo gravamen.
Ir a la pestaña Estilo a las listas de estilo. Puede establecer el espacio entre los elementos de la lista y la alineación en el Bloque de lista. Para establecer el tamaño y el color del icono (si usa iconos), puede abrir el bloque de iconos. Para configurar la tipografía (tamaño de fuente, familia de fuentes, estilo de fuente) y el color del texto de los elementos de la lista, puede abrir el Bloque de texto.
Si lo desea, puede cambiar el fondo de la sección. Para personalizar el botón de cierre de la ventana emergente, vuelva a abrir la configuración de la ventana emergente y vaya a la pestaña Estilo. abre el bloque boton cerrar y verá algunas opciones para personalizar el botón de cerrar, como el color de fondo, el tamaño y la posición.
Una vez que haya terminado de crear la plantilla emergente, haga clic en el icono de flecha junto al botón PUBLICAR y seleccione Términos de visualización.
Establezca dónde desea que aparezca la ventana emergente haciendo clic en el botón AGREGAR UNA CONDICIÓN y haga clic en el botón PRÓXIMO para configurar el gatillo.
Activa la opción Al clic y haga clic GUARDAR CERRAR.
Llamada de plantilla emergente
Una vez que la plantilla emergente esté lista, puede llamarla. Como desea crear un menú de pantalla completa, puede crear un encabezado con Elementor o modificar un encabezado existente.
Lea esta publicación para saber más sobre cómo crear un encabezado personalizado con Elementor.
Puede llamar a la plantilla emergente que acaba de crear con cualquier widget de Elementor que tenga la opción de agregar un enlace, como un botón, ícono, cuadro de ícono, texto, imagen, etc.
En este tutorial, utilizamos el widget Icon Box. Seleccione el widget para ingresar al modo de edición. Debajo de la pestaña Contenido En el panel izquierdo, busque el campo en el que agregar el enlace.
Establezca el enlace como dinámico y seleccione Ventana emergente.
Seleccione la plantilla emergente que acaba de crear haciendo clic en el icono de llave inglesa.
Publica/Actualiza tu plantilla de encabezado.
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear un menú de pantalla completa en Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
