Deseñar pop-ups con Elementor? Si, é posible

Hai uns días estaba eu pensando sobre que escribir e dinme conta, logo de botar un tempo en Google, que non existen moito artigos que falen de como deseñar pop-ups con Elementor.

Si existen extensos escritos sobre a utilización das fiestras emerxentes, de como son unha boa alternativa e tamén de como podes deixar ao teu usuario pampo cando os usas mal.

Tamén existen moitos titoriais doutras ferramentas. Pero con Elementos non hai moitos.

E mira que son unha das grandes funcionalidades que meteron hai uns meses.

Así que diso imos falar.

Que é un pop-up?

Estamos fartos de ver pop-ups. Fartos.

Ou non?

Un pop-up é unha fiestra emerxente que salta mentres estás a navegar por unha páxina web, co obxectivo de mostrar outro tipo de contido complementario ao que estás vendo.

Os pop-ups son unha alternativa aos banners publicitarios, que adoitan estar inseridos nas barras laterais, arriba, abaixo ou no medio do texto.

Utilizando unha fiestra emerxente seriamos capaces de mostrar anuncios ou promocións máis concretas, puntuais e organizadas.

Pero o mal uso deles pode chegar a entorpecer ou diminuír a boa experiencia de usuario, polo que hai que ter coidado no seu uso e empregalos de forma correcta.

O obxectivo é que o lector realice unha acción concreta e non debes espantalo.

Para que valen os pop-ups?

Se tes un blogue ou unha páxina web que é un puntal importante do teu negocio, os pop-ups son moito máis que simples ferramentas para mostrar un produto, un servizo ou unha campaña.

Son elementos case indispensables para conseguir leads.

Un lead no contexto do márketing dixital non é máis que un visitante que nos ten deixado os seus datos (nome e email, habitualmente) como troco a un contido de interese que desexe ler ou descargar.

É unha acción voluntaria do usuario. Eses contactos nin se mercan nin se venden.

Os datos adoitan pasar á nosa base de datos, habitualmente unha lista de email marketing, pois eses leads adoitan ser considerados como posibles clientes para os nosos produtos ou servizos.

Sitúanse nun primeiro intre do ciclo de compra.

Como usar os pop-ups correctamente para o márketing?

Se o obxectivo dun pop-up é, como dixemos, conseguir leads que engrosen a nosa lista de email márketing, é importante saber onde e cando os mostramos.

En primeiro lugar, debemos contextualizar onde se mostra o pop-up.

Adapta e personaliza o lugar onde o vai visualizar o usuario. Que o contido ofrecido no pop-up sexa relevante e teña relación co que nese intre se está lendo é fundamental.

Non vaias ofrecer unha masterclass sobre WordPress, por exemplo, mentres que o usuario está buscando receitas de polbo á feira.

En segundo lugar, e moi relacionado co anterior, debe respostar a unha necesidade do teu lector. Debe ser relevante no que está a buscar, aportar valor e solucionar algún dos seus problemas.

Por exemplo, se está buscando información sobre WordPress, podes recomendarlle un ebook sobre algún tema que consideres que vai cubrir as súas necesidades.

Por último, non inventes nada.

Hai moitos recursos dispoñibles en forma de plugin que che van permitir deseñar e mostrar estes pop-ups.

E ademais tes moitas formas de presentalo. Non o mostres sempre cando o usuario chega. El está interesado en ler o contido do artigo, non en subscribirse ao teu blogue.

Móstrao cando mellor se adapte a túa estratexia: cando o usuario marche da páxina, cando pulse un botón, cando pase o rato por enriba dalgún elemento, etc.

Como deseñar pop-ups irresistibles e funcionais con Elementor?

Desde hai algunhas versións, o construtor visual Elementor, que xa teño nomeado bastantes veces que é o meu plugin de referencia á hora de maquetar webs, incluíu a opción de deseño de pop-ups.

Para poder crear o teu pop-up debes estar na opción Modelos -> Pop-ups e pulsar en Engadir novo.

A continuación indica nome e crea o modelo.

Crea o modelo

Configura o modelo do pop-up con Elementor

Á hora de crear un novo pop-up podes elixir entre decenas de deseños xa maquetados, pero se ningún se adapta ás túas necesidades podes comezar desde un lenzo en branco.

Se escolles esta opción poderás adaptar exactamente o deseño ao que precises, polo que é a que eu sempre recomendo.

Na barra da dereita podes configurar a fiestra emerxente, o seu tamaño, o seu estilo e o seu comportamento.

Axustes do pop-up

Unhas das configuracións máis importantes á hora de deseñar o teu pop-up.

  • Ancho: podes indicar en píxeles ou en porcentaxe (VW ou vertical width) o ancho da fiestra emerxente.
  • Alto: podes configurar o alto adaptado ao contido, adaptado á pantalla ou personalizalo en píxeles ou en porcentaxe (VH ou vertical height).
  • Current position: podes configurar onde se van ir aliñando os elementos que vaias colocando no pop-up (arriba, centro ou abaixo).
  • Posición: podes configurar cal é a posición inicial do pop-up respecto ao eixo horizontal e o vertical.
  • Overlay: podes activar ou desactivar a capa de fondo que tapa parcial ou totalmente a web e permite destacar o pop-up.
  • Close Button: podes activar ou desactivar un botón de permite pechar o pop-up.
  • Animacións: podes configurar a animación de entrada e a animación de saída do pop-up.

Estilo do pop-up

Na opción de estilo podes indicar o aspecto visual que terá a fiestra emerxente e outros elementos.

  • Pop-up: podes configurar a cor de fondo, o borde, o radio do borde e a sombra da caixa.
  • Overlay: podes configurar a capa de cor ou a imaxe que se sitúa entre a web e o pop-up, e que permite destacar este último.
  • Close button: podes configurar o tamaño, a cor e a posición do botón de peche.

Opcións avanzadas do pop-up

Certos comportamentos avanzados do pop-up son bastante curiosos e atractivos de cara a que se achegue o máis posible ao que precisas.

  • Show Close Button After: podes indicar o número de segundos de retardo que terá o botón de peche antes de aparecer.
  • Automatically Close After: podes indicar o número de segundos de retardo até que o pop-up se peche automaticamente.
  • Prevent Closing on Overlay: podes evitar que o usuario peche o pop-up facendo clic fóra del.
  • Prevent Closing on ESC key: podes evitar que o usuario peche o pop-up pulsando a tecla ESC.
  • Disable Page Scrolling: podes evitar que o usuario faga scroll pola páxina.
  • Avoid Multiple Popups: permite múltiples pop-ups.
Un pop-up deseñado con Elementor

Comportamento do Pop-up

Unha vez rematado o deseño do popup, incluíndo todos os widgets de Elementor que desexes poñer, debes configurar o comportamento do pop-up. É dicir, onde, cando e como se lle vai mostrar ao usuario.

Condiciones de visualización

Pode que precises que o pop-up saia nunha páxina concreta, nunha entrada concreta, en todas as entradas do blogue, nunha soa categoría, etc.

Podes seleccionar tantas condicións como desexes até que fique perfectamente configurado en que lugar da páxina vas mostrar o pop-up.

En que parte da web se mostrará o pop-up?

Triggers ou disparadores

Son aquelas accións requeridas para que o pop-up salte. Os seus nomes son bastante claros, pero imos velos un por un.

  • On Page Load: podes configurar que o pop-up saia ao cargar a páxina, indicando unha cantidade de segundos de retardo.
  • On Scroll: podes indicar que o pop-up se mostre cando navegas pola páxina, saltando á altura dunha porcentaxe aproximada da páxina.
  • On Scroll to Element: podes indicar o ID dun elemento para que o pop-up salte ao navegar por enriba del.
  • On Click: podes indicar que o pop-up se mostre ao pulsar nun elemento.
  • After Inactivity: podes configurar que o pop-up salte logo dun período de inactividade, indicado en segundos.
  • On Page Exit Intent: o pop-up saltará cando fagas o aceno de pechar a páxina.
Disparadores do pop-up

Regras avanzadas

Son aqueles requerimentos precisos para que o pop-up se mostre.

  • Show after X page views: podes indicar o número de páxinas que o usuario debe visitar antes de que o pop-up se lle mostre.
  • Show after X sessions: o pop-up saltará se o visitante volve a túa web o número de veces que lle indicas.
  • Show up to X times: podes configurar o número máximo de veces que se mostrará o pop-up a un usuario.
  • When arriving from specific URL: o pop-up só saltará se chegas desde unha dirección específica.
  • Show when arriving from: esta opción, que pode parecer moi semellante á anterior, permíteche indicar que o pop-up salte se o usuario vén desde motores de búsqueda, ligazóns externas ou ligazóns internas.
  • Hide for logger in users: configura o tipo de usuario para o cal o pop-up non se mostrará.
  • Show on devices: indica os dispositivos onde se mostrará o pop-up.
Regras avanzadas do pop-up

Conclusión

Utilizar con cabeza os pop-ups na túa páxina web é requisito fundamental na estratexia de marketing.

É un bo xeito de conseguir leads cualificados para a túa lista de subscritores, pero un uso excesivo pode botar ao visitante da túa web.

Elementor dá unha serie de ferramentas moi interesantes de cara a deseñar e construír os teus propios pop-ups.

Aprovéitao!

E ti, utilizas Elementor? Thrive Leads? Fas os pop-ups a man?

Lémonos nos comentarios.

De que se fala aquí

6 comentarios en “Deseñar pop-ups con Elementor? Si, é posible”

  1. Buenas, me ha parecido interesante analizar una a una las funcionalidades del popup, aunque a primera instancia parezcan evidentes. ¡Gracias! Tengo un duda, quizá puedas ayudarme: Mi objetivo es que al usuario le salte un Pop Up con un formulario de registro cuando entra en un página en concreto (hasta aquí bien), pero no quiero que se cierre el Pop Up hasta que el usuario haya dado al Botón de “Registrarse” del formulario. El usuario no debería poder esquivar el pop up, de modo que he desactivado las funciones de “salir del pop”, aunque pulsen ESC o encima del Layout o en la crucecita. El problema es que no logro que el Popup desaparezca cuando el usuario le da al botón de “Registrarse” del formulario, Sabrías ayudarme? Disculpa por la extensión y gracias de antemano,

    Responder
    • Hola Xavi. Gracias por pasarte y comentar.

      Efectivamente si marcas las opciones de no cerrar clicando fuera, pulsando ESC y ocultas la crucecita creo que no existe ninguna opción para cerrarlo (excepto que pongas algún script en javascript que se ejecute onClic). La manera más facil que se me ocurre es añadir al formulario una segunda función de redirección, entonces al pulsar el botón de enviar el formulario hace 2 cosas: por un lado registra (envía datos a través de email, ejecuta un hook o lo que sea) y además redirige a una página donde le puedes agradecer al usuario que se haya suscrito. Quizás esta solución te valga 🙂

      Un saludo!!

      Responder
      • Hola Anxo, gracias por contestar tan rápidamente.
        Sí, pensé en redireccionar la página a otra a través del botón “Registrarse” del formulario, pero el problema es que me interesa que el usuario registrado acceda al contenido que hay dentro de la misma página, debajo del PopUp. Resulta que se trata de un streaming donde me piden que haya un registro previo, y pensé que con el PopUp me ahorraría la redirección a otra página, pèro el cliente me pide que sea en la misma url… Buscaré a ver que encuentro. Muchas gracias!

      • Vale, correcto, entiendo lo que me comentas. Pues así a bote pronto yo lo solucionaría instalando el plugin Dynamic Visibility for Elementor para ocultar la sección concreta donde esté situado el video del streaming, a usuarios no registrado. Por otro lado, en las opciónes del Popup, puedes decir que salte solo a usuarios no registrados, por lo tanto si un usuario está logeado no saltará. El widget de login estoy viendo que por defecto recarga la misma URL, por lo que si el login es correcto recarga la URL ya logeado, el Popup no salta y la sección del streaming sí se vería gracias al plugin que mencioné antes. Creo que así te podrían servir :).

  2. Hola,
    Muy bueno el post, me ha ayudado mucho. Tengo una pregunta:
    Tengo un pop-up con un mensaje y un botón que quiero que redirija a una parte específica de la página principal. De momento la redirección funciona bien, pero me gustaría saber que puedo hacer para que al hacer click en el botón se cierre el pop-up, no he logrado encontrar la opción.
    Muchas gracias.

    Responder

Deixa un comentario