UPDATE! Elementor: Como Esconder Botões e Elementos Temporizados em uma Landing Page Sem Deixar um Espaço Vazio
Este post é um update do outro post sobre o mesmo assunto. Neste há atualizações na etapa 3, pois em vez de você ter que localizar coisas no código-fonte, iremos dar nomes aos blocos. Bem mais fácil!
Opa! Mais um post técnico para vocês! Desta vez usando o Elementor.
Eu ajudei recentemente uma colega do marketing a resolver um pequeno problema que estava tendo com o Elementor, o plugin para WordPress de construção de páginas.
Uma das principais utilidades deste plugin para a galera de marketing digital é na construção de landing pages, ou seja, as páginas de vendas de seus produtos.
Uma das estratégias de vendas muito utilizadas é a da landing page limpa com apenas uma chamada forte no topo e um vídeo de vendas logo abaixo.
Ao longo do vídeo, geralmente em um momento em que seu criador acredita que o lead esteja preparado para comprar um produto, vários elementos como botões de compra, detalhes do produto etc. surgem na página anteriormente “vazia”.
Contudo, se você já tentou fazer isso no Elementor, perceberá que ele oculta as coisas mas deixa um baita espaço vazio onde estes elementos deveriam estar. Se você tiver algo no rodapé da landing page, ficará tudo meio estranho…
Para resolver isso, a forma que encontrei foi usar um script em JQuery.
Quando a página carrega, o script esconde tudo usando a função hide() e depois de um período de tempo, ela dispara um show() para mostrar tudo de volta.
A vantagem desta forma é que, ao usar o hide(), os elementos de fato são removidos da visão do usuário e o que por ventura existir no rodapé da página será puxados para cima, preenchendo o espaço vazio.
Outra vantagem é que, se não quiser, você não precisa do Elementor. Pode fazer isso em qualquer página. Basta ter um plug-in que permita inserir scripts na sua página.
1) Adicionar um Elemento HTML no Elementor
É importante que ele seja o último bloco da sua página. Lá embaixo. No mínimo, abaixo dos blocos que queira esconder.
2) Importar o JQuery no Elementor
Dentro deste campo HTML criado, coloque a chamada do JQuery abaixo. As tags <head> servem para fazer o Elementor lançar isso no head da página.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>3) Dê Nomes aos Elementos para Esconder
Clique na seção (1) ou no elemento que queria esconder e vá em Avançado (2).
Depois, coloque um nome em Classe CSS (3). Eu coloquei o nome atrasado para os elementos que eu quero esconder.
Coloque este mesmo nome de classe para todos os elementos que você quiser esconder.
Dica: Caso você queira esconder várias coisas, coloque-as dentro de um único bloco no Elementor. É claro que é mais fácil empilhar blocos, mas você terá que manualmente esconder um-por-um… Com todos dentro de um grande bloco-pai, você esconde esse bloco de uma vez por todas.
4) Fazer o Código
Agora vamos construir um código em JQuery para esconder o(s) bloco(s) que você quer esconder.
Você usará o código assim:
<script>
$('.NOME DA CLASS CSS').hide();
setTimeout(function() {
$('.NOME DA CLASS CSS').show();
}, 1000);
</script>Coloque em NOME DA CLASS CSS o nome que você acabou de dar para a Classe CSS dos elementos ou blocos no passo anterior e adicione um ponto antes dele. Isso é importante.
Note que tem que colocar duas vezes, pois uma é para esconder e outro para mostrar de volta.
Usando o exemplo de lá de cima, ficará algo assim, eu escolhi a palavra atrasado como Classe CSS, então ficará .atrasado:
<script>
$('.atrasado').hide();
setTimeout(function() {
$('.atrasado').show();
}, 1000);
</script>Facinho?
5) Como Determinar o Tempo?
Tá vendo aquele 1000 ali no código?
Isso é o tempo em milissegundos que ele deverá esperar para mostrar os elementos escondidos.
Milissegundos são 1 segundo divido por 1000. Então, se você quiser 300 segundos (5 min.), pegue 300 e multiplique por 1000.
Você usará o valor 300000.
<script>
$('.atrasado').hide();
setTimeout(function() {
$('.atrasado').show();
}, 300000);
</script>7) Código Final no Elementor
O seu código ficará assim, com a parte do JQuery e o código logo abaixo. Veja o exemplo para o Firefox.
Assim que você colocar esse código, é bem possível que o Elementor reaja e seu bloco irá sumir. É normal isso. Ele executa o código assim que você o coloca.
Agora, ao carregar a página, o script irá esconder o que você quiser pelo tempo que determinar e não deixará um baita espaço em branco.
Boa sorte!
Gostou desse artigo técnico? Tem mais outras mutretas que solucionam pequenos problemas, como este filtro de spam em formulários.
Artigos Relacionados
49 Comentários
No caso estou usando página no blogger (blogspot), qual código devo usar para ocultar temporariamente parte dos elementos da página? O que deve ser observado?
Consegui! Vou dizer o que fiz porque pode ajudar alguém a mesma dúvida.
Criei um elemento e dei nome de “sectionocultar” no editor html da página colocando dentro dela todos os itens que devem ser ocultos.
Depois disso basta usar o script acima, considerando colocar uma parte no começo onde quer ocultar e outra no final (antes e depois do elemento “sectionocultar” – por fora) .
ficou assim:
AQUI FICA TODO O CONTEÚDO QUE QUER OCULTAR, OU SEJA “sectionocultar”
$(‘sectionocultar’).hide();
setTimeout(function() {
$(‘sectionocultar’).show();
}, 10000);
Não foi o código. kkk
Beleza!
Tentei adaptar para o blogger, não funcionou. O que deve ser observado se for ocultar temporariamente no blogger (blogspot).
Olá, o código está usando classes para os blocos de código. Verifique se é possível colocar um nome de classe. Se for apenas possível usar ID, então não será usado um . (ponto) antes do nome, mas sim, um #.
Deu tudo certinho, mas minha única dúvida ficou quando a pessoa clica no botão, ela será redirecionada a página de venda porém caso ela volte para o (ADV ou VSL) o botão não aparece mais. Demian tem alguma dica pra mim nesse ponto?
Já agradeço desde já!!! Você é fera.
Olá! Que bom que funcionou.
Tem forma, mas não é exatamente uma coisa simples.
Você teria que criar um cookie (clique aqui p/ ver como) no computador da pessoa no momento em que ela clicar no botão e verificar se existe esse cookie ou não toda a vez que carregar da página.
A ordem ficaria assim:
1. adicione os códigos “A Function to Set a Cookie” e “A Function to Get a Cookie” junto com resto do script
2. verifica se existe o seu cookie.
3. coloca um listener no botão que, ao clicar, cria o cookie.
Ficaria assim a parte 2 e 3:
Digamos que o cookie se chamará “usuarioRetornando”.
if (getCookie("usuarioRetornando") === 'true') {
$('.atrasado').show();
};
document.getElementById("id_do_seu_botão").addEventListener("click", function (e) {
setCookie("usuarioRetornando", true, 30);
});
É pouquíssimo provável que teu botão já tenha um addEventListener para click e pare de funcionar a função original. Pouco provável pq elementor usa links comuns
. Se isso acontecer, você terá que criar uma função separada que faça tudo junto e usar ela no click.Demian, super obrigada pela disponibilidade e ajudar aqui.
Eu estava usando um código do w3schools e estava com o problema de ver tudo ok na visualização do elementor pro, tanto no builder como na page view. Esse só funciona se colocar identificadores no CSS ID.(https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_delay)
Mudei para o seu código, fiz tudo conforme instruções nos comentários, aspas simples, mudei os CSS IDs para classe e tudo foi bem, porém, em ambos os códigos, quando eu visualizo em navegadores, fora do elemetor e fora da page view, os elementos de carrossel, sliders, todos travam ou deixam um espaço grande no container.
Tudo está atualizado aqui, template hello elementor, fiz troubleshooting via plugin, os elementos todos estão escondidos via container (sessão) não identifiquei nada direto no elemento e sim via container (tudo em um). O jquery coloquei direto no header via plugin também. Nada de funcionar com os sliders…
Só vejo funcionar no celular. No browser só se inspeciono ou arrasto a tela para mudar o tamanho.
Muito obrigada!!
A única diferença de usar um ID em vez de classe é ter que especificar um diferente p/ cada bloco, pois ID precisam ser únicos e classes podem ser a mesma para vários objetos/seções.
Você está usando blocos distintos para celular e desktop? Se sim, precisará de nome de classes diferentes p/ cada tipo e um IF-THEN para primeiro determinar qual o tamanho de tela.
if (window.innerWidth < 768) { código no caso de telas menores de 768 } else { código para telas maiores }
Vixe… Veja se você não está colocando o bloco HTML dentro de uma parte que o elementor oculte no browser. (qdo se usa o efeito responsivo do elementor, de ocultar coisas em função do tamanho da tela)
Boa tarde.
Como eu excluo esse script do atraso de execução do Javascript no WP Rocket?
Olá, desculpe, não sei usar o WP Rocket…
Fala meu amigo, tudo bem ? Deu super certo aqui cmg, estou usando o elementor pro. Mas quando ele exibe os blocos, entra os do modo mobile e desktop tudo junto, ai vira uma bagunça. Tem que colocar alguma exceção no código ? Ou é algo que eu preciso fazer no elemento. Pq meu site está com responsividade tanto para desktop quanto para mobile utilizando a propria função do elementor. desde já obrigado
Se você manualmente criar blocos distintos para mobile e desktop, será necessário colocar nomes de classes diferentes p/ os blocos mobile e desktop. Também será necessário fazer uma verificação IF-THEN para determinar se dispara um código ou outro dependendo do tamanho da tela do usuário.
Ex. Se o corte for em 768 pixels:
if (window.innerWidth < 768) { código no caso de telas menores de 768 } else { código para telas maiores }
Muito bom esse material. Parabéns!!!
Veja se você consegue me ajudar, eu fiz tudo certinho e no computador ele funciona bem, porém no celular (testei no iPhone – Safari, Chrome e Firefox) e no celular não funcionou. Alguma sugestão do que eu possa fazer?
Geralmente, não importa o navegador, pois o tamanho da tela apenas reordena a posição das coisas com CSS. Os scripts continuam os mesmos.
TAlvez o Elementor tenha atualizado alguma coisa… Tenta colocar o jquery fora do elementor, usando o plugin head&footer. Adiciona o jquery ao HEAD.
fala man, conteúdo top.
me tira uma dúvida, eu só quero esconder o elemento na primeira vez que o cara visitar a página, só que ele fica sempre ocultando se sair da página e voltar, tem como só ocultar uma vez?
Opa! Que bom que o conteúdo ajudou. Para esconder apenas 1x é mais complicado, pois você precisará colocar um cookie no computador da pessoa. Colocar cookies é simples, esse site explica passo-a-passo. Quando a pessoa acessar, coloque um cookie booleano, algo tipo “visitante=true”. Depois, na parte .hide, envolva essa linha com um If verificando a existência desse cookie. Se existir, esconde. Se não, não. Abs!
Fala Demian!
Muito top cara, pra mim funcionou, porém ela não reaparece. Teste os tempos tudo certinho, mas simplesmente não volta.
Sabe o que pode ser?
Dá uma olhada se você não está usando aspas estilizadas
(`)ou(‘)em vez de normais(')Amigo, você pode me ajudar por favor!
Funcionou perfeitamente para retirar o branco que fica com o delay. Só que agora quando os conteúdos voltam para a página, está vindo maior e faltando pra ser mais preciso os conteúdos que estão em carrossel mídia. Mas quando diminuo a tela de visualização do wordpress para mobile e depois volto para desktop ele carrega o que falta. Como posso corrigir isso ?
Pode ser a forma como carrossel trata diferença de tamanho de tela no CSS.
Testa colocando estes elementos todos dentro de 1 contêiner apenas e escondendo este contêiner pai.
Fala Demian, tudo bem?
Estou com o mesmo problema do colega Vitor. Quando a pagina carrega o carrossel fica estático e só funciona se eu colocar no modo mobile e voltar, mesmo colocando ele dentro de uma sessão (acho que a sessão é o conteiner).
Consegue me ajudar?
Não poderia deixar de registrar aqui minha gratidão. Estava quebrando a cabeça para resolver isso e graças ao seu post eu conseguir. Excelente trabalho! Parabéns e muito obrigado! Abs!
Opa, obrigado!! Fico feliz em ter ajudado.
Acho que o código não está saindo certo
…
$(‘.atrasado’).hide();
setTimeout(function() {
$(‘.atrasado’).show();
}, 3000);
…….
Coloquei uns pontos antes para ver se vai
Opa, me parece ser problemas nas aspas. Sua aspa
(‘)não é uma aspa simples('), mas sim, estilizada.Tenta substitui-la por uma aspa comum
(').Acontece quando se copia o código aqui dos comentários e o navegador pode ter substituído as aspas simples por estilizadas.
Esse é o Código que usei
$(‘.atrasado’).hide();
setTimeout(function() {
$(‘.atrasado’).show();
}, 3000);
Mesmo colocando o código que você deixou nos comentários contendo o não funcionou… sou bem leigo no assunto então vou deixar o código que eu usei no meu site aqui para você ver se acha o erro para mim
Editando no elementor ele funciona, mas quando acesso a pagina normalmente o botão está oculto mas nunca mais surge kkkk, mesmo colocando o tempo em 10
$(‘.atrasado’).hide();
setTimeout(function() {
$(‘.atrasado’).show();
}, 3000);
Me ocurre exactamente lo mismo. existe alguna solución?
Veja se as aspas são simples
(')e não estilizadas, como(‘)ou grave(`). Às vezes, os navegadores substituem uma pela outra.Lo he solucionado! He usado el head& footer code.
Pero lo mas importante es que el código jquery tiene que estar en el head y en el FOOTER!!
Mano, pode me ajudar?
Tenho várias seções no elementor. Umas 60.
Ocultei uma por uma, porém na versão mobile, após o delay, ele também está exibindo algumas seções do desktop.
Sendo que, eu já deixei responsivo essas seções.
Poderia me dar uma luz?
Ih cara, teria que ver certinho o que você fez no código.
Talvez possa ser que você tenha usando configurações diferentes para um elemento em desktop e em mobile (como ocultar em mobile e mostrar em desktop). Normalmente, essas coisas são controladas por CSS, porém, o ID do elemento é 1 só. Por conta disso, pode estar dando alguma confusão, um bug, na hora do hide() e show(). Para esse caso, eu sugiro você duplicar o elemento e usar IDs diferentes.
Também pode ser pela quantidade de objetos sendo controlados simultaneamente, mas acho pouco provável.
Eai Demian, Jóia?
Seguinte, não tô conseguindo, pode me ajudar?
No elemento, quando coloco o código que você ensinou e as classes, ele deixa tudo oculto como eu quero, mas depois quando abro a página:
* em uma nova aba;
* e no chrome (modo anônimo para não ter interferências de login)
….tá tudo aparecendo como se o código não tivesse rodando fora da área de edição do elementor pro.
Sabe me dizer o que pode ser:
O tempo que defini para testar foi 180.000.00 (sem os pontos), mas mesmo assim não ficou como eu gostaria.
Dá-lhe!
Provavelmente porque o jquery não tá indo para o head da página.
Tenta colocar a chamada do dentro de tags
<head>, que o Elementor manda para o head da página, assim:<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Mano, não tô conseguindo, pode me ajudar?
É o seguinte: no elemento, quando coloco o código que você ensinou e as classes, ele deixa tudo oculto como eu quero, mas depois quando abro a página:
* em uma nova aba;
* e no chrome (modo anônimo para não ter interferências de login)
….tá tudo aparecendo como se o código não tivesse rodando fora da área de edição do elementor pro.
Sabe me dizer o que pode ser:
O tempo que defini para testar foi 180.000.00 (sem os pontos), mas mesmo assim não ficou como eu gostaria.
Dá-lhe!
Provavelmente porque o jquery não tá indo para o head da página.
Tenta colocar a chamada do dentro de tags <head>, que o Elementor manda para o head da página, assim:
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Não sei dizer… você está usando algum bloqueador de scripts? Outra coisa. Verifica se você está usando as tags
<script></script>dentro de um bloco %3Cscript%3E%3C%2Fscript%3E do Elementor. Se usar direto em um post do WordPress, ele irá suprimir os códigos por segurança.aqui dentro do elementor funciona, mas no navegador não tá rolando….
sabe pq?
Dá-lhe!
Provavelmente porque o jquery não tá indo para o head da página.
Tenta colocar a chamada do dentro de tags <head>, que o Elementor manda para o head da página, assim:
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Brother muito obrigo pelo rico conhecimento neste post, resolveu o meu problema.
A principio tinha ficado um errinho no código, mas com esse código que você colocou aqui nos comentários resolveu o erro.
e continuo funcionando certinho.
Retificando o ultimo comentário.
com esse código que você colocou aqui nos comentários resolveu o erro.
porem os elementos não sumiram.
Ai eu vou para o usado no post e resolveu.
Show!
deve ter sido por que ficaram uns pequenos erros no código do comentário (conversão de tags)
que bom que funcionou!
Você é muito braboooo irmão!!! O único que eu vi ensinando isso…
Opa, valeu meu caro!!!
Muito bom! Ajudou bastante! Parabéns
Que bom que ajudou! Abss!