Cum să adăugați un meniu responsiv pe tot ecranul în WordPress

Meniurile sunt esențiale pentru a ajuta vizitatorii să navigheze pe site-ul dvs. WordPress și să găsească mai multe dintre postările și paginile dvs. Meniurile responsive fullscreen pot fi deosebit de utile atunci când proiectați site-ul dvs. pentru utilizatorii de mobil.

Când utilizatorii dvs. fac clic sau ating o pictogramă de hamburger, va fi afișat un overlay pe tot ecranul al meniului site-ului dvs. web, folosind o animație frumoasă.

Am experimentat cu câteva tipuri diferite de meniuri pe propriile noastre site-uri pentru a vedea ce obține cele mai bune rezultate. Și în acest articol, vă vom arăta cum să adăugați un meniu fullscreen responsiv în WordPress fără a scrie niciun cod.

De ce să adăugați un meniu responsive fullscreen în WordPress?

Un meniu responsive pe tot ecranul face mult mai ușoară navigarea vizitatorilor pe site-ul dvs. WordPress sau în magazinul WooCommerce pe smartphone-uri și tablete.

Folosind întregul ecran pentru meniu, este simplu să atingeți linkuri fără a selecta accidental elementul greșit.

Cu mai mulți oameni care navighează pe mobil decât pe desktop în aceste zile, verificarea aspectului site-ului dvs. pe ecrane mici este esențială.

Un meniu responsive se ajustează automat la diferite dimensiuni ale ecranului, asigurând o experiență fluidă pentru fiecare vizitator.

Să vedem cum să adăugăm un meniu receptiv pe tot ecranul în WordPress.

Pasul 1: Instalați și activați pluginul FullScreen Menu

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul FullScreen Menu.

Puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress pentru începători pentru mai multe detalii.

Pasul 2: Configurați setările generale ale meniului

După activare, ar trebui să accesați pagina Opțiuni meniu pe tot ecranul din meniul de administrare WordPress pentru a configura setările pluginului.

Acesta vă va duce automat la fila „Setări”. Începeți prin bifarea casetei „Activați meniul animat pe tot ecranul” pentru a activa meniul.

Este o idee bună să bifați și caseta „Afișați doar pentru utilizatorii administratori” la început. Acest lucru vă va permite să vedeți modificările pe măsură ce configurați meniul, dar vizitatorii site-ului dvs. nu îl vor putea vedea până când nu ați terminat.

Nu uitați să reveniți și să debifați acea casetă când ați terminat.

Sub aceste opțiuni, veți găsi alte setări care vă permit să afișați meniul doar pe dispozitive mobile, să închideți meniul la un clic sau la derulare și să ascundeți meniul pe pagini specifice. 

Pentru exemplul nostru, vom lăsa aceste setări nebifate, dar nu ezitați să le personalizați după cum doriți pentru propriul site.

Pasul 3: Personalizați designul și aspectul meniului

În continuare, vom personaliza designul meniului. Din fericire, pluginul de meniu vă permite să faceți acest lucru fără a avea nevoie de CSS personalizat.

Pentru a personaliza meniul, va trebui să faceți clic pe fila „Design/Aspect” din partea de sus a paginii. Pe această pagină, puteți alege culorile, fontul și setările de animație pentru meniul dvs.

În partea de sus a paginii, veți observa două setări de culoare. Prima culoare este pentru pictograma meniului hamburger. Aceasta apare de obicei în zona antetului site-ului dvs. web. Când vizitatorii dvs. fac clic sau ating pictograma, meniul pe tot ecranul va fi afișat sau ascuns.

A doua setare de culoare este pentru fundalul meniului.

Când faceți clic pe fiecare casetă, va apărea o paletă de culori. Puteți fie să faceți clic pe culoarea pe care doriți să o utilizați, fie să introduceți codul său hexazecimal.

După ce ați ales culorile meniului, derulați pagina în jos la secțiunea Font/Aspect. Aici puteți alege culoarea, familia și dimensiunea fontului care vor fi utilizate pentru textul meniului.

Pentru acest tutorial, recomandăm să vă mențineți la setările implicite ale fontului, care folosesc adesea fontul din tema dvs.

Aceasta este o alegere bună, deoarece se va potrivi cu designul general al site-ului dvs. web, iar încărcarea fonturilor suplimentare poate încetini uneori performanța și viteza site-ului dvs. WordPress.

Există, de asemenea, setări pentru a afișa un meniu lateral lateral pe pagini specifice și pentru a derula meniul principal dacă nu este suficient de înalt. Pentru acest tutorial, vom lăsa aceste setări nebifate, dar nu ezitați să experimentați cu ele pe propriul dvs. blog sau site web WordPress.

După aceea, derulați în jos la secțiunea „Setări animație”. Aici, puteți ajusta două setări principale.

Primul dintre acestea este „Tip animație”. Acesta vă permite să selectați direcția animației atunci când meniul este activat. Puteți alege de sus în jos, de la stânga la dreapta și de la dreapta la stânga.

A doua setare este efectul pe care îl obțineți atunci când plasați mouse-ul peste o intrare de meniu. Alegerile sunt o linie subtilă care apare (ca o linie de spațiere), o schimbare a culorii de fundal sau o schimbare a culorii de fundal cu o margine rotunjită.

Pasul 4: Definiți conținutul meniului pe tot ecranul

În final, va trebui să derulați înapoi în partea de sus a paginii și să faceți clic pe fila „Conținut meniu”. Aici, puteți selecta meniul WordPress care va fi afișat în meniul pe tot ecranul.

Lângă „Selectați meniul” din partea de sus, va trebui să alegeți un meniu din lista derulantă. Dacă nu ați creat încă un meniu de navigare, consultați ghidul nostru despre cum să adăugați meniuri de navigare în WordPress.

Dacă doriți ca pe ecranul meniului să fie afișat conținut suplimentar, îl puteți adăuga în secțiunea următoare, etichetată „HTML gratuit / Shortcode-uri”. Pur și simplu introduceți conținutul în caseta editorului și adăugați fișierele media dorite. Acest conținut va fi afișat sub meniu.

Există, de asemenea, o casetă de selectare care va include un link către pagina dvs. de politică de confidențialitate. Mulți proprietari de site-uri web preferă să adauge acest lucru în subsol în locul meniului principal, totuși.

În continuare, s-ar putea să doriți să adăugați pictograme sociale ca elemente de meniu. Acestea vor fi afișate într-un rând în partea de jos a meniului pe tot ecranul.

Pentru a le adăuga, derulați pur și simplu în jos la secțiunea ‘Pictograme sociale’ și introduceți un titlu pentru pictogramă, cum ar fi ‘Facebook’. După aceea, alegeți pictograma corespunzătoare și introduceți URL-ul paginii dvs. sociale.

Puteți adăuga mai multe pictograme făcând clic pe butonul „Adăugați o altă pictogramă”.

În cele din urmă, puteți adăuga o bară de căutare în partea de sus a meniului dvs. responsive. Va trebui să derulați până la sfârșitul paginii „Conținut meniu” și să bifați caseta „Adăugare bară de căutare?”. Dacă doriți, puteți, de asemenea, să introduceți text de substituent.

Pasul 5: Salvați modificările și testați meniul

În cele din urmă, faceți clic pe butonul ‘Salvare modificări’ pentru a salva setările.

Acum puteți vizita site-ul dvs. web pentru a vedea meniul responsiv pe tot ecranul în acțiune. Vă recomandăm să redimensionați browserul pentru a vedea cum se comportă meniul pe diferite dimensiuni de ecran.

Iată cum arată pe site-ul nostru demo.

Odată ce sunteți mulțumit de meniul dvs. pe tot ecranul, nu uitați să navigați înapoi la Opțiuni meniu pe tot ecranul din meniul de administrare WordPress și să debifați „Afișare doar pentru utilizatorii administratori”.

După ce faceți clic pe butonul „Salvează modificările”, vizitatorii site-ului dvs. web vor putea accesa meniul.

Întrebări frecvente despre adăugarea unui meniu responsive pe tot ecranul în WordPress

Iată câteva întrebări pe care cititorii noștri le-au adresat frecvent despre adăugarea unui meniu responsive pe tot ecranul în WordPress:

Cum creezi un meniu responsive în WordPress?

Pentru a crea un meniu responsive în WordPress, utilizați un plugin de meniu prietenos cu mobilul, cum ar fi FullScreen Menu. Acest lucru asigură că meniul dvs. se adaptează la diferite dimensiuni ale ecranului pentru o navigare fluidă.

Cum faci un antet (header) responsive în WordPress?

A face un antet (header) responsive în WordPress înseamnă că acesta se ajustează automat pe orice dispozitiv. Poți face acest lucru folosind o temă responsive sau personalizând aspectul antetului cu CSS și editorul de blocuri.

Pentru instrucțiuni detaliate, consultați tutorialul nostru despre personalizarea antetului WordPress.

Cum să faci o pagină pe tot ecranul în WordPress?

Puteți crea o pagină pe tot ecranul în WordPress folosind un page builder precum SeedProd sau setări de temă care permit șabloane „full-width”. Acest lucru elimină barele laterale și extinde conținutul pe întregul ecran.

Cum să creezi un tabel responsive în WordPress?

Pentru a crea un tabel responsive în WordPress, utilizați blocul de tabel al editorului de blocuri sau un plugin cu suport pentru tabele responsive. Acest lucru asigură că tabelul dvs. se derulează sau se aliniază ordonat pe dispozitivele mobile.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un meniu responsive pe tot ecranul pe site-ul dvs. WordPress. De asemenea, ați putea dori să aflați cum să adăugați un mega meniu pe site-ul dvs. WordPress sau cum să adăugați un meniu glisant în temele 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.