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:
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.
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:
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:
Você então será solicitado a nomear o seu modelo. Uma vez que você tenha decidido por um nome, selecione CREATE TEMPLATE:
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:
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:
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:
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:
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:
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á:
Com o On Click, você terá que especificar quantas vezes um usuário deve clicar no seu site antes que o popup seja exibido:
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:
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:
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:
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:
Clique em Popup e escolha Open Popup no menu suspenso Action. Você também pode selecionar seu formulário a partir do menu 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:
Você então será solicitado a nomear o seu modelo. Quando você terminar, 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:
Alternativamente, você pode escolher Show after X sessions. Isto estabelece metas de visitas gerais ao invés de páginas específicas:
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:
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á:
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:
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:
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 é 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)
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)
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.
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 de aplicativos, hospedagem de banco de dados e hospedagem gerenciada de WordPress em seu canto.
Confira nossos planos de preços hoje para ver como a Kinsta pode acelerar o seu site!
Deixe um comentário