Cómo crear un menú emergente receptivo

Cree un menú emergente receptivo que se inicie desde un botón de menú en el encabezado de su sitio.

Aprenderá a crear un menú emergente que:

• Es atractivo, funcional y hermoso.
• Responde en el móvil

Diseñe la ventana emergente y su contenido

1. Ir Plantillas> Ventanas emergentes> Agregar nuevo y dale un nombre a tu nueva ventana emergente. (Un método alternativo es presionar CMD + E o CTRL + E abrir Descubridor, busque Popup, elija Agregar nueva ventana emergentey darle un nombre.)
2. Elija una plantilla emergente prediseñada o cierre la superposición de la biblioteca y diseñe su ventana emergente desde cero. Para este ejemplo, diseñaremos el nuestro, pero también puede encontrar esta plantilla en su biblioteca de plantillas de elementos emergentes de Elementor Pro. Simplemente busque «menú» en la biblioteca de Popups para encontrarlo.

Ventana emergente> Ficha Diseño

1. Anchura: Establecer en 85vw
2. Cubrir: Esconder
3. Animación de entrada: Fundirse
4. Duración de la animación: 2 segundos

Ventana emergente> pestaña Estilo

Surgir

Sombra de la caja: Configúrelos como desee.

Botón Cerrar

1. Posición vertical: 4
2. Color: Establece el color en # 878787
3. Talla: 35

Ventana emergente> Pestaña avanzada

Evitar el cierre por superposición: Si

Ahora, agregue una sección con dos columnas.

Diseña la primera columna

Sección> Diseño

1. Ancho del contenido: Ancho completo
2. Espacio entre columnas: Ningún espacio

Arrastre un widget de sección interior a la primera columna.

Debajo Sección > Diseño > Espacio entre columnas, establecer Ningún espacio.

Debajo Sección > Avanzado, establecer Relleno de 70 px alrededor.

Sección> Avanzado

Relleno: 70 para arriba, abajo, izquierda y derecha.

Arrastre un widget de Encabezado a la primera columna.

Debajo Estilo > Tipografía, establezca el tamaño en 60 y menos Peso establecido en 100.

Propina: Ahora es un buen momento para ajustar los títulos ‘ Configuración móvil.

Crear el resto de los elementos del menú

1. Haga clic con el botón derecho en el control del widget de título y elija Duplicar.
2. Repita la duplicación para todos los elementos del menú que necesite.
3. Edite el texto del título para cada widget de encabezado para etiquetar correctamente cada elemento del menú

Agregar un botón al menú

Arrastre un widget de botón debajo de los elementos del menú y ajústelo a su gusto.

En la pestaña Avanzado> Margen, Establecer en 70 para la parte superior, y luego haga clic en el icono de la ventana gráfica receptiva, haga clic en el icono Móvil y configure el margen de la móvil en 40 para la parte superior.

Arrastra otro Sección interior widget a la primera columna debajo del botón.

1. Debajo Sección > Diseño > Anchura, establecer Ancho completo.
2. Debajo Sección > Diseño> Espacio entre columnas, conjunto Ningún espacio.
3. En Sección> Avanzado> Relleno, configure 30 para Superior, 70 para Derecha, 50 para Inferior y 70 para Izquierda.
4. Ahora, haga clic derecho en un identificador de columna y seleccione Eliminar para eliminar una de las columnas, dejándole solo una.

Agregar botones de compartir al menú

Arrastre un widget de botones para compartir (Pro) a la columna.

Compartir botones> Contenido

1. Edite los elementos de la red social según sea necesario.
2. Piel: Mínimo
3. Alineación: Izquierda

Botones de compartir> Estilo

1. Tamaño del botón: 1
2. Color: Color personalizado y elija Negro (# 000000)

Diseña la segunda columna

Haga clic con el botón derecho en el identificador de la columna para editar la configuración de la columna.

Columna> Estilo

Antecedentes

1. Color de fondo: Establecer en # 000000 (negro)
2. Segundo color: Establecer en # 000000 (negro)

Nota: Aunque se ha establecido el nuevo color de fondo, todavía no lo verá, porque todavía no hay contenido en la columna.

Crear el boletín Suscribirse al formulario de llamada a la acción

Arrastre un widget de sección interior a esta columna.

Haga clic con el botón derecho en un identificador de columna y seleccione Eliminar para eliminar una de las columnas, dejándole solo una.

Sección interior> Avanzado

1. Margen: Establecer en 130 solo para la parte inferior
2. Relleno: Establecer en 70 para Arriba, 60 para Derecha, 70 para Abajo y 60 para Izquierda

Arrastre un widget de encabezado a la columna

Ajuste el texto del título (es decir, suscríbase a nuestro boletín) y el tamaño, color, etc. del texto según sea necesario.

Arrastra un Formar Widget (Pro) debajo del encabezado

Formulario> Contenido

Campos de formulario

1. Haga clic en la X en el extremo derecho de los campos Nombre y Mensaje, ya que solo necesitamos el correo electrónico para este ejemplo.
2. Tamaño de entrada: Medio
3. Correo electrónico> Contenido > Ancho de columna: 80%

Botón de enviar

1. Talla: Medio
2. Ancho de columna: 20%
3. Alineación: Correcto
4. Icono: Flecha larga a la derecha

Forma> Estilo

Formar

1. Espacio entre columnas: 0
2. Espacio entre filas: 0

Campo

1. Color de texto: Blanco
2. Color de fondo: Transparente
3. Color del borde: Blanco
4. Ancho del borde: 1 solo para la parte inferior
5. Tipografía> Tamaño: 10

Botón

1. Color de fondo: Transparente
2. Color de texto: Blanco
3. Frontera: Sólido
4. Ancho del borde: 1 solo para la parte inferior
5. Color del borde: Blanco

Crear la pantalla de productos

Arrastre otro widget de la sección interior a esta columna debajo del formulario.

Sección interior> Avanzado

1. Relleno: Establecer en 30 solo para la derecha

Sensible

1. Ocultar en el móvil: Esconder

Sección interior> Diseño

1. Espacio entre columnas: Ningún espacio

Haga clic con el botón derecho en un identificador de columna y seleccione Eliminar para eliminar una de las columnas, dejándole solo una.

Editar la columna

Columna> Avanzado

1. Margen: Ajuste -60 (menos 60) solo para la izquierda

Haga clic con el botón derecho en el control del widget de encabezado y copie el título del título del boletín y luego péguelo en esta columna

Título> Estilo

1. Color de texto: Negro (# 000000)
2. Peso: 700

Título> Avanzado

1. Margen: Establecer en 20 solo para la izquierda

Columna> Estilo

Antecedentes

Color: Blanco (#ffffff)

Frontera

1. Radio de borde: 5 para todos los lados

Sombra de caja (normal)

1. Color: rgba (0,0,0,0.21)
2. Sombra de cuadro> Horizontal: 0
3. Sombra de caja> Vertical: 10
4. Sombra de caja> Desenfocar: 30
5. Sombra de caja> Extensión: -10 (negativo 10)
6. Posición: Contorno

Sombra de caja (flotar)

1. Color: rgba (0,0,0,0.21)
2. Sombra de cuadro> Horizontal: 0
3. Sombra de caja> Vertical: 15
4. Sombra de caja> Desenfocar: 40
5. Sombra de caja> Extensión: -10 (negativo 10)
6. Posición: Contorno

Arrastra un Imagen widget debajo del encabezado

Imagen

No elijas una imagen todavía

1. Tamaño de la imagen: Completo
2. Alineación: Izquierda

Ahora haga clic con el botón derecho en el control del widget de título , duplíquelo y ajuste el estilo del widget duplicado.

Título> Estilo

1. Talla: 15
2. Peso: 300

Ahora cambie la redacción de cada uno.

Haga clic con el botón derecho en el identificador de la columna y duplíquelo dos veces para tener un total de 3 columnas.

1. Edite la columna de las columnas central y última, cambiando el márgenes en Columna> Avanzado a -40 para el margen izquierdo en la columna del medio y -20 para el margen izquierdo en la última columna.
2. Para cada columna, edite el widget Imagen, eligiendo una imagen. Incluso las imágenes .gif funcionan bien aquí.
3. Ajuste su texto y márgenes según sea necesario.

Ajustar para móvil

Edite cada una de las secciones internas en la columna de la izquierda

Sección interior> Avanzado

1. Relleno: 25 para todos los lados

Haga clic en el icono de engranaje / engranaje ubicado en la parte inferior izquierda del panel para volver a la Configuración emergente.

Configuración emergente> Diseño

1. Anchura: 100vw

Formar

Establezca el ancho del campo de correo electrónico y del botón Enviar en 80% y 20%, respectivamente.

Establecer las opciones de publicación

Haga clic en el Publicar botón. No existen Condiciones, Disparadoreso Reglas avanzadas para esta ventana emergente, haga clic en el Guardar y cerrar botón.

Edite la plantilla de encabezado creada por Elementor de su sitio

Ir Plantillas> Creador de temas> Encabezados > Seleccione su encabezado y haga clic en Editar con Elementor

Haga clic en el control del widget de su botón de menú para editar el widget, si existe, o crear uno nuevo.

Botón

1. Enlace: Haga clic en el Dinámica icono y seleccione Acciones> Ventana emergente
2. Haga clic de nuevo en Surgir y en Acción, elija Alternar ventana emergente
3. En el campo Ventana emergente, busque y seleccione la ventana emergente que acaba de crear.

Haga clic en el Actualizar botón para guardar los cambios de la plantilla de encabezado

Todo listo. Vaya a su sitio en vivo, haga clic en el Botón de menú en su encabezado y vea su nuevo menú emergente en acción.

Prima: Agregue efectos de animación de entrada en cualquiera de sus widgets para agregar efectos geniales. Simplemente edite un widget, vaya a su pestaña Avanzado, elija una de las animaciones de entrada que se enumeran allí.