Nogle baggrunde sidder stille, og nogle driver. Flydende prikker forbundet med tynde linjer, eller sne falder bag en overskrift: partikeleffekter giver et afsnit stille bevægelse uden en videofil i syne. Den frie Partikelforlængelse i Master Addons til Elementor gengiver præcis det bag dit indhold, drevet af det velkendte particles.js bibliotek og konfigureret med et enkelt JSON felt.
Her er demo-sektionen, der kører Snow-forudindstillingen på den offentliggjorte side:
Hvad Particles-udvidelsen gør #
Når aktiveret, får sektioner, kolonner og containere en Partikler panel i deres Style fane. Flip Aktiver partikelbaggrund til Ja og sektionsbaggrunden bliver et levende partikellærred. Panelet holder det minimalt:
- Aktiver partikelbaggrund: tænd/sluk-kontakten for effekten.
- Z-indeks: hvor partikellaget sidder i stakken, så det bliver bag indholdet.
- Partikel JSON: et kodefelt, der holder particles.js konfigurationen: partikelantal, farve, form, størrelse, sammenkædningslinjer, bevægelseshastighed og svæveinteraktivitet lever alle her.
En standardkonfiguration leveres i boksen, hvide prikker forbundet af et subtilt linjenetværk, og panelet linker direkte til particles.js-generatoren for at bygge din egen.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
- Partikler er en gratis udvidelse, så der kræves ingen Pro-licens.
- Ingen kodning nødvendig: JSON kommer fra en peg-og-klik-generator.
Sådan aktiveres udvidelsen Particles #
Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Partikler sidder i Animation Widgets gruppe med et Populært badge, ved siden af Flydende effekter og Animeret Gradient BG. Klik på dens toggle, så den bliver lilla, og derefter slå Gem ændringer og vent på den grønne “Indstillinger gemt med succes”-meddelelse.
Find panelet Partikler på et afsnit #
Vælg beholderen eller sektionen i Elementor-editoren, og åbn Style fane. Den Partikler sektion med den lilla MA badge sidder med de andre Master Addons baggrundsværktøjer: Animeret Gradient Baggrund, Baggrund Slider, og Mønstre.
Slå den til og opfyld standardeffekten #
Udvid Partikler og switch Aktiver partikelbaggrund til Ja. Lærredet kører straks standardkonfigurationen: hvide prikker, der driver hen over sektionen, forbundet med tynde linjer til et netværk i bevægelse. Den Partikel JSON feltet nedenfor indeholder den konfiguration, der driver den, og Z-indeks holder laget bag din tekst.
Grib en forudindstilling fra particles.js generatoren #
The Klik her link over JSON-feltet åbner particles.js demo site, en live generator med forudindstillede konfigurationer: Standard, NASA, Bubble, Snow og Nyan Cat. Vælg en, tune skyderne, hvis du vil, og hit Download nuværende config (json).
Åbn den downloadede fil, kopier JSON, og indsæt den i Particle JSON-feltet. Demoen følger med Snow-forudindstillingen, og lærredet skifter fra linjenetværket til bløde hvide flager, der falder over sektionen i det øjeblik, config lander.
Resultatet på siden #
Udgiv og sektionen sner af sig selv, som i GIF øverst på denne side. Partiklerne gengives på et lærred bag indholdet, så alt på toppen forbliver sprødt, mens baggrunden bliver ved med at bevæge sig. Standardkonfigurationerne reagerer også på markøren; standard netværkseffekten afviser partikler på svæve.
En praktisk bemærkning: partikelantal driver ydeevnen. Snow-forudindstillingen kører 400 partikler og forbliver glat, men hvis en side stabler flere partikelsektioner, skal du holde tællingerne beskedne og kontrollere det på en mellemtone telefon.
Hvor partikelbaggrunde passer #
- Heltesektioner. Netværket med forbundne prikker læser teknisk og moderne bag en fed overskrift.
- Sæsonkampagner. Sne-forudindstillingen gør enhver promo-sektion vinterlig i én pasta.
- SaaS og opstartssider. Langsomt drivende partikler tilføjer dybde uden at distrahere fra stigningen.
- Mørke sektioner. Stjernefeltkonfigurationer som NASA får mørke baggrunde til at føles bevidste.
- Event- og lanceringssider. Bevægelse bag en nedtælling holder en sparsom side i live.
Video Tutorial #
Se hele opsætningen, fra at aktivere udvidelsen til sneen, der falder på den offentliggjorte side.
Ofte stillede spørgsmål #
Hvordan tilføjer jeg en partikelbaggrund i Elementor?
Aktiver udvidelsen Partikler i fanen Mastertilføjelser, vælg en sektion, og åbn Partikler i fanen Stil. Skift Aktiver partikelbaggrund til Ja, og det animerede standardnetværk vises med det samme, ingen konfiguration er nødvendig.
Hvor får jeg forskellige partikeleffekter?
Klik her linket i panelet åbner particles.js generator med forudindstillinger som NASA, Bubble, Snow, og Nyan Cat. Juster indstillingerne live, download config som JSON, og indsæt det i Particle JSON feltet.
Gør partikler langsommere på siden?
Effekten kører på et letvægts lærred og forbliver glat ved typiske tællinger; Snow-demoen kører 400 partikler uden stammen. Hold tællinger rimelige og undgå at stable mange partikelsektioner på én side, især for mobile besøgende.
Kan partiklerne reagere på musen?
Ja. Particles.js config indeholder interaktivitetsindstillinger, og standardkonfigurationen frastøder partikler, når markøren bevæger sig over sektionen. Hold markøren og klikopførslen kan begge konfigureres i JSON.
Er udvidelsen Particles gratis?
Ja. Partikler leveres med den gratis version af Master Addons for Elementor, i gruppen Animation Widgets under fanen Udvidelser. Prissiden dækker, hvad Pro-planerne tilføjer.
Indpakning #
Particles-udvidelsen sætter et levende partikellærred bag enhver Elementor-sektion: en skifter til standardnetværket, en indsat JSON for alt, hvad particles.js-generatoren kan drømme om. Hold tællingerne fornuftige, lad Z-indeks holde laget bag indholdet, og sektionen bevæger sig uden en enkelt upload af aktiver. Det sidder naturligt ved siden af Animeret Gradient Baggrund og Baggrund Slider udvidelser i samme Style-fane, og det fulde sæt af Master Addons widgets og udvidelser er en side væk. For at sammenligne det med at tilføje particles.js i hånden, se den Partikler udvidelsesside.
