Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar um plano de fundo animado no WordPress (2 métodos)

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja criar um plano de fundo animado para seu site WordPress?

Um plano de fundo animado pode adicionar algum apelo visual ao seu site. Ele tornará seu site mais atraente e memorável, deixando uma impressão duradoura em seus visitantes.

Neste guia, mostraremos a você como adicionar um plano de fundo de partículas no WordPress usando particle.js, uma biblioteca de animação JavaScript.

How to Add an Animated Background in WordPress

Por que adicionar um plano de fundo animado no WordPress?

Personalizar o plano de fundo do seu site pode parecer algo sem importância. No entanto, ela pode realmente moldar as primeiras impressões dos visitantes sobre sua marca e afetar a experiência deles no site.

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.

An example of a Christmas particle background

Alguns sites também usam uma animação de fundo do pré-carregador em seus sites.

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:

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.

The SeedProd page builder plugin for WordPress

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).

Adding a SeedProd license key to WordPress

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”.

Clicking Edit with SeedProd on a WordPress page

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).

Clicking Edit with SeedProd inside the WordPress block editor

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).

Enabling the particle background settings in SeedProd

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.

Configuring the basic particle background settings in SeedProd

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 a cor delas.

Entretanto, para o Natal e o Halloween, não há configurações de cores, pois as partículas estão na forma de imagens.

What the Christmas particle background in SeedProd looks like

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 na área do construtor de páginas ou se o conteúdo da seção ocupar todo o espaço dessa seção.

The particle background's advanced settings in SeedProd

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.

Saving or previewing changes in SeedProd

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”.

Selecting the Custom style and clicking the link provided in SeedProd to make a custom particle background

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.

Editing the Particles settings in Vincent Garreau's particle.js website

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.

The particle interactivity settings in Vincent Garreau's website

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.

The particle page background settings in Vincent Garreau's website

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.

Downloading the JSON file for the particle background

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.

Inserting the JSON code  in the particle background settings of SeedProd

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:

Example of an animated particle background made with SeedProd

Método 2: Como adicionar um plano de fundo animado com um plug-in gratuito

O segundo método é uma alternativa gratuita ao uso do SeedProd. Para isso, você precisará do plug-in Particle Background WP, que é um plug-in de animação gratuito.

Como antes, certifique-se de instalar e ativar o plug-in Particle Background WP. Se precisar de alguma orientação, consulte nosso guia sobre como instalar um plug-in do WordPress.

Depois que o plug-in estiver ativo, vá para Particle Background no painel do WordPress. Aqui, você verá várias seções.

Um deles é o Deploy. Ele inclui um shortcode para o fundo de partícula finalizado se você quiser adicioná-lo posteriormente às suas páginas ou publicações.

Você também pode marcar as caixas “Add to front page” e/ou “Add to blog page” para inserir automaticamente o plano de fundo nessas páginas.

Configuring the Particle Background WP Deploy settings

Rolando para baixo, você verá a seção Content (Conteúdo). É aqui que você pode adicionar algum texto sobre o plano de fundo da partícula.

Se você souber HTML, poderá adicionar algum código HTML para personalizar o texto. Como alternativa, você pode clicar em “Add Media” para inserir imagens ou arquivos da biblioteca de mídia do WordPress.

Inserting some text in the Particle Background WP plugin

Abaixo estão as configurações para a animação de fundo de partículas do WordPress. Você pode ajustar a Densidade da partícula, que controla a proximidade e a distância das partículas, a Cor do ponto da partícula e a Cor do plano de fundo. Também é possível tornar o plano de fundo transparente.

Uma desvantagem desse plug-in do WordPress é que você não pode ajustar o formato das partículas da mesma forma que faria com o SeedProd. Portanto, isso é algo a ser considerado se você quiser usar esse plug-in.

Configuring the Particle Background WP's animated particle background settings

E pronto!

Veja um exemplo da aparência do plano de fundo animado por partículas usando esse plug-in do WordPress.

An animated background example using Particle Background WP plugin

Opção alternativa: Adicionar um plano de fundo de vídeo do WordPress

Se você quiser adicionar um efeito animado ao seu site, mas não gostar dos métodos que mostramos, recomendamos adicionar um plano de fundo de vídeo.

Um plano de fundo de vídeo oferece mais opções sobre os tipos de efeitos animados que você pode ter em seu site. Além disso, você pode fazer com que o vídeo seja reproduzido automaticamente em um loop para que pareça animado.

Obviamente, não recomendamos o upload de um vídeo inteiro em seu site. Isso deixará o WordPress significativamente mais lento e frustrará os visitantes.

Em vez disso, é possível incorporar um vídeo do YouTube e usá-lo como um plano de fundo animado em tela cheia.

Video background example made with Thrive Architect

Para obter mais informações, consulte nosso guia sobre como adicionar um plano de fundo de vídeo do YouTube em tela cheia no WordPress.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

3 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carlos Rangel says

    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 says

      While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.