Deseja adicionar um efeito de fundo de partículas animadas ao seu site WordPress?
Ao adicionar um plano de fundo com particle.js ao seu site, você pode fazer com que conteúdos importantes se destaquem e aumentar a interatividade do seu site WordPress. Neste artigo, mostraremos como adicionar facilmente fundos de partículas a qualquer página do WordPress.
O que é o Particle.js?
Particle.js é uma biblioteca JavaScript que permite criar e animar pequenas partículas em sua página da Web. Essas partículas podem ser personalizadas em tamanho, forma, cor e movimento para criar efeitos visuais interessantes que aprimoram o design do seu site e a experiência do usuário.
Pense nisso como um show de fogos de artifício digital, em que cada partícula é como um pequeno fogo de artifício que pode se mover e mudar de cor em resposta às interações do usuário ou a outros eventos na página.
Por que adicionar planos de fundo do Particle.js ao WordPress?
Os planos de fundo de partículas podem acrescentar uma camada extra de interesse visual e interatividade ao seu site WordPress, tornando-o mais envolvente e memorável para os visitantes.
Por exemplo, se você tiver uma agência de criação ou um portfólio de design, poderá usar o Particle.js para criar um efeito visual atraente que mostre sua criatividade e suas habilidades de design. É possível usar planos de fundo de partículas para criar um plano de fundo dinâmico e visualmente atraente para o cabeçalho, a seção de heróis ou qualquer outra seção do site.
O Particle.js também pode criar animações de carregamento exclusivas e criativas para manter os visitantes envolvidos e entretidos enquanto aguardam o carregamento do site. Isso é particularmente importante para áreas com imagens ou vídeos grandes, que podem demorar um pouco para carregar em conexões mais lentas.
Em geral, o Particle.js é uma ótima maneira de adicionar um senso de interatividade e dinamismo ao seu site WordPress, tornando-o mais envolvente e memorável para os visitantes.
Como adicionar planos de fundo do Particle.js ao meu site WordPress?
Há várias maneiras de adicionar fundos de partículas ao seu site WordPress, mesmo que você seja um iniciante.
Primeiro, você pode usar um plug-in Particle.js do WordPress ou um construtor de páginas do WordPress com recursos integrados de efeito de partículas. Recomendamos essa opção para iniciantes porque normalmente não requer nenhum conhecimento de codificação ou habilidades técnicas.
Outra maneira de adicionar efeitos de partículas ao seu site é usar um tema do WordPress que inclua o particle.js. Isso é útil se você estiver começando um novo site e ainda precisar de um tema do WordPress.
A última opção é usar código personalizado para adicionar efeitos de partículas ao seu site manualmente. Recomendamos essa opção somente se você se sentir confortável com a codificação.
Neste guia, vamos nos ater à opção mais fácil: usar um plug-in do WordPress. Vamos a isso!
Adicionar um plano de fundo de partículas às seções do WordPress usando o SeedProd
Primeiro, usaremos um plug-in do construtor de páginas do WordPress com a biblioteca particles.js incorporada em sua funcionalidade: SeedProd.
O SeedProd é o melhor construtor de sites e páginas para WordPress, com mais de 1 milhão de usuários. Você pode usar o construtor de arrastar e soltar para criar temas personalizados do WordPress, páginas de destino, sites do WooCommerce e qualquer outro layout sem escrever código.
Com centenas de modelos de página pré-fabricados, elementos de design e planos de fundo de partículas incorporados, a criação de animações de partículas impressionantes leva apenas alguns minutos.
Siga as etapas abaixo para adicionar planos de fundo de partículas ao seu site com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
Primeiro, clique aqui para começar a usar o SeedProd e fazer o download do plug-in. Em seguida, instale e ative o plug-in em seu site do WordPress.
Se precisar de ajuda com isso, consulte nossa documentação sobre a instalação do SeedProd. Ela o orienta no processo de instalação e na localização e ativação da chave de licença do plug-in.
Etapa 2. Escolha um modelo pré-fabricado
Sua próxima etapa é escolher um modelo pré-fabricado. O tipo de modelo selecionado depende do fato de você querer criar um tema do WordPress ou uma landing page.
Com o Theme Builder do SeedProd, você pode criar um tema completo do WordPress a partir do zero. No entanto, a escolha dessa opção substituirá o design de seu site existente.
Como alternativa, o Landing Page Builder permite que você crie qualquer página sem tocar no tema existente. Para este guia, usaremos essa opção.
No painel de administração do WordPress, navegue até SeedProd " Landing Pages. Nessa página, você verá vários modos de página na parte superior e a opção de criar sua própria página personalizada.
Vá em frente e clique no botão Add New Landing Page (Adicionar nova página de destino ).
Aqui, você pode escolher entre centenas de modelos de página de destino pré-criados.
Você pode filtrá-los por tipo clicando nas guias na parte superior, incluindo:
- Em breve
- Modo de manutenção
- 404 Página
- Vendas
- Webinar
- Aperto de chumbo
- Obrigado
- Login
Para escolher um design de modelo, clique no ícone de marca de seleção laranja.
Isso abrirá uma janela pop-up na qual você poderá inserir o nome da página de destino. O SeedProd gera automaticamente o slug (URL) da página de destino para você, mas, se desejar, poderá alterá-lo.
Quando você estiver satisfeito com esses detalhes, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Navegação no Page Builder
Seu modelo será aberto no editor visual de arrastar e soltar do SeedProd. Você verá um painel do lado esquerdo com blocos, seções e configurações e uma visualização ao vivo no lado direito.
Ao clicar em qualquer lugar da visualização, você pode visualizar e personalizar as configurações desse elemento e ver as alterações em tempo real.
Por exemplo, clicar na seção do cabeçalho principal abre suas configurações no painel esquerdo. A partir daí, você pode escolher uma nova imagem de fundo, escolher uma posição de fundo diferente e escurecer o fundo com uma sobreposição de cores.
Além disso, você pode adicionar novos elementos ao seu modelo arrastando-os do painel de blocos à esquerda e soltando-os no lugar.
Etapa 3. Ativar e personalizar os planos de fundo das partículas
Como mencionamos anteriormente, o SeedProd tem o particle.js incorporado às configurações do construtor de páginas. Atualmente, é possível usar esse recurso em qualquer seção da página.
Para fazer isso, clique em qualquer seção até ver uma borda roxa e selecione a guia Advanced (Avançado ).
Agora, localize o cabeçalho Particle Background (Fundo de partícula), expanda-o e alterne a opção Enable Particle Background (Ativar fundo de partícula ) para a posição "ligado".
Imediatamente, você verá um efeito de animação Polygon no plano de fundo da seção.
Se você clicar no menu suspenso "Style" (Estilo), poderá alterar as partículas para uma das duas opções:
- Espaço
- Neve
- Flocos de neve
- Natal
- Dia das Bruxas
- Personalizado
Depois de escolher um estilo de partícula, você pode definir a opacidade da partícula, a direção do fluxo e a cor.
Se quiser ter mais controle sobre a personalização das partículas, ative o botão de alternância Advanced Settings.
Aqui, você pode aumentar o número de partículas, alterar o tamanho das partículas e usar o seletor para ajustar a velocidade de movimento das partículas.
Observação: Aumentar o número de partículas pode afetar a velocidade da página. É melhor manter essa configuração o mais baixa possível para obter o melhor desempenho.
No mesmo painel, há uma opção para ativar os efeitos de foco das partículas. Se você ativar essa opção, as partículas se espalharão quando você passar o cursor sobre elas. No entanto, você só poderá ver esse efeito ao visualizar sua página fora do construtor de páginas.
Adição de fundos de partículas personalizados
Se você quiser adicionar efeitos de partículas personalizados, basta escolher a opção Custom (Personalizado ) no menu suspenso Style (Estilo). Como você pode ver, as instruções indicam que será necessário adicionar um arquivo JSON personalizado.
Felizmente, as instruções incluem um link para vincentgarreau.com/particle.js, uma biblioteca JavaScript que permite definir atributos personalizados para o plano de fundo da partícula apontando e clicando.
No painel de configuração do json de partículas, você pode escolher formas personalizadas, densidades, tamanhos, velocidades, cores e muito mais. Você também pode definir CSS personalizado para o plano de fundo e ativar efeitos de movimento.
Quando estiver satisfeito com suas configurações de partículas, clique no título "Download current config" (Baixar configuração atual). Isso fará o download do arquivo de configuração para seu computador.
Agora, abra e copie o código do arquivo e cole-o na caixa vazia em seu construtor de páginas.
Seu plano de fundo de partículas personalizado aparecerá instantaneamente!
A partir daí, continue personalizando sua página de destino até que ela fique exatamente como você deseja. Lembre-se de clicar em Save (Salvar ) para armazenar suas alterações.
Etapa 4. Publicar suas alterações
Quando estiver satisfeito com as personalizações da sua página de destino, você estará pronto para colocá-la no ar.
Para fazer isso, clique na seta do menu suspenso Salvar e clique em Publicar.
Agora você pode visitar sua página de destino para ver seu plano de fundo de partículas em ação.
Use o plug-in WP Particle Background
Outra maneira de adicionar fundos de partículas ao seu site WordPress é usar o plug-in Particle Background WP.
Esse é um plugin gratuito do WordPress particle.js. Entretanto, suas opções de personalização não são tão fáceis ou abrangentes quanto o SeedProd.
Primeiro, você precisará instalar e ativar o Particle Background WP em seu site do WordPress. Em seguida, clique no item de menu Particle Background em seu painel de administração do WordPress.
No primeiro painel, você pode exibir o banner de fundo de partículas em suas páginas iniciais e de blog ou com o shortcode. Ativamos o banner para nossa página de blog.
Abaixo disso, há uma área de conteúdo que você pode personalizar com o editor WYSIWYG. Aqui você pode inserir um título para seu banner, uma descrição e uma chamada para ação.
O próximo painel inclui opções de personalização de partículas, incluindo densidade, cor e cor de fundo. Você também pode inserir CSS personalizado.
Depois de salvar as alterações, você poderá acessar a página do blog e ver o banner com um fundo de partículas no lugar.
Você também pode usar o shortcode para adicionar o mesmo banner em qualquer página ou publicação. No entanto, é importante observar que seu banner ficará sobre o conteúdo, e não atrás dele, como no SeedProd.
Mais maneiras de adicionar o Particle.js ao WordPress
Se ainda estiver procurando outras maneiras de adicionar o particle.js ao seu site WordPress, as seguintes ferramentas poderão ser úteis:
- Ultimate Addons for Elementor: Com esse complemento, você pode adicionar efeitos de partículas às páginas que criou usando o plug-in do construtor de páginas Elementor.
- Ultimate Addons for Beaver Builder: Adicione animações de partículas às páginas criadas com o plug-in Beaver Builder.
- Manualmente: Só recomendamos essa abordagem se você estiver familiarizado com HTML, PHP, JavaScript e outras linguagens de programação.
Em última análise, a maneira mais fácil de adicionar fundos de partículas ao WordPress é com o SeedProd. Ele é fácil de usar, não requer codificação e tem inúmeras opções de personalização que requerem apenas alguns cliques para serem configuradas.
Perguntas frequentes
Não, você não precisa de experiência em programação para adicionar fundos de partículas ao WordPress. O SeedProd tem uma interface sem código para facilitar a adição do efeito ao seu site sem código.
Embora os planos de fundo particle.js possam ser visualmente atraentes, eles exigem JavaScript adicional e podem tornar o tempo de carregamento do seu site mais lento. É importante otimizar seu site para garantir que ele carregue rapidamente e não afete negativamente a experiência do usuário.
Sugerimos o uso de fundos de partículas de baixa densidade somente nas áreas mais importantes do seu site.
Sim! O SeedProd permite que você personalize a cor, a forma, a densidade e outros parâmetros da partícula para criar um efeito exclusivo e visualmente atraente em seu site.
Sim, os planos de fundo do particle.js podem ser compatíveis com dispositivos móveis se forem otimizados adequadamente. No entanto, é fundamental testar o plano de fundo de partículas em diferentes dispositivos e tamanhos de tela para garantir que ele não afete negativamente a experiência do usuário. Você pode fazer isso com o recurso de visualização móvel integrado do SeedProd.
Além dos planos de fundo de partículas, você pode usar vários outros tipos de planos de fundo animados em seu site WordPress, inclusive rolagem de paralaxe, planos de fundo de vídeo e gradientes animados. Esses efeitos ajudam a criar uma experiência visualmente envolvente e dinâmica.
Aí está!
Esperamos que este guia tenha ajudado você a aprender como criar fundos de partículas no WordPress.
Talvez você também goste deste guia sobre os melhores plug-ins de galeria de fotos do WordPress para complementar seus novos planos de fundo de partículas. Ou este guia sobre como adicionar efeitos de neve no WordPress.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
