Você acha que adicionar um plano de fundo animado no WordPress é complicado? Pense novamente.
Costumávamos pensar o mesmo, mas depois de algumas experiências, descobrimos que, na verdade, não é tão ruim assim.
Sabemos como é importante impressionar os visitantes desde o momento em que eles chegam ao seu site. Um plano de fundo animado é um excelente elemento de design do WordPress para criar uma primeira impressão memorável sem sobrecarregar seu conteúdo.
Mas se você estiver preocupado com tempos de carregamento lentos, codificação complexa ou plug-ins caros, não se preocupe. Descobrimos uma solução simples usando o particle.js, que é uma biblioteca JavaScript leve que cria fundos animados impressionantes sem comprometer o desempenho do seu site.
Neste guia, mostraremos exatamente como adicionar belas animações de partículas ao seu site WordPress, quer você prefira usar um plug-in ou um pouco de código. Vamos fazer seu site se destacar!

Por que adicionar um plano de fundo animado no WordPress?
A personalização do plano de fundo do seu site pode parecer sem importância em um primeiro momento. Porém, depois de anos no mundo do WordPress e do web design, percebemos que os sites com planos de fundo animados cuidadosamente projetados tendem a manter os visitantes envolvidos por mais tempo.
Um plano de fundo animado pode melhorar o apelo visual do seu site, tornando-o mais interativo e atraente para os visitantes. Isso dá a impressão de que seu site WordPress usa um design inovador e de alta qualidade.
Muitos sites também usam efeitos animados quando querem comemorar uma ocasião especial.
Por exemplo, você pode ver lojas de comércio eletrônico adicionando flocos de neve animados ou árvores de Natal caindo em suas páginas da Web para criar uma atmosfera festiva para a temporada de férias.

Alguns sites também usam uma animação de fundo do pré-carregador.
Com isso, os visitantes podem ter a sensação de que o site está sendo carregado, o que os torna mais propensos a esperar pacientemente pela exibição dos elementos da página da Web. Para obter mais informações, leia nosso artigo sobre como adicionar uma animação de fundo ao preloader.
Neste guia, mostraremos a você como adicionar um plano de fundo animado usando o particle.js. Se quiser saber o que é isso, basta continuar na próxima seção.
O que é particle.js?
O particle.js é uma biblioteca JavaScript que permite criar efeitos visuais impressionantes com partículas, que são pequenos elementos gráficos e animados.
Essas partículas podem ser personalizadas por tamanho, cor, forma e movimento. Elas também respondem às interações do usuário, como movimentos ou cliques do mouse, para adicionar uma camada extra de envolvimento ao seu site.
Agora que você sabe o que é o particle.js, vamos ver como usá-lo para adicionar um plano de fundo animado no WordPress. Há dois métodos para iniciantes, e você pode navegar por este guia com os links rápidos abaixo:
Precisa de ajuda com o design do site WordPress? Não deixe que o potencial de seu site seja desperdiçado. Nossos especialistas da WPBeginner Pro Services podem reformular seu site, otimizar seu desempenho e gerar conteúdo de alta conversão para que você possa se concentrar no crescimento de seus negócios.
Método 1: Como adicionar um plano de fundo animado com um construtor de páginas (sem código)
O primeiro método é usar o SeedProd, que é o melhor plug-in de construtor de páginas do WordPress no mercado. Ele oferece um recurso de fundo de partículas incorporado e altamente personalizável.
Com ele, você pode escolher uma das animações de partículas que já estão disponíveis ou adicionar uma personalizada. Também é possível modificar o número de partículas, os movimentos de animação e os efeitos de foco para atender às suas preferências.
Para obter mais informações sobre o SeedProd, você pode conferir nossa análise detalhada do SeedProd. Cobrimos tudo, inclusive as opções de personalização, as opções de modelos e blocos e as integrações de terceiros.

Neste guia, usaremos a versão premium do SeedProd, pois o recurso de fundo de partículas está disponível lá.
Para usar o SeedProd, você precisará instalar e ativar o plug-in primeiro. Você pode encontrar mais detalhes sobre isso em nosso guia para iniciantes sobre a instalação de um plug-in do WordPress.
Depois disso, basta copiar e colar sua chave de licença no plug-in. Basta acessar o painel do WordPress, navegar até SeedProd ” Settings, e inserir a chave de licença no campo apropriado. Em seguida, clique em “Verify Key” (Verificar chave).

Se você quiser personalizar seu tema antes de adicionar um plano de fundo de partículas no WordPress, siga nosso guia sobre como criar facilmente um tema personalizado com o SeedProd.
Agora, você precisa abrir o construtor de arrastar e soltar para a página na qual deseja inserir o plano de fundo de partículas. Se você tiver criado um tema com o SeedProd, já deverá ter algumas páginas adicionadas no WordPress para você.
Em seguida, basta ir para Pages ” All Pages e passar o cursor sobre uma página, como uma página inicial, sobre a página ou outra. Em seguida, escolha o botão “Editar com SeedProd”.

Se essa opção não for exibida em seu computador, não se preocupe.
Em vez disso, basta clicar no botão “Edit” (Editar) e, no editor de blocos, clicar no botão “Edit with SeedProd” (Editar com SeedProd).

Agora você deve estar dentro do construtor de páginas do SeedProd.
Basta passar o cursor sobre a seção da página em que deseja adicionar o plano de fundo de partículas no WordPress e selecioná-la. Você saberá que selecionou uma seção se uma borda roxa e uma barra de ferramentas aparecerem na parte superior dela.

Depois de clicar em uma seção, a barra lateral Section (Seção) à esquerda deverá ser exibida.
Tudo o que você precisa fazer agora é mudar para a guia “Advanced” (Avançado) e alternar a configuração “Enable Particle Background” (Ativar fundo de partículas).

Há várias configurações de fundo de partícula que você pode definir.
Um deles é o Style (Estilo), no qual você pode escolher qualquer um dos efeitos de animação disponíveis, que são Polygon (Polígono), Space (Espaço), Snow (Neve), Snowflakes (Flocos de neve), Christmas (Natal), Halloween (Dia das Bruxas) e Custom (Personalizado).
Falaremos mais sobre como adicionar uma animação de fundo de partícula personalizada mais adiante neste artigo.

Há também a Opacity (Opacidade), que controla a aparência opaca da animação, e a Flow Direction (Direção do fluxo), que define a direção para a qual as partículas devem se dirigir.
Para determinados estilos de partículas, você também pode personalizar suas cores.
Entretanto, para o Natal e o Halloween, não há configurações de cores, pois as partículas são imagens.

Abaixo de Color está “Advanced Settings” (Configurações avançadas). A ativação dessa opção permite personalizar o número de partículas, o tamanho das partículas, a velocidade de movimentação e a ativação do efeito Hover.
Com o último recurso, as partículas se moverão de acordo com a direção do seu mouse. Observe que isso não funcionará quando você visualizar o site do WordPress na área do construtor de páginas ou se o conteúdo da seção ocupar todo o espaço dessa seção.

E isso é tudo o que você precisa fazer.
Quando terminar de personalizar o plano de fundo de partículas do WordPress, você poderá clicar no botão “Save” (Salvar) no canto superior direito para publicar as alterações. Você também pode escolher o botão “Preview” (Visualizar) para ver a aparência do plano de fundo de partículas.

Criação de um plano de fundo de partículas personalizado para seu site
Se os efeitos animados disponíveis não atenderem às suas necessidades, você também poderá criar um efeito personalizado. O que você deve fazer é selecionar o estilo “Custom” (Personalizado) nas configurações de fundo de partículas.
Depois disso, clique no link na linha “Acesse o link aqui e escolha os atributos necessários para a partícula”.
Este link o levará ao site de Vincent Garreau, que apresenta uma biblioteca Javascript para animações de partículas.

Nesse site, você pode personalizar o design da partícula desejada, sua interatividade e a cor do plano de fundo.
Na configuração “partículas”, você pode ajustar o número de partículas, a cor, a forma, o tamanho, a opacidade, as linhas que ligam as partículas e o movimento.

Abaixo disso está a “interatividade”.
É aqui que você pode ajustar como as partículas se comportam quando você passa o mouse sobre elas e clica nelas.

Por fim, você tem “page background (css)”. Aqui, você pode alterar a cor de fundo da animação de partículas e modificar seu tamanho, posição e repetição.
Se necessário, você também pode carregar o URL de uma imagem de fundo personalizada.

Quando terminar, você pode clicar no botão “Download current config (json)” na parte inferior.
Isso fará o download do arquivo de código JSON do plano de fundo da partícula, que você precisa abrir usando um aplicativo editor de texto. Mantenha a janela do editor de texto aberta enquanto você prossegue para as próximas etapas.

Agora, vamos voltar ao construtor de páginas SeedProd.
Navegue até o menu Particle Background (Plano de fundo de partículas) nas configurações avançadas novamente. Em seguida, copie e cole o código JSON na caixa de texto apropriada.
Agora você deve ver o plano de fundo da partícula na seção de visualização.

Clique em “Preview” (Visualizar) para ver a aparência do plano de fundo da partícula no front-end e em “Save” (Salvar) para finalizar as alterações.
Veja um exemplo de como pode ser o plano de fundo da partícula:

Método 2: Como adicionar um plano de fundo animado com código (gratuito)
Se usar um construtor de páginas para inserir um plano de fundo animado parecer muito trabalhoso, você também pode adicioná-lo usando código. Não se preocupe se você não for um especialista em codificação, pois usaremos o WPCode para tornar esse processo seguro e direto.
Você pode usar a versão gratuita ou premium do WPCode para este tutorial. Embora a versão gratuita funcione perfeitamente bem, a versão premium inclui recursos úteis, como geração de código de IA e um modo de teste.
Se precisar de mais informações, leia nossa análise do WPCode.
Primeiro, instale o plug-in em seu administrador do WordPress.
Após a ativação, vá para Code Snippets ” + Add Snippet em seu painel e clique em ‘Add Your Custom Code (New Snippet)’ seguido do botão ‘+ Add Custom Snippet’.

Agora, você precisará selecionar o tipo de snippet.
Como trabalharemos com uma combinação de HTML, JavaScript e CSS, você pode escolher “HTML Snippet” nas opções.

Agora, dê ao snippet um nome que seja fácil de lembrar.
Pode ser algo simples como “Particle.js Background”.

Agora, vá em frente e cole o código abaixo.
Na verdade, esse código foi adaptado do mesmo site de Vincent Garreau que foi apresentado no primeiro método, mas mostraremos como personalizá-lo ainda mais com apenas o código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | <!-- HTML --> <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Particles.js Background</ title > <!-- Include the particles.js library --> < script src = "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" ></ script > <!-- Include your custom styles --> < style > /* Reset styles */ body { margin: 0; font: normal 75% Arial, Helvetica, sans-serif; } canvas { display: block; vertical-align: bottom; } /* Particles.js container */ #particles-js { position: fixed; top: 0; width: 100%; height: 100%; /* Background color; change this to any valid CSS color value */ background-color: #b61924; /* <-- Customize background color here */ /* Optional background image; add the URL inside the quotes */ background-image: url(""); /* <-- Add background image URL here */ background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -1; /* Ensure the particles are behind other content */ } /* Optional stats styles */ .count-particles { background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: 0.8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; border-radius: 0 0 3px 3px; -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } .js-count-particles { font-size: 1.1em; } </ style > </ head > < body > <!-- Particles.js container --> < div id = "particles-js" ></ div > <!-- Optional Stats Display --> < div class = "count-particles" > < span class = "js-count-particles" >--</ span > particles </ div > <!-- Initialize particles.js --> < script > /* Customize the particles.js parameters below */ particlesJS("particles-js", { "particles": { "number": { "value": 80, /* <-- Number of particles; adjust this value */ "density": { "enable": true, "value_area": 800 /* <-- Particle density area */ } }, "color": { "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, "shape": { "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */ "stroke": { "width": 0, "color": "#000000" /* <-- Stroke color of particles */ }, "polygon": { "nb_sides": 5 /* <-- Number of sides for polygon shape */ }, "image": { "src": "img/github.svg", /* <-- URL of custom image for particles */ "width": 100, "height": 100 } }, "opacity": { "value": 0.5, /* <-- Opacity of particles */ "random": false, /* <-- Whether opacity is random */ "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, /* <-- Size of particles; adjust to change particle size */ "random": true, /* <-- Whether particle size is random */ "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, /* <-- Enable lines between particles */ "distance": 150, /* <-- Maximum distance for linking particles */ "color": "#ffffff", /* <-- Color of the lines */ "opacity": 0.4, /* <-- Opacity of the lines */ "width": 1 /* <-- Width of the lines */ }, "move": { "enable": true, /* <-- Enable particle movement */ "speed": 6, /* <-- Speed of particle movement */ "direction": "none", /* <-- Direction of movement */ "random": false, /* <-- Randomize movement direction */ "straight": false, /* <-- Move in straight lines */ "out_mode": "out", /* <-- Action when particles go out of canvas */ "bounce": false, /* <-- Enable particles to bounce off edges */ "attract": { "enable": false, /* <-- Attract particles toward mouse */ "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */ "events": { "onhover": { "enable": true, /* <-- Enable interaction on hover */ "mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */ }, "onclick": { "enable": true, /* <-- Enable interaction on click */ "mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */ }, "resize": true /* <-- Enable reactivity to window resize */ }, "modes": { "grab": { "distance": 400, /* <-- Distance for grab mode */ "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, /* <-- Distance for bubble mode */ "size": 40, /* <-- Size of particles in bubble mode */ "duration": 2, /* <-- Duration of bubble effect */ "opacity": 8, /* <-- Opacity of particles in bubble mode */ "speed": 3 /* <-- Speed of bubble effect */ }, "repulse": { "distance": 200, /* <-- Distance for repulse mode */ "duration": 0.4 /* <-- Duration of repulse effect */ }, "push": { "particles_nb": 4 /* <-- Number of particles added on click */ }, "remove": { "particles_nb": 2 /* <-- Number of particles removed on click */ } } }, "retina_detect": true /* <-- Enable retina display support */ }); /* Optional: Variables for stats.js (if used) */ var count_particles, stats, update; </ script > </ body > </ html > |
Esse código é bastante longo, portanto, vamos dar uma olhada nas partes que você pode personalizar.
Para alterar a cor do plano de fundo, modifique a propriedade background-color
em #particles-js
. Substitua #b61924
por qualquer valor de cor CSS válido, como #FF0000
para vermelho ou rgb(255,0,0)
ou até mesmo nomes de cores como vermelho
.
1 | background-color : #b61924 ; /* <-- Customize background color here */ |
Para adicionar uma imagem de fundo, defina a propriedade background-image
adicionando o URL da sua imagem dentro de url("")
.
Verifique se o caminho ou o URL da imagem de fundo está correto.
1 | background-image : url ( "path/to/your/image.jpg" ); /* <-- Add background image URL here */ |
Para alterar o número de partículas, ajuste o "valor"
em "número"
.
Aumentar o valor adiciona mais partículas, enquanto diminuí-lo reduz o número.
1 2 3 4 | "number" : { "value" : 80 , /* <-- Number of particles; adjust this value */ // ... } |
Para alterar o tamanho das partículas, você pode modificar o "valor"
em "size" (tamanho)
.
Um número maior aumenta o tamanho da partícula, e vice-versa.
1 2 3 4 5 | "size" : { "value" : 3 , /* <-- Size of particles; adjust to change particle size */ "random" : true, /* <-- Set to false for uniform size */ // ... } |
Para alterar a cor das partículas, substitua o "value"
em "color"
por qualquer valor de cor CSS válido.
1 2 3 | "color" : { "value" : "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, |
Para alterar a forma das partículas, você pode modificar o "type" (tipo)
em "shape" (forma)
.
Você pode usar formas como "círculo"
, "borda"
, "triângulo"
, "polígono"
ou até mesmo "estrela"
.
1 2 3 4 | "shape" : { "type" : "circle" , /* <-- Particle shape: "circle", "edge", "triangle", etc. */ // ... }, |
Para alterar as propriedades das linhas entre as partículas, você pode ajustar as propriedades em "line_linked"
.
Por exemplo, se você alterar "enable": true
para "enable": false
, não verá nenhuma linha conectando as partículas.
1 2 3 4 | "line_linked" : { "enable" : true, /* <-- Enable lines between particles */ // ... }, |
Você também pode alterar a cor, a opacidade e a largura da linha.
1 2 3 4 5 6 | "line_linked" : { "color" : "#ffffff" , /* <-- Line color */ "opacity" : 0.4 , /* <-- Line opacity */ "width" : 1 , /* <-- Line width */ // ... }, |
Não se preocupe se precisar fazer alterações mais tarde, pois você sempre pode modificar o código mesmo após a ativação.
Depois de personalizar o código de acordo com suas preferências, é hora de definir onde e quando o plano de fundo animado será exibido.
Role para baixo até a seção Inserção do seu snippet WPCode. Certifique-se de selecionar “Auto Insert” (Inserção automática) como seu método de inserção e escolha “Site Wide Footer” (Rodapé amplo do site) para o local.

O WPCode também oferece um recurso avançado chamado lógica condicional, que está disponível nas versões gratuita e premium. Esse recurso permite que você controle exatamente onde o plano de fundo animado aparece no site.
Para usar esse recurso, localize a seção “Smart Conditional Logic” (Lógica condicional inteligente) e ative a opção “Enable Logic” (Ativar lógica). Você verá opções para definir condições específicas para a exibição de seu plano de fundo.

Por exemplo, se quiser que o plano de fundo animado apareça somente em sua página inicial, selecione “URL da página” no menu suspenso de condições, escolha “É” e digite o URL da página inicial.
Você pode adicionar vários grupos de condições clicando no botão “+ Adicionar novo grupo”.
A etapa final é ativar seu snippet. Procure o botão de alternância “Inativo” na parte superior da página e clique nele para alterá-lo para “Ativo”. Não se esqueça de clicar em “Save Snippet” (Salvar snippet) para preservar suas alterações.
Isso é tudo o que há para fazer! Visite seu site no celular ou no desktop para ver seu novo plano de fundo animado em ação. Veja como ficou em nosso site de teste:

Os planos de fundo animados tornam os sites mais lentos?
Se não forem bem feitos, os planos de fundo animados podem tornar seu site mais lento. Mas há maneiras de evitar isso.
Para fundos de partículas, o número de partículas e a velocidade com que elas se movem podem afetar a velocidade de carregamento da página. Mais partículas e movimentos mais rápidos requerem mais poder de processamento, o que pode tornar as coisas mais lentas.
Para corrigir isso, você pode experimentar diferentes configurações de densidade e velocidade de partículas para descobrir o que funciona melhor para o seu site. Durante esse processo, você pode executar testes de velocidade do WordPress para ver os efeitos.
Também é uma boa ideia usar fundos animados somente nas páginas em que eles são mais importantes. Não é necessário usá-los em todos os lugares, ou eles podem se tornar enfadonhos.
Por fim, para manter seu site rápido com um fundo de partículas, certifique-se de seguir as práticas recomendadas para a velocidade do site. Você pode saber mais em nosso guia definitivo sobre como tornar o WordPress mais rápido.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um plano de fundo de partículas animadas no WordPress. Talvez você também queira conferir nosso guia sobre como obter feedback sobre o design do site no WordPress e nossa seleção especializada dos melhores criadores de temas para WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Carlos Rangel
Nice article. I wonder if is possible to achieve this effect using some code like vanilla JavaScript and maybe some CSS styles. This as become my favorite WordPress blog
WPBeginner Support
While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.
Admin