Cómo crear pop ups en Wordpress con Elementor

Cómo hacer popups en WordPress con Elementor

¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor.

¿Qué es un pop up?

El término pop-up proviene del inglés, y hace referencia a aquellas ventanas que aparecen de forma inesperada en la pantalla de tu navegador. Su función es captar la atención del usuario sobre una información que se considera relevante y con la intención de generar una conversión.

El uso de los pop up se debe realizar con sumo cuidado ya que al ser una acción invasiva si se abusa de esta herramienta puede resultar molesta y derivando en que el usuario abandone la página web. Es recomendable hacer uso de ella de forma moderada.

También hay que tener en cuenta que Google penaliza a las páginas webs que hacen uso de pop ups en dispositivos móviles. Una vez nos pongamos en materia explicaremos como deshabilitar los pop ups en tablet y moviles.

Plugins para popups WordPress

Cómo crear un pop up efectivo

Como hemos comentado, hacer un mal uso de los pop ups puede ser contraproducente, por lo que antes de ponernos a crear nuestro pop up os dejo algunas buenas prácticas que deberías llevar a cabo.

  • Facilitar el cierre de la ventana emergente con un clic, da visibilidad a la cruz de cierre.
  • No seas repetitivo. Procura que si el usuario ha descartado el pop up no cargue si cambia de página.
  • Procura que el pop up no aparezca cuando acaba de cargar la web pero tampoco des tanto como para que el usuario abandone la web.
  • Trabaja un diseño y un contenido llamativo.

Creando nuestro pop up con Elementor

En nuestro caso lo que realizaremos es un sencillo pop up en el que invitamos a los usuarios a suscribirse a nuestra newsletter.

Desde el administrador de nuestro WordPress accedemos a plantillas/añadir nueva y una vez aparezca el pop en que nos permite seleccionar que tipo de plantilla queremos realizar seleccionamos popup, le damos un título y crear plantilla.

crear ventanas emergentes con elementor

La versión pro de Elementor viene con unos pop ups predefinidos por lo que si alguno se adapta a vuestro diseño simplemente tenéis que insertarlo. Nosotros crearemos un diseño propio.

Una vez tengamos definido el diseño de nuestro pop up clicaremos en la flecha que hay al lado del botón de publicar para crear las condiciones de visualización.

crear pop-up con elementor

Generando las codiciones de visualización

En este punto definiremos que condiciones se deben cumplir o no cumplir para que se visualice el pop up. Elementor permite crear más de una condición para la visualización del pop up. Primero definimos donde se visualizará.

  • En el primer selector definiremos si la condición debe incluir o excluir.
  • El segundo selector define donde se debe incluir: En toda la web, en páginas de archivo o en páginas únicas.
  • El tercer selector variara en función de lo definido en el segundo selector. En nuestro caso definiremos que el pop up solo aparezca en todas las entradas de nuestro blog.
hacer pop up con elementor

Clicamos sobre siguiente y en Triggers definiremos cuando se visualizara.

  • On page load : Se muestra nada más cargar la página o creando un delay definido por segundos.
  • On scroll : se muestra después de que el usuario haga scroll hacía arriba o abajo. Definiremos en porcentaje a la altura que se debe mostrar.
  • On Scroll To Element : en cuando el usuario se desplaza a un elemento específico. Un buen ejemplo seria mostrar el pop up cuando llegan a los comentarios del blog.
  • On click clic : se muestra después de que un usuario haga clic un número determinado de veces.
  • After inactivity : se muestra después de que el usuario haya estado inactivo durante X segundos.
  • On page exit intent : Para mostrar el pop up antes de que el usuario abandone nuestra página.

Para nuestro ejemplo definiremos que el pop up aparezca en todas las entradas de blog a mitad de página y cuando el scroll sea hacia abajo.

Crear pop up en WordPress
Clicamos sobre siguiente y en advanced rules añadiremos algunas restricciones a cuándo o con qué frecuencia se muestran los pop ups.
  • Show after x pages views : El pop up se mostrará después x páginas vistas.
  • Show after x sessions : El pop up se mostrará después de que el usuario visite la página x veces.
  • Show after x times : abrirá el pop up solo X cantidad de tiempo para ese visitante específico.
  • When arriving from specific URL : Si el usuario llega a una URL especifica
  • Show when arriving from : Mostrara el pop up cuando una o varias de las opciones disposibles esten configuradas.
  • Hide for logged users :Ocultar pop up para usuarios logueados.
  • Show on devices : Definiremos en que soportes se verá el pop up, escritorio, tablet o móvil.
crear ventana emergente con WordPress

Para nuestro ejemplo pondremos la regla de que el pop up no se vea en teléfonos móviles. Guardamos y ya tenemos nuestro pop up funcionando. En el siguiente vídeo repasaremos los pasos seguidos para crear el pop up.

Alternativas gratuitas a Elementor pro

Si no dispones de la versión pro de Elementor aquí os dejamos una lista de plugins gratuitos para crear pop ups.

Y aquí terminamos, esperamos que tras leer estas lineas tengas más claro como gestionar y crear un popup con Elementor.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
¿Te ha resultado útil? ¡Puntúalo!
[Total: 0 Media: 0]

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

leido y acepto nuestra política de privacidad. *

Información básica sobre protección de datos en base al Reglamento Europeo de Protección de datos (UE) 2016/679 (RGPD) - Responsable: Carlos Jiménez Méndez - Finalidad: Gestión y moderación de comentarios. - Legitimación: Consentimiento expreso del usuario a través de la selección de la casilla check de envío del formulario. Consentimiento del interesado. - Destinatarios: Proveedor de hosting de la web en EU, Webempresa Europa S.L., cuyos niveles de protección son adecuados según Comisión de la UE. - Derechos: Podrá ejercitar los derechos de acceso, rectificación, supresión, oposición, portabilidad y retirada de consentimiento de sus datos personales en la dirección de correo electrónico info@byteweb.es - Procedencia: El propio interesado - Más Información: Podrá acceder a la segunda capa de Información en el siguiente enlace