Blog LucraPage$

Dica da semana!

Hoje a dica de hoje vai te ajudar a otimizar as conversões de suas páginas.

Você já entrou em uma página onde só tinha o vídeo?

Mais aquele vídeo te interessava e você queria saber mais. Então depois de alguns minutos na aparece o botão, aparece o preço do produto e todo mais abaixo do vídeo.

Então hoje você vai aprender a fazer está tecnica usando um simples código JavaScript nas suas páginas usando o elementor.

Parece mágica kkk, mas é bem simples.

Abaixo vou explicar cada detalhe do código, mas 1ª esse é o código completo você pode simplesmente copiar e já usar em suas páginas.

<style>
   #aparecer1{display:none;}     
</style>
       

 <script type="text/javascript">

        function mostrar() {
        document.getElementById("aparecer1").style.display = "block";
        document.getElementById("aparecer1").style.visibility = "visible";
        
        }
        var tempo = 60 //tempo em segundos 
        var res = tempo * 1000 

        setTimeout("mostrar()", res); 
</script>

1ª Passo o estilo

Você precisa atribuir um ID CSS ao elemento que vai aparecer, para isso existe uma propriedade css que vai fazer o seu elemento desaparecer ela é conhecida como “display: none”.

Esse ID é representado por uma “#” Hastag o famoso jogo da velha.

O “<style> </style>” é a parte onde você incorpora o estilo css de forma manual em qualquer lugar. No WordPress exstem pelo manos mais 3 maneiras diferentes de fazer isso, mas podemos deixar isso para outro artigo.

e assim vai ficar a 1ª parte do código que vai implementar o estilo.

<style>
   #aparecer1{display:none;}
</style>

2ª O script

Para este tutorial você não precisa ter nenhum conhecimento em JavaScript, mas vou explicar passo a passo o que está acontecendo, pois vou explicar cada passo.

  • 1ª o script é carregado entre o “<scrit> Aqui dentro vai o código </script>”
  • Dentro do código começamos com uma função javaScript. “function mostrar()”
  • Dentro desta função existe um comando que esta entre as”{} Chaves.”

Veja o exemplo para ficar mais claro.

  <script type="text/javascript">

        function mostrar() {} 

3ª Passo o código da função.

A função mostra é defina pelo seguinte código.

function mostrar() {
        document.getElementById("aparecer1").style.display = "block";
        document.getElementById("aparecer1").style.visibility = "visible";
        
        }

As duas linhas dentro da função está simplesmente manipulando o ID do CSS.

E de forma simplificada ele está dizendo que o ID é visivel.

4ª Passo simplificando tempo de aparecer.

No fim do código vamos ver o que na verdade acontece ele vai atrasar o carregamento da função, mas antes disso precisamos simplificar o tempo por 2 motivos um para você definir e o segundo para ficar mais fácil.

Antes da explicação da uma olhada em como a mágica funciona.

var tempo = 60 //tempo em segundos 
var res = tempo * 1000 

Na verdade são apenas duas variaveis e a mais importante é o tempo.

Você vai alterar o numero 60 para o tempo em segundo. quantos segundos vão levar para a função mostrar funcionar.

a segunda linha vai multiplicar o tempo em segundos por 1000, pois a parte final do site trabalha com mile segundos.

5ª O fim

setTimeout("mostrar()", res); 

Essa setTimeout é uma função que vai fazer o código carregar depois de um determinado tempo.

Resumindo seria mais ou menos isso espere X segundos para carregar a função mostrar.

Você definiu o tempo na var tempo e a var res calcula os segundo em mile segundos para o setTimeout funcionar perfeitamente.

E este é o resultado final:

<style>
   #aparecer1{display:none;}     
</style>
       

 <script type="text/javascript">

        function mostrar() {
        document.getElementById("aparecer1").style.display = "block";
        document.getElementById("aparecer1").style.visibility = "visible";
        
        }
        var tempo = 60 //tempo em segundos 
        var res = tempo * 1000 

        setTimeout("mostrar()", res); 
</script>

Essa foi a dica desta semana, agora é com você. Compartilha e comente.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments

Gostou deste artigo, então crie seu blog AGORA usando o mesmo tema deste blog.

Artigo Relacionados

0
Would love your thoughts, please comment.x
()
x