Você quer adicionar um plano de fundo de partículas ao seu site WordPress?
Efeitos de partículas animadas com Particle.js podem fazer seu site parecer mais interativo e ajudar conteúdos importantes a se destacarem. Neste guia, mostrarei passo a passo como adicionar planos de fundo de partículas no WordPress usando um plugin ou construtor de páginas, sem necessidade de codificação.
Você também verá como personalizar as partículas para seu próprio estilo e manter seu site rápido e amigável para dispositivos móveis.
Passos rápidos para adicionar planos de fundo de partículas ao WordPress:
O que é um Plano de Fundo de Partículas?
Um plano de fundo de partículas é um conjunto animado de elementos em movimento (partículas) que são exibidos atrás do conteúdo do seu site. Essas partículas podem se mover, mudar de cor e reagir às interações do usuário.
A maioria dos planos de fundo de partículas é alimentada por particle.js, uma biblioteca JavaScript leve. Ela permite personalizar as formas, cores, tamanhos e movimentos das partículas sem afetar seu conteúdo principal.
Aqui está um exemplo de um plano de fundo de partículas em ação:
Por que usar Planos de Fundo de Partículas no WordPress?
Planos de fundo de partículas podem adicionar uma sensação dinâmica e interativa ao seu site. Eles ajudam a chamar a atenção para seções importantes e a manter os visitantes engajados por mais tempo.
- Destaque conteúdo importante: Use um plano de fundo de partículas sutil atrás de seções principais ou chamadas para ação.
- Mostre criatividade: Perfeito para portfólios, agências criativas ou sites com foco em design.
- Melhore os tempos de carregamento percebidos: Você pode até usar efeitos de particle.js como animações de carregamento enquanto mídias pesadas carregam em segundo plano.
Aqui está um exemplo: um site de portfólio de design poderia adicionar uma animação suave de partículas ao seu cabeçalho para mostrar criatividade sem distrair do trabalho em exibição.
Como Adicionar Planos de Fundo com Particle.js ao Meu Site WordPress?
Existem várias maneiras de adicionar planos de fundo de partículas ao seu site WordPress, mesmo que você seja iniciante.
Primeiro, você pode usar um plugin de Partículas.js para WordPress ou um construtor de páginas WordPress com recursos de efeito de partículas integrados. Recomendamos esta opção para iniciantes, pois geralmente requer zero conhecimento de codificação ou habilidades técnicas.
Outra maneira de adicionar efeitos de partículas ao seu site é usando um tema WordPress que inclua particle.js. Isso é útil se você estiver começando um novo site e ainda precisar de um tema WordPress.
A opção final é usar código personalizado para adicionar efeitos de partículas ao seu site manualmente. Recomendamos esta opção apenas se você se sentir confortável com codificação.
Neste guia, vamos nos ater à opção mais fácil: usar um plugin WordPress. Vamos lá!
Adicione um Plano de Fundo de Partículas a Seções do WordPress Usando SeedProd
Primeiro, usaremos um plugin construtor de páginas WordPress com a biblioteca particles.js integrada à sua funcionalidade: SeedProd.
SeedProd é o melhor construtor de sites e páginas para WordPress, com mais de 1 milhão de usuários. Você pode usar seu construtor de arrastar e soltar para criar temas personalizados do WordPress, landing pages, sites WooCommerce e qualquer outro layout sem escrever código.
Com centenas de modelos de página pré-fabricados, elementos de design e fundos de partículas integrados, criar animações de partículas impressionantes leva apenas alguns minutos.
Siga as etapas abaixo para adicionar fundos de partículas ao seu site com o SeedProd.
Passo 1. Instale e Ative o SeedProd
Primeiro, clique aqui para começar com o SeedProd e baixar o plugin. Em seguida, instale e ative o plugin em seu site WordPress.
Se precisar de ajuda com isso, você pode consultar nossa documentação sobre como instalar o SeedProd. Ela o guiará pelo processo de instalação e pela localização e ativação da sua chave de licença do plugin.
Etapa 2. Escolha um Modelo Pré-fabricado
Sua próxima etapa é escolher um modelo pré-fabricado. O tipo de modelo que você seleciona depende se você deseja criar um tema WordPress ou uma landing page.
Com o Theme Builder do SeedProd, você pode criar um tema WordPress completo do zero. No entanto, escolher esta opção substituirá o design existente do seu site.
Alternativamente, o Landing Page Builder permite que você crie qualquer página sem tocar no seu tema existente. Para este guia, vamos com esta opção.
No painel de administração do seu WordPress, navegue até SeedProd » Landing Pages. Nesta 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 Adicionar Nova Landing Page.
Aqui, você pode escolher entre centenas de modelos de landing page pré-fabricados.
Você pode filtrá-los por tipo clicando nas abas na parte superior, incluindo:
- Em Breve
- Modo de Manutenção
- Página 404
- Vendas
- Webinar
- Lead Squeeze
- Obrigado
- Entrar
Para escolher um design de modelo, clique no ícone de marca de verificação laranja.
Isso abrirá uma janela pop-up onde você pode inserir o nome da sua landing page. O SeedProd gera automaticamente o slug (URL) da landing page para você, mas se desejar, você pode alterá-lo.
Quando estiver satisfeito com esses detalhes, clique no botão Salvar e Começar a Editar a Página.
Navegando no Page Builder
Seu modelo agora será aberto no editor visual de arrastar e soltar do SeedProd. Você verá um painel esquerdo com blocos, seções e configurações e uma prévia ao vivo no lado direito.
Clicar em qualquer lugar na prévia permite que você visualize e personalize as configurações desse elemento e veja as alterações em tempo real.
Por exemplo, clicar na seção principal do cabeçalho 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 diminuir o fundo com uma sobreposição de cor.
Além disso, você pode adicionar novos elementos ao seu modelo arrastando-os do painel de blocos esquerdo e soltando-os no lugar.
Etapa 3. Habilitar e Personalizar Fundos de Partículas
Como mencionamos anteriormente, o SeedProd tem o particle.js integrado às configurações do construtor de páginas. Atualmente, você pode usar este recurso em qualquer seção da página.
Para fazer isso, clique em qualquer seção até ver uma borda roxa e, em seguida, selecione a aba Avançado.
Agora encontre o título Fundo de Partículas, expanda-o e mude o controle deslizante Habilitar Fundo de Partículas para a posição ativada.
Imediatamente, você verá um efeito de animação de polígono no fundo da seção.
Se você clicar no menu suspenso 'Estilo', poderá alterar as partículas para:
- Espaço
- Neve
- Flocos de Neve
- Natal
- Halloween
- Personalizado
Após escolher um estilo de partícula, você pode definir a opacidade, a direção do fluxo e a cor das partículas.
Se você quiser mais controle sobre a personalização das partículas, habilite o controle deslizante Configurações Avançadas.
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 impactar a velocidade da sua 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 habilitar efeitos de 'hover' de partículas. Se você habilitá-la, 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.
Adicionando Fundos de Partículas Personalizados
Se você quiser adicionar efeitos de partículas personalizados, basta escolher a opção Personalizado no menu suspenso Estilo. Como você pode ver, as instruções indicam que você precisará 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 seu fundo de partículas clicando e apontando.
No painel de configuração JSON de partículas, você pode escolher formas, densidades, tamanhos, velocidades, cores e muito mais. Você também pode definir CSS personalizado para o fundo e habilitar efeitos de movimento.
Quando estiver satisfeito com suas configurações de partículas, clique no título 'Baixar configuração atual'. Isso baixará o arquivo de configuração para o seu computador.
Agora abra e copie o código do arquivo, e cole-o na caixa vazia do seu construtor de páginas.
Seu 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 Salvar para armazenar suas alterações.
Etapa 4. Publique Suas Alterações
Quando estiver satisfeito com as personalizações em sua página de destino, você estará pronto para publicá-la.
Para fazer isso, clique na seta suspensa Salvar e clique em Publicar.
Agora você pode visitar sua página de destino para ver seu fundo de partículas em ação.
Use o Plugin Particle Background WP
Outra maneira de adicionar fundos de partículas ao seu site WordPress é usar o plugin Particle Background WP.
| Preço: Grátis |
| Plano Gratuito / Teste: Sim |
| Recursos de Destaque: 🔹 Efeitos básicos de partículas 🔹 Suporte a shortcode 🔹 Configurações simples |
| Classificação: B |
| Ideal para: Usuários que desejam uma opção gratuita e leve |
Este é um plugin gratuito de particle.js para WordPress. No entanto, suas opções de personalização não são tão fáceis ou extensas quanto as do SeedProd.
Primeiro, você precisará instalar e ativar o Particle Background WP em seu site 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 com partículas em suas páginas iniciais e de blog ou com o shortcode. Habilitamos 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.
Após salvar suas alterações, você pode visitar sua página de blog e ver o banner com um fundo de partículas em vigor.
Você também pode usar o shortcode para adicionar o mesmo banner em qualquer página ou postagem. No entanto, é importante notar que seu banner ficará sobre o conteúdo, não atrás dele, como no SeedProd.
Mais Maneiras de Adicionar Particle.js ao WordPress
Se você ainda está procurando outras maneiras de adicionar particle.js ao seu site WordPress, pode achar as seguintes ferramentas úteis:
- Ultimate Addons for Elementor: Com este addon, você pode adicionar efeitos de partículas a páginas que você criou usando o plugin construtor de páginas Elementor.
- Ultimate Addons for Beaver Builder: Adicione animações de partículas a páginas criadas usando o plugin Beaver Builder.
- Manualmente: Recomendamos essa abordagem apenas se você se sentir confortável 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 SeedProd. É fácil de usar, não requer codificação e tem toneladas de opções de personalização que levam alguns cliques para configurar.
FAQs Sobre Fundos de Partículas para WordPress
Não, você não precisa de experiência em codificaçã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 fundos de particle.js possam ser visualmente atraentes, eles exigem JavaScript adicional e podem diminuir o tempo de carregamento do seu site. É importante otimizar seu site para garantir que ele carregue rapidamente e não afete negativamente a experiência do usuário.
Sugerimos usar apenas fundos de partículas de baixa densidade nas áreas mais importantes do seu site.
Sim! O SeedProd permite que você personalize a cor, forma, densidade e outros parâmetros da partícula para criar um efeito único e visualmente atraente em seu site.
Sim, os fundos de particle.js podem ser amigáveis para dispositivos móveis se otimizados corretamente. No entanto, é vital testar seu 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.
Sim, você pode adicionar código particle.js manualmente ao seu tema WordPress, mas isso requer a edição de arquivos de template e pode ser mais difícil de manter.
Aí está!
Esperamos que este guia tenha ajudado você a aprender como criar Fundos de Partículas no WordPress.
Você também pode gostar deste guia sobre os melhores plugins de galeria de fotos do WordPress para complementar seus novos fundos de partículas. Ou este guia sobre como adicionar efeitos de neve no WordPress.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
