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?

Meniurile bine concepute îi ajută pe vizitatori să navigheze pe site-ul dvs. WordPress sau magazinul WooCommerce. Dar poate fi dificil să apăsați pe un meniu standard din antet în timp ce utilizați ecranul mic al unui smartphone.

Există deja mai mulți vizitatori pe mobil decât pe desktop pentru multe site-uri web. De aceea, vă recomandăm să previzualizați versiunea mobilă a site-ului dvs. WordPress pentru a vedea cum arată site-ul dvs. pe dispozitive mobile.

Un meniu mobil responsiv pe tot ecranul se va ajusta automat la diferite dimensiuni de ecran. Deoarece tot spațiul disponibil este utilizat pentru meniu, este mai ușor de navigat pe smartphone-uri și tablete.

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

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

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.

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 a bifa caseta ‘Activate Animated Fullscreen Menu’ pentru a activa meniul.

Este o idee bună să bifați și căsuța „Afișați meniul doar pentru utilizatorii Administator” 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.

Alte setări vă permit să afișați meniul doar pe dispozitivele 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 dvs. site.

Design și aspect meniu pe tot ecranul

Î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/Appearance’ 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 va fi afișată în colțul din dreapta sus al site-ului dvs. Când vizitatorii dvs. fac clic sau ating pictograma, meniul fullscreen 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, vom rămâne la setările implicite, care folosesc fontul din tema noastră. Recomandăm această setare deoarece se va potrivi cu designul site-ului dvs. De asemenea, încărcarea fonturilor suplimentare ar putea afecta performanța și viteza site-ului dvs. WordPress.

Există, de asemenea, setări pentru a afișa un meniu 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 WordPress sau site web.

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 spațiere, culoare de fundal și culoare de fundal cu o bordură rotunjită.

Conținut meniu 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ă ‘Select Menu’ 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 loc de meniul 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 WordPress nativă în partea de sus a meniului dvs. receptiv. Va trebui să derulați până la sfârșitul paginii „Conținut meniu” și să bifați căsuța „Adăugare bară de căutare?”. Dacă doriți, puteți introduce și text de tip placeholder.

Î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 pe tot ecranul, nu uitați să navigați înapoi la Opțiuni meniu pe tot ecranul și să debifați „Afișați meniul doar pentru utilizatorii administratori”. După ce faceți clic pe butonul „Salvați modificările”, vizitatorii site-ului dvs. vor putea accesa meniul.

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