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…

Se você esconde elementos, provavelmente usa esta função no seu Elementor.

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 servem para fazer o Elementor lançar isso no head da página.





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:


$('.NOME DA CLASS CSS').hide();
setTimeout(function() {
$('.NOME DA CLASS CSS').show();
}, 1000);


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:


$('.atrasado').hide();
setTimeout(function() {
$('.atrasado').show();
}, 1000);


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.


$('.atrasado').hide();
setTimeout(function() {
$('.atrasado').show();
}, 300000);


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.

Note, na seta azul, que o código fica no fim da página.

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.