Micile atingeri de design pot face o diferență uriașă în cât de profesional arată site-ul dvs. web.
Barele de derulare personalizate sunt unul dintre acele detalii pe care majoritatea vizitatorilor nu le vor observa conștient, dar cu siguranță vor simți consistența vizuală îmbunătățită atunci când navighează prin conținutul dvs.
Vestea bună este că personalizarea barelor de defilare în WordPress nu necesită abilități avansate de codare, iar rezultatele pot îmbunătăți cu adevărat experiența generală a utilizatorului pe site-ul dvs.
Din experiența noastră în construirea de site-uri WordPress, am constatat că barele de defilare personalizate ajută la crearea acelui aspect finisat, intenționat, care separă site-urile începătorilor de cele profesionale.
Vă vom arăta 2 moduri simple de a adăuga bare de defilare personalizate la orice element de pe site-ul dvs. WordPress. Fiecare metodă pe care o vom acoperi a fost testată în scenarii reale, astfel încât să puteți alege abordarea care se potrivește cel mai bine nivelului dvs. de confort.

Când să adăugați o bară de defilare la elemente specifice în WordPress?
Adăugarea unei bare de defilare pentru elementele WordPress poate îmbunătăți semnificativ experiența utilizatorului pe site-ul tău.
Dar când ar trebui să folosiți această funcție de design WordPress?

Iată câteva elemente comune WordPress care pot beneficia de bare de defilare personalizate:
- Meniuri de Navigare – Perfect pentru bloguri cu peste 20 de categorii și subcategorii care altfel ar întinde întreaga pagină.
- Widgeturi pentru bara laterală – Ideal pentru bare laterale bogate în conținut unde doriți să păstrați toate widgeturile fără a compromite spațiul.
- Descrieri de produse – Păstrează detaliile extinse ale produselor conținute, menținând în același timp un aspect curat.
- Secțiuni de comentarii – Afișează ordonat sute de comentarii fără a supraîncărca pagina.
- Galerii de imagini – Afișează imagini multiple într-o galerie, menținând în același timp accesibilitatea.
Având în vedere acest lucru, vă vom arăta două opțiuni pentru a adăuga o bară de defilare personalizată la orice element de pe site-ul dvs. WordPress.
Recomandăm să alegi opțiunea 1 dacă abia începi cu site-ul tău și vrei să folosești un constructor de pagini cu funcționalitate de scrollbar personalizat. Acest lucru se datorează faptului că, dacă ai folosit deja o altă temă, va trebui să schimbi tema pentru această metodă.
Pe de altă parte, dacă vă place tema curentă, puteți opta pentru opțiunea 2 pentru a adăuga o bară de defilare personalizată folosind cod CSS. Nu vă faceți griji, vom detalia procesul pas cu pas, astfel încât să fie ușor de urmărit pentru oricine.
Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:
- Opțiunea 1: Utilizați un Page Builder cu bare de derulare personalizate specifice elementelor (fără cod)
- Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element
💡 Doriți să schimbați bara de derulare a întregului dvs. site WordPress în schimb? Dacă da, consultați ghidul nostru despre cum să adăugați o bară de derulare personalizată în WordPress.
Opțiunea 1: Utilizați un Page Builder cu bare de derulare personalizate specifice elementelor (fără cod)
O modalitate de a adăuga o bară de defilare personalizată într-un element specific este să folosiți un page builder cu o funcție de bară de defilare. În acest fel, puteți personaliza cu ușurință bara de defilare fără a atinge niciun cod.
Pentru această metodă, vom folosi Thrive Architect. Pe lângă o funcție de bară de defilare, Thrive Architect are peste 300 de șabloane pentru a crea rapid pagini cu aspect profesional și funcții de conținut dinamic pentru a personaliza experiența vizitatorilor dvs.
În plus, am constatat că interfața drag-and-drop este ușor de utilizat, ceea ce o face ideală pentru cei noi în WordPress. Pentru o privire mai detaliată asupra acestui instrument, consultați recenzia noastră despre Thrive Architect.
Deși Thrive Architect nu oferă o versiune gratuită, puteți folosi codul nostru special de reducere Thrive Themes pentru a economisi până la 50% la achiziția inițială.
Pasul 1: Configurați Thrive Architect și Thrive Themes
Pentru a începe, trebuie să instalăm pluginul Thrive Architect. Poți accesa acest lucru conectându-te în contul tău pe site-ul Thrive Themes.
Apoi, descărcați și instalați pluginul Thrive Product Manager. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre instalarea pluginurilor WordPress pentru începători.

După activarea pluginului, navigați la Manager Produs în tabloul de bord WordPress.
Faceți clic pe „Autentificare în contul meu” pentru a lega site-ul dvs. WordPress de contul dvs. Thrive Themes.

Ar trebui să vedeți acum o listă de produse Thrive Themes disponibile în contul dvs.
Găsiți 'Thrive Architect' și bifați căsuța 'Install Product'.

Derulați în jos pentru a găsi „Thrive Theme Builder” și selectați opțiunea „Instalare temă”.
Apoi, faceți clic pe „Instalați produsele selectate”. Acest pas este necesar, deoarece Thrive Architect funcționează împreună cu Thrive Theme Builder.

Următorul ecran va afișa instalarea și activarea Thrive Theme Builder de către Thrive Product Manager.
După finalizare, selectați „Mergi la tabloul de bord al constructorului de teme”.

Acum, este timpul să selectați un design de bază pentru site-ul dvs. folosind biblioteca de teme Thrives.
Dacă nu sunteți sigur ce să alegeți, folosiți butonul „Previzualizare” pentru a vedea cum arată fiecare temă. Odată ce ați decis, faceți clic pe „Alege”.

Vei intra acum în Expertul de Construcție a Temelor.
Acest expert vă va ghida prin încărcarea logo-ului dvs., selectarea culorilor de marcă pentru tema dvs. și configurarea diverselor structuri și șabloane de temă.
Asigurați-vă că finalizați expertul de configurare înainte de a trece la pasul următor.

Pasul 2: Adăugați un element Caseta de conținut la tema dvs.
Să adăugăm acum un element de casetă de conținut la tema dvs. WordPress, care are funcționalitatea barei de defilare în mod implicit.
În Thrive Themes, o casetă de conținut este un bloc pe care îl puteți folosi ca un container pentru a grupa mai multe blocuri împreună. Acest lucru poate fi util dacă aveți nevoie ca un set de elemente să fie stilizat în același mod sau gestionat ca un grup.
Pentru acest exemplu, vom adăuga o casetă de conținut care conține o listă lungă de categorii de postări de blog. În acest scenariu, dorim să putem afișa toate categoriile din bara laterală fără a o face foarte lungă.
Mai întâi, vizitează orice pagină sau postare de pe blogul tău WordPress unde dorești să apară bara de defilare.
Apoi, în bara de administrare de sus, faceți clic pe „Editare șablon temă [nume]” sau „Editare cu Thrive”.

Ar trebui să ajungi acum la interfața de editare a Thrive Architect. Pentru a adăuga blocul de casetă de conținut, apasă pe semnul „+” din partea dreaptă a paginii și selectează elementul „Content Box”.
Apoi, trageți-l și plasați-l oriunde doriți să fie plasat elementul cu bara de defilare.

Acum puteți adăuga mai multe elemente de conținut în caseta de conținut. De exemplu, ați putea face clic din nou pe semnul „+” și să adăugați blocul „Text”. Apoi, ați putea tasta orice text doriți.
Thrive Themes oferă o mulțime de elemente vizuale, de la cele de bază precum textul și imaginile, la formulare și tabele de prețuri.

Deoarece dorim să adăugăm o listă de categorii în bara laterală, vom adăuga și elementul „Listă stilizată dinamic” în caseta de conținut.
Acest bloc extrage practic date de pe site-ul dvs. pentru a afișa dinamic o listă, cum ar fi categorii, etichete sau autori. Blocul se va actualiza automat pe măsură ce construiți site-ul dvs. web.

Odată ce ați tras și ați eliberat lista cu stil dinamic în caseta de conținut, faceți clic pe butonul „Selectați tipul de listă”.
Apoi, faceți clic pe „Listă categorii”.

Acum, lista dvs. de categorii, blocul dvs. de text și orice alte elemente pe care le adăugați în caseta de conținut sunt în același container.
Și, după cum puteți vedea, lista este destul de lungă și de aceea vrem să adăugăm o bară de defilare.
Pasul 3: Activați Bara de Derulare în Caseta de Conținut
Dacă selectați acel container și faceți clic pe săgeata albastră din stânga, veți vedea multe opțiuni pentru a personaliza caseta de conținut.

Setările pentru adăugarea unei bare de defilare se află în fila „Layout & Position”. Aici poți ajusta spațierea interioară, marginea, lățimea, înălțimea, alinierea și așa mai departe ale casetei.
Primul lucru pe care l-am făcut a fost să dăm clic pe săgeata albă din interiorul zonei de umplutură albastră, chiar sub secțiunea „Margini și umplutură”. Am făcut acest lucru doar pentru a ne asigura că caseta de conținut se aliniază cu restul elementelor din bara laterală.
Nu ezitați să explorați alte opțiuni aici pentru a vă asigura că caseta dvs. arată proporționată.

Apoi, să derulăm în jos la secțiunea Înălțime. Continuați și faceți clic pe butonul „Max” și schimbați înălțimea în pixeli la un număr mult mai mic. În acest caz, am trecut de la 617px la 300px.
Acest lucru va face caseta de conținut mult mai scurtă, făcând ca numele categoriilor din secțiunea de jos să dispară.

Cu asta făcut, coborâți din nou pe panou și deschideți fila „Avansat”. Apoi, selectați „Derulare” în setările de depășire și activați opțiunea „Stil scrollbar”.
O bară de defilare ar trebui să fie adăugată automat la blocul casetei de conținut.

Și asta este tot pentru adăugarea unei bare de defilare personalizate cu Thrive Architect. Puteți continua editarea temei WordPress, a paginii sau a postării, sau faceți clic pe „Salvează lucrul” în partea de jos pentru a publica modificările.
Iată cum arată bara de defilare pe site-ul demo:

Opțiunea 2: Utilizați codul CSS pentru a adăuga o bară de defilare personalizată la un element specific
Dacă schimbarea temei WordPress și utilizarea unui constructor de pagini pentru a crea o bară de defilare personalizată pare prea mult, puteți folosi cod CSS în schimb. Această metodă vă permite să personalizați bara de defilare direct pe pagina dvs. WordPress.
Nu vă faceți griji dacă sunteți nou în lucrul cu fragmente de cod. Vă vom ghida prin proces pas cu pas, făcând ușor să activați această funcție pe site-ul dvs. WordPress.
Mai întâi, să înțelegem cum funcționează CSS. CSS este prescurtarea de la Cascading Style Sheets. Este un limbaj care spune browserelor web cum să afișeze elementele de pe o pagină web. În cazul nostru, vom folosi CSS pentru a adăuga și stiliza o bară de defilare personalizată.
Pentru a utiliza CSS personalizat, avem nevoie de două lucruri:
- O clasă CSS: Este ca o etichetă de nume pentru un element de pe pagina ta. Adăugăm această etichetă elementului pe care dorim să îl modificăm.
- Cod CSS: Acesta este setul de instrucțiuni care îi spune browserului cum să stilizeze elementul cu clasa CSS.
Deci, pentru a adăuga o bară de defilare personalizată, vom atribui mai întâi o clasă CSS elementului pe care dorim să-l modificăm. Apoi, vom adăuga cod CSS care creează bara de defilare pentru elementele cu acea clasă.
Veți adăuga clasa CSS scroll-bar elementului dvs. Vă vom arăta cum să faceți acest lucru mai jos. Și acesta este fragmentul complet de cod CSS care va adăuga bara de defilare:
.scroll-bar {
max-height: 100px; /* Adjust the maximum height as needed */
width:250px; /* Adjust the width as needed */
overflow-y: scroll; /* Enable vertical scrolling */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
width: 10px; /* Width of the vertical scrollbar */
}
.scroll-bar::-webkit-scrollbar-track {
background: #eaeaea; /* Background of the scrollbar track */
}
.scroll-bar::-webkit-scrollbar-thumb {
background: grey; /* Color of the scrollbar thumb */
border-radius: 15px; /* Rounded corners for the thumb */
}
/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
background: black; /* Change color when hovered */
}
/* For Firefox */
.scroll-bar {
scrollbar-width: thin; /* Define scrollbar width */
scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}
Pasul 1: Adaugă clasa CSS elementului tău
Există mai multe moduri de a adăuga o clasă CSS unui element pe site-ul dvs. WordPress.
Dacă vă aflați în editorul de blocuri sau în editorul complet al site-ului, atunci puteți face clic pe orice bloc de pe pagina, postarea sau șablonul temei dvs. de blocuri. Apoi, în bara laterală a setărilor blocului, deschideți fila „Avansat” și introduceți clasa CSS în câmpul „Clase CSS suplimentare”.
Odată terminat, pur și simplu faceți clic pe Actualizare, Publicare sau Salvare.

Dacă folosești o temă clasică, acest proces funcționează și cu editorul de widget-uri bazat pe blocuri. Mergi la Aspect » Widget-uri și dă clic pe orice bloc căruia vrei să îi adaugi clasa CSS.
După aceea, veți vedea aceeași filă Avansat în bara laterală a setărilor blocului. Pur și simplu introduceți clasa CSS în câmpul „Clase CSS suplimentare” ca mai devreme.

Pasul 2: Adăugați codul CSS la tema dvs.
Acum, să adăugăm codul CSS personalizat. Vă vom arăta 3 modalități de a face acest lucru: utilizând personalizatorul de temă, editorul de site complet și WPCode.
Prima opțiune este pentru utilizatorii de teme clasice. În plus, este o funcționalitate încorporată, deci nu aveți nevoie de un plugin pentru a insera codul sau chiar pentru a deschide fișierele temei.
Pentru a face acest lucru, puteți deschide personalizatorul temei WordPress accesând Aspect » Personalizare.

Notă: Dacă nu vedeți această setare pe WordPress-ul dvs., probabil folosiți o temă bazată pe blocuri și puteți folosi următoarea metodă în schimb. Pentru mai multe informații, consultați ghidul nostru despre cum să remediați lipsa personalizatorului de teme în WordPress.
Metoda 1: Adăugarea CSS la temele clasice
În interiorul personalizatorului, găsiți și faceți clic pe „CSS suplimentar”.

Aici, pur și simplu lipiți codul pe care vi l-am arătat mai devreme.
Vei vedea automat modificările pe tema ta odată ce ai adăugat codul.

După cum puteți vedea, elementul căruia i-ați adăugat clasa CSS are acum o bară de defilare. Apoi, puteți pur și simplu să faceți clic pe „Publicați”.
Metoda 2: Adăugarea CSS Utilizând Editorul Complet al Site-ului
Dacă aveți o temă de bloc, va trebui să adăugați cod CSS folosind editorul complet al site-ului, apoi pur și simplu accesați Aspect » Editor.

Veți găsi câteva opțiuni de meniu pentru a vă personaliza tema bloc.
Aici, faceți clic pe „Stiluri”.

Pe această pagină, ar trebui să existe câteva modele de teme bloc din care să alegi.
Vom ignora pur și simplu acest lucru și vom face clic pe butonul „Editare”. Acesta are forma unui creion.

Acum sunteți în interfața de editare.
În panoul din dreapta, faceți clic pe meniul cu trei puncte de lângă pictograma revizuirilor și selectați „CSS suplimentar”.

Acum, pur și simplu lipiți fragmentul de cod de mai devreme. Ar trebui să vedeți modificările automat.
Odată terminat, faceți clic pe „Salvați”.

Un dezavantaj al utilizării personalizatorului de teme și al editorului complet de site pentru a insera CSS-ul dvs. este că, dacă decideți să vă actualizați sau să vă schimbați tema, riscați să pierdeți personalizarea CSS.
De aceea recomandăm utilizarea WPCode pentru a edita CSS-ul site-ului dvs., mai ales dacă utilizați editorul complet al site-ului și o temă bazată pe blocuri. Puteți urma acea metodă mai jos, iar aceasta va funcționa și cu temele clasice.
Metoda 3: Adăugarea CSS folosind WPCode
Dacă îți este teamă să-ți personalizezi site-ul folosind cod, atunci WPCode este soluția perfectă pentru tine. Acest plugin pentru fragmente de cod face sigură inserarea de cod personalizat, deoarece nu va trebui să interacționezi direct cu fișierele temei tale.
Dacă apare o eroare, WPCode va detecta și dezactiva automat codul care cauzează problema. Astfel, există o șansă minimă să vă defectați site-ul.
Mai întâi, instalați pluginul WPCode pe site-ul dvs. Puteți citi ghidul nostru pentru începători despre cum să instalați un plugin WordPress pentru mai multe informații.
Apoi, accesați Code Snippets » + Add Snippet în tabloul de bord WordPress. Alegeți „Add Your Custom Code (New Snippet)” și faceți clic pe „+ Add Custom Snippet”.

Acum, dați un nume noului dvs. fragment de cod personalizat. Poate fi ceva simplu, cum ar fi „Scrollbar CSS”.
După aceea, schimbați Tipul de cod la „Fragment CSS”.

În caseta Code Preview, continuă și lipește fragmentul pe care ți l-am arătat mai devreme.
Odată terminat, derulați în jos pe pagină la secțiunea „Inserare”. Acolo, asigurați-vă că Metoda de Inserare este „Inserare Automată” și Locația este „Antetul întregului site”.
Cu asta făcut, pur și simplu comutați butonul din colțul din dreapta sus, astfel încât să scrie „Activ” și faceți clic pe „Salvare fragment”.

Ar trebui să vedeți acum o bară de defilare pe elementul căruia i-ați adăugat clasa CSS.
Iată un exemplu în care adăugăm o bară de defilare la o listă de postări recente:

Cum să adăugați o bară de defilare personalizată la un element de meniu cu mai multe submeniuri
Unul dintre lucrurile despre care cititorii sunt curioși este cum să adăugați bara de defilare la elementul de meniu de navigare care are o listă lungă de submeniuri.
Procesul este, de fapt, destul de similar cu cel pe care tocmai vi l-am arătat. Dar există câteva mici ajustări aici și acolo, în funcție de tema pe care o utilizați.
Dacă folosiți o temă clasică, atunci ar trebui să adăugați clasa scroll-bar doar la elementul principal al meniului. Nu este necesar să o adăugați la elementele submeniului.
Pentru a adăuga o clasă CSS meniului dvs., puteți deschide personalizatorul temei.
Apoi, faceți clic pe butonul „Meniuri”.

În continuare, faceți clic pe pictograma roată dințată „Setări” și apoi selectați „Clase CSS”.
Acest lucru vă permite să adăugați o clasă CSS la fiecare element de meniu.

Acum, coboară în panoul lateral.
Apoi, deschideți meniul principal.

În această etapă, puteți selecta elementul de meniu căruia doriți să adăugați clasa CSS și faceți clic pentru a-l extinde.
Ar trebui să existe un câmp numit „Clase CSS” și puteți adăuga clasa acolo.

În afară de asta, doriți să vă asigurați că adăugați clasa sub-menu după fiecare mențiune a clasei scroll-bar în codul CSS, astfel:
.scroll-bar .sub-menu {
max-height: 100px; /* Adjust the maximum height as needed */
overflow-y: scroll; /* Enable vertical scrolling */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */
Iată cum ar trebui să arate meniul de navigare:

Același principiu se aplică și temelor de bloc.
Trebuie doar să adăugați clasa scroll-bar la elementul principal al meniului, nu la submeniuri.

Acum, aici lucrurile diferă. Trebuie să vizitezi site-ul tău WordPress și să deschizi instrumentul de inspectare al browserului.
Pentru utilizatorii Chrome, faceți clic dreapta pe elementul din meniul dvs. cu submeniuri și selectați „Inspect”.

Pe tastatură, apăsați CTRL/Command + F pentru a activa funcția Căutare. Apoi, localizați codul HTML <ul></ul> care conține clasa scroll-bar.
Codul exact va fi diferit de la o temă la alta, dar iată cum arată al nostru:
<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>
Veți ști că selectați linia corectă de cod dacă toate elementele din submeniu sunt evidențiate.

Acum, doriți să copiați toate aceste clase CSS între class=" și ">.
În codul CSS, înlocuiți clasa scroll-bar cu toate acele clase și un punct (.) în fața lor pentru a indica faptul că este o clasă. Este, de asemenea, bine să adăugați !important pe fiecare linie care personalizează bara de derulare pentru a vă asigura că tema nu suprascrie aceste setări.
Iată un exemplu:
.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
max-height: 100px !important; /* Adjust the maximum height as needed */
overflow-y: auto !important; /* Enable vertical scrolling */
overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */
După ce ai adăugat acest cod, meniul tău de navigare ar trebui să arate așa:

Cum să personalizezi designul barei de defilare personalizate
Acum că ați adăugat o bară de defilare personalizată, s-ar putea să doriți să o faceți să se potrivească cu designul site-ului dvs. Puteți schimba cu ușurință aspectul barei de defilare folosind CSS. Să vedem cum să-i personalizăm dimensiunea, culoarea și forma.
Să spunem că doriți să schimbați înălțimea maximă a elementului căruia îi adăugați o bară de defilare. În acest caz, puteți schimba numărul din max-height: din partea de sus la orice număr doriți, atâta timp cât este în pixeli.
De asemenea, puteți ajusta numărul din width: pentru a face lățimea elementului cu bara de defilare mai largă sau mai îngustă.

Pentru a ajusta dimensiunea barei de defilare, găsiți linia width: 10px; sub selectorul .scroll-bar::-webkit-scrollbar.
Măriți acest număr pentru a face bara de defilare mai lată sau micșorați-l pentru a o face mai îngustă. De exemplu, width: 15px; va crea o bară de defilare mai lată, în timp ce width: 5px; o va face mai subțire.

Pentru a schimba culoarea barei de defilare, găsiți linia care spune background: grey; sub selectorul .scroll-bar::-webkit-scrollbar-thumb.
Înlocuiți „gri” cu orice culoare doriți, cum ar fi „albastru” sau orice culoare folosind codul hexazecimal al culorii (de exemplu, #0000FF).

Dacă doriți să faceți bara de defilare mai rotunjită, căutați proprietatea border-radius.
Cu cât numărul este mai mare, cu atât colțurile vor fi mai rotunjite. Încearcă să schimbi border-radius: 15px; cu border-radius: 20px; pentru un aspect mai rotunjit, sau border-radius: 0px; pentru colțuri drepte.

Reține că modificările de mai sus vor afecta doar browserele bazate pe Webkit, cum ar fi Chrome și Safari.
Pentru Firefox, va trebui să ajustați proprietatea scrollbar-color. Prima culoare este pentru glisor (partea pe care o trageți), iar a doua este pentru șină (fundalul). De exemplu, scrollbar-color: blue #eaeaea va crea o bară de defilare albastră pe o șină gri deschis în Firefox.

După ce ați făcut aceste modificări, salvați CSS-ul și reîmprospătați pagina WordPress pentru a vedea noua bară de defilare personalizată în acțiune. Nu ezitați să experimentați cu diferite culori și dimensiuni până când găsiți aspectul perfect pentru site-ul dvs. web.
Aflați mai multe modalități de a vă îmbunătăți designul web WordPress
Acum că ați învățat cum să adăugați bare de derulare personalizate pe site-ul dvs. WordPress, de ce să nu explorați și alte modalități de a îmbunătăți designul și funcționalitatea site-ului dvs.? Iată câteva ghiduri utile pentru a vă duce abilitățile WordPress la următorul nivel:
- Dacă doriți să vă prezentați paginile într-un mod atrăgător vizual, consultați tutorialul nostru despre cum să afișați ușor o listă de pagini cu miniaturi în WordPress.
- Pentru blogurile cu mult conținut, derularea infinită poate îmbunătăți semnificativ experiența utilizatorului. Aflați cum să adăugați această funcție pas cu pas.
- Pentru a adăuga un pic de stil, încercați adăugând un efect de paralaxă la tema dvs. WordPress. Este mai ușor decât ați crede.
- Pentru o accesibilitate îmbunătățită, luați în considerare adăugarea unui redimensionator de fonturi pe site-ul dvs. Avem un ghid simplu pentru a vă ajuta să faceți exact acest lucru.
- Dacă nu sunteți mulțumit de poziția curentă a barei laterale, vă putem arăta cum să schimbați poziția barei laterale în WordPress.
Sperăm că acest articol v-a ajutat să învățați cum să adăugați o bară de defilare personalizată oricărui element de pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați selecția noastră de experți a celor mai buni constructori de teme WordPress și ghidul nostru despre cum să adăugați o bară de progres de lectură în 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.

Stephanie Miller
Salut, Acestea sunt instrucțiuni grozave! Nu știu să codez și mi-a fost foarte ușor! Singurul lucru despre care am o întrebare este ce modificări trebuie să fac dacă nu vreau ca bara de derulare și butonul să se schimbe la trecerea cu mouse-ul? Vreau ca spectatorii să poată vedea bara de derulare în permanență. Mulțumesc!!
Suport WPBeginner
You would want to remove the code directly beneath the comment: /* Hover state for the scrollbar thumb */
It should be lines 25 to 28 in our code
Admin
Michelle
Mulțumesc! Aceasta a fost cea mai utilă resursă pe care am găsit-o online. A trebuit să instalez un plugin de editor CSS pentru a aplica CSS-ul. Apreciez cu adevărat cât de amănunțită este acest articol.
Suport WPBeginner
Glad you found our article helpful
Admin
kzain
Cum afectează personalizarea barei de defilare timpii de încărcare a paginii și performanța generală? Sunt interesat de optimizarea vitezei site-ului meu și mi-ar plăcea să aflu dacă există bune practici pentru echilibrarea esteticii cu performanța. Mulțumesc pentru instrucțiunile detaliate și resursele furnizate!
Comentarii WPBeginner
Deși CSS-ul necesită randare pe pagină, nu este probabil să încetinească lucrurile pentru ceva atât de simplu, cu excepția cazului în care dispozitivul sau computerul este mult mai vechi.
Vaka
Mulțumeeesc!
Suport WPBeginner
You’re welcome
Admin
alex
Salut, nu reușesc să fac bara mea de derulare personalizată să se afișeze vertical??? Am setat-o pe un widget text WordPress cu înălțimea de 400 px și lățimea de 100 px și apare orizontal, ceea ce nu este ceea ce am nevoie. Mulțumesc
Suport WPBeginner
Conținutul dvs. s-ar putea să nu fie suficient de înalt, ați putea dori să contactați suportul plugin-ului și aceștia ar trebui să vă poată ajuta.
Admin
irit
hi
Thank you for sharing the plugin
i have a very long image that i would like to put a scroll bar on.
i know i have the right selector since the element does change, unfortunately it just “squishes” to whatever size i put into height (i used Elementor to create that page)
thank you
Suport WPBeginner
Ar trebui să contactezi mai întâi Elementor, deoarece constructorul lor de pagini ar putea împiedica imaginea să depășească dimensiunea secțiunii pe care ai configurat-o.
Admin
Danny
Aceasta este exact ideea mea – să o folosesc și să îi fac pe vizitatori să petreacă mai mult timp pe site-ul meu. Pagina mea principală este astfel încât pot combina mai multe pagini. Deci, există această pagină particulară care face parte din pagina mea principală, dar este lungă, așa că vreau să folosesc derularea pentru a o păstra scurtă, dar vizitatorii pot derula doar în interiorul ei.
Problema mea este că nu știu ID-ul elementului țintă.
Mă puteți ajuta?
Suport WPBeginner
Dacă contactezi suportul temei tale pentru secțiunea specifică pe care o dorești, ar trebui să poată să-ți spună elementul pe care îl folosesc.
Admin
Danny
Vreau să adaug derulare pe o anumită pagină – pagina în sine, nu bara laterală sau vreun widget.
Care va fi ID-ul elementului țintă?
Am dat clic dreapta pe corpul paginii, dar nu știu la ce să mă uit. Poate cineva să mă sfătuiască?
Suport WPBeginner
Ar depinde de tema specifică, dar în mod normal pentru ceea ce doriți, ar fi zona de conținut.
Admin
Danny
Folosesc versiunea gratuită a paginii de destinație pentru avocați de la raratheme și nu cred că dezvoltatorul îmi poate oferi astfel de informații ca utilizator gratuit.
Sigur, este zona de conținut și mă întreb cum se numește ID-ul elementului. Aveți vreo idee?
Suport WPBeginner
Ar fi numit ceva similar cu zona de conținut în mod normal, unde faceți clic dreapta ar fi trebuit să deschidă o zonă specifică a codului HTML care, atunci când treceți cu mouse-ul peste ea, ar trebui să evidențieze secțiunea pentru a vă arăta ce vizează. S-ar putea să doriți să consultați ghidul nostru despre cum să utilizați instrumentul de inspectare a elementelor aici: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Alexandre
Widget foarte frumos și ușor de personalizat. Cu toate acestea, mi-a luat câteva ore să găsesc ce să introduc în secțiunea Sectorul elementului țintă în timp ce foloseam Elementor. A funcționat în cele din urmă cu următoarea linie: „.elementor-element-6daf57c”. Punctul („.”) de la început este important.
Mulțumesc!
Suport WPBeginner
Thanks for sharing this specification to help other users
Admin
Rushikesh
Acest lucru funcționează pentru vizualizarea desktop, dar nu vreau ca această bară de defilare să funcționeze pe dispozitive mobile. Deoarece strică responsivitatea. Cum pot face să nu funcționeze pe dispozitive mobile?
Rosie Malik
Acest instrument este de un ajutor extraordinar pentru aspectul și funcționalitatea site-ului web! Puteți selecta elementele dvs. prezentate (imagini, postări etc.) și le puteți plasa aproape oriunde... și de mai multe ori! Vizitatorul site-ului dvs. va petrece mai mult timp pe site-ul dvs. și va interacționa cu mai mult conținut etc. Aceasta este o victorie totală!
igor Griffiths
Mulțumesc pentru distribuirea acestui plugin și, mai important, pentru modul în care să-l configurați, nu m-aș fi gândit niciodată să folosesc elementul de inspecție Chrome pentru a găsi ID-ul țintă fără multe ore de experimentare.
Pare un plugin foarte flexibil care, cu puțină imaginație, ar putea fi folosit în multe moduri puternice și captivante
igor