Os formulários popup podem ser ferramentas de marketing essenciais, permitindo que você capture endereços de e-mail, promova vendas e muito mais. No entanto, fazer popups atraentes e personalizados no WordPress nem sempre é simples.

Felizmente, o plugin construtor de páginas do Elementor facilita a criação e customização de popups em seu site. Você pode ajustá-los de acordo com o design do seu site e adicionar gatilhos baseados no comportamento ou origens do usuário.

Este guia dará uma visão detalhada dos diferentes tipos de popups do Elementor e porque você pode querer usá-los. Então, explicaremos como fazer esses popups com as ferramentas gratuitas e Pro Elementor. Vamos começar!

Uma visão geral dos popups do Elementor

Elementor é um dos mais populares plugins de construção de páginas para sites WordPress. Ele permite que você arraste e solte elementos no lugar para projetar páginas bonitas e de fácil utilização:

Elementor page builder plugin
Construtor de páginas Elementor

Além disso, o Elementor permite que você crie uma variedade de popups. Estes são formulários personalizados que aparecem em seu site após um tempo pré-determinado, ou após um usuário completar uma determinada ação.

Os popups podem ser ferramentas essenciais por várias razões. Você pode usá-los para coletar leads e expandir sua lista de e-mail marketing. Os popups do Elementor se integram com software de e-mail marketing, enviando endereços de clientes diretamente para sua plataforma de escolha.

Você pode até mesmo utilizá-los para promover vendas, descontos e eventos relacionados à sua loja de eCommerce. Como tal, os popups podem ser parte integrante da sua estratégia geral de marketing.

Além disso, os popups podem ajudá-lo a se conectar com seus clientes. Você pode incorporar pesquisas para solicitar o feedback do consumidor e melhorar seus produtos e serviços.

Entretanto, os popups podem se sentir baratos e intrusivos se você não os desenhar bem e escolher os gatilhos corretos para o seu público. Portanto, você precisará ter certeza de usá-los efetivamente. É aqui que o Elementor entra.

Formulários popup podem ajudá-lo a capturar endereços de e-mail, promover vendas, e muito mais. 📧 Saiba como fazer o seu neste guia! 🚀Click to Tweet

Tipos de popups do Elementor

O Elementor vem com mais de 100 templates de popup que você pode personalizar de acordo com suas necessidades. Estes designs incluem:

  • Formulários de captura de leads
  • Popups de cadastro de e-mail
  • Popups promocionais
  • Login e formulários de boas-vindas
  • Popups de conteúdo restrito
  • Formulários de venda e venda cruzada

Estes templates de popup vêm embutidos no ElementorKits, que incluem vários recursos de design para diferentes tipos de sites:

Modelos popup ElementorKits
Templates popup do ElementorKits

Além disso, você pode escolher entre diferentes posicionamentos popup e designs visuais, inclusive:

  • Modal
  • Slide-in
  • Tela completa
  • Barra superior ou inferior

Finalmente, você pode usar o editor do Elementor para personalizar rapidamente qualquer modelo popup para atender às suas necessidades. Agora vamos explicar como você pode fazer isso gratuitamente e com o Elementor Pro.

Como criar um popup com o Elementor (gratuito)

Anteriormente, o Essential Addons for Elementor plugin tinha um recurso Modal Popup que permite aos usuários criar um formulário popup gratuito. Usá-lo era uma das formas mais populares de se contornar o pagamento pelo Elementor Pro. Você pode encontrar muitos vídeos tutoriais de alguns anos atrás para mostrar a você como usar este método.

No entanto, o recurso gratuito Modal Popup se transformou em um elemento Premium Lightbox e Modal. Ele não é mais gratuito para uso. Portanto, você precisará atualizar para o Elementor Pro ou pagar por um dos plugins premium Elementor que cobrimos mais tarde neste artigo.

Como criar um popup com o Elementor Pro (em 5 passos simples)

O Elementor Pro vem com um recurso de Popups embutido que nós usaremos neste tutorial. Você precisará primeiro comprar e ativar o Elementor Pro. Depois, você pode ir para o seu painel do WordPress para começar a fazer popups.

Passo 1: Faça seu popup

Comece navegando para Elementor > Templates > Popups no seu painel do WordPress. Depois, clique em ADD NEW POPUP para criar um novo POPUP:

Add a new popup in templates
Vá para “Templates” e depois “Add New Popup”

Você então será solicitado a nomear o seu modelo. Uma vez que você tenha decidido por um nome, selecione CREATE TEMPLATE:

Name popup template and click on create
Nomeie seu modelo popup e clique em “Create”

Isto irá lançar o construtor de páginas do Elementor. Agora você pode escolher entre os projetos de templates popup existentes ou construir o seu próprio a partir do zero. Em nosso exemplo, escolhemos um dos templates existentes para editar:

Choose from existing popup designs in Elementor or build one from scratch
Escolha entre projetos popup existentes ou construa um a partir do zero

Agora você pode brincar com as configurações de design para personalizar o seu popup. Por exemplo, você pode mudar seu layout, alinhamento, imagens de fundo e cores.

Passo 2: Escolha suas condições de exibição

Quando você estiver satisfeito com seu projeto, clique na seta voltada para cima ao lado de PUBLISH. Em seguida, selecione Display Conditions no menu que aparece:

Choose your display conditions
Escolha suas condições de exibição

Em seguida, clique em ADD CONDITION para escolher onde seu popup Elementor aparecerá em seu site. Você pode então selecionar um local a partir das seguintes opções: Entire Site, Archives, Singular, ou WooCommerce:

Choose where you want to display the popup on your site
Escolha onde você quer que o popup seja exibido

Quando você estiver satisfeito com a sua escolha, clique em NEXT. Você será levado ao Triggers para o seu formulário popup.

Passo 3: Configure seus gatilhos popup

Na página Triggers, você pode decidir o que os usuários precisam fazer para ver seu popup Elementor. Por padrão, cada opção está desativada, e você pode ativá-la clicando no botão deslizante. Então, você precisará especificar os valores para o seu gatilho.

Por exemplo, se você optar pelo On Page Load, você precisará escolher em quantos segundos seu popup será exibido:

Select different popup triggers
Selecione os gatilhos popups que você deseja

Com o On Scroll, você pode escolher a direção que o usuário precisa percorrer e quanto da página eles devem cobrir antes do popup aparecer:

Page scroll triggers
Page scroll triggers

A configuração On Scroll To Element requer que você insira um CSS ID. Quando um usuário alcançar esse elemento em sua página, o popup aparecerá:

Scroll to element triggers
Rolar para acionar os elementos

Com o On Click, você terá que especificar quantas vezes um usuário deve clicar no seu site antes que o popup seja exibido:

More advanced rules options
Mais opções de acionamento sob regras avançadas

A configuração After Inactivity permite que você acione seu popup depois que o usuário estiver ocioso em sua página por um determinado período de tempo:

Inactivity triggers
Inactivity triggers

Finalmente, você pode optar por ativar a opção On Page Exit Intent. Esta configuração irá acionar seu popup quando um usuário tentar sair de sua página:

Select the on page exit intent trigger
Selecione o gatilho “On Page Exit Intent” quando aplicável

Clique em SAVE & CLOSE ou NEXT para navegar para as Advanced Rules when you’re done. Nós veremos estas regras um pouco mais tarde neste tutorial.

Passo 4: Adicione um botão popup ao seu site (opcional)

Você pode querer acionar seu Elementor popup quando um usuário clicar em um elemento específico em sua página. Por exemplo, você pode projetar um botão que diz “Sign Up Now” e incorporá-lo em seu rodapé. Quando um usuário clica no botão, ele verá seu formulário de registro de e-mail na tela deles.

Primeiro, você precisará criar um botão Elementor em seu site. Abra o artigo ou página no editor do Elementor e escolha Botão no menu. Arraste e solte-o em sua página:

Choose the button option from the menu
Escolha a opção “Botão” no menu

Depois de especificar o texto do botão e personalizar sua aparência, clique em Link > Dynamic Tags. Depois, escolha Actions > Popup no menu suspenso:

Select the popup action for your button
Selecione a ação popup para o botão

Clique em Popup e escolha Open Popup no menu suspenso Action. Você também pode selecionar seu formulário a partir do menu Popup :

Select the popup dropdown option
Selecione a opção dropdown popup

Finalmente, selecione UPDATE para publicar seu botão. Sempre que um usuário clicar nele, ele será levado para o seu formulário de inscrição.

Passo 5: Salve seus templates de popup para mais tarde

Você também pode salvar seus popups como modelos. Abra seu popup com o editor Elementor e clique na seta para cima ao lado de UPDATE. Escolha Save as Template no menu:

Save your elementor popup as a template
Salve seu popup como um modelo

Você então será solicitado a nomear o seu modelo. Quando você terminar, clique em SAVE:

Give the popup template a name and then save it
Dê um nome ao modelo popup e clique em “Save”

O popup será salvo na sua Biblioteca de Templates. Agora você pode usá-la ao construir uma página ou artigo com os modelos.

Como ajustar as configurações avançadas de popup do Elementor

Nós já abordamos como fazer um Elementor básico popup. Entretanto, há também algumas configurações avançadas que você pode querer usar.

Abra seu popup novamente com o editor do Elementor e navegue até Exibir Regras. Vamos dar uma olhada nas diferentes configurações.

Configurações de exibição de popups

Algumas configurações avançadas de exibição popup permitem que você controle quando os usuários verem o seu formulário. Estas configurações podem ser úteis para direcionar visitantes de retorno ao invés de visitantes de primeira viagem.

Por exemplo, você pode escolher exibir seu popup depois que seu visitante tiver visto sua página um certo número de vezes:

More advanced settings and conditions
Configurações e condições mais avançadas

Alternativamente, você pode escolher Show after X sessions. Isto estabelece metas de visitas gerais ao invés de páginas específicas:

Show after X sessions
Mostrar popup após uma certa quantidade de sessões

A configuração Show up to X times pode limitar quantas vezes os usuários verão seu popup. Você pode considerar ativá-lo se você não quiser enviar spam aos visitantes com formulários intrusivos continuamente:

Select how many times users will see your popup
Selecione quantas vezes os usuários verão seu popup

Você também pode usar o Show on devices e Show on browsers configurações para limitar onde seu popup irá aparecer. Os popups podem ser particularmente intrusivos em dispositivos móveis, então você pode considerar desativá-los lá:

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
Show on devices option
Você pode escolher a opção “Show on devices”

Proporcionar uma melhor experiência de usuário móvel pode manter seus visitantes felizes. Ele também pode impulsionar seus esforços do Search Engine Optimization (SEO) e ajudar o seu site a subir na classificação nos resultados de pesquisa.

Configurações de origem do usuário

Finalmente, o Elementor permite que você configure as configurações de exibição popup, dependendo de onde seus usuários vêm. Estas configurações podem ser úteis se você direcionar os visitantes para uma página de destino promocional e depois usar seu popup para ofertas publicitárias ou para pedir detalhes de contato.

As seguintes configurações permitem que você especifique URLs e escolha quais links irão acionar os popups:

Show to users arriving from a specific place
Mostrar aos usuários que chegam de um lugar específico

Finalmente, você pode escolher esconder seus popups dos usuários logados. Você pode usar esta configuração se você tiver um site de membros pagos:

Hide popups for logged in users
Esconder popups para usuários logados

Quando você estiver satisfeito com todas as configurações escolhidas, clique em SAVE & CLOSE. Você pode navegar de volta aqui e mudar qualquer uma dessas configurações, se necessário.

Top 3 plugins de popups do Elementor

Como já vimos, o Elementor Pro facilita a criação de popups para o seu site. Entretanto, você pode não estar pronto para atualizar para o construtor de páginas premium. Alternativamente, você pode estar procurando por recursos adicionais de design.

Aqui estão alguns dos melhores plugins para popups do Elementor com essas considerações em mente.

1. JetPopUp (Crocoblock)

JetPopUp (Crocoblock) plugin
JetPopUp (Crocoblock)

JetPopUp é um plugin de fácil utilização com uma interface de arrastar e soltar que se integra perfeitamente com o Elementor. Ele permite que você crie formulários popup dinâmicos e personalizados, incluindo assinaturas de e-mail, formulários de consentimento de cookies e contagem regressiva.

JetPopUp brilha com suas características interativas. Você pode escolher entre várias configurações de animação, tais como deslizamento, viragem e rotação. Além disso, o plugin tem vários templates que você pode personalizar de acordo com suas necessidades.

Este plugin também permite que você selecione e personalize múltiplas configurações de exibição. Por exemplo, você pode mostrar seus formulários JetPopUp aos usuários em datas específicas quando eles tentarem sair do seu site, ou após uma certa quantidade de rolagem.

Características:

  • Escolha entre os templates de popups predefinidos
  • Selecione diferentes condições de exibição popup
  • Incluir e excluir condições específicas
  • Use efeitos de animação

Preços: JetPopUp custa 22 dólares por ano. Este pacote inclui integração MailChimp, um widget popup, e suporte ao cliente. Você também pode atualizar para uma assinatura com tudo incluído por US$ 130 por ano. Ele vem com 20 plugins adicionais e 150 widgets extras.

2. Widget Popup Box (PowerPack)

Popup Box Widget (PowerPack) plugin
Popup Box Widget (PowerPack)

Se você está procurando por configurações avançadas de Elementor popup, considere o uso do Popup Box Widget da PowerPack. Ele permite que você construa popups personalizados que incluem elementos dinâmicos como vídeos, imagens e Google maps.

Este plugin permite que você acione popups de acordo com várias ações do usuário, incluindo intenção de saída e atrasos de tempo personalizados. Você também pode criar popups interativos de dois passos com links e outros elementos de Call To Action (CTA).

Além disso, o Popup Box Widget tem configurações avançadas de animação. Você pode fazer seu zoom de popups, usar formatação de jornal ou usar animações 3D.

Características:

  • Escolha entre os efeitos de animação
  • Crie popups de dois passos
  • Use atrasos de tempo e acionadores do usuário
  • Exibir imagens, vídeos e outros elementos interativos

Preços: O Popup Box Widget está incluído com uma assinatura PowerPack. Os planos começam em US$ 49 por ano e vêm com mais de 70 widgets diferentes do Elementor.

3. Lightbox & Modal (Essential Addons for Elementor)

Lightbox & Modal (Essential Addons for Elementor) plugin
Lightbox & Modal (Essential Addons for Elementor)

Nós abordamos brevemente este plugin popup Elementor mais cedo. O Lightbox & Modal é um widget versátil com a ferramenta Essential Addons for Elementor. Ele ajuda você a criar popups com recursos interativos como vídeos, imagens e animações.

Lightbox & Modal é projetado para funcionar com botões e links em seu site do Elementor. Você pode criar botões, ícones e textos personalizados que acionam seus formulários popup. Além disso, o widget pode usar atrasos de tempo e outras ações do usuário.

Em geral, Lightbox & Modal poderia ser a melhor opção para interagir com seus usuários ao invés de simplesmente apresentar informações.

Características:

  • Usa gatilhos de botão para popups
  • Exibe imagens, vídeos e conteúdo personalizado
  • Personalização de layouts popups
  • Escolha entre diferentes tipos de animação

Preços: Lightbox & Modal está incluído com o Essential Addons for Elementor Pro. Os planos começam em US$ 39.97 por ano e têm mais de 70 widgets e sete extensões.

Aprenda a fazer popups usando as ferramentas gratuitas e Pro Elementor com a ajuda deste guia passo a passo 💪📧Click to Tweet

Resumo

Os formulários popup podem ser essenciais para sua geração de leads e campanhas de marketing. Eles também podem ajudar você a interagir com os visitantes e mantê-los em sua página. Felizmente, você pode criar popups personalizados com o construtor de páginas do Elementor.

É super fácil criar popups com o Elementor Pro. Você pode personalizá-los para combinar com a sua marca e decidir onde eles serão exibidos no seu site. Você também pode definir configurações avançadas de exibição para mostrar seu popup com base nas ações e origens do usuário.

Projetar um belo site com o Elementor é apenas o primeiro passo. Você também vai precisar de um provedor de hospedagem WordPress em seu canto. Confira nossos planos de preços hoje para ver como a Kinsta pode acelerar o seu site!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 34 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.