Como Adicionar ParticleJs No WordPress

Confira como adicionar particleJS no seu site WordPress e encante seus visitantes com esse efeito de partículas em movimento.

Vamos utilizar particle.js que é uma biblioteca JavaScript que facilita a criar um background com movimento de partículas. Além disso, é leve, fácil de usar e ainda permite uma grande gama de personalização.

Você pode acessar a documentação no github ou ver a demonstração

Nesse tutorial, vou mostrar como adicionar esse efeito no wordpress com os dois principais page builder: Elementor e Visual Composer.

Então, bora lá…

Escolha uma predefinição do particleJS

Acesse o Demo/Generator

No meu exemplo

  1. eu alterei a cor de background para o azul padrão da marca,
  2. aumentei a densidade das partículas,
  3. E diminui a velocidade de movimento das partículas.
Print tela de configuração particleJS

Explore as opções

Além das opções que eu alterei no meu exemplo tem diversas outras opções que a biblioteca oferece, para saber mais pode consultar a documentação do particle.js.

Faça o download do código gerado

A opção de Download se encontra na ultima opção do generator como mostra na imagem a cima ” Donwnload current config (json)”. O download será baixado no formato em arquivo json que você poderá abrir em qualquer editor de texto da sua preferência.

Como usar particleJS no WordPress

Primeiro, precisamos baixar o plugin ParticleJS Background.

Baixar Plugin

Uma vez que o plugin é ativado, você verá um novo item de menu no gerenciador do wordpress chamado “Particle Background”, como visto na imagem abaixo, se você não sabe como instalar um plugin siga esse tutorial.

Precisamos inserir esse código JavaScript para iniciar a biblioteca.

particlesJS('particlejs',
código json gerado aqui
);

Agora abra o arquivo json que você gerou anteriormente e cole dentro desso código mostrado a cima, não se preocupe é bem simples. Só se atente de colar exatamente dentro dos parênteses, veja meu exemplo.

Repare que no meu exemplo eu atribui o nome particlejs ao meu ID, você pode atribuir o nome que quiser, só vale ressaltar que terá que ser o mesmo que inserir na página do seu site(no código HTML)

Outra coisa legal desse plugin é que você pode utilizar em várias sessões do seu site usando o mesmo ID/código ou criando um novo com configurações diferentes como cor de background ou velocidade de movimento e seguir o mesmo processo do primeiro.

Para mostrar na área desejada do seu site você precisa inserir o ID no construtor de página que estiver utilizando.

Como aplicar no Elementor

Você pode facilmente aplicar um ID a uma seção na configuração avançada da seção, como visto abaixo.

Print tela de edição do elementor

Como aplicar no visual composer

Print tela de edição do visual composer

Implementar Particles.js no wordpress é simples para quem é programador(a) e muito fácil para quem não tem noção nenhuma.

Fico por aqui neste tutorial, espero que tenham gostado e até o próximo.

Se inscreva e tenha acesso em primeira mão aos novos conteúdos!