Cómo crear un pop-ups de verificación de edad en el elemento

Si su sitio web distribuye productos o contenido digital que no está destinado a menores, necesitará una medida de protección utilizada para restringir el acceso a su tienda o al contenido digital para aquellos que no han alcanzado una cierta edad. La ventana de edad emergente puede resolver este problema. Esto también puede evitar problemas con la ley y puede mantener la reputación de su sitio. Este tutorial le mostrará cómo crear una ventana de edad emergente en Elementor Pro. Debido a que la función de crear una plantilla emergente es accesible solo en Elementor Pro, asegúrese de tener una.

contenido
Cómo crear una ventana de verificación de edad emergente en Elemoror Pro
Cómo aplicar la ventana de corriente de edad en la página
conclusión
Cómo crear una ventana de edad emergente para verificar el Pro Pro-Elementor en el tablero de WordPress, Plantillas de acceso-> PopUps. Haga clic en el botón Agregar nuevo para crear una nueva plantilla emergente.

Ingrese un nombre de plantilla y haga clic en el botón Crear plantilla. Le traerá a la biblioteca de plantillas, que contiene muchas plantillas emergentes prefabricadas. Puede elegir uno de ellos o puede crear desde cero, lo que haremos. Haga clic en el botón (x), llegando al editor Elementer.

Vaya a la configuración Pop -Up haciendo clic en el botón (️), luego aplicaremos algunos cambios. Puede ver como a continuación: Configuración de la pestaña -> Apariencia
Ancho: 550
Altura: personalizado
Altura personalizada: 1000 PX
Posición de contenido: TOP
Botón Cerrar: Oculto
Animación de entrada: Fade in
Salir de Animation: Fade Out

Pestaña de estilo -> PopUp
Tipo de fondo: clásico
Color: #02010100 (transparente)
Imagen: inserte el medio, cree una nueva sección con una sola columna. Seleccione el widget de título del panel de widget, luego tire y colóquelo en el área de lona.

Componga el texto y comience a diseñar con su creatividad. Según la preferencia, puede verificar nuestra configuración a continuación:

Pestaña de contenido -> Título
Título: ¿Tienes más de 21 años?
Etiqueta HTML: H1
Alineación: centro
Pestaña de estilo> título
Color de texto: #ffffff
Tipografía -> Dimensión: 50 PX
Carrera de texto: 5 PX, Color de carrera: #252A2F
Ahora es el momento de agregar los botones. Queremos diseñar el primer botón. Seleccione el widget del botón del panel del widget, luego tire y colóquelo en el área de lona (debajo del widget de título).

Comencemos a diseñar el botón. Según la preferencia, puede verificar nuestra configuración a continuación: Botón de contenido ->

Texto: si
Alineación: centro
Talla mediana
Icono: elija el icono de cheque (️) de la biblioteca de iconos
Posición del icono: después
Pestaña de estilo -> botón

Tipografía -> Dimensión: 20 PX
NORMAL:
Color de texto: #ffffff
Tipo de fondo: clásico
Color: #3D5040
Flotar:
Color de texto: #000000
Tipo de fondo: clásico
Color: #E00808
Animación flota: encogida
Chenar Radius: 30 PX (valores de tinta juntos)
Pestaña avanzada -> apariencia

Margen: desconecte los valores; En el campo superior, configúralo en 20 px
A continuación, agregaremos el segundo botón. Seleccione el widget del botón del panel del widget, luego tire y colóquelo en el área de lona (debajo del primer botón). Hay algunos cambios que aplicamos, como a continuación:

Pestaña de contenido -> botón

Texto: No, tengo un dulce
Alineación: centro
Talla mediana
Icono: elija el bastón de caramelo de la biblioteca de iconos
Posición del icono: después
Pestaña de estilo -> botón

NORMAL
Color de texto: # ffffff
Tipo de fondo: clásico
Color: #20121200 (transparente)
altísimo
Color de texto: #ffededba
Tipo de fondo: clásico
Color: #B7149a
Tipo de chenar: sólido
Ancho: desconecte los valores; En el campo inferior, configúralo en 3 PX
Color: #0d20a1
Border Ray: Desconecte los valores; En el campo inferior, configúralo en 3 PX
Lapseal: desconecte los valores; En el campo inferior, configúralo en 3 PX
Pestaña avanzada -> apariencia

Margen: desconecte los valores; En el campo superior, configúralo en 15 px
Una vez que haya terminado de diseñar los botones, vamos a la configuración de la sección. Presione el mango de la sección para editar la sección, luego puede jugar con la configuración. Como referencia, puede verificar algunos cambios que hemos aplicado aquí de la siguiente manera:

El Fabra Fab -> Contenedor
Altura: altura mínima
Altura mínima: 350 PX
Pestaña de estilo -> fondo

Tipo de fondo: clásico
Color: #0360D766
Pestaña de estilo> chenar
Tipo de chenar: sólido
Ancho: 25 PX (ate los valores)
Color: #2F004AA8
Chenar Radius: 45 PX (une los valores)
Pestaña avanzada -> apariencia

Margen: desconecte los valores; En el campo superior, configúralo en 60 px
A continuación, apuntaremos a los botones. Comenzamos con el botón Sí; Queremos activar este botón para cerrar la ventana emergente. Vaya a la opción de enlace, luego haga clic en el icono de la etiqueta dinámica. En esto, seleccione la opción emergente y luego haga clic en el icono de clave para ver algunas configuraciones. En la opción de acción, configúrelo en el cierre de la ventana emergente. Después de eso, la opción no se muestra nuevamente, configúrela en sí, deslizando el interruptor a la derecha.

Estableceremos el botón no como una navegación a un sitio apropiado para la edad. Vaya al campo de enlace y agregue cualquier enlace que desee. Debemos asegurarnos de que sus visitantes respondan a su ventana emergente. Vuelva a la configuración emergente, luego haga clic en la pestaña Avanzada. Aquí hay muchas opciones, pero solo tenemos dos opciones que necesitamos para cambiar. En las opciones, eviten el acantilado en la superposición y evite el acantilado en la tecla ESC, configure estas opciones en sí, deslizando el interruptor hacia la derecha.

Debido a que esta ventana emergente se muestra haciendo clic en el botón, puede publicarlo sin configurar condiciones, desencadenantes o publicar reglas avanzadas, haga clic en la publicación y luego guardar y cerrar.

Cómo aplicar en la ventana de verificación de edad de la página Editar la página existente o la nueva página con Elementor. Una vez que ingrese al editor elemental, agregue el widget del botón en el panel de widget al área de lona. Si ya tiene el botón hacia adelante, puede acceder directamente a la configuración del botón. En la opción de enlace, haga clic en el icono de la etiqueta dinámica, luego seleccione la ventana pop -UP. Después de eso, haga clic en el campo emergente para encontrar algunas configuraciones. Establezca la acción en la apertura pop -up y luego escriba el nombre emergente que acaba de crear anteriormente.

Voila. Vamos a verlo en acción.