Cum să dezactivați supraîncărcarea în WordPress (Eliminați derularea orizontală)

O bară de defilare orizontală apare atunci când un element de pe acea pagină este prea lat pentru a fi afișat și depășește ecranul. Majoritatea temelor WordPress nu folosesc defilarea orizontală, deoarece poate afecta aspectul site-ului dvs. și poate confuza utilizatorii.

Este frustrant pentru dvs. ca proprietar de site și, credeți-ne, este și mai frustrant pentru vizitatorii dvs. care încearcă să navigheze prin conținutul dvs.

Din fericire, din experiența noastră, dezactivarea depășirii și eliminarea barei de derulare este de obicei simplă și face o mare diferență în aspectul site-ului dvs. și în ușurința de utilizare.

În acest articol, vă vom arăta cum să dezactivați cu ușurință overflow-ul în WordPress și să eliminați bara de scroll orizontal. Instrucțiunile noastre simple sunt ușor de utilizat și de urmat, chiar dacă nu sunteți un expert în codare.

Ce cauzează bara de defilare orizontală sau depășirea în WordPress?

Atunci când configurați site-ul dvs. WordPress, este important să îl faceți ușor de utilizat și accesibil pentru toată lumea.

WordPress va afișa o bară de scroll orizontală dacă un element este mai lat decât layout-ul site-ului dvs. Aceasta se numește „overflow”. Având o bară de scroll orizontală poate strica designul și poate face site-ul dvs. mai puțin prietenos pentru utilizatori.

O pagină web cu bare de defilare atât orizontale, cât și verticale poate fi, de asemenea, dezorientantă pentru vizitator și poate deveni greu de navigat. Poate duce la părăsirea site-ului dvs., cauzând conversii și vânzări mai mici.

Dezactivarea overflow-ului va face site-ul dvs. mai ușor de utilizat, va crea un layout cu lățime fixă și va îmbunătăți responsivitatea generală a site-ului dvs.

Având în vedere acest lucru, să vedem cum să dezactivăm cu ușurință bara de defilare orizontală de overflow în WordPress:

• Metoda 1: Adăugarea fragmentului CSS folosind Theme Customizer
• Metoda 2: Adăugarea fragmentului CSS folosind WPCode
• Bonus: Adăugați o bară de defilare personalizată în WordPress

Metoda 1: Adăugarea fragmentului CSS folosind Theme Customizer

Puteți dezactiva overflow în WordPress adăugând pur și simplu cod CSS în opțiunea „CSS suplimentar” a personalizatorului de temă.

Tot ce trebuie să faceți este să vizitați pagina Aspect » Personalizare din tabloul de bord WordPress.

Odată ce sunteți pe pagina Personalizare, faceți clic pe fila „CSS suplimentar”.

Apoi, pur și simplu copiază și lipește următorul cod:

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

După aceea, orice depășire va fi eliminată și veți putea vedea cum se aplică în panoul de previzualizare live al site-ului dvs.

Nu uitați să faceți clic pe butonul „Publică” din partea de sus a paginii când ați terminat!

Metoda 2: Adăugarea fragmentului CSS folosind WPCode

Puteți adăuga, de asemenea, codul CSS printr-un fragment de cod folosind pluginul WPCode.

WPCode este cel mai bun plugin de fragmente de cod WordPress de pe piață, utilizat de peste 1 milion de site-uri web.

Recomandăm această metodă, deoarece acest plugin facilitează adăugarea de cod personalizat în WordPress fără a fi nevoie să editați fișierele temei.

Mai întâi, instalați și activați pluginul WPCode pe site-ul dvs. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, vizitează pagina Code Snippets » + Add Snippets din tabloul de bord WordPress.

Aici, faceți clic pe butonul „+ Adăugați un fragment personalizat” sub opțiunea „Adăugați codul dvs. personalizat (Fragment nou)”.

Apoi, trebuie să selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar pe ecran.

Acum, veți fi direcționat către pagina „Creează fragment de cod personalizat”, unde puteți începe prin a introduce un titlu pentru fragmentul dvs. de cod.

Acest nume nu va fi afișat utilizatorilor și este doar pentru identificarea dvs.

După aceea, copiați și lipiți următorul fragment de cod CSS în caseta „Previzualizare cod”:

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

Odată ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare”, unde veți găsi două opțiuni, „Inserare automată” și „Shortcode”.

De aici, selectați modul „Inserare automată” pentru a executa automat codul la activare.

Cu toate acestea, dacă doriți doar să dezactivați bara de defilare orizontală pe anumite pagini specifice, atunci puteți selecta modul „Shortcode”.

La efectuarea acestei acțiuni, WPCode vă va oferi un shortcode la activarea snippet-ului pe care îl puteți lipi într-o anumită zonă sau pagină a site-ului pentru a elimina depășirea.

După ce ați ales opțiunea, mergeți în partea de sus a paginii și comutați comutatorul de la „Inactiv” la „Activ” în colțul din dreapta sus.

Apoi, pur și simplu faceți clic pe butonul „Salvează fragmentul de cod”.

Gata! Tocmai ai eliminat orice bară de defilare orizontală de depășire de pe site-ul tău.

Bonus: Adăugați o bară de defilare personalizată în WordPress

Odată ce ați dezactivat bara de defilare orizontală, puteți adăuga și o bară de defilare personalizată.

De exemplu, dacă site-ul dvs. folosește o schemă de culori specifică, conform culorilor brandului dvs., atunci ați putea folosi aceeași culoare pentru bara de defilare. Acest lucru va arăta atrăgător vizual și va încuraja utilizatorii să exploreze site-ul dvs.

Pentru a crea o bară de scroll personalizată, instalați și activați pluginul Advanced Scrollbar. Pentru detalii, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

După activare, vizitează pagina Settings » Advanced Scrollbar Settings din tabloul de bord WordPress. De aici, poți acum schimba culoarea barei de defilare după placul tău.

Când ați terminat, faceți clic pe butonul „Salvați modificările” pentru a salva setările. Pentru mai multe informații, consultați tutorialul nostru despre cum să adăugați o bară de defilare personalizată în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să dezactivați overflow-ul pe site-ul dvs. WordPress. De asemenea, ați putea dori să vedeți selecțiile noastre de experți pentru cele mai bune sfaturi de cod de utilizat pe site-ul dvs. WordPress și ghidul nostru pentru începători despre cum să eliminați CSS-ul neutilizat î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.