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

O Elementor Gratuito não inclui um construtor de pop-ups. O Construtor de Popups é um recurso do Elementor Pro. Para obter popups sem pagar pelo Pro, instale o gratuito Construtor de pop-ups Master Addons, projete o pop-up dentro do editor Elementor normal, configure-o para abrir no carregamento da página e publique Esse caminho é gratuito, funciona na versão gratuita do Elementor e leva cerca de cinco minutos.

Este guia caminha a coisa toda, com capturas de tela tiradas no Elementor 4.2.4 e Master Addons 3.2. também cobre as partes que a maioria dos tutoriais pula: quais gatilhos são realmente gratuitos, como manter um pop-up fora de cada página quando a segmentação de página é um recurso Pro e a API JavaScript que substitui elementorProFrontend.modules.popup.showPopup quando você não tem Pro.

Elementor free tem um construtor de pop-ups?

O próprio construtor de pop-ups do No. Elementor é fornecido apenas com o Elementor Pro Instale o Elementor gratuito e não há nenhum item Popups em nenhum lugar do menu, e o elementor/popup/show evento não existe na página.

Você tem três saídas:

Master Addons é a opção abordada aqui porque o pop-up é construído na mesma tela Elementor que você já usa, então não há um segundo editor para aprender É um plugin gratuito no WordPress.org em execução Mais de 30.000 sites, e o Popup Builder vem com o download gratuito.

Se preferir comparar várias ferramentas primeiro, mantemos um resumo separado do melhores plugins de construção de popups para WordPress.

O que o construtor pop-up gratuito realmente lhe dá

A divisão abaixo foi verificada controle por controle no plugin, para que você possa ver onde a versão gratuita para antes de começar a construir.

Então a versão gratuita dá-lhe um pop-up real com controle de design real O que ele não dá é variedade de gatilho e segmentação em nível de página Ambos têm soluções alternativas, e ambos são abordados abaixo.

Como adicionar um pop-up no Elementor gratuitamente, passo a passo

Etapa 1: Instale complementos elementadores e mestres

Do painel do WordPress vá para Plugins → Adicionar plug-in, procure por Elementor, instale e ative-o Em seguida, procure por Complementos Mestres para Elementor e faça o mesmo Elementor Pro não é necessário em nenhum momento.

O link Get Elementor Pro naquela captura de tela é a oferta de que esta é a compilação gratuita Tudo abaixo foi feito exatamente nessa configuração Notas de instalação completas ao vivo no docs instalação.

Etapa 2: Open Master Addons → Construtor de pop-ups

A activação do 'plugin' adiciona um Adições Mestres item para a barra lateral do WordPress Abra e clique Construtor Popup.

Esta lista é mais útil do que parece Cada linha mostra a condição de exibição do pop-up, seja ele Ativo ou Inativo, e o shortcode que você pode usar para soltá-lo em uma única página Mantenha essa coluna de shortcode em mente, ela resolve o problema de segmentação de página gratuita mais tarde.

Passo 3: Nomeie o pop-up e ligue a ativação

Clique Adicionar novo pop-up. Uma pequena caixa de diálogo é aberta com dois campos.

Dê-lhe um nome que você reconhecerá em seis meses e depois vire-se Ativação on. Um popup deixado inativo nunca é renderizado no front-end, mesmo que você o publique e mesmo que você o coloque por shortcode Esta é a única razão mais comum pela qual um pop-up finalizado não mostra nada.

Passo 4: Defina onde o pop-up aparece

Mudar para o Condições guia na mesma caixa de diálogo.

Na versão gratuita você obtém uma regra: Incluir → Site Inteiro. As outras regras (Página inicial, Singular, Arquivo, Pesquisa, 404), o tipo Excluir e o botão Adicionar condição são Pro. Se você quiser o pop-up em apenas uma página e estiver se mantendo livre, vá em frente para o método shortcode.

Agora clique Editar com o Elementor.

Passo 5: Comece a partir de um modelo ou tela em branco

O editor abre com um quadro pop-up vazio Na área de drop há um botão Master Addons roxo ao lado dos botões add do próprio Elementor Clique nele para abrir a biblioteca de modelos pop-up.

Há 25 designs pop-up lá, todos eles disponíveis no plugin gratuito, cobrindo vendas, lançamentos de produtos, ofertas sazonais, em breve e sobre páginas Passe o mouse em um cartão e clique Inserir para importá-lo. Tudo importa como elementos Elementor normais, para que você possa reescrever o texto e trocar as cores imediatamente.

A mesma ideia de biblioteca é executada no plugin Se você quiser páginas e seções prontas também, isso é o Biblioteca de modelos Master Addons.

Passo 6: Projete o pop-up

Prefere construir o seu próprio? arrastar widgets para a tela da maneira que você faria em qualquer página Cabeçalho, Editor de texto e botão cobrir um típico opt-in.

Algumas coisas que valem a pena fazer aqui:

• Mantenha a cópia em uma promessa Um título, uma linha de texto de suporte, um botão.
• Verifique as visualizações do tablet e do celular com os ícones do dispositivo na parte superior Um pop-up de 640 px é bom em um laptop e apertado em um telefone.
• Para captura de e-mail, solte um widget de formulário de qualquer plugin de formulário que você já execute O Formulário de Contato 7 e o MC4 WP funcionam dentro do pop-up.
• Todos com mais de 80 anos Widgets Master Addons também estão disponíveis dentro do pop-up, portanto, os temporizadores de contagem regressiva e as tabelas de preços funcionam da mesma forma que em uma página.

Passo 7: Escolha o gatilho

Clique Configurações pop-up MA na barra de ferramentas superior É o quarto ícone da esquerda, aquele que se parece com um documento com uma engrenagem Tutoriais mais antigos apontam para uma engrenagem no canto inferior esquerdo, que é onde ele viveu antes do Elementor 4.

Sete gatilhos estão listados. Na carga da página é o gratuito e Atraso após o carregamento da página (seg) aceita qualquer coisa de 0 a 60 em passos de 0,1. dois a três segundos é um ponto de partida sensato O disparo incomoda instantaneamente as pessoas em conexões lentas, e qualquer coisa que passe de dez segundos geralmente perde o visitante inteiramente.

Abaixo dele, Mostrar novamente atraso controla quanto tempo esperar antes de mostrar o popup novamente para alguém que o fechou O Free não lhe dá nenhum atraso, 1, 3 e 5 minutos O Pro estende isso para horas, dias, um mês e Não Mostrar novamente.

Desativar rolagem de página é gratuito e o padrão é Sim, que bloqueia a página atrás do pop-up.

Passo 8: Defina o layout, posição e animação

Abrir o Layout seção no mesmo painel Tudo isso é gratuito.

Exibir como alterna o pop-up entre três formas:

• Popup Modal: a caixa centralizada que a maioria das pessoas entende por pop-up.
• Barra Notificação: uma tira fixada no topo da página, boa para anúncios e ofertas de envio.
• Tela cheia: assume a janela de visualização, melhor para uma única oferta forte.

Layouts modais, em seguida, obter nove posições, a partir de Centro Centro para Bottom Direita, e cerca de 70 animações de entrada Fade In em 400 ms é o padrão seguro O referência de configurações pop-up lista todos os controles se você quiser o mapa completo.

Passo 9: Publique e teste-o na extremidade frontal

Bate Publicar, então abra seu site em uma janela privada Aqui está o pop-up disparando dois segundos após o carregamento da página, no Elementor livre com apenas o plugin Master Addons livre ativo.

Teste em uma janela privada em vez da visualização do editor O editor suprime deliberadamente pop-ups, e uma guia normal do navegador pode estar servindo uma página em cache.

Mostre um pop-up em apenas uma página, gratuitamente

As condições de exibição no nível da página são Pro. O shortcode é gratuito e atinge o mesmo resultado na outra direção.

Cada pop-up na lista do Construtor de Popups carrega um shortcode como . Cole-o em uma página, um post, uma área de widget ou um widget Shortcode no Elementor, e que o pop-up carrega apenas nessa página Colocá-lo dessa maneira pula as condições de exibição inteiramente.

Duas regras para saber:

• O pop-up deve ser publicado e seu Ativação o alternador deve estar ativado. Um pop-up inativo não renderiza nada, shortcode ou não.
• O shortcode não emite marcação visível onde você colá-lo O pop-up é impresso no rodapé e abre de acordo com o seu gatilho.

Portanto, um pop-up gratuito específico da página é assim: deixe a condição em Todo o Site e solte o shortcode na única página que deveria tê-lo.

Os sete gatilhos pop-up, e quais você recebe de graça

A Intenção de Saída é apenas para desktop por natureza Os telefones não têm cursor para sair da janela, portanto, não há nada para o gatilho detectar Teste-o em um navegador de desktop antes de registrar um bug.

O gatilho On Page Load gratuito tem o seu próprio configuração doc se você quiser a versão curta.

Como acionar um pop-up Elementor em um clique de botão

Este é o gatilho mais solicitado após o carregamento da página, e é o que as pessoas mais frequentemente tentam falsificar com JavaScript Com o Master Addons Pro é um campo de texto.

1. Projete e salve o pop-up como de costume.
2. Em Configurações pop-up MA, definir Abrir pop-up para Em Clique.
3. Em Abrir Por Seletor, digite o seletor incluindo o ponto, por exemplo .open-newsletter-popup.
4. Editar o botão que o deverá abrir Ir para Avançado → Classes CSS e digite open-newsletter-popup, desta vez sem o ponto.
5. Atualize ambos e teste no front-end.

A incompatibilidade de pontos nas etapas 3 e 4 faz com que a maior parte do gatilho de clique “my não faça nada com que os relatórios de” que vemos O campo de gatilho recebe um seletor CSS, o campo Elementor leva um nome de classe.

O selector não se limita aos botões Qualquer elemento que possa dar uma classe a funciona: um contentor, um cabeçalho, um ícone, uma imagem Poderá também visar uma ligação existente com um selector de atributos como a[href="#pricing-popup"]. Existe um relacionado Widget Popup Trigger para colocar ações de fechamento e redirecionamento dentro do próprio pop-up.

Sem Pro, quatro linhas de JavaScript fazem o mesmo trabalho Esse código está na próxima seção.

O evento elementor/popup/show, e o que o substitui sem Pro

elementorProFrontend.modules.popup.showPopup e o elementor/popup/show evento ambos pertencem ao Elementor Pro. O módulo pop-up se registra no elementorProFrontend objeto, então em uma instalação gratuita esse objeto é indefinido e o evento nunca dispara Nenhum trecho o traz de volta, porque o código que o emitiria está no plugin Pro.

O plugin gratuito Master Addons envia sua própria API que cobre o mesmo terreno.

Master Addons expõe um chamado global JltmaPopups em qualquer página onde um popup esteja presente Aqui está o mapeamento:

Cada pop-up é impresso com o ID DOM jltma-popup-id-<post ID>. O ID do post é o número no shortcode na tela da lista do Construtor de Popups. Para abrir o popup 441 a partir do seu próprio código:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Para conectar isso a um clique, que é o substituto gratuito para o gatilho On Click:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

E para fechá-lo novamente:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Três coisas para assistir:

• getLocalStorage() devoluções false até que o pop-up seja inicializado na página, o que acontece no DOM ready. Execute seu código dentro jQuery(function ($) { ... }) e tu estás bem.
• O pop-up tem que estar na página para que qualquer um desses funcione Ou sua condição inclui a página, ou você a colocou com o shortcode.
• O script é ignorado propositalmente no editor Elementor, então teste no front-end.

Por que o elementor/popup/show dispara duas vezes

No Elementor Pro, o manipulador rodando duas vezes quase sempre significa que ele foi amarrado duas vezes: uma vez ligado elementor/frontend/init e novamente em um trecho ou arquivo de tema, ou uma vez por instância pop-up quando vários estão presentes Proteja-o com um sinalizador ou vincule-o .off('elementor/popup/show').on(...) antes de religar. Elementor próprio documentação de eventos pop-up lista a assinatura completa do evento.

O equivalente Master Addons não tem nenhum evento de documento para vincular duas vezes, portanto o problema não é transferido Você liga openPopup() diretamente no momento em que você deseja que o pop-up seja aberto.

Por que seu pop-up Elementor não está aparecendo

Em ordem aproximada de quantas vezes cada um acaba por ser a causa:

1. A ativação está desligada. Abra o Master Addons → Construtor de Popups e verifique a coluna Status Inativo significa que nada renderiza em qualquer lugar, shortcode incluído.
2. O pop-up ainda é um rascunho. Salvar o design no Elementor não é o mesmo que publicar o pop-up.
3. Você está testando na visualização do editor. Os popups são suprimidos ali por design Use uma janela privada.
4. Cache. Purgue o plugin de cache e o CDN e, em seguida, recarregue em uma janela privada Uma página HTML em cache não conterá um pop-up recém-publicado.
5. Mostrar novamente Atraso já disparado. Depois de fechar o pop-up, o plugin armazena um carimbo de data/hora no armazenamento do navegador Limpe os dados do site ou alterne os navegadores ao testar repetidamente.
6. Incompatibilidade de pontos em um seletor de cliques. O campo de disparo quer .my-classo campo Classes CSS do Elementor quer my-class.
7. Saia com intenção de telefone. Não há cursor, então nada dispara Apenas desktop.

Master Addons vs pop-ups Elementor Pro

Se os popups são o único recurso Pro que você deseja, o construtor Master Addons gratuito mais um shortcode o cobre Se você quiser sair da intenção ou clicar em gatilhos sem escrever JavaScript, compare o Preços Master Addons contra uma renovação do Elementor Pro, já que a licença Master Addons também traz o Construtor Tema e Construtor de widgets com ele.

Perguntas frequentes

Leitura relacionada

• Construtor de pop-ups Master Addons, a página de recursos com cada configuração listada
• Melhores plugins de construtor de pop-ups para WordPress, se você quiser comparar ferramentas
• Configurações e opções de pop-up, a referência de controle total
• Complementos Master no WordPress.orgfórum de download e suporte