Cum să adăugați animație de defilare pe site-ul WordPress?

Efectele și animațiile ajută la aducerea site-urilor web la viață. Ele nu doar le fac să arate uimitoare, ci și îmbunătățesc experiența utilizatorului, care este unul dintre cele mai importante semnale de clasare pentru motoarele de căutare Google.

S-ar putea să fi crezut că este grozav, dar nu-ți poti crea. Dar adevărul este că nu numai că este posibil, dar poți crea o animație de defilare pentru site-ul tău WordPress cu doar câteva clicuri.

În acest blog, vă vom ajuta să învățați Cum să adăugați animație de defilare în WordPress cât mai ușor posibil.

Așa că rămâneți pe fază și citiți postarea până la sfârșit.

Dar înainte de asta, să înțelegem care sunt beneficiile adăugării de animație de defilare în WordPress.

Beneficiile adăugării de animație de defilare în WordPress

Dacă încă vă întrebați de ce ar trebui să adăugați animație de defilare în WordPress, verificați avantajele sau beneficiile menționate mai jos:

1. Implicarea îmbunătățită a utilizatorilor

Animațiile de defilare captează atenția și mențin vizitatorii implicați în timp ce vă explorează site-ul. Elementele dinamice precum textul decolorat sau imaginile în mișcare creează o experiență interactivă, încurajând utilizatorii să deruleze mai departe și să petreacă mai mult timp pe paginile dvs.

2. Experiență îmbunătățită a utilizatorului (UX)

Animațiile pot ghida utilizatorii prin conținut într-un mod fluid și intuitiv. Prin dezvăluirea treptată a informațiilor sau evidențierea secțiunilor cheie, efectele de defilare fac navigarea mai ușoară și mai plăcută, îmbunătățind satisfacția generală a utilizatorului.

3. Atractie vizuală sporită

Adăugarea de animații de defilare oferă site-ului dvs. un aspect modern și profesional. Tranzițiile și animațiile subtile vă pot face designul mai dinamic, ajutându-vă site-ul să iasă în evidență față de concurenți.

4. Oportunități de povestire

Animațiile de defilare permit o povestire creativă. Puteți prezenta informațiile într-o secvență logică, convingătoare din punct de vedere vizual, care vă ajută să vă comunicați mesajul mai eficient și să mențină vizitatorii implicați cu conținutul dvs.

5. Interacțiuni prietenoase cu dispozitivele mobile

Animațiile de defilare îmbunătățesc interacțiunile mobile, făcându-le mai fluide și mai captivante. Utilizatorii de telefonie mobilă, în special, beneficiază de elemente de design intuitive care răspund gesturilor lor, îmbunătățind experiența mobilă.

6. Beneficii SEO

Deoarece animațiile pot contribui la o mai bună implicare a utilizatorilor și la un timp mai lung petrecut pe site, ele sprijină indirect eforturile de SEO. O rată de respingere mai mică și o interacțiune mai mare a utilizatorului pot semnala motoarele de căutare că site-ul dvs. oferă conținut valoros, contribuind la creșterea clasamentului dvs.

7. Branding profesional

Animațiile de defilare reflectă un nivel mai înalt de profesionalism, aliniându-se cu tendințele moderne de design web. Când sunt utilizate strategic, acestea pot consolida identitatea mărcii dvs. și vă pot face site-ul mai memorabil.

8. Îndrumări subtile pentru utilizatori

Animațiile de defilare pot evidenția îndemnuri (CTA), pot dirija atenția asupra secțiunilor importante sau pot ghida utilizatorii printr-o anumită cale de pe site-ul dvs. Acest ajutor subtil de navigare poate ajuta la îmbunătățirea conversiilor.

Acum să vedem cum o poți face.

Adăugați animație de defilare în WordPress folosind pluginul WordPress

Una dintre cele mai ușoare modalități de a adăuga animație de defilare în WordPress este utilizarea unui plugin numit Scrollsequence .

Deși există și alte pluginuri WordPress disponibile în afară de Scrollsequence, am considerat că este cel mai stabil și mai bogat în funcții.

Prin urmare, pentru acest blog, l-am ales pentru a vă arăta cum să adăugați animație de defilare în WordPress.

Iată o metodă pas cu pas pe care trebuie să o urmați:

Pasul 1: Instalați pluginul și activați

• Accesați tabloul de bord de administrare WordPress:
  Mai întâi, conectați-vă la site-ul dvs. WordPress > Căutați „Scrollsequence” în secțiunea Plugin-uri > instalați versiunea gratuită > Activați pluginul după instalare.

Pasul 2: Accesați meniul Scrollsequence

• Găsiți noua opțiune pentru secvența de defilare:
  După ce activați pluginul, priviți din nou partea stângă a tabloului de bord. Ar trebui să vedeți o nouă opțiune etichetată Scrollsequence .
• Faceți clic pe acest meniu:
  Faceți clic pe Scrollsequence . Aceasta vă va duce într-o zonă nouă în care vă puteți configura și personaliza animațiile. Veți găsi, de asemenea, tutoriale utile care explică cum să îl utilizați.

Pasul 3: Pregătiți-vă animația

• Înțelegerea modului în care funcționează Scrollsequence:
  Scrollsequence creează animații folosind o serie de imagini statice, un fel ca un flipbook, pentru a-l face să arate ca un videoclip atunci când utilizatorii derulează în jos pe pagină.
• Convertiți-vă videoclipul în imagini:
  Pentru a vă crea animația, mai întâi, aveți nevoie de un videoclip scurt (de aproximativ 5-10 secunde). Utilizați un instrument gratuit precum Ezgif pentru a converti acest videoclip în cadre de imagine separate (format JPEG). Aceasta înseamnă că veți obține mai multe imagini din videoclipul dvs., pe care Scrollsequence le va folosi pentru a crea animația.

Pasul 4: Creați o nouă animație de defilare

• Începeți o nouă secvență de defilare:
  În meniul Scrollsequence, căutați un buton care spune Add New Scrollsequence și faceți clic pe el.
• Adăugați o scenă:
  Faceți clic pe Adăugați o scenă . Va apărea un meniu derulant, unde puteți alege secvența de imagini pe care doriți să o utilizați pentru animație.

• Încărcați imaginile dvs.:
  Acum, încărcați imaginile pe care le-ați primit din videoclipul dvs. Acest lucru poate dura puțin timp, în funcție de cât de rapid este internetul dvs.

Pasul 5: Personalizați animația

• Ajustați setările de animație:
  Odată ce toate imaginile sunt încărcate, puteți modifica unele setări. Puteți alege când începe și când se termină animația în timp ce derulați.
• Alegeți tipul de animație:
  Decideți dacă doriți ca animația să rămână într-un singur loc (lipicioasă) sau să se miște pe măsură ce utilizatorul derulează în jos pe pagină (static).

Pasul 6: previzualizați și salvați

• Verificați-vă animația:
  Înainte de a finaliza totul, faceți clic pe butonul de previzualizare pentru a vedea cum arată animația dvs.
• Publicați-vă animația:
  Dacă vă place ceea ce vedeți, faceți clic pe butonul Publicați pentru a face animația dvs. live pe site-ul dvs.

Pasul 7: Utilizați animația de pe site-ul dvs. web

• Obțineți codul scurt:
  După publicare, reveniți la meniul Scrollsequence . Veți găsi un shortcode (un cod special) pentru noua animație.

• Lipiți codul scurt:
  Copiați acest cod scurt și inserați-l în orice pagină sau postare în care doriți să apară animația. Puteți adăuga câte animații doriți pe aceeași pagină

Acum site-ul dvs. WordPress are o animație de defilare distractivă și interactivă!

Adăugați animație de defilare în WordPress folosind Elementor

În metoda de mai sus, am folosit un videoclip mai degrabă decât imagini, dar în această metodă Elementor, vom adopta o abordare diferită.

Imaginea se va muta de la o parte la alta a ecranului pe măsură ce utilizatorii derulează în jos pe pagină. Iată cum o puteți face folosind imagini statice în loc de videoclipuri cu Elementor.

Pasul 1: Creați o pagină nouă

• Începeți prin a crea o pagină nouă pe site-ul dvs. WordPress.

Pasul 2: Editați cu Elementor

• Faceți clic pe Editare cu Elementor . Elementor este un generator de pagini care vă ajută să vă proiectați paginile cu ușurință.

Pasul 3: Inserați o imagine

• Odată ajuns în editorul Elementor, căutați opțiunea de a insera o imagine în pagină.
• Sfat: Animația funcționează cel mai bine cu o imagine transparentă. Puteți utiliza un PNG (care acceptă transparența) sau un fișier SVG (care este și un format vectorial).

Pasul 4: Setați dimensiunea imaginii

• Reglați dimensiunea imaginii dvs. Asigurați-vă că este suficient de mare pentru ca oamenii să poată observa mișcarea atunci când derulează. De exemplu, îl puteți seta la dimensiune medie , care este de aproximativ 300 x 300 pixeli .

Pasul 5: Selectați imaginea

• Faceți clic pe imaginea pe care tocmai ați adăugat-o pentru a o selecta.

Pasul 6: Accesați Setări avansate

• Căutați fila Avansat în setările din partea stângă a editorului Elementor.

Pasul 7: Activați efectele de mișcare

• Derulați în jos pentru a găsi Efecte de mișcare .
• Activați Efectele de defilare . Acest lucru vă va permite să adăugați mișcare imaginii dvs.

Pasul 8: Setați direcția de defilare orizontală

• Deoarece doriți ca imaginea dvs. să se miște pe pagină, căutați opțiunea etichetată Derulare orizontală .
• Schimbați setarea Direcție la La dreapta . Aceasta înseamnă că imaginea se va muta de la stânga la dreapta pe măsură ce utilizatorul derulează în jos pe pagină.

Pasul 9: Testați efectul

• Derulați în jos pe pagină pentru a vedea cum se mișcă imaginea dvs. Acesta este un exemplu simplu, dar vă arată cât de ușor este să creați un efect captivant.

Note suplimentare

• De asemenea, puteți utiliza pluginul Scrollsequence pentru a adăuga animații similare de defilare în Elementor.
• Dacă aveți Elementor Pro , acesta include o funcție încorporată pentru efecte de defilare lipicioasă, dar aceasta poate fi mai limitată în comparație cu alte opțiuni.

Adăugați animație de defilare în WordPress folosind Divi

În cazul în care nu sunteți un utilizator Elementor, dar utilizați Divi în schimb, puteți crea în continuare un efect similar.

Iată cum o poți face.

De exemplu, luăm în considerare un site web de fotbal

Pasul 1: Creați o pagină nouă

Primul lucru pe care trebuie să-l faceți este să creați o pagină nouă și să selectați Divi Page Builder. Acest lucru vă va permite să vă proiectați pagina folosind funcțiile Divi.

Pasul 2: alegeți un aspect (opțional)

• Acum, pentru a face lucrurile puțin mai repede, alegeți machetele prefabricate ale Divi. De exemplu, selectați un aspect pentru un site de antrenament de tenis .

Pasul 4: Adăugați imaginea dvs

• Pentru a crea efectul de defilare, veți avea nevoie de o imagine. În acest exemplu, veți folosi o imagine Score.
• Asigurați-vă că imaginea partiturii are un fundal transparent (formatul PNG funcționează cel mai bine). Încarcă această imagine pe pagina ta.

Pasul 5: Accesați Setări imagine

• Faceți clic pe imaginea Scor pe care tocmai ați adăugat-o pentru a-i deschide setările.
• Căutați fila Avansat în meniul de setări.

Pasul 6: Activați Efectele de defilare

• În Setările avansate, găsiți secțiunea Efecte de defilare .
• Veți vedea diferite opțiuni pentru efectele de defilare.

Pasul 7: Alegeți-vă efectele

• Selectați orice efect preferați să aveți.
• De asemenea, activați efectul Mișcare orizontală pentru a face ca imaginea Score să se miște de la o parte la alta a ecranului pe măsură ce utilizatorii derulează în jos.

Pasul 8: Testează-ți mișcarea derulării

• După configurarea efectelor, derulați în jos pe pagină pentru a vedea cum se mișcă imaginea scorului.

Pasul 9: Salvați modificările

• După ce sunteți mulțumit de modul în care arată, asigurați-vă că salvați modificările.
• Apoi, faceți clic pe Publicare pentru a vă face pagina să fie activă cu noul efect de defilare.

Adăugați animație de derulare simplă și de bază în WordPress folosind etichete Anchor și CSS

Această metodă nu oferă opțiuni de lux pentru a adăuga animații de defilare în WordPress, dar vă poate ajuta să adăugați animații simple pe site-ul dvs. WordPress în cel mai simplu mod.

Pentru aceasta, trebuie să utilizați etichete de ancorare, care sunt utilizate în general pentru a ajuta vizitatorii să sară la conținut specific de pe aceeași pagină. Cu toate acestea, problema este că, în mod implicit, animația de defilare pare neplăcută sau bruscă.

Dar putem face această mișcare ușoară, oferind cititorilor senzația unui derulare animat, mai degrabă decât a unui salt brusc.

Iată cum o poți face.

Pasul 1 : Configurați etichete de ancorare : mai întâi trebuie să creați o secțiune a paginii dvs. la care să „săriți”. Acest lucru se face prin adăugarea unui cuvânt (etichetă de ancorare) în câmpul Ancoră HTML, care acționează ca țintă pentru link.

Pasul 2 : Creați linkul : conectați eticheta de ancorare la un text sau un buton de pe pagină. Linkul trebuie scris cu un hashtag urmat de textul ancora (de exemplu, #section1).

Pasul 3 : Publicați pagina : Când publicați pagina, dacă faceți clic pe link, veți ajunge la eticheta de ancorare, dar poate fi brusc.

Pasul 4 : Remediați-l cu derulare lină : Pentru a face defilarea lină, adăugați o mică bucată de cod CSS (comportament de defilare: lină) la secțiunea „CSS suplimentar” din WordPress.

html{
scroll-behavior: smooth;
}

Acest cod face mișcarea de defilare treptată și plăcută vizual, ca și cum ar fi animată.

Odată ce publicați pagina din nou, făcând clic pe link va avea ca rezultat o derulare fluidă și animată în jos până la ancoră în loc de un salt brusc.

Concluzie

Acum ați învățat că adăugarea de animații de defilare pe un site WordPress nu necesită abilități tehnice speciale sau asistență pentru dezvoltatori. Un simplu plugin sau un generator de pagini este suficient pentru a vă ajuta să creați pagini dinamice și atractive în câteva minute.

Pentru cele mai bune rezultate, puteți, de asemenea, să combinați metodele menționate mai sus pentru a obține rezultate și mai îmbunătățite, atrăgând și reținând mai mult trafic pe site-ul dvs.

Dacă aveți întrebări sau doriți să vă împărtășiți opinia valoroasă, vă rugăm să ne spuneți în secțiunea de comentarii de mai jos.

Rahul

Rahul Kumar este un pasionat de web și un strateg de conținut specializat în WordPress și găzduire web. Cu ani de experiență și angajamentul de a rămâne la curent cu tendințele din industrie, el creează strategii online eficiente care generează trafic, stimulează implicarea și cresc conversiile. Atenția lui Rahul pentru detalii și capacitatea de a crea conținut convingător îl fac un atu valoros pentru orice brand care dorește să-și îmbunătățească prezența online.