Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

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

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.

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

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?

Un exemplu de bară de defilare într-o bară laterală

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ă:

💡 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.

Instalați Thrive Product Manager

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.

Conectați-vă la 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'.

Instalarea Thrive Architect

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.

Instalarea 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”.

Activarea Thrive Architect și Thrive Theme Builder

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”.

Alegerea unei teme Thrive Theme Builder

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.

Expertul de configurare Thrive Theme Builder

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”.

Editarea unui site WordPress cu Thrive Architect

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.

Adăugarea unui element Caseta de conținut în Thrive Architect

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.

Adăugarea unui element de casetă text în Thrive Architect

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.

Adăugarea unui element de listă stilizat dinamic în Thrive Architect

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”.

Alegerea unui tip de listă pentru afișare în Thrive Architect

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.

Configurarea setărilor casetei de conținut în Thrive Architect

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ă.

Deschiderea meniului Layout and Position în Thrive Architect

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ă.

Setarea unei înălțimi maxime pentru Caseta de conținut în Thrive Architect

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.

Activarea barei de defilare personalizate în Thrive Architect

Ș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:

Exemplu de bară de defilare personalizată Thrive Architect

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:

  1. 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.
  2. 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.

Adăugarea unei clase CSS în editorul complet al site-ului

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.

Adăugarea unei clase CSS în editorul de widgeturi

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.

Lansați personalizatorul temei WordPress

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”.

Deschiderea secțiunii CSS suplimentar în Personalizare temă

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.

Crearea unei bare de defilare într-o temă clasică cu CSS

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.

Selectarea Editorului Complet de Site din panoul de administrare WordPress

Veți găsi câteva opțiuni de meniu pentru a vă personaliza tema bloc.

Aici, faceți clic pe „Stiluri”.

Deschiderea meniului Stiluri în Editorul complet al site-ului

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.

Făcând clic pe butonul Editare stiluri în Editorul Complet al Site-ului

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”.

Deschiderea meniului CSS suplimentar în editorul complet al site-ului

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”.

Inserarea CSS personalizat în editorul complet de site

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”.

Adăugarea unui nou fragment de cod personalizat în WPCode

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”.

Inserarea CSS personalizat pentru a crea o bară de defilare în WPCode

Î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”.

Alegerea antetului la nivel de site ca locație a codului în WPCode

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:

Exemplu de bară de defilare realizată cu CSS

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”.

Selectarea meniurilor în personalizatorul de temă

Î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.

Adăugarea de clase CSS la elementele de meniu

Acum, coboară în panoul lateral.

Apoi, deschideți meniul principal.

Selectarea meniului principal în Personalizatorul de teme

Î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.

Adăugarea unei clase CSS la un element de meniu în personalizatorul temei WordPress

Î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:

Adăugarea unei bare de defilare la un meniu în personalizatorul temei WordPress

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.

Adăugarea unei clase CSS la un meniu în editorul complet al site-ului

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”.

Accesarea instrumentului „Inspect element” în Chrome

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.

Localizarea elementului scroll-bar folosind instrumentul Inspect

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:

Un exemplu de bară de defilare într-un meniu de temă bloc realizat cu CSS

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ă.

Ajustarea înălțimii și lățimii barei de defilare cu CSS

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.

Ajustarea dimensiunii barei de defilare cu CSS

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).

Schimbarea culorii barei de defilare cu CSS

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.

Modificarea razei de colț a barei de defilare cu CSS

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.

Modificarea aspectului barei de defilare în Firefox cu CSS

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:

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.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

23 CommentsLeave a Reply

  1. 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!!

    • 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

  2. 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.

  3. 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!

    • 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.

  4. 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

    • 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

  5. 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

    • 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

  6. 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?

    • 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

  7. 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ă?

  8. 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!

  9. 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?

  10. 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ă!

  11. 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

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.