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

Por , actualizado en

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:

Muestra la pantalla inicial del gestor de popups de Elementor Pro

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

Muestra como se crea una nueva plantilla de popup

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):

Muestra el diseño inicial para el popup de verificación de edad

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:

Muestra como se configura la acción de verificación de edad cuando el usuario es mayor

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:

Muestra la segunda parte de la configuración de la acción de verificación de edad cuando el usuario es mayor

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:

Muestra configuración adicional para eliminar la X de cerrado de popup

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:

Muestra configuración adicional de como evitar que se cierre el popup al hacer clic afuera y/o presionar ESC

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).

Muestra el inicio de las condiciones del popup de verificación de edad

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”:

Muestra la configuración 1 de condiciones para el popup de verificación de edad

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:

Muestra la configuración de triggers/disparadores para el popup de verificación de edad

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:

Muestra la configuración de reglas avanzadas para el popup de verificación de edad

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

Deja un comentario

Hazlo con WordPress