Cum se creează fundaluri animate Particle.js în WordPress

Doriți să adăugați un efect de fundal de particule animate site-ului dvs. WordPress?

Adăugând un fundal cu particle.js pe site-ul dvs., puteți scoate în evidență conținutul important și puteți crește interactivitatea site-ului dvs. WordPress. În acest articol, vă vom arăta cum să adăugați cu ușurință fundaluri de particule la orice pagină WordPress.

Gândiți-vă la asta ca la un spectacol digital de artificii, în care fiecare particulă este ca un mic foc de artificii care se poate mișca și schimba culoarea ca răspuns la interacțiunile utilizatorului sau la alte evenimente de pe pagină.

De ce să adăugați fundaluri Particle.js la WordPress?

Fundalurile cu particule pot adăuga un strat suplimentar de interes vizual și interactivitate site-ului dvs. WordPress, făcându-l mai captivant și mai memorabil pentru vizitatori.

De exemplu, dacă conduceți o agenție de creație sau un portofoliu de design, puteți utiliza Particle.js pentru a crea un efect vizual atrăgător, care vă arată creativitatea și abilitățile de design. Puteți utiliza fundaluri cu particule pentru a crea un fundal dinamic și atrăgător din punct de vedere vizual pentru antetul, secțiunea eroi sau orice altă secțiune a site-ului.

Particle.js poate crea, de asemenea, animații de încărcare unice și creative pentru a menține vizitatorii implicați și distrați în timp ce așteaptă ca site-ul dvs. să se încarce. Acest lucru este deosebit de important pentru zonele cu imagini sau videoclipuri mari, care pot dura ceva timp pentru a se încărca pe conexiuni mai lente.

În general, Particle.js este o modalitate excelentă de a adăuga un sentiment de interactivitate și dinamism site-ului tău WordPress, făcându-l mai captivant și mai memorabil pentru vizitatorii tăi.

Cum să adaug fundaluri Particle.js pe site-ul meu WordPress?

Există mai multe moduri de a adăuga fundaluri de particule pe site-ul dvs. WordPress, chiar dacă sunteți începător.

În primul rând, puteți utiliza un plugin WordPress Particle.js sau un generator de pagini WordPress cu funcții de efect de particule încorporate. Recomandăm această opțiune pentru începători, deoarece necesită de obicei zero cunoștințe de codare sau abilități tehnice.

O altă modalitate de a adăuga efecte de particule pe site-ul dvs. este utilizarea unei teme WordPress care include particle.js. Acest lucru este la îndemână dacă porniți un site nou și încă aveți nevoie de o temă WordPress.

Opțiunea finală este utilizarea codului personalizat pentru a adăuga manual efecte de particule pe site-ul dvs. web. Vă recomandăm această opțiune numai dacă vă simțiți confortabil cu codarea.

În acest ghid, vom rămâne cu cea mai simplă opțiune: folosirea unui plugin WordPress. Să ajungem la asta!

Adăugați un fundal de particule la secțiunile WordPress folosind SeedProd

În primul rând, vom folosi un plugin pentru generatorul de pagini WordPress cu biblioteca particles.js încorporată în funcționalitatea sa: SeedProd.

SeedProd este cel mai bun site web și creator de pagini pentru WordPress, cu peste 1 milion de utilizatori. Puteți folosi generatorul său de glisare și plasare pentru a crea teme personalizate WordPress, pagini de destinație, site-uri web WooCommerce și orice alt aspect fără a scrie cod.

Cu sute de șabloane de pagină prefabricate, elemente de design și fundaluri de particule încorporate, crearea de animații uimitoare cu particule durează doar câteva minute.

Urmați pașii de mai jos pentru a adăuga fundaluri de particule pe site-ul dvs. cu SeedProd.

Pasul 1. Instalați și activați SeedProd

Mai întâi, faceți clic aici pentru a începe cu SeedProd și descărcați pluginul. Apoi instalați și activați pluginul pe site-ul dvs. WordPress.

Dacă aveți nevoie de ajutor în acest sens, puteți vedea documentația noastră despre instalarea SeedProd. Vă ghidează prin procesul de instalare și găsirea și activarea cheii de licență pentru plugin.

Pasul 2. Alegeți un șablon prestabilit

Următorul pas este să alegeți un șablon prestabilit. Tipul de șablon pe care îl selectați depinde dacă doriți să creați o temă WordPress sau o pagină de destinație.

Cu Teme Builder de la SeedProd, puteți construi o temă WordPress completă de la zero. Cu toate acestea, alegerea acestei opțiuni va suprascrie designul site-ului dvs. existent.

Alternativ, Landing Page Builder vă permite să creați orice pagină fără a atinge tema existentă. Pentru acest ghid, vom merge cu această opțiune.

Din tabloul de bord WordPress, navigați la SeedProd » Pagini de destinație . Pe această pagină, veți vedea diverse moduri de pagină în partea de sus și opțiunea de a vă crea propria pagină personalizată.

Continuați și faceți clic pe butonul Adăugați o pagină de destinație nouă .

Aici, puteți alege dintre sute de șabloane de pagini de destinație prefabricate.

Le puteți filtra după tip făcând clic pe filele din partea de sus, inclusiv:

• In curand
• modul de întreținere
• 404 Pagina
• Vânzări
• Webinar
• Strângere de plumb
• Mulțumesc
• Log in

Pentru a alege un model de șablon, faceți clic pe pictograma bifă portocalie.

Aceasta va deschide o fereastră pop-up în care puteți introduce numele paginii de destinație. SeedProd generează automat pagina de destinație (URL) pentru dvs., dar dacă doriți, puteți modifica acest lucru.

Când sunteți mulțumit de aceste detalii, faceți clic pe butonul Salvați și începeți editarea paginii .

Navigarea în Generatorul de pagini

Șablonul dvs. se va deschide acum în editorul vizual de tip drag-and-drop al SeedProd. Veți vedea un panou din stânga cu blocuri, secțiuni și setări și o previzualizare live în partea dreaptă.

Făcând clic oriunde pe previzualizare, vă permite să vizualizați și să personalizați setările elementului respectiv și să vedeți modificările în timp real.

De exemplu, făcând clic pe secțiunea antet principală, se deschide setările acesteia în panoul din stânga. De acolo, puteți alege o nouă imagine de fundal, puteți alege o altă poziție de fundal și puteți estompa fundalul cu o suprapunere de culoare.

În plus, puteți adăuga elemente noi la șablon, trăgându-le din panoul de blocuri din stânga și plasându-le în poziție.

Pasul 3. Activați și personalizați fundalurile de particule

După cum am menționat mai devreme, SeedProd are particle.js încorporat în setările generatorului de pagini. În prezent, puteți utiliza această funcție în orice secțiune a paginii.

Pentru a face acest lucru, faceți clic pe orice secțiune până când vedeți un chenar violet, apoi selectați fila Avansat .

Acum găsiți titlul Particle Background , extindeți-l și comutați comutatorul Activare Particle Background în poziția pornit.

Imediat, veți vedea un efect de animație poligon pe fundalul secțiunii.

Dacă faceți clic pe meniul derulant „Stil”, puteți schimba particulele în:

• Spaţiu
• Zăpadă
• Fulgi de nea
• Crăciun
• Halloween
• Personalizat

După ce ați ales un stil de particule, puteți seta opacitatea particulei, direcția fluxului și culoarea.

Dacă doriți mai mult control asupra personalizării particulelor, activați comutatorul Setări avansate .

Aici, puteți crește numărul de particule, puteți modifica dimensiunea particulelor și puteți utiliza selectorul pentru a regla viteza de mișcare a particulelor.

Notă: creșterea numărului de particule poate afecta viteza paginii. Cel mai bine este să păstrați această setare cât mai scăzută pentru a obține cea mai bună performanță.

În același panou este o opțiune pentru a activa efectele de hover ale particulelor. Dacă o activați, particulele se vor împrăștia când treceți peste ele cu cursorul. Cu toate acestea, puteți vedea acest efect numai atunci când vă previzualizați pagina în afara generatorului de pagini.

Adăugarea de fundaluri de particule personalizate

Dacă doriți să adăugați efecte de particule personalizate, alegeți pur și simplu opțiunea Personalizată din meniul derulant Stil. După cum puteți vedea, instrucțiunile indică faptul că va trebui să adăugați un fișier JSON personalizat.

Din fericire, instrucțiunile includ un link către vincentgarreau.com/particle.js, o bibliotecă JavaScript care vă permite să setați atribute personalizate pentru fundalul dvs. de particule prin arătarea și făcând clic.

În panoul de configurare a particulelor json, puteți alege forme personalizate, densități, dimensiuni, viteze, culori și multe altele. De asemenea, puteți seta CSS personalizat pentru fundal și puteți activa efectele de mișcare.

Când sunteți mulțumit de setările pentru particule, faceți clic pe titlul „Descărcați configurația curentă”. Aceasta va descărca fișierul de configurare pe computer.

Acum deschideți și copiați codul din fișier și inserați-l în caseta goală din generatorul de pagini.

Fundalul de particule personalizat va apărea instantaneu!

De acolo, continuați să vă personalizați pagina de destinație până când arată exact așa cum doriți. Nu uitați să faceți clic pe Salvare pentru a stoca modificările.

Pasul 4. Publicați modificările

Odată ce sunteți mulțumit de personalizările paginii dvs. de destinație, sunteți gata să o publicați.

Pentru a face acest lucru, faceți clic pe săgeata derulantă Salvare și faceți clic pe Publicare .

Acum puteți vizita pagina de destinație pentru a vedea fundalul particulelor în acțiune.

Utilizați pluginul Particle Background WP

O altă modalitate de a adăuga fundaluri de particule pe site-ul dvs. WordPress este să utilizați pluginul Particle Background WP.

Acesta este un plugin gratuit WordPress particule.js. Cu toate acestea, opțiunile sale de personalizare nu sunt la fel de ușoare sau extinse ca SeedProd.

În primul rând, va trebui să instalați și să activați Particle Background WP pe site-ul dvs. WordPress. Apoi, faceți clic pe elementul de meniu Particle Background din panoul de administrare WordPress.

În primul panou, puteți afișa bannerul de fundal cu particule pe paginile dvs. frontale și de blog sau cu codul scurt. Am activat bannerul pentru pagina noastră de blog.

Mai jos este o zonă de conținut pe care o puteți personaliza cu editorul WYSIWYG. Aici puteți introduce un titlu pentru banner, o descriere și un îndemn.

Următorul panou include opțiuni de personalizare a particulelor, inclusiv densitate, culoare și culoare de fundal. De asemenea, puteți introduce CSS personalizat.

După ce ați salvat modificările, puteți vizita pagina de blog și puteți vedea bannerul cu un fundal de particule.

De asemenea, puteți utiliza codul scurt pentru a adăuga același banner pe orice pagină sau postare. Cu toate acestea, este important să rețineți că bannerul dvs. va sta deasupra conținutului, nu în spatele acestuia, ca pe SeedProd.

Mai multe moduri de a adăuga Particle.js la WordPress

Dacă încă mai căutați alte modalități de a adăuga particle.js pe site-ul dvs. WordPress, s-ar putea să găsiți utile următoarele instrumente:

• Suplimente finale pentru Elementor: Cu acest supliment, puteți adăuga efecte de particule la paginile pe care le-ați creat folosind pluginul Elementor page builder.
• Ultimate Addons pentru Beaver Builder: Adăugați animații cu particule la paginile realizate folosind pluginul Beaver Builder.
• Manual : vă recomandăm această abordare numai dacă vă simțiți confortabil cu HTML, PHP, JavaScript și alte limbaje de codare.

În cele din urmă, cel mai simplu mod de a adăuga Particle Backgrounds la WordPress este cu SeedProd. Este ușor de utilizat, necesită codificare zero și are o mulțime de opțiuni de personalizare care necesită câteva clicuri pentru a fi configurate.

întrebări frecvente

Iată-l!

Sperăm că acest ghid te-a ajutat să înveți cum să creezi fundaluri cu particule în WordPress. De asemenea, s-ar putea să vă placă acest ghid despre cele mai bune pluginuri pentru galeria foto WordPress pentru a vă completa noile fundaluri de particule.

Multumesc pentru lectura. Vă rugăm să ne urmăriți pe YouTube, Twitter și Facebook pentru mai mult conținut util pentru a vă dezvolta afacerea.