Os fundos de partículas adicionam formas animadas e flutuantes às suas seções Elementor que se movem, se conectam e reagem ao movimento do mouse Eles transformam seções estáticas em áreas atraentes e interativas que chamam a atenção instantaneamente.
Neste guia, você aprenderá como adicionar um fundo de partículas Elementor a qualquer seção do seu site usando o gratuito Partículas extensão em Complementos Mestres para Elementor. Abordaremos a configuração básica, as predefinições no gerador partlets.js (NASA, Bubble, Snow) e como criar seus próprios efeitos de partículas personalizados usando a configuração partlets.js JSON.
Não é necessária codificação Todo o processo leva cerca de 5 minutos.
O que é um fundo de partículas?
Um fundo de partículas é um efeito animado que exibe pequenas formas (pontos, círculos, estrelas ou formas personalizadas) flutuando em uma seção Essas partículas se movem em velocidades diferentes, se conectam com linhas finas quando próximas umas das outras e podem reagir ao seu cursor ao pairar.
O efeito é alimentado por partículas.js, uma biblioteca JavaScript popular Master Addons integra particles.js diretamente no Elementor, para que você possa ativar e personalizar o efeito sem tocar em nenhum código.
O gerador de partículas.js, ligado a partir do painel Partículas, tem predefinições que fazem bons pontos de partida:
| Predefinição | Efeito | Melhor Para |
|---|---|---|
| Padrão | Pontos conectados flutuando em direções aleatórias | Sites de tecnologia, páginas de destino SaaS |
| NASA | Partículas flutuantes semelhantes ao espaço com efeito de profundidade | Seções de heróis sombrios, páginas com tema espacial |
| Bolha | Bolhas circulares maiores subindo | Portfólios criativos, designs lúdicos |
| Neve | Pequenas partículas brancas caindo como flocos de neve | Páginas sazonais, seções com tema de inverno |
Você também pode criar efeitos totalmente personalizados gerando sua própria configuração particles.js JSON.
O que você precisará
- WordPress com Elementor (gratuito ou Pro) instalado
- Complementos Mestres para Elementor instalado e ativado
- O Partículas extensão habilitada nas configurações de Master Addons
Certifique-se de que a extensão Partículas está ligada: vá para Complementos Mestres → Extensões no seu painel WordPress e alterne Partículas para LIGAR.
Como adicionar fundo de partículas no elementor: passo a passo
Siga estas etapas para adicionar um fundo de partículas a qualquer seção ou recipiente do Elementor em sua página.
Passo 1: Criar ou Selecionar uma Seção
Abra sua página no editor Elementor Crie uma nova seção ou selecione uma existente onde você deseja adicionar o efeito de partícula.
Escolha a estrutura de coluna preferida O efeito partículas funciona com qualquer layout, seja uma única coluna, duas colunas ou mais.
Passo 2: Adicionar Conteúdo à Secção
Sua seção precisa de pelo menos um widget dentro dela para ficar visível na visualização Se você estiver criando uma seção de partículas autônoma (como uma área de herói animada), solte um Espaçador widget na seção e definir a altura para 400-600 px.
Você também pode adicionar títulos, botões, imagens ou quaisquer outros widgets As partículas aparecerão por trás de todo o seu conteúdo.
Passo 3: Defina a Seção para Largura Total (Opcional)
Para obter o melhor impacto visual, defina o layout da seção como Largura total. Isso faz com que as partículas abranjam toda a largura do navegador.
Clique no ícone de edição da seção, vá para o Layout guia e conjunto Largura do conteúdo para Largura total.
Esta etapa é opcional As partículas também funcionam em seções de largura em caixa.
Passo 4: Adicionar uma Cor de Fundo
Este passo é importante As partículas são brancas por omissão, pelo que necessita de um fundo escuro ou colorido para as tornar visíveis.
Clique no ícone de edição da seção, vá para o Estilo guia e abaixo Fundo, definir uma cor sólida ou gradiente Azuis escuros, pretos e roxos profundos funcionam melhor com as partículas brancas padrão.
Dica: Para um visual mais dinâmico, tente usar o Extensão de fundo de gradiente animado (Pro) de Master Addons em vez de uma cor sólida Fundos gradientes combinados com partículas criam um efeito visual impressionante.
Etapa 5: Habilite o efeito das partículas
Agora para a parte principal Com a seção selecionada, fique no Estilo aba e role para baixo até o Partículas secção com o crachá MA. Switch Habilitar fundo de partícula ligado.
O efeito de partícula elementor padrão aparecerá imediatamente em sua seção Você verá pequenos pontos brancos flutuando e se conectando com linhas finas.
Se o efeito padrão parecer bom para o seu design, você está feitoAcerte Atualizar para salvar. Mas se você quiser personalizar o estilo de partículas, continue lendo.
Como personalizar o efeito das partículas do elementor
Você personaliza as partículas com o gerador de partículas livres.js, um configurador visual ligado a partir do painel Você pode alterar o número de partículas, sua forma, tamanho, velocidade, cor e comportamento de movimento, tudo sem escrever código.
Passo 1: Abra o Configurador de Partículas
Abaixo da alternância de partículas, você verá uma mensagem: “Clique aqui para gerar JSON para o campo abaixo.” Clique no link para abrir o configurador visual particles.js.
Na parte superior do configurador, clique em “Default” para ver as predefinições: Padrão, NASA, Bolha, Neve e Nyan Cat. Selecione qualquer predefinição como ponto de partida ou comece na configuração padrão.
Passo 2: Ajuste as propriedades das partículas
O configurador tem três seções principais Concentre-se no Partículas seção para personalização visual:
- Número 0 Maior valor cria um efeito mais denso, mas usa mais recursos do navegador.
- Cor & x 2000, 200%, 200%, 200%, 200%, 200%, 200
- Forma 1 de círculo, borda (quadrado), triângulo, polígono ou formas de estrela.
- Tamanho 0 tamanho de partícula. Activar o tamanho aleatório para um aspecto mais natural.
- Opacidade A transparência das partículas. Op parcial cria um efeito sutil e elegante.
- Linha Ligada & nable ou desabilitar as partículas próximas.
- Movimento 0 s velocidade e direcção da partícula.
Passo 3: Baixe sua configuração
Quando estiver satisfeito com a aparência das partículas na visualização ao vivo, role até a parte inferior do configurador e clique “Download Config Atual (JSON)”.
Um ficheiro nomeado particlesjs-config.json irá baixar para o seu computador.
Passo 4: Copie o Código JSON
Abra o baixado particlesjs-config.json ficheiro em qualquer editor de texto (Notepad, VS Code, ou TextEdit).Seleccione todo o código e copie-o.
Não edite o JSON manualmente, a menos que saiba o que está fazendo O configurador visual já gerou as configurações exatas que você precisa.
Passo 5: Colar no Elementor
Volte para o seu editor Elementor. Na seção Estilo aba, abra Partículas e encontrar o Partícula JSON campo. Cole o código que você copiou e clique Atualizar.
Seu efeito de partículas personalizadas agora está ativo na página Visualize-o para confirmar que tudo parece certo.
Maneiras criativas de usar fundos de partículas
Aqui estão alguns casos de uso prático para o fundo animado do elementor com partículas:
- Secções herói istículas para o herói da sua página inicial para uma aparência moderna e avançada em tecnologia. Combine com um botão de título, subtexto e CTA.
- Seções de preços 13 Usar um efeito de partícula sutil e de baixa densidade por trás de sua tabela de preços para destacá-lo do resto da página.
- Áreas testemunhais 1 neve suave ou efeito bolha por trás dos depoimentos adiciona interesse visual sem distrair o conteúdo.
- Seções rodapé & Partículas para o seu rodapé para um lustrado, olhar terminado na parte inferior da página.
- Em breve páginas Ços crie movimento sobre o que de outra forma seria um layout estático de página única Confira nosso guia sobre como criar um Elementor em breve página.
- Seções de call-to-action Ção atenção ao seu CTA colocando-o em uma seção com partículas animadas.
Dicas de desempenho para partículas
Efeitos de partículas são executados no navegador do visitante usando JavaScript. Para manter seu site rápido:
- Limitar a contagem de partículas. 40-80 partículas é geralmente suficiente para um bom efeito visual Indo acima de 150 pode retardar os dispositivos mais antigos.
- Use partículas em 1-2 seções por página. Não adicione partículas a todas as seções O efeito perde seu impacto quando usado em excesso, e adiciona sobrecarga de processamento.
- Teste no celular. Os efeitos de partículas podem drenar a bateria nos telefones Considere reduzir a contagem de partículas ou desativar o efeito no celular usando as configurações de visibilidade responsiva do Elementor.
- Evite partículas em páginas com conteúdo pesado. Postagens longas em blogs e páginas de documentação não precisam de fundos animados Salve partículas para páginas de destino e seções principais.
Para mais dicas de desempenho, leia nosso guia como acelerar os sites da Elementor.
Outros efeitos de fundo do elementor
As partículas são apenas um dos vários efeitos de fundo do Elementor disponíveis em Master Addons Confira estas extensões relacionadas:
- Fundo de gradiente animado (Pro): gradientes de cores suaves que mudam continuamente
- Deslizador Fundo: percorre várias imagens de fundo com efeitos de transição
- Rellax (Paralax) (Pro): rolagem paralaxe para uma sensação de profundidade
- Revelar (Pro): revele animações quando as seções rolam para a visualização
Todos estes estão incluídos em Os widgets e extensões 80+ da Master Addons.
Perguntas frequentes
O efeito de fundo das partículas é livre em Master Addons?
Sim. O Partículas extensão é gratuito, incluindo o campo Particle JSON, para que você possa colar qualquer configuração do gerador partlets.js sem uma licença Pro.
As partículas funcionam com recipientes Elementor?
Sim. A extensão de Partículas da Master Addons funciona tanto com as seções mais antigas do Elementor quanto com os contêineres mais recentes do Flexbox. Ative da mesma maneira a partir da guia Estilo de qualquer contêiner.
As partículas vão abrandar o meu site?
As partículas são executadas no navegador usando JavaScript, então elas adicionam alguma sobrecarga de processamento no lado do cliente Com 40-80 partículas, o impacto é mínimo em dispositivos modernos Evite usar mais de 150 partículas ou adicionar o efeito a várias seções na mesma página A biblioteca particles.js é leve (cerca de 25 KB), portanto, o impacto do tamanho do arquivo na carga da página é insignificante.
Posso mudar a cor da partícula para combinar com minha marca?
Sim. use o configurador visual partricles.js (ligado a partir das configurações de extensão) para alterar a cor, forma, tamanho, velocidade, opacidade das partículas e muito mais. Você pode definir qualquer valor de cor hexadecimal para as partículas e as linhas de conexão de forma independente.
Como desativo partículas no celular?
Você pode usar as configurações de visibilidade responsiva integradas do Elementor para ocultar a seção de partículas em dispositivos móveis Alternativamente, crie uma seção separada otimizada para dispositivos móveis sem partículas Isso economiza bateria e energia de processamento em telefones e tablets.
Comece a adicionar partículas ao seu site elementor
Adicionar um fundo de partículas de elementor leva apenas alguns cliques com Master Addons Comece a partir de um gerador predefinido como NASA, Bubble ou Snow para uma configuração rápida, ou crie seu próprio efeito personalizado com o configurador partricles.js para controle total.
A chave é usar partículas estrategicamente Escolha uma ou duas seções de alto impacto, escolha um fundo escuro e mantenha a contagem de partículas razoável Isso é tudo o que é preciso para transformar uma página estática em algo que pareça vivo.
Pronto para experimentar? Baixe complementos mestres para elementor e adicione seu primeiro fundo de partículas em menos de 5 minutos.
