Cum să adăugați o bară de defilare personalizată în WordPress

Ați observat cum unele site-uri web au acele bare de defilare personalizate, elegante, care se potrivesc perfect cu culorile brandului lor? 🤩

Am observat și noi această funcționalitate. Și mulți dintre utilizatorii noștri ne-au întrebat cum să creeze aceste bare de defilare personalizate atrăgătoare pe propriile site-uri WordPress.

Vestea bună? Personalizarea barei de derulare WordPress este mult mai ușoară decât ai crede. Fie că vrei să se potrivească cu culorile brandului tău, să îmbunătățești navigarea sau să adaugi o notă profesională site-ului tău, îți vom arăta exact cum să o faci. Nu este necesară experiență de codare!

Ce ar trebui să știți înainte de a adăuga o bară de defilare personalizată 💡

Deci, ești interesat să personalizezi bara de derulare WordPress. Dar înainte de a te apuca, există câteva lucruri importante pe care ar trebui să le știi pentru a te asigura că iei decizia corectă pentru site-ul tău WordPress.

În primul rând, deși barele de derulare personalizate pot arăta uimitor, nu toate browserele le afișează în același mod. Browserele moderne precum Chrome le suportă bine, dar altele pot afișa personalizări limitate sau deloc – în special pe dispozitive mobile.

Cheia este să începi subtil. Întotdeauna recomandăm să începi cu ajustări minore care se potrivesc cu schema de culori a brandului tău, mai degrabă decât să creezi designuri strălucitoare care ar putea distrage atenția de la conținutul tău. Amintește-ți: bara ta de defilare ar trebui să îmbunătățească experiența utilizatorului, nu să fure spectacolul.

Când este realizat corect, acest element de design WordPress poate oferi site-ului tău acel plus de profesionalism. Asigură-te doar că testezi modificările pe diferite browsere pentru a garanta o experiență consecventă pentru toți vizitatorii tăi.

Acum că înțelegeți la ce să vă așteptați, să vedem cum să adăugați o bară de defilare personalizată pe site-ul dvs. WordPress. Pur și simplu utilizați legăturile rapide de mai jos pentru a sări la metoda pe care doriți să o utilizați:

• Opțiunea 1: Utilizați pluginul Advanced Scrollbar (gratuit + ușor)
• Opțiunea 2: Crearea unei bare de derulare CSS (Avansat)
• Sfat bonus: Adăugați un efect de defilare în sus în WordPress

Opțiunea 1: Utilizați pluginul Advanced Scrollbar (gratuit + ușor)

Cel mai simplu mod de a personaliza bara de defilare în WordPress este prin utilizarea Advanced Scrollbar. Acest plugin gratuit îți permite să modifici lățimea barei de defilare, culoarea, viteza de defilare și multe altele, fără a fi nevoie să scrii o singură linie de cod.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul Advanced Scrollbar. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Setări » Setări avansate pentru bara de defilare.

Aici, puteți schimba designul barei de defilare, cum ar fi schema de culori și culoarea de fundal a șinei.

În imaginea următoare, am creat o bară de defilare albastră.

Puteți schimba, de asemenea, pasul de derulare al mouse-ului tastând un număr nou în câmpul „Pas derulare mouse”.

Un număr mai mic va face ca site-ul tău să deruleze mai lent, iar un număr mai mare îl va face să deruleze mai rapid.

Puteți selecta, de asemenea, dacă doriți să ascundeți automat bara de defilare, astfel încât aceasta să apară doar atunci când vizitatorul derulează.

Acest lucru poate fi util dacă ați creat o bară de defilare mai colorată și vă temeți că ar putea distrage atenția de la restul conținutului dvs.

În mod implicit, bara de defilare apare în partea dreaptă a ferestrei browserului. Cu toate acestea, o puteți muta în partea stângă folosind setările „Aliniere șină”, dacă preferați.

Când sunteți mulțumit de configurarea barei de defilare, nu uitați să faceți clic pe „Salvați modificările” pentru a vă salva setările.

Acum puteți vizita blogul dvs. WordPress pentru a vedea bara de defilare personalizată în acțiune.

Opțiunea 2: Crearea unei bare de derulare CSS (Avansat)

Dacă doriți să faceți modificări mai avansate la bara de defilare, atunci o altă opțiune este să utilizați CSS.

Crearea unei bare de defilare personalizate cu CSS vă permite să personalizați fiecare parte a elementului, dar funcționează doar pe browserele desktop care utilizează WebKit. Acest lucru înseamnă că modificările dvs. nu vor apărea pe toate browserele, inclusiv pe browserele mobile.

Pentru a-ți personaliza bara de derulare folosind CSS, mergi la Aspect » Personalizare.

În personalizatorul WordPress, faceți clic pe „CSS suplimentar”.

Acum puteți adăuga codul dvs. în editorul mic care apare.

Iată un exemplu de cod care modifică aspectul barei de defilare:

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Poți adăuga orice cod dorești. Pentru mai multe informații despre CSS, te rugăm să consulți ghidul nostru complet despre cum să adaugi CSS personalizat în tema ta WordPress.

Când sunteți mulțumit de codul dvs., pur și simplu faceți clic pe butonul „Publicare”. Acum puteți vizita site-ul dvs. WordPress într-un browser WebKit pentru a vedea modificările în acțiune.

Sfat bonus: Adăugați un efect de defilare în sus în WordPress

Pe lângă crearea unei bare de defilare personalizate, s-ar putea să doriți să adăugați și un efect de defilare în sus pe site-ul dvs. WordPress. Acest lucru poate fi de mare ajutor dacă aveți postări de blog mai lungi și doriți să oferiți utilizatorilor o modalitate rapidă de a reveni în partea de sus.

Pentru a adăuga această funcționalitate, trebuie să instalezi și să activezi pluginul WPFront Scroll Top. Pentru instrucțiuni detaliate, vezi tutorialul nostru despre cum să instalezi un plugin WordPress.

După activare, vizitați pagina Setări » Scroll Top din tabloul de bord WordPress și bifați căsuța „Activat” pentru a activa efectul de derulare în sus.

După aceea, puteți edita offset-ul de derulare, dimensiunea butonului, opacitatea, durata de estompare, durata de derulare și multe altele de aici.

Odată ce ați terminat, nu uitați să faceți clic pe butonul „Salvați modificările” pentru a vă stoca setările.

Acum ai adăugat cu succes un efect de derulare în sus pe site-ul tău. Pentru instrucțiuni mai detaliate, vezi tutorialul nostru despre cum să adaugi un efect lin de derulare în sus în WordPress.

Sperăm că acest articol te-a ajutat să înveți cum să adaugi o bară de defilare personalizată în WordPress. S-ar putea să dorești să consulți și selecțiile noastre de experți pentru cele mai bune constructori de pagini drag-and-drop pentru WordPress și ghidul nostru complet despre cum să editezi un site WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.