Deseja adicionar um plano de fundo de partículas ao seu site WordPress?
Os efeitos animados do particle.js podem tornar seu site mais interativo e ajudar a destacar conteúdos importantes. Neste guia, mostrarei passo a passo como adicionar fundos de partículas no WordPress usando um plug-in ou um construtor de páginas, sem necessidade de codificação.
Você também verá como personalizar as partículas de acordo com seu próprio estilo e manter seu site rápido e compatível com dispositivos móveis.
Etapas rápidas para adicionar planos de fundo de partículas ao WordPress:
O que é uma partícula de fundo?
Um plano de fundo de partículas é um conjunto animado de elementos móveis (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 pelo particle.js, uma biblioteca JavaScript leve. Ela permite que você personalize as formas, as cores, os tamanhos e o movimento das partículas sem afetar o conteúdo principal.
Aqui está um exemplo de um plano de fundo de partículas em ação:
Por que usar fundos de partículas no WordPress?
Os planos de fundo de partículas podem dar uma sensação dinâmica e interativa ao seu site. Eles ajudam a chamar a atenção para as principais seções e mantêm os visitantes envolvidos por mais tempo.
- Destaque o conteúdo importante: Use um fundo de partículas sutil atrás de seções de heróis ou chamadas para ação.
- Mostre sua criatividade: Perfeito para portfólios, agências de criação ou sites com design inovador.
- Melhore o tempo de carregamento percebido: Você pode até mesmo usar efeitos do particle.js como animações de carregamento enquanto a mídia pesada é carregada em segundo plano.
Aqui está um exemplo: um site de portfólio de design poderia adicionar uma animação de partículas suaves ao seu cabeçalho para mostrar a criatividade sem desviar a atenção do trabalho exibido.
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 que você seleciona 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 para 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 ).
Navegando 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 o botã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. Publique 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.
| Preços: Gratuito |
| Plano gratuito/avaliação: Sim |
| Recursos de destaque: 🔹 Efeitos básicos de partículas 🔹 Suporte a códigos curtos 🔹 Configurações simples |
| Classificação: B |
| Ideal para: Usuários que desejam uma opção gratuita e leve |
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 mostrar o banner de fundo de partículas nas páginas iniciais e do 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: Recomendamos essa abordagem somente 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 sobre planos de fundo de partículas do WordPress
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.
Sim, você pode adicionar manualmente o código particle.js ao seu tema do WordPress, mas isso requer a edição de arquivos de modelo 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.
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, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
