Modalități rapide de a crea o bară de derulare personalizată în WordPress

Este sigur să spunem că, indiferent de motiv, doriți ca site-ul dvs. să iasă în evidență. Având o astfel de platformă, lucrul pe care îl puneți rămâne mai mult timp în mintea vizitatorului, iar acesta este aproape exclusiv un lucru bun. În afară de conținutul de pe site-ul tău, o altă modalitate de a atrage atenția asupra produsului tău este aspectul vizual. Aceasta nu este în niciun caz o bucată de cunoștințe noi. Există un motiv pentru care McDonald's este roșu și galben și Facebook albastru. Cu toate acestea, aici, vom vorbi despre o mică parte din experiența pe care o oferă site-ul dvs. Este o parte care poate nu pare prea importantă, dar credem că încă are valoarea ei - bara de derulare. În următoarele câteva rânduri, veți învăța câteva moduri rapide de a crea o bară de defilare personalizată în WordPress.

Modalități simple de a crea o bară de derulare personalizată în WordPress

Crearea unei bare de defilare personalizată este un pas esențial în crearea unei teme personalizate pentru site-ul dvs. web. Așadar, dacă sunteți interesat să vă faceți site-ul web în evidență în toate privințele , permiteți-ne să vă prezentăm prima metodă de a face bara de derulare unică.

Adăugați o bară de derulare personalizată în WordPress cu un plugin

Așa cum este în cazul majorității lucrurilor pe care doriți să le faceți în WordPress, utilizarea unui plugin ca mijloc de a crea o bară de defilare elegantă este un drum bun de urmat. Motivul pentru care această metodă este foarte recomandată pentru majoritatea utilizatorilor este simplitatea ei. Cu câteva clicuri simple, te vei trezi că te uiți la o bară de defilare care se potrivește stilului tău. Cu toate acestea, merită menționat un mic defect care vine cu această metodă. Și anume, acest plugin nu acceptă browsere mobile. Cu toate acestea, dacă acest lucru nu pare a fi o mare pierdere, continuați cu lectura.

În primul rând, va trebui să instalați și să activați pluginul Advanced Scrollbar . Această acțiune este destul de simplă:

1. Vizitați pluginurile, apoi accesați pagina Adăugați nou în zona dvs. de administrare WordPress. Introduceți numele pluginului menționat în bara de căutare și apăsați Enter.
2. Odată ce localizați pluginul, faceți clic pe butonul „Instalare acum”. WordPress va descărca și instala pluginul pentru dvs. După aceasta, veți putea observa că butonul „Instalare acum” s-a schimbat în butonul „Activare”.
3. Faceți clic pe butonul „Activați” și sunteți gata să plecați.

Acum că ați instalat și activat pluginul necesar, va trebui să îl configurați. Deși acest cuvânt poate suna intimidant, procesul este foarte ușor. Pur și simplu accesați Setări > Setări personalizate pentru bara de defilare a culorilor. Odată ajuns acolo, veți putea schimba culoarea barei de defilare, precum și culorile de fundal ale șinei. Puteți selecta apoi pasul de defilare a mouse-ului, care ar fi viteza de defilare a roții mouse-ului. Ceea ce este grozav la acest plugin este că vă permite să selectați dacă doriți să ascundeți automat bara de derulare sau să o afișați întotdeauna.

Aveți, de asemenea, opțiunea de a alege opțiunea „Numai cursor”, care ar afișa șina de derulare fără buton. Sub aceasta, veți putea găsi opțiuni pentru a seta viteza de derulare, a schimba alinierea șinei (stânga sau dreapta) și pentru a activa comportamentul tactil.

După ce ați parcurs toate opțiunile, v-ați jucat cu culorile și ați găsit ce combinație se potrivește cel mai bine stilului și preferințelor dvs., nu uitați să faceți clic pe butonul „salvați modificările”, pentru a stoca toate acele lucrări. După ce faceți acest lucru, vă puteți vizita site-ul web pentru a vedea acele superbe culori personalizate ale barei de defilare în acțiune.

Adăugați culori personalizate pentru bara de defilare în WordPress folosind CSS

După cum puteți deduce din subtitrare, această metodă folosește CSS pentru a vă stila bara de defilare. Această metodă s-a dovedit mai rapidă decât cea în care utilizați jQuery. Cu toate acestea, este important de menționat că funcționează numai pe browsere desktop care folosesc motoarele de randare WebKit precum Google Chrome, Safari și Opera. Din păcate, nu va avea niciun efect asupra browserelor mobile sau Firefox și Edge pe computerele desktop. Acestea fiind spuse, dacă aceasta este opțiunea pentru care doriți să optați, iată calea de a proceda.

Începeți prin a merge la Teme > Pagina personalizată. Această acțiune va lansa interfața de personalizare a temei WordPress. Veți putea vedea previzualizarea live a site-ului dvs. cu o mulțime de opțiuni în planul din stânga al ecranului . Continuați făcând clic pe fila CSS suplimentară din panoul din stânga. Fila vă va arăta o casetă simplă în care veți putea adăuga CSS-ul dvs. personalizat. De îndată ce adăugați o regulă CSS validă, o veți vedea aplicată în panoul de previzualizare live al site-ului dvs. web. În ceea ce privește regula CSS validă, iată ce ar trebui să adăugați pentru ca bara de defilare să fie susceptibilă la modificări:

::-webkit-scrollbar {

-webkit-aspect: nici unul ;

}

::-webkit-scrollbar {

latime: 10px;

}

::-webkit-scrollbar-track {

fundal: #ffb400 ;

burger : 1px solid #ccc ;

}

::-webkit-scrollbar-thumb {

fundal: #cc00ff ;

burger : 1px solid #eee ;

inaltime: 100px;

chenar-rază: 5px ;

}

::-webkit-scrollbar-thumb:hover {

fundal: albastru;

Amintiți-vă că orice CSS personalizat pe care îl adăugați utilizând instrumentul de personalizare a temei este disponibil numai cu tema respectivă. Dacă se întâmplă să schimbați o temă, dar doriți să păstrați acea bară de defilare personalizată, va trebui să copiați și să lipiți regula CSS în noua temă folosind aceeași metodă.

Deși acesta este un mijloc excelent de a vă scoate în evidență site-ul, trebuie să menționăm un dezavantaj al creării unei bare de defilare personalizată în WordPress. Și anume, în mod implicit, CSS nu vine cu un set de reguli care să vă permită să schimbați proprietățile barei de defilare. Există câteva propuneri de adăugare a acestei opțiuni, dar acestea nu sunt acceptate de majoritatea browserelor în prezent. Pentru a depăși această problemă, designerii și dezvoltatorii folosesc pseudo-elemente specifice browser-ului sau JavaScrip pentru a înlocui aspectul implicit al barei de defilare. Acestea sunt tehnicile pe care vi le-am descris. Totuși, trebuie să rețineți că trebuie să vă testați site-ul cu diferite browsere și dispozitive pentru a vă asigura că funcționează așa cum v-ați imaginat pe toate browserele. Odată ce ați acoperit acest lucru, este sigur să spuneți că știți cum să creați o bară de defilare personalizată în WordPress.