Cómo crear un menú adaptable en Elementor utilizando ventanas emergentes

Off Canvas Menu

¿Cómo puede un solo clic abrir un elegante menú emergente? Sigue esta guía y veerás qué fácil es con Elementor Popup Builder.

https://youtu.be/_sJRHSmIpp8

Una de las grandes ventajas de nuestro nuevo Popup Builder es que puedes usar cualquier widget de Elementor que te guste dentro de la ventana emergente y crear funcionalidades únicas. Esto es exactamente lo que demostrará este tutorial: ¡crear un menú que active ventanas emergentes!

https://www.webdedicado.com/wp-content/uploads/2019/02/tips_tricks-popup-menu-1.mp4

Aquí puedes ver el mega menú emergente inspirado en Apple que crearemos en este tutorial:

El menú se activa cuando el usuario hace clic en el ícono de la hamburguesa. Este tutorial es solo la punta del iceberg en términos de lo que se puede lograr siguiendo los mismos pasos: menús con formularios, imágenes, controles deslizantes y más.

Muy bien, vamos a ver cómo se hace la magia.

Paso 1: Agregar una plantilla emergente

En el Menú de WordPress, haz clic en Plantillas> Agregar nuevo y selecciona Ventana emergente.
Dale un nombre y haz clic en Crear plantilla.
Luego obtendrás la ventana de nuestra biblioteca (con más de 100 ventanas emergentes para elegir), pero ciérrala para que puedas crearla desde cero.

Paso 2: Ajustar la configuración

En la Configuración de ventanas emergentes, cambia el ancho de la ventana emergente a la que necesites.
Cambia Overlay a Hide, y en Entrance Animation elige Fade In. Establece su duración en 2 segundos.

En Estilo puedes diseñar la configuración de Box Shadow.
En el botón Cerrar, establece la posición vertical y cambia el color y el tamaño.

En la pestaña Avanzado, elige Evitar el cierre en la superposición. Esto establece dónde puedes cerrar la ventana emergente, ya sea en cualquier parte de la pantalla o solo en la X o el botón.

Paso 3: Diseñar la columna izquierda

Añade una sección con 2 columnas. Bajo Columns Gap, elige No Gap.

Dentro de la columna de la izquierda, arrastra un widget de Sección interna y agregue algo de relleno, unas 10 o 20 pixeles o a tu gusto.

Añade un widget de Título y ajusta su tipografía y tamaño.

Esta vez comienza con el móvil, para que luego puedas duplicarlo, y ya estará todo listo.

Duplica el título.

Nota: Aquí no estamos usando el menú de navegación, solo el título para crear el menú.
Agregue un widget de botón y edita el texto y estilo del botón, color, borde, etc.

A continuación, agrega un margen en la parte superior, también en el móvil. Ajustar el tamaño del texto, el relleno inferior, etc.

Ahora, agregue otra sección interna y agrega un poco de relleno. Luego, dentro de la sección Interior, agrega y diseña los botones de compartir – Alineación, tamaño, color personalizado.

Paso 4: Diseña la columna derecha

Diseñemos el otro lado:

En la columna de la derecha, el color se cambia, pero solo es visible una vez que se agrega el contenido.
Agrega una sección interna y ajusta el relleno y el margen.
Arrastra en un widget de Título y diseñe.
Ahora, agrega un widget de formulario para que los usuarios se suscriban al boletín.
Solo necesitamos su correo electrónico, así que eliminemos todos los demás campos y ajustemos el tamaño, el icono, el color, etc.

Paso 5: Visualización de productos

Para mostrar 3 productos, agregue otro widget de Sección interna, agrega relleno, pero aquí, aplica Ocultar para móvil para que sea visible solo en el escritorio y la tableta.

Aquí, un margen negativo desplazará su columna hacia la izquierda, haciendo que se destaque más.

Copia el título y pégalo. Cambia el color de la columna a blanco, radio de borde y sombra de cuadro, también al desplazar. Arrastra una imagen y ahí vas.

Ahora, vuelve al texto y cambia su peso, margen y duplícalo.

Edita el texto. Luego, duplica la columna tres veces y cambia cada margen individual, para crear un espacio entre las columnas.

Agrega una foto. Fíjate que puedes usar video, gifs o imágenes regulares. Pule tu texto y establece los márgenes. Utiliza el modo de vista previa para ver cómo se ve.

Paso 6: Editar en el móvil

Ahora, diseña todos tus artículos para móviles, ajusta el relleno.

En Configuración, en Ancho, aumente el tamaño VH a 100, para que la ventana emergente se ajuste a toda la pantalla.

Paso 7: Establecer las condiciones

Haz clic en Publicar y se abrirá la ventana de condiciones.

Esta vez, no se necesitan cambios en las Condiciones, los Desencadenadores y las Reglas avanzadas: esto solo se aplica a las ventanas emergentes que se activan mediante botones. A continuación, guardar y cerrar.

Paso 8: Definir un activador manual

Ahora, definamos cómo abrir tu ventana emergente yendo al Encabezado de tu sitio.

Presiona el botón Menú y en Contenido> Enlace> Dinámico elija Popup.
Haz clic nuevamente en la ventana emergente y, bajo acción, elige Alternar ventana emergente para que el botón abra y cierre la ventana emergente. En Popup, elige tu popup y guarda.

Puedes probarlo en tu página en vivo haciendo clic en el botón para abrir y cerrar la ventana emergente, ¡y listo!

Paso 9: Añade la animación de entrada

Aquí tienes la oportunidad de aprender otro truco: agrega un poco de animación de entrada para agregar algo de sabor.

Copia estos ajustes para pegar el estilo de cada uno.

Vuelve a la página en vivo. Haz clic en el menú del botón.

Resumen

Como lo demuestra este tutorial, puedes abrir ventanas emergentes desde cualquier tipo de botón en tu página. Esta opción te permite ser creativo y explorar nuevas aplicaciones emergentes. ¡Adelante, dale una vuelta!

Leave a Reply