Cómo añadir verificación de edad con Elementor Pro

Si el contenido que publicas es sensible a menores de edad, lo que procede es tener algún tipo de verificación de edad, de modo que se pregunte a los que visitan tu sitio de modo que si indican ser mayores de edad se les deja pasar, o bien si son menores se les manda a otro lado; al menos ese es un flujo mínimo para implementar si quieres hacer esto. Para este artículo les voy a mostrar como hacerlo fácilmente con Elementor Pro, y uso el Pro porque tiene la facilidad de hacer diálogos emergentes (popups), que será lo que usaremos para este ejemplo. Así que manos a la obra y a construir nuestra verificación de edad; se da por sentado que tienes un sitio donde implementarlo, o bien un entorno local para probar.

Primer paso: diseño del popup en Elementor

Vámonos rápido a Plantillas > Popups, donde nos recibirá una pantalla como esta:

Presiona el botón grande y verde que dice “Añadir nueva popup“, llena como sigue o como gustes, y luego presiona “Crear plantilla“:

Cuando cargue Elementor te mostrará los templates prediseñados, cierra la ventana porque lo haremos de cero. Nuestro diseño será algo como esto (en realidad no importa el diseño, lo que importa es que tengas dos botones en el):

Como puedes ver en mi diseño (N. del E.: altamente horrendo) sólo usé una imagen, un encabezado, una sección interna con dos columnas y en cada una un botón. Ahora bien, los dos botones deben hacer algo muy simple:

• El botón Si debe cerrar el popup, y dejarte continuar.
• El botón No debe llevarte a algún otro lado, tentativamente elegiremos google.com.

Acción a ejecutar cuando el usuario es mayor de edad

Como ya dijimos, el botón Si debe dejarnos continuar al sitio. ¿Cómo hacemos esto? fácil, echaremos guante de las etiquetas dinámicas de Elementor. En la sección de Enlace haz clic en etiquetas dinámicas, y de la lista elige Popup:

Esto hace que aparezca Popup en el campo de Enlace; pero aún falta configurarlo. Necesitamos que este botón deje pasar al usuario, así que hagamos clic sobre el campo (en realidad debiera ser sobre la llave española, pero funciona todo el campo) y aparecerán las opciones para la acción Popup: elegimos “Close popup” de la lista Action:

Acción a ejecutar cuando el usuario es menor de edad

Al hacer clic en No, el usuario está reconociendo que es menor de edad, y tenemos que mandarlo a otro lado para que no vea nuestro contenido no apropiado para su edad, así que lo mandaremos a Google. Para ello, vamos a configurar el botón No; haz clic sobre el y configura el apartado de Enlace como se muestra:

Básicamente, al hacer clic los mandamos a Google, sin más.

Configuración del popup de verificación de edad

Bueno, con eso terminamos con los controles del popup, pero el popup como tal aún debe ser configurado. Primero que nada, vamos a quitarle la “X” del extremo superior derecho, que hará que lo puedan cerrar, cosa que por supuesto no queremos; para quitarlo, haz los siguientes pasos:

Y así de fácil, adiós X para cerrar. También necesitamos habilitar las siguientes opciones para evitar que hagan clic fuera del popup o presionen la tecla ESC y se cierre el popup:

Ahora hagamos clic en “Publicar“, y configuremos las opciones restantes del plugin. Los popups en Elementor necesitan configurarse en tres aspectos: condiciones (donde se muestran), triggers (disparadores, que detona el que se muestre un popup) y por último reglas avanzadas (que cubre cualquier otra cosa no clasificable).

Vamos con condiciones:

Configuración de condiciones del popup de verificación de edad

La condición para mostrar nuestro popup es sencilla: todo el sitio. Así que presiona el botón de “Agregar condición”, y verás que por default muestra una condición que dice “Todo el sitio”:

Presiona “Next” para irnos a Triggers o Disparadores.

Configuración de disparadores del popup de verificación de edad

Nuestro disparador para el popup, es decir, que hace que se muestre el popup, será la carga de cualquier página; recuerda que si bien pueden llegar a tu sitio por una URL directa, igual pueden llegar a otra página desde un resultado de búsqueda; nuestro popup ya está disponible en todo el sitio, así que le pondremos que se active en la carga de página: configúralo como se muestra en la siguiente pantalla:

Notarás que al habilitar el switch de “On Page Load” aparece una caja de edición que acepta un entero y representa a los cuantos segundos después de la carga deberá aparecer el popup; lo dejaremos en cero porque queremos que sea tan inmediato como sea posible.

Presiona “Next” para irnos a reglas avanzadas.

Configuración de reglas avanzadas del popup de verificación de edad

Aún nos falta controlar algo crucial de nuestro popup de verificación de edad; que no sea molestoso ni intrusivo. Para ello, formularemos una regla simple; sólo debe mostrarse una vez por sesión, y no debe mostrarse a usuarios que ya hayan hecho login. Vamos a configurar las reglas avanzadas como se ve a continuación:

A continuación lo que debe estar habilitado y que parámetros deben tener:

• Show up to X times (mostrar hasta X veces): “times” a 1 y “count” debe decir “On open“; sólo debe abrirse una vez, y se cuentan las aperturas solamente.
• Show when arriving from (mostrar cuando se llegue desde): si el origen es uno de los indicados, mostrar el popup; deberán estar seleccionados todos por default.
• Hide for logged in users (esconder de usuarios logueados): indica si se debe esconder el popup de usuarios que ya hayan hecho login; deberá indicar “All users“.
• Show on devices (mostrar en dispositivos): como lo dice el nombre, indica en que dispositivos mostrarse; elegir todos los disponibles.
• Show on browsers (mostrar en navegadores): indica en que navegadores debería mostrarse, elegir “All browsers“.

Finalmente, presiona “Save & close” para guardar tu popup. Ahora abre una pestaña en modo de navegación privada y prueba tu sitio, verás que el popup se dispara al cargar el sitio y si indicas que eres mayor de edad, te deja navegar sin mayor problema, y si presionas no…adiós, a la tierra de Google.

Otras soluciones para verificación de edad

Desde luego esto es meramente una solución simplona al problema de verificación de edad. Hay algunos plugins para ello en el repositorio, con esquemas más complejos dependiendo de tus necesidades: una búsqueda por los términos “age check” te mostrarán muchas opciones.

Palabras finales

Como puedes ver, es muy sencillo agregar una verificación de edad con Elementor Pro, sólo echando guante de la facilidad de manipular popups de este constructor visual. Aunque es una solución simple, bien puede cubrir un amplio espectro de situaciones. No omito mencionarte que revises la legislación de tu país relacionado con requisitos específicos para mayoría de edad, así como si estás haciendo bien las cosas, recuerda que en algunos lugares bien pudieran haber implicaciones legales sobre el proceder de tu sitio, así que documéntate bien al respecto.

Créditos

Foto de cabecera por Franck en Unsplash