Precisa de um botão em qualquer parte do seu site para abrir um popup do Elementor, mas o gatilho padrão "ao clicar" só funciona dentro de uma única página? Esta tarefa resolve-se em cinco minutos, sem plugins de terceiros e sem alterações de código.

O mecanismo nativo do Elementor Pro, uma âncora combinada com o seletor CSS Open By Selector. Depois de configurado, obtém um popup que abre a partir de qualquer página do seu site: a partir de um item de menu, de um link de texto ou de um botão no rodapé. Abaixo encontra um guia passo a passo, desde a criação do popup até ao teste num site ativo. Cada passo é ilustrado com uma captura de ecrã de uma configuração real.

💡 Visão geral rápida:

• Crie um popup em Modelos do Elementor → Popups e publique-o
• Nas condições de visualização, selecione "Site inteiro", este é o ponto-chave do método
• Nas definições globais do popup, ative "Desativar scroll da página" e "Evitar múltiplos popups"
• No separador Avançado, insira o seletor a[href="#your-anchor"] no campo Open By Selector
• Coloque links com a âncora #your-anchor por todo o site, o popup abrirá a partir de qualquer lugar

Passo 1: Criar um popup no Elementor

Abra Modelos → Popups no menu lateral do WordPress e clique em "Adicionar novo". Escolha um modelo pronto da biblioteca do Elementor ou comece com uma tela em branco. Dê um nome significativo ao popup, por exemplo, "Popup de Contacto" ou "Formulário de Pedido", para o encontrar facilmente na lista mais tarde. O design pode ser qualquer um: um formulário de contacto, subscrição de newsletter, formulário de feedback ou banner promocional.

Monte o conteúdo no construtor do Elementor como se fosse uma página normal: adicione um título, formulário, texto e botão de fechar. Quando estiver pronto, clique em Publicar.

Após publicar, o Elementor abrirá o ecrã de condições, gatilhos e regras adicionais. Aqui faremos a única configuração crítica.

Passo 2: Condição, "Site inteiro"

No ecrã de condições, encontre a lista suspensa e selecione Site inteiro. Esta é a única condição que precisa de definir.

Nota: mesmo que planeie mostrar o popup apenas em páginas específicas, escolher "Site inteiro" é o caminho mais simples. A exibição em si será controlada não pela condição da página, mas pela presença da âncora #contact no URL. Sem âncora na barra de endereço, sem popup.

O ecrã de gatilhos e regras adicionais pode ser ignorado: clique em Seguinte e depois em Guardar e Fechar. O método da âncora funciona independentemente destas configurações.

Passo 3: Definições globais do popup

Clique no ícone de engrenagem no canto inferior esquerdo do ecrã de edição do popup, o painel Definições do Popup será aberto. Vá para o separador Avançado.

Aqui, configure o comportamento para a sua tarefa. Recomendamos ativar:

• Desativar scroll da página, para que a página de fundo não faça scroll enquanto o popup está aberto;
• Evitar múltiplos popups, para impedir que vários popups se sobreponham.

Deixe os outros parâmetros com os valores padrão. O principal é o campo no final do separador, a razão pela qual tudo isto foi iniciado.

Passo 4: Open by selector, a magia da âncora

No campo Open By Selector, insira um seletor CSS que "escuta" o link de âncora. O formato é rigoroso:

1
a[href="#contact"]

Em vez de #contact, substitua pela sua própria âncora: #popup / #callback / #sale ou qualquer outro identificador único. O seletor responde a um clique em qualquer elemento <a> cujo atributo href seja igual à sua âncora.

Guarde o popup. Agora ele aguarda que um visitante siga um link com a âncora necessária.

Passo 5: Colocar links de âncora por todo o site

Só falta adicionar os links a partir dos quais o visitante abrirá o popup. Qualquer widget do Elementor com um campo de link funciona: Botão, Editor de Texto, Imagem, Caixa de Ícone.

No campo do link, em vez de um URL normal, insira #contact (ou a sua âncora). No frontend, isto funciona da seguinte forma: ao clicar, o navegador acrescenta #contact à barra de endereço, o seletor a[href="#contact"] é acionado e o popup abre.

Na prática, usamos três cenários típicos:

• Botão na secção principal, "Pedir contacto" com href #callback;
• Item de menu, em Aparência → Menus adicione um link personalizado com a âncora #contact;
• Link de texto no corpo do artigo, selecione o texto e insira a âncora no painel de link.

Teste: abra qualquer página do seu site, acrescente #contact à barra de endereço e pressione Enter, o popup deverá aparecer. Se não, volte ao passo 4 e verifique o seletor.

Vídeo: configuração em 3 minutos

O vídeo oficial do Elementor mostra o processo do início ao fim, desde a criação do popup até ao teste num site ativo.

⁉️🤔 Perguntas frequentes

O método funciona sem o Elementor Pro?

Não. O módulo Popup Builder está incluído apenas no Elementor Pro. Na versão gratuita do construtor, os popups não estão disponíveis. Se estiver a usar a versão Free, explore a combinação do Elementor com um plugin de popup separado (por exemplo, Popup Maker), mas a configuração será diferente, através de seletores jQuery e não através do Open By Selector padrão.

A condição "Site inteiro" é obrigatória?

Sim, este é um requisito fundamental do método. Se deixar a condição como "Em páginas específicas", o popup só será mostrado nas páginas selecionadas e apenas quando a página carregar, não ao clicar na âncora. O modo "Site inteiro" transfere o controlo para o seletor Open By Selector.

Posso criar vários popups diferentes com âncoras diferentes?

Sim. Crie um popup separado para cada âncora. Por exemplo, um popup "Contactos" com o seletor a[href="#contact"] e um popup "Promoção" com a[href="#sale"]. Ambos ficam em "Site inteiro" e são acionados independentemente pela sua própria âncora.

Porque é que o popup não abre pela âncora?

Verifique três coisas. Primeiro: #your-anchor tem de aparecer na barra de endereço, o navegador só o acrescenta ao clicar num <a> com o href correspondente, a introdução direta pelo teclado pode não funcionar. Segundo: o campo Open By Selector deve conter exatamente a[href="#contact"], sem espaços extra e com o tipo correto de aspas. Terceiro: abra a consola do navegador (F12) e procure erros de JavaScript, um conflito com outro plugin pode estar a bloquear o gatilho.

Isto afeta o SEO?

Não. Os links de âncora com cardinal não são indexados pelos motores de busca como páginas separadas. Para o Google, isto é um elemento técnico de navegação, não conteúdo duplicado.

O que fazer se os gatilhos padrão não forem suficientes

O link de âncora através do Open By Selector é a forma mais universal de abrir um popup do Elementor a partir de qualquer lugar do seu site. Não depende da página em que o visitante está e não requer a edição do functions.php.

Se a tarefa se tornar mais complexa, por exemplo, o popup deve abrir ao fazer scroll até um bloco específico ou 10 segundos após entrar no site, use os gatilhos padrão do Elementor: Ao fazer scroll, Ao carregar a página, Na intenção de saída. Estes são configurados no mesmo ecrã onde selecionámos "Site inteiro" e combinam perfeitamente com o método da âncora.

Experimente num site de teste: crie um popup, insira a[href="#test"], coloque um botão com esta âncora na página inicial. Todo o processo demora menos de cinco minutos.