Como adicionar um pop-up no Elementor gratuitamente (não é necessário elementor pro)

Você pode adicionar pop-ups no Elementor sem pagar pelo Elementor Pro. O Elementor gratuito não é fornecido com um construtor de pop-ups, mas o Pro não é a única maneira de obter um. O gratuito Complementos Mestres para Elementor o plugin inclui um completo Construtor Popup100+ modelos prontos, e cinco tipos de gatilho Tudo isso fica no plugin gratuito, sem temporizador de teste e sem marca d'água.

Você precisa de duas coisas: Elementor grátis, e o plugin Master Addons grátis do diretório WordPress Configurar um primeiro pop-up leva cerca de dez minutos Este guia cobre a construção de um, escolher quando ele dispara, e escolher quais páginas mostram, juntamente com as perguntas que surgem com mais frequência: o Elementor livre tem um construtor de pop-up, o que o elementor/popup/show evento realmente faz, e como abrir um pop-up a partir de um botão clique sem escrever JavaScript.

Você precisa do Elementor Pro para criar pop-ups?

Resposta curta: não. O Popup Builder do Elementor Pro é um recurso pago, mas não é a única maneira de adicionar pop-ups dentro do Elementor.

Eis o que cada opção realmente lhe dá:

Então, se os popups foram a única razão pela qual você estava olhando para o Elementor Pro, você pode ficar no Elementor gratuito, instalar Master Addons e construí-los com o mesmo editor de arrastar e soltar Se você já possui o Pro, os dois correm lado a lado sem entrar em conflito.

Vale a pena ser específico sobre a palavra “free” aqui O Construtor de Popups não é uma versão de teste e não uma versão reduzida de um módulo pago Master Addons vende uma versão Pro, mas Pro cobre outras coisas: widgets extras e o Construtor de Popups completo ficam do lado de fora disso.

O que é o Master Addons Popup Builder?

Master Addons é um plugin Elementor tudo-em-um usado por 30.000+ sites ativos Ele vem com 80+ widgets, a Construtor Tema, uma biblioteca de modelos, a Construtor de widgets, e um grátis Construtor Popup. O Construtor de Popups não é uma compra separada Instale o plugin e ele está lá.

Você projeta popups visualmente dentro do editor Elementor, depois controla quando eles aparecem (gatilhos) e onde eles aparecem (condições de exibição) Sem código, sem plugin extra, sem licença Pro.

Por que as pessoas escolhem o Construtor Popup de complementos mestres gratuitos

• Gratuito Construtor de Popups empacotado no plugin Não é necessária atualização.
• Mesma experiência de design de arrastar e soltar que você já conhece no Elementor.
• Mais de 100 modelos pop-up pré-construídos prontos para importar com um clique.
• Cinco tipos de gatilho: On Click, Page Load, Exit Intent, On Scroll, After Inactivity.
• Condições de exibição para qualquer postagem, página, categoria ou tipo de postagem personalizado.
• Funciona no Elementor gratuito, hospedagem gratuita do WordPress e nas versões mais recentes do Elementor.

Que tipos de pop-ups você pode construir?

• Geração de leads e pop-ups opt-in por e-mail
• Promoções WooCommerce, banners de venda e ofertas de abandono de carrinho
• Popups de vídeo lightbox (YouTube, Vimeo, auto-hospedado)
• Caixas de luz da galeria de imagens
• Barras de anúncio e banners principais
• Popups de login e formulário de registro
• Consentimento de cookies e avisos de GDPR
• Feedback, NPS e pop-ups de pesquisa
• Pop-ups modais para termos, detalhes de preços ou informações do produto

Os 5 gatilhos pop-up em complementos mestres

1. no gatilho de rolagem

O pop-up dispara atrás do visitante rola uma porcentagem definida da página. Bom quando você deseja que uma atualização de conteúdo ou um e-mail seja ativado depois que o leitor realmente leu algo, e não no carregamento da página quando não decidiu se deveria ficar.

Gatilho de carga de 2 páginas

O pop-up aparece após um atraso definido, medido em segundos. Adequado a mensagens de boas-vindas, ofertas limitadas no tempo e qualquer coisa que todos devam ver Assista ao valor do atraso Qualquer coisa abaixo de 2 segundos tende a incomodar as pessoas em conexões lentas.

3. gatilho de intenção de saída

O pop-up detecta quando o cursor se move em direção à guia do navegador ou botão de fechamento e dispara uma mensagem final Isso é o que as pessoas estão procurando como “pop-up de intenção de saída do elementor“, e está no plugin gratuito Master Addons Uma ressalva antes de construir uma campanha em torno dele: a intenção de saída é um comportamento de desktop Um telefone não tem cursor para rastrear, então dê aos visitantes móveis um scroll ou gatilho de inatividade em seu lugar.

4. On Clique em gatilho

O pop-up abre somente quando um visitante clica em um botão, imagem ou link específico É a maneira mais fácil de construir um modal clique-para-abrir sem tocar no código, e é o substituto gratuito para o elementor/popup/show Evento JavaScript abordado na próxima seção.

5. Após o gatilho de inatividade

O pop-up reengata um visitante que parou de rolar ou mover o cursor por um período definido. Bom para recuperar a atenção sem disparar na primeira vista, que é a maneira mais rápida de perder um leitor.

Como usar o evento elementor/popup/show (e a alternativa gratuita)

Elementor Pro expõe um evento JavaScript chamado elementor/popup/show. Os desenvolvedores o usam para acionar um pop-up do código: dispare um pop-up após um envio de formulário personalizado, uma resposta AJAX ou um botão que esteja fora do editor Elementor.

O padrão básico no Elementor Pro é assim:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Se você estiver no Elementor gratuito, não terá acesso a elementorProFrontend.modules.popup.showPopup. Você também não precisa para a maioria dos casos de uso Os Complementos Mestres Em Clique o gatilho lida com os comuns nativamente:

• Clique em um botão em qualquer lugar da página, o pop-up abre Defina o seletor de gatilho para uma classe ou ID CSS e qualquer elemento correspondente abre o pop-up.
• Clique em uma imagem, ícone ou link de texto, pop-up abre A mesma lógica de seletor se aplica a qualquer elemento.
• Abra um pop-up após um envio de formulário Combine a ação de redirecionamento ou agradecimento do formulário com um botão oculto que possui o seletor pop-up.

A abordagem do seletor fica fora de estrada quando a decisão acontece em tempo de execução, como abrir um pop-up somente se uma chamada AJAX voltar com um valor particular Para isso, faça com que seu script clique em um elemento oculto que carrega a classe de gatilho e deixe o seletor fazer o resto.

Se você quiser ouvir eventos de popup-show a partir de seu próprio código (analítica, lógica personalizada), vincule-se ao evento global que o pop-up dispara quando ele abre O nome exato do evento está no Documentação Master Addons para a versão que você está executando.

Como acionar um pop-up de elementor com um botão Clique (gratuito)

Uma das solicitações mais comuns, então aqui está a configuração exata:

1. Crie o pop-up em Master Addons, Popup Builder e projete-o.
2. Nas configurações do pop-up, alterne o gatilho para Em Clique.
3. Insira um seletor CSS no campo de disparo, por exemplo .open-signup-popup.
4. Vá para a página ou modelo com o botão Editar o widget do botão Avançado, Classes CSS campo e adicionar open-signup-popup (sem ponto, apenas o nome da classe).
5. Salve ambos Cada botão com essa classe agora abre o pop-up, em qualquer lugar do site.

O mesmo seletor funciona em uma linha, uma coluna, um cabeçalho, um ícone ou qualquer elemento ao qual você possa dar uma classe É assim que você obtém um comportamento idêntico elementor/popup/show sem escrever uma linha de JavaScript Uma coisa a ser observada: se você usar um seletor de ID como #open-popup, certifique - se que nenhum outro elemento da página partilha o ID, caso contrário, clica em disparar a partir do elemento errado.

Modelos pop-up de elementor gratuitos: mais de 100 designs prontos para importação

O plugin é fornecido com uma biblioteca de modelos pop-up cobrindo opt-ins de boletins informativos, banners de venda, promoções WooCommerce, ofertas de intenção de saída, caixas de luz de vídeo, avisos de cookies e formulários de login Cada modelo importa em um clique e é totalmente editável dentro do Elementor Se você preferir começar a partir de um design próximo ao seu objetivo final, isso é mais rápido do que construir do zero.

A biblioteca completa vive dentro do editor e faz parte do mais amplo Biblioteca de modelos de complementos mestres ao lado de modelos de páginas e seções.

Passo a passo: como adicionar um pop-up no elementor usando complementos mestres

Passo 1: Instale e Ative complementos mestres

1. Abra o painel WordPress, plug-ins, adicione novo.
2. Procurar por “Master Addons para Elementor”.
3. Clique Instale Agora, então Ativar.
4. Um novo Adições Mestres o item aparece na barra lateral do WordPress.

Se o item da barra lateral não aparecer imediatamente, atualize o admin (Ctrl+Shift+R /Cmd+Shift+R).Alguns plugins de cache ficam pendurados no menu de admin antigo por um minuto.

Passo 2: Abra o Construtor de Popups

1. Ir para Complementos Mestres, Construtor de Popups.
2. Clique Adicionar novo pop-up.
3. Dê ao pop-up um nome descritivo (por exemplo, Boletim informativo, postagens de blog).
4. Clique Editar com o Elementor.

Passo 3: Escolha um modelo ou comece do zero

1. Clique no ícone Biblioteca de modelos de complementos mestres no editor Elementor.
2. Navegue pela categoria pop-up e visualize os designs.
3. Clique Inserir em qualquer modelo para importá-lo para a tela.
4. Ou pule a biblioteca e arraste widgets para uma tela em branco.

Passo 4: Projete o conteúdo pop-up

1. Arraste em widgets Elementor: Cabeçalho, Editor de texto, Botão, Imagem, Formulário.
2. Para captura de e-mail, use um widget de Formulário e conecte-o ao seu serviço de e-mail.
3. Adicione um temporizador de contagem regressiva, ícone ou vídeo usando widgets principais do Elementor ou Master Addons.
4. Ajuste fontes, cores, preenchimento e espaçamento nas guias Estilo e Avançado.
5. Visualização na visualização de celular e tablet para confirmar que o layout ainda funciona.

Passo 5: Configurar o gatilho Popup

1. Clique no ícone de engrenagem na parte inferior esquerda do editor para abrir Configurações.
2. Abrir o Acionador guia.
3. Escolha um dos cinco gatilhos: Clique, Carregue a página, Saia da intenção, Role a página, Após a inatividade.
4. Preencha as configurações específicas do gatilho: porcentagem de rolagem, segundos de atraso, seletor de clique ou duração da inatividade.

Passo 6: Definir condições de exibição (onde o pop-up é exibido)

As condições de exibição decidem quais páginas realmente mostram o pop-up A maioria dos problemas de pop-up começa aqui Um pop-up sem regra de exibição nunca aparece, então essa é a primeira coisa a verificar quando parece bom no editor, mas nada aparece no front-end.

1. Abrir o Condições de exibição guia em configurações pop-up.
2. Escolha um Incluir regra: Site inteiro, páginas específicas, postagens específicas, categorias, tags ou um tipo de postagem personalizado.
3. Adicionar um Excluir regra para qualquer coisa que você queira pular (por exemplo, exclua a página de checkout de um pop-up em todo o site, caso contrário, incomoda as pessoas que já se converteram).
4. Salve as condições antes de publicar.

Para editar as condições de exibição mais tarde, reabra o pop-up, clique no ícone de engrenagem, vá para Condições de exibição, altere as regras e atualize O design e o gatilho permanecem os mesmos Somente a segmentação muda.

Etapa 7: Publicar e testar

1. Clique Publicar ou Atualizar no canto inferior esquerdo do editor.
2. Abra a página que deve mostrar o pop-up em uma janela normal do navegador (não a visualização do editor).
3. Acione o pop-up da maneira que você o configurou: clique no botão, role, espere ou mova-se em direção à guia fechar.
4. Verifique o comportamento responsivo em um telefone real A visualização do editor está próxima, mas não exata.
5. Monitore os envios de formulários e as taxas de conversão da primeira semana.

Por que um pop-up não está aparecendo

Se o pop-up funciona no editor, mas nunca aparece no site, é quase sempre um desses cinco, em ordem aproximada de quantas vezes acaba por ser a causa:

1. Nenhuma condição de exibição é definida Um pop-up sem regra de inclusão corresponde a nenhuma página, portanto, nunca renderiza em nenhum lugar Condições de exibição abertas e adicione uma.
2. O pop-up ainda é um rascunho Salvar o design não é o mesmo que publicá-lo Verifique o status no canto inferior esquerdo do editor.
3. Um cache está servindo a página antiga Purgue o plugin de cache e o CDN e, em seguida, teste novamente em uma janela privada.
4. O seletor de cliques não corresponde Para On Click, o campo de disparo leva .my-class com o ponto, enquanto o campo Classes CSS do botão leva my-class sem isso. Misturar essas duas contas para a maioria dos relatórios que vemos.
5. Você está testando a intenção de saída em um telefone Não há cursor para sair da janela de visualização, então nada dispara Teste esse em um navegador de desktop.

Complementos Master vs. Elementor Pro Popup Builder

Master Addons não é a única maneira gratuita de fazer isso Os plugins pop-up autônomos, como o Popup Maker, também têm camadas gratuitas, e se os pop-ups são a única coisa que você precisa, eles valem a pena dar uma olhada Eles relatam conversões com mais detalhes do que qualquer addon Elementor O comércio é que você projeta em sua interface em vez da Elementor, e você está executando um plugin que faz um trabalho Master Addons faz mais sentido quando você quer que o pop-up seja construído com o mesmo editor, widgets e estilos que o resto do site.

Pesando outras opções também? compare as ferramentas superiores lado a lado em nosso resumo do melhores plugins de construção de popups para WordPress.

Para quem esta configuração funciona melhor

• Freelancers e desenvolvedores web que não querem comprar Pro apenas para popups.
• Proprietários de lojas WooCommerce executando banners de venda e ofertas de recuperação de carrinho.
• Blogueiros e criadores de conteúdo capturando assinantes de e-mail.
• Agências que gerenciam muitos sites de clientes com orçamentos apertados.
• Startups e pequenas empresas validando ofertas antes de pagar por ferramentas premium.

Perguntas frequentes