Cronometrar um pop-up por porcentagem de página é bom até que você precise que ele caia em um ponto exato Talvez você queira no instante em que alguém chegar ao seu bloco de preços, uma linha de depoimentos ou uma banda de call-to-action, não um vago 40% abaixo da página Construtor de pop-ups Master Addons lida com isso com o Em Rolar para Elemento gatilho. Você dá ao pop-up um ID CSS com um #, então coloque esse mesmo ID, sem o #, no elemento que você deseja atuar como gatilho.
Aqui está a configuração completa no Master Addons Popup Builder, que vem gratuitamente com Master Addons para Elementor Se um gatilho baseado em porcentagem é tudo que você precisa, o guia de opções de gatilho pop-up cobre aquele.
Antes de começar #
- Um pop-up já construído no Master Addons Popup Builder (veja o guia de configurações pop-up para criar um)
- Uma página com o elemento que deseja usar como gatilho de rolagem
- Elementor instalado e ativo
- Complementos Mestres para Elementor instalados e ativos (guia instalação)
Passo 1: Defina o Popup para Abrir Em Rolar para Elemento #
Abra seu pop-up no Elementor e vá para o Configurações pop-up MA painel. Sob Configurações, troque Abrir pop-up para Em Rolar para Elemento. Um novo campo aparece: Seletor Elementos.
A dica sob o campo explica o que ele quer, um seletor CSS para o elemento que aciona o pop-up em scroll, como #my-id ou .my-class.
Passo 2: Insira um seletor de ID CSS (com o sinal #) #
No Seletor Elementos campo, digite um ID CSS que comece com #. Aqui está #show-popup. Mantenha o nome curto e exclusivo para que você possa reutilizá-lo na página sem colidir com mais nada.
O # está fazendo um trabalho real: diz ao pop-up para observar um elemento cujo ID é show-popup. Publique (ou atualize) o pop-up para salvá-lo.
Passo 3: Adicione o mesmo ID ao seu elemento alvo (sem o sinal #) #
Agora abra a página onde o popup deve disparar e edite-o no Elementor Clique no elemento que deseja como gatilho, aqui está o bloco de seção na página e abra o seu Avançado guia.
Encontre o ID CSS campo na guia Avançado e digite o mesmo nome que você usou no pop-up, mas sem o #, então apenas show-popup. Essa pequena diferença é todo o truque:
- Seletor de elementos pop-up:
#show-popup(com o hash) - ID CSS do Elemento:
show-popup(sem hash)
O # faz parte do seletor CSS, não faz parte do ID, por isso pertence ao campo popup mas nunca ao campo CSS ID do elemento Atualize a página para salvar Uma coisa a ser observada: não reutilize um ID que já esteja conectado a um link âncora ou CSS personalizado em outro lugar, ou você terá surpresas.
Passo 4: Visualizar e Rolar para o Elemento #
Abra a página no front-end e comece a rolar Nada no topo O segundo o elemento que carrega o show-popup ID rola para a vista, o pop-up abre sobre a página.
Quer vários pontos de rolagem para acionar o mesmo pop-up? dê a cada elemento o mesmo ID CSS, show-popup, e qualquer um deles irá detoná-lo.
Solução de problemas #
- Popup nunca abre? Verifique o hash O Seletor de Elementos do popup precisa
#show-popup, e as necessidades de ID CSS do elementoshow-popupsem hash. - Usou o # no campo ID do CSS? Tire-o O campo Elementor CSS ID quer apenas o nome simples.
- Dois elementos com o mesmo ID agindo? Isso é bom para acionar, mas não reutilize um ID que já esteja lidando com CSS ou links âncora na página.
- Popup não está aparecendo? Certifique-se de que a Ativação do popup esteja ativada e que suas condições de exibição incluam a página com o elemento de disparo.
Perguntas frequentes #
Como faço para abrir um pop-up ao rolar para um elemento específico no Elementor?
Defina a opção Abrir Popup do popup para On Scroll to Element e insira um ID CSS como #show-popup no campo Selecionador de Elementos Em seguida, adicione o mesmo ID, sem o #, ao campo ID CSS do elemento de destino na guia Avançado do Elementor.
Por que adiciono o # no pop-up, mas não no elemento?
O campo Seletor de Elementos espera um seletor CSS, e o # marca um seletor de ID. O campo ID do Elementor CSS espera apenas o nome do ID. Então você usa o #show-popup no popup e o show-popup no elemento.
Posso acionar o pop-up de mais de um elemento?
Sim. Dê a cada elemento o mesmo ID CSS, e o pop-up dispara quando o visitante rola para qualquer um deles Isso é útil quando você tem várias seções que devem acionar a mesma oferta.
Qual é a diferença entre On Scroll e On Scroll to Element?
Em Scroll dispara depois que um visitante rola uma porcentagem definida da página Em Scroll to Element dispara quando um elemento específico entra em exibição, o que é mais preciso quando você deseja que o pop-up seja vinculado a uma seção exata.
Preciso do Elementor Pro para isso?
No. O Master Addons Popup Builder funciona com a versão gratuita do Elementor, portanto, o gatilho On Scroll to Element e o método CSS ID funcionam sem o Elementor Pro.
