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, sunteți interesat de personalizarea barei de defilare WordPress. Dar înainte de a vă avânta, există câteva lucruri importante pe care ar trebui să le știți pentru a vă asigura că luați decizia corectă pentru site-ul dvs. WordPress.

Considerații cheie pentru barele de defilare personalizate:

• Compatibilitatea browserelor: În timp ce browserele moderne precum Chrome, Safari și Edge (browsere bazate pe WebKit pentru CSS) suportă bine barele de defilare personalizate, altele pot oferi personalizare limitată sau deloc. Testați întotdeauna modificările pe diferite browsere pentru a asigura o experiență consecventă.
• Limitări ale dispozitivelor mobile: Pe dispozitivele mobile, barele de defilare tradiționale sunt adesea înlocuite de gesturi intuitive de glisare (swiping). Acest lucru înseamnă că barele de defilare personalizate, de obicei, nu vor fi afișate pe smartphone-uri sau tablete.
• Experiența utilizatorului și accesibilitate: Bara dvs. de defilare ar trebui să îmbunătățească, nu să distragă atenția de la conținutul dvs. Designurile prea strălucitoare sau greu de văzut pot afecta negativ navigarea utilizatorilor. Vizați ajustări subtile care se potrivesc cu culorile brandului dvs. și îmbunătățesc fluxul general al site-ului.
• Impactul asupra performanței: Deși, în general, minim, adăugarea de pluginuri sau CSS extins poate afecta ușor viteza de încărcare a site-ului web. Alegeți soluții optimizate și păstrați codul curat pentru a menține o performanță bună.
• Testarea este crucială: Indiferent de metoda aleasă, testați temeinic bara de defilare personalizată pe diverse browsere, dispozitive și dimensiuni de ecran pentru a vă asigura că funcționează eficient.

Când este realizat corect, acest element de design WordPress poate oferi site-ului dvs. acel plus de profesionalism, menținând în același timp o utilizare excelentă.

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)

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 folosind pseudo-elementele ::-webkit-scrollbar (cum ar fi exemplul de mai jos) vă permite să personalizați multe părți ale elementului.

Cu toate acestea, aceste reguli CSS specifice funcționează în principal pe browserele desktop bazate pe WebKit, cum ar fi Chrome, Safari și noul Microsoft Edge.

Acest lucru înseamnă că bara de defilare personalizată s-ar putea să nu apară sau să apară diferit pe alte browsere (cum ar fi Firefox) sau pe majoritatea dispozitivelor 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;
}

Puteți adăuga orice cod doriți. Pentru mai multe informații despre CSS, vă rugăm să consultați ghidul nostru complet despre cum să adăugați CSS personalizat la tema dvs. 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 derulare în sus pe site-ul dvs. WordPress. Acesta poate fi foarte util 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ă instalați și să activați pluginul WPFront Scroll Top. Pentru instrucțiuni detaliate, consultați tutorialul nostru despre cum să instalați 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 ați adăugat cu succes un efect de derulare în sus pe site-ul dvs. web. Pentru instrucțiuni mai detaliate, consultați tutorialul nostru despre cum să adăugați o derulare lină în sus în WordPress.

Întrebări frecvente despre adăugarea unei bare de defilare personalizate în WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent despre adăugarea unei bare de defilare personalizate în WordPress:

Cum adaug o bară de defilare în WordPress?

Puteți adăuga o bară de defilare utilizând CSS personalizat sau un plugin precum Advanced Scrollbar, care permite zone de conținut cu defilare în interiorul postărilor, paginilor sau widget-urilor în WordPress.

Cum inserez un slider în WordPress?

Puteți insera un slider folosind un plugin de slider precum Soliloquy, creând sliderul dvs. și apoi adăugându-l pe o pagină folosind un bloc. Pentru mai multe informații, consultați tutorialul nostru despre crearea unui slider responsive în WordPress.

Care este cel mai bun plugin slider pentru WordPress?

Soliloquy este cel mai bun plugin de slider WordPress deoarece este ușor de utilizat pentru începători, flexibil și funcționează bine cu majoritatea temelor și constructorilor de pagini.

Cum creez un banner personalizat?

Puteți utiliza OptinMonster pentru a crea un banner personalizat cu șabloanele sale predefinite. Pluginul vă permite, de asemenea, să personalizați complet conținutul, să adăugați CTA și să utilizați culori diferite după preferințe. Pentru instrucțiuni detaliate, vă rugăm să consultați tutorialul nostru despre cum să creați un banner în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați o bară de defilare personalizată în WordPress. De asemenea, ați putea dori să vedeți selecțiile noastre de experți pentru cele mai bune creatoare de pagini drag-and-drop pentru WordPress și ghidul nostru complet despre cum să editați un site WordPress.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.