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

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

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.

Comparte :)

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

Deixa un comentario



Isto é para ti!