Como fazer um pop-up aberto no botão clicar usando o Elementor? [2022]

Quer saber como o seu site será atraente para os visitantes se um pop-up for aberto ao clicar no botão ? Se você deseja esse tipo de botão interativo que abre um pop-up, existem várias maneiras no construtor de sites mais popular, o Elementor . Hoje mostraremos como você pode criar facilmente um pop-up impressionante com clique de botão sem codificação.

5 melhores casos de uso de botão com pop-up modal Elementor

Vamos dar uma olhada nos benefícios que você vai aproveitar ao abrir um pop-up modal Elementor ao clicar no botão antes de começarmos com o tutorial. Basicamente, esse tipo de popup modal interativo é usado para campanhas de marketing do site . Além desses, também existem muitos casos de uso versáteis de abrir um pop-up ao clicar no botão. Aqui estão os 5 principais casos de uso de pop-up modal.

1. Para Capturar Leads para Negócios

Para administrar seus negócios sem problemas e aumentar o crescimento da empresa, você precisa de leads. Ao nutrir leads, você pode convertê-los em seus clientes regulares. E um site é o melhor meio para capturar leads. Se você abrir um pop-up com um clique de botão, poderá coletar facilmente os nomes dos leads , números de telefone, e-mails e outros detalhes.

2. Coletando assinatura de e-mail

Normalmente, se você adicionar um botão básico para coletar assinaturas de e-mail, ele levará seus usuários a uma nova página da web. Em vez de fazer isso, você pode abrir um pop-up com um clique de botão, para que seus usuários não precisem sair da página da Web atual. Essa prática aumenta surpreendentemente sua assinatura de e-mail contar suavemente.

3. Promoções e vendas de marketing

Quando você está executando promoções de marketing em seu site, as aberturas pop-up com um clique de botão podem dar ao seu site uma aparência interativa e aumentar as vendas . Você pode adicionar imagens, formulários, cupons de desconto especiais etc. em um único pop-up do Elementor. Sem tornar seu site indesejado junto com as seções de promoção, você pode substituir isso por um pop-up aberto com um clique de botão.

4. Compartilhando Anúncios Emocionantes

Se você planeja anunciar um grande lançamento ou outros anúncios e promoções empolgantes, as aberturas pop-up com o clique de um botão podem ser a melhor maneira. Isso dará ao seu site uma aparência impressionante e você poderá decorá-lo com confetes virtuais e outras decorações festivas. Além disso, se você está planejando anunciar alguma grande notícia 'em breve', o pop-up abre com um clique de botão pode ajudá-lo a criar o buzz .

5. Use como bloqueio de conteúdo

Quando você tem um site multifuncional, pode ser necessário fornecer restrições de conteúdo com base na idade, associação, assinatura e muito mais. Se você fornecer conteúdo restrito diretamente em uma seção do site, isso definitivamente diminuirá sua contagem de cliques por ação. Em vez disso, você pode criar um pop-up atraente que abre instantaneamente com um clique no botão.

Por que o Elementor é a melhor plataforma para criar pop-up em um botão?

Em sites, existem várias maneiras de criar um pop-up aberto com um clique de botão no WordPress. Uma maneira de fazer isso é por codificação personalizada ou contratação de especialistas. Se você não é experiente em tecnologia, fazer códigos ou contratar especialistas pode custar uma fortuna. Mas quando você usa o Elementor – o construtor de sites WordPress mais popular, pode fazê-lo sem codificar .

Para criar um pop-up abre com um clique de botão, você pode fazê-lo simplesmente arrastando e soltando , sem necessidade de codificação. Além disso, com a ajuda do construtor Elementor Popup, criar um pop-up aberto com um clique de botão é tão simples que você pode criar tudo sozinho. O Elementor oferece opções ilimitadas de personalização e personalização. Então, alinhando isso com o valor da marca do seu site, você pode criar qualquer tipo de pop-up que se abre com um clique de botão instantaneamente.

Tutorial sem código: como abrir um pop-up Elementor Modal ao clicar no botão?

Agora vamos para o tutorial e começar a fazer um pop-up aberto ao clicar no botão. Antes de começar a criar um pop-up Elementor, tudo o que você precisa é de 5 minutos de concentração e seguir este tutorial fácil passo a passo.

Etapa 1: comece com o Elementor PRO

Se você planeja criar um pop-up modal aberto com um clique de botão usando o Elementor, é necessário obter o Elementor PRO . Com o recurso exclusivo do Elementor PRO, o Elementor Popup Builder , você pode criar instantaneamente pop-ups que são abertos com um clique de botão. O Elementor vem com planos de preços versáteis, a partir de US$ 49 . Depois de obter o plugin Elementor PRO, instale e ative-o no seu site WordPress.

Etapa 2: criar um modelo usando o Elementor Popup Builder

Agora é hora de criar um modelo para pop-up aberto com um clique de botão. Para fazer isso, vá para o painel do WordPress, vá para Templates → Popup . Ao clicar na guia, ele o levará instantaneamente ao construtor de pop-up Elementor. Em seguida, clique no botão 'Adicionar novo pop-up' . Um pop-up aparecerá. O tipo de modelo é selecionado automaticamente como pop-up. Você pode dar um nome de modelo se quiser e depois clicar no botão 'Criar modelo' .

Em seguida, você será redirecionado para a Elementor Template Library . Existem mais de 100 coleções pop-up disponíveis em categorias versáteis. Com base no requisito do seu site WordPress, selecione um modelo pop-up Elementor adequado. Clique no modelo para obter uma breve visualização. Em seguida, clique no botão 'Inserir' para que o pop-up modal seja aberto com um clique de botão.

Etapa 3: configurar e personalizar o modelo pop-up

Depois disso, o painel do editor Elementor será aberto com todas as opções de configuração no lado esquerdo. A partir daí, você pode personalizar facilmente as aberturas pop-up com um clique de botão. Você pode manter o pop-up modal com Boxed ou Full Width . Da mesma forma, você pode configurar a altura do pop-up modal, o espaço da coluna, a posição da coluna, o alinhamento vertical, o estouro, as tags HTML e muito mais. Diferentes tipos de largura oferecem diferentes tipos de configuração.

Para personalizar o conteúdo pop-up modal, basta clicar no texto, na imagem ou nos botões. Instantaneamente, o painel de edição será aberto à esquerda. Você pode alterar facilmente o conteúdo pop-up, a família de fontes, etc. Adicione também várias seções de saída de e-mail, altura do botão, largura, cor, texto e muito mais. Existe uma opção disponível para definir ações após o envio, gerenciar envios, adicionar conteúdo de e-mail personalizado, e-mail do destinatário, ID do e-mail do remetente, etc. Depois de fazer todas as alterações, clique no botão 'Publicar' .

Etapa 4: configurar condições e gatilhos

Você pode aproveitar as aberturas pop-up em um clique de botão para todo o site WordPress ou páginas seletivas. Você também pode incluir ou excluir o pop-up Elementor das páginas selecionadas. Todas essas configurações estão disponíveis na guia 'Condição' .

Na guia 'Triggers' , você deve definir quando deseja que o pop-up seja aberto com um clique de botão. Como queremos visualizar o pop-up usando o botão clique, alterne para ativar 'Ao clicar' . A partir de 'Regras Avançadas' você pode configurar condições como para quem mostrar o popup, mostrar ao chegar o formulário e muito mais. Em seguida, clique no botão 'Salvar e Fechar' . É assim que você pode criar facilmente um modelo pop-up Elementor. Em seguida, volte para o painel do WordPress.

Etapa 4: adicione um botão Elementor onde você precisava

Agora, abra uma página onde você deseja definir um pop-up aberto com um clique de botão. Se você quiser criar uma nova página, vá para Páginas → Adicionar novo . para este tutorial, vamos conectar o modal pop-up com o botão Elementor. Arraste e solte o botão Elementor em sua página.

Personalize a aparência do botão, o texto, etc. para ajustar com a cor da marca do seu site. O próximo passo é vincular o botão com o modal pop-up. Para fazer isso, clique em 'Dynamic Type' no campo 'Link' , escolha Popup from Actions . Em seguida, clique no ícone 'Configurações' ao lado do pop-up e selecione o modelo de pop-up criado anteriormente. É isso!

Visão final do pop-up é aberto ao clicar no botão Elementor

Esta é a facilidade com que você pode criar um pop-up aberto com um clique de botão. Depois de fazer outras personalizações, publique a página. Agora para a visualização para verificar como um pop-up abre com um clique de botão.

Se você quiser usar o mesmo botão para páginas diferentes, copie e cole o botão em uma nova página da web. Além disso, você pode copiar o código de acesso do modelo pop-up Elementor e usá-lo em qualquer lugar que desejar para adicionar um pop-up aberto com um clique de botão.

Bônus para complementos essenciais para usuários Elementor

Essential Addons For Elementor é a biblioteca Elementor mais poderosa, com mais de 1 milhão de usuários ativos e mais de 85 widgets exclusivos. E seu widget Creative Button vem com design mais versátil e usabilidade multiuso para seus clientes. Se você estiver usando o widget de botão Essential Addons, da mesma forma que o botão Elementor, você pode abrir um pop-up com um clique de botão facilmente.

A Elementor facilitou o desenvolvimento de sites. Como o pop-up abre com um clique de botão, você pode criar funcionalidades mais impressionantes e versáteis para o seu site WordPress. Aqui está o final deste tutorial. Se você achou este tutorial útil, não se esqueça de compartilhá-lo com outras pessoas.

Deixe-nos saber como você cria um pop-up abre com um clique de botão usando o Elementor em nossa comunidade do Facebook . Além disso, inscreva-se nosso blog para se manter atualizado sobre esses tipos de tutoriais, dicas e truques.