Artneo

Efeito de neve no Elementor

Efeito de neve no Elementor

Efeito de neve no Elementor
Por gentileza, avalie 🙂

Neste tutorial vou mostrar para você como deixar o seu site Elementor pronto para o Natal com animação de flocos de neve e ícones natalinos. Eu criei essa seção natalina no meu site e pretendo deixar até o comecinho do ano que vem. Recomendo que você salve o layout depois de pronto para que possa facilmente adicionar essa decoração natalina nos próximos anos.

Como adicionar animação de neve no Elementor

Para começar, você deve aprender a colocar uma seção no topo de todas as páginas do seu site. Eu sei que a equipe do Elementor está desenvolvendo uma solução nativa para editar o header e o footer, mas enquanto isso eu uso o plugin terceirizado chamado Header Footer Elementor que atende muito bem a minha necessidade.

Depois de instalado, vá em Aparência > Header Footer Builder e crie um Header para o seu site.

Pronto. Agora você já pode criar um menu para que apareça em todas as páginas do seu site. Logo acima, crie uma seção que será a mensagem de Natal para seus clientes e usuários do site.

Em primeiro lugar, selecione a sessão e adicione altura mínima de 400px.

Em seguida, clique em Estilo e dê uma cor de fundo vermelha que remete o Natal. Eu selecionei um vermelho de um site de cores flat que eu recomendo. Ele chama-se Flat UI Colors – eu escolhi a cor Alizarin. Você só precisa clicar na cor que o site já copia para você. Agora é só colar no seu site.

Depois disso, selecione o módulo Editor de texto e escreva uma mensagem de Natal. Eu escrevi que desejo um Feliz Natal e um próspero ano novo.

Clique em estilo, dê um tamanho grande de letra – aproximadamente 60px – e altere a fonte para Mountains of Christmas, que é a fonte mais natalina disponível de forma gratuita pelo Google Fontes.

Eu também gosto de selecionar uma altura de linha de 1.3em para esse tamanho de letra.

Quanto aos ícones eu utilizei o site Icons8 – que na minha opinião é a melhor coleção de ícones da internet. Eu pago para usar eles sem precisar colocar um link da fonte, mas se você ler certinho como funciona a licença deles tenho certeza que pode usar de forma gratuita.

Em seguida eu adicionei o módulo de colunas, dupliquei uma delas e adicionei 3 ícones natalinos.

Beleza, o layout de Natal está quase pronto. Agora só falta o mais importante que são as animações de neve.

No blog do Elementor você vai encontrar a postagem sobre como criar um efeito natalino de neve. Procure pelo código CSS disponível no tutorial.

Perceba que em background-image está puxando 3 imagens diferentes do site library do Elementor.

Eu aconselho você a fazer que nem eu:

  1. Copie o primeiro link no seu navegador.
  2. Baixe a primeira imagem.
  3. Altere o número 1 para 2 e 3 e pegue as outras duas imagens.
  4. Faça o upload delas dentro da pasta de seu child theme.
  5. Atualize a URL do background-image para elas.
Ex: background-image: url(‘/wp-content/themes/seu-tema/natal/s1.png'), url('/wp-content/themes/seu-tema/natal/s2.png'), url('/wp-content/themes/seu-tema/natal/s3.png');

Fazendo isso você garante que mesmo se a equipe do Elementor deletar esses arquivos um dia, eles estão a salvos em seus arquivos do site. Isso inclusive foi recomendado pela equipe na postagem em questão.

Ok, está quase acabando. Copie o código. Clique na seção que acabamos de criar e vá em Avançado > clique em Custom CSS e cole o código.

Agora, você só precisa clicar em Estilo do elemento e adicionar a classe de CSS de snow-bg.

A animação de que está nevando deve ter começado no seu layout.

Caso queira salvar o template você só precisa passar o mouse na seção e clicar no símbolo do disquete para salvar.

Pronto, agora seu site já está no clima do Natal.

Conclusão

Espero ter ajudado você de alguma forma com esse tutorial. Se você está curtindo dê um joinha no video e inscreva-se no canal. Deixe um comentário e me dê um feedback desse vídeo.

Eu agradeço desde já sua companhia até aqui.

Grande abraço e até a próxima!

Andre Esteves Perrone

Web designer que adora estudar sobre novas tendências da criação de sites e trazer resultados positivos para seus clientes. Você pode encontrar ele tocando sax na igreja local, assistindo séries no Netflix ou escrevendo no blog da Artneo.

Deixe uma resposta

Fechar Menu