Cum să creezi un meniu WordPress receptiv, pregătit pentru mobil

Mai mult de jumătate din tot traficul pe site-uri web provine de pe dispozitive mobile. Dacă meniul dvs. de navigare nu funcționează bine pe smartphone-uri și tablete, atunci o mare parte din audiența dvs. ar putea avea dificultăți în a găsi drumul pe site-ul dvs.

Cu ani de experiență în construirea de site-uri WordPress, înțelegem importanța de a face site-ul dvs. responsive pe mobil. La WPBeginner, am prioritizat întotdeauna acest lucru, asigurându-ne că site-urile noastre sunt ușor de navigat pe orice dispozitiv.

De fapt, am conceput un meniu receptiv pentru mobil care se potrivește perfect pe ecrane mai mici, fără a părea aglomerat, îmbunătățind experiența utilizatorului pe smartphone-uri și tablete.

În acest ghid, vă vom arăta cum să creați cu ușurință un meniu WordPress receptiv, pregătit pentru mobil.

De ce să creați un meniu WordPress receptiv pregătit pentru mobil?

Un meniu de navigare bine conceput îi va ajuta pe vizitatori să găsească drumul pe site-ul dvs. Cu toate acestea, doar pentru că meniul dvs. arată grozav pe computere desktop, nu înseamnă automat că va arăta bine și pe ecranele mobile și tablete.

Utilizatorii de dispozitive mobile reprezintă aproximativ 58% din traficul total pe internet. Acestea fiind spuse, dacă meniul dvs. nu arată bine sau nu funcționează corect pe dispozitivele mobile, riscați să pierdeți jumătate din audiență din cauza unei experiențe slabe a utilizatorului.

Acest lucru va face dificilă atingerea obiectivelor cheie, cum ar fi creșterea listei de e-mail, obținerea de vânzări și dezvoltarea afacerii dumneavoastră.

Acestea fiind spuse, să vedem cum puteți crea un meniu receptiv, pregătit pentru mobil, care va arăta grozav pe smartphone-uri și tablete. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați.

• Metoda 1: Crearea unui meniu glisant lateral receptiv, pregătit pentru mobil
• Metoda 2: Crearea unui meniu complet responsive, pregătit pentru mobil
• Bonus: Cum să adăugați un meniu mobil-responsiv la paginile de destinație

Metoda 1: Crearea unui meniu glisant lateral receptiv, pregătit pentru mobil

Un panou glisant receptiv este un meniu de navigare care glisează pe ecran atunci când un vizitator atinge sau face clic pe un comutator.

În acest fel, meniul este întotdeauna la îndemână, dar implicit nu ocupă spațiu pe ecran.

Acest lucru este deosebit de important, deoarece smartphone-urile și tabletele au ecrane mult mai mici în comparație cu computerele desktop.

Dacă meniul este extins constant, atunci un utilizator mobil poate declanșa accidental legăturile acestuia folosind ecranul tactil al dispozitivului său. Acest lucru face ca panourile glisante să fie o alegere bună pentru un meniu receptiv pe mobil.

Cel mai simplu mod de a adăuga un panou glisant pregătit pentru mobil este prin utilizarea Responsive Menu.

Mai întâi, trebuie să instalați și să activați pluginul Responsive Menu. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

După activare, puteți utiliza pluginul pentru a personaliza orice meniu WordPress pe care l-ați creat anterior. Dacă trebuie să creați un meniu nou, consultați ghidul nostru pentru începători despre cum să adăugați un meniu de navigare în WordPress.

Pe de altă parte, dacă tema dvs. WordPress are deja un meniu mobil încorporat, atunci va trebui să cunoașteți clasa CSS a acelui meniu pentru a o putea ascunde.

Dacă omiteți acest pas, utilizatorii de mobil vor vedea două meniuri suprapuse pe site-ul dvs. Pentru instrucțiuni pas cu pas, vă rugăm să consultați ghidul nostru despre cum să ascundeți un meniu mobil în WordPress.

Cu aceasta făcută, accesați pagina Meniu Responsiv » Meniuri din bara laterală de administrare WordPress și faceți clic pe butonul „Creare meniu nou”.

Veți vedea acum câteva teme diferite, receptive pentru mobil, pe care le puteți folosi pentru meniul dvs.

Folosim tema „Implicită” în imaginile noastre, dar puteți folosi orice temă doriți. După ce luați decizia, faceți clic pe „Următorul”.

Acum puteți introduce un nume pentru meniu. Acesta este doar pentru referința dumneavoastră, deci puteți folosi orice doriți.

După ce ați terminat, faceți clic pe „Link WordPress Menu” și alegeți meniul pe care doriți să îl utilizați.

Așa cum am menționat deja, dacă tema dvs. are deja un meniu mobil încorporat, atunci va trebui să adăugați clasa CSS a acesteia clasa CSS în câmpul „Ascunde meniul temei”.

Dacă faceți upgrade la pluginul premium, veți obține câteva setări suplimentare. De exemplu, utilizatorii Pro pot ascunde meniul pe anumite pagini sau dispozitive.

Când sunteți mulțumit de modul în care este configurat meniul, faceți clic pe „Creare meniu”.

Acum veți vedea o previzualizare a site-ului dvs. WordPress în partea dreaptă a ecranului și câteva setări în stânga.

Pentru a vedea cum arată site-ul dvs. pe mobil, faceți clic pe pictograma mobilă sau tabletă din stânga jos a ecranului.

Pentru a personaliza cum arată și cum funcționează meniul pe dispozitivele mobile, selectați „Meniu mobil”.

Apoi, faceți clic pe „Container”.

Aici veți găsi o mulțime de setări diferite.

Pe măsură ce faceți modificări, previzualizarea live se va actualiza adesea automat. Având în vedere acest lucru, este o idee bună să extindeți meniul pentru a putea monitoriza cum va arăta meniul dvs. mobil. Pentru a face acest lucru, pur și simplu faceți clic pe butonul de comutare a meniului.

Implicit, pluginul adaugă un titlu și un text „Adaugă mai mult conținut...”.

Puteți înlocui acest lucru cu propriul mesaj sau chiar puteți elimina textul complet. Pentru a edita titlul, faceți clic pentru a extinde secțiunea „Titlu”.

Acum puteți introduce propriul mesaj în câmpul ‘Text Titlu’.

Puteți, de asemenea, să adăugați un link la titlu sau să adăugați fonturi cu pictograme și imagini.

Pentru a personaliza aspectul titlului, faceți clic pe fila „Stiluri”.

Aici puteți schimba culoarea de fundal, culoarea textului, dimensiunea fontului și multe altele.

Dacă nu doriți să afișați niciun text de titlu, faceți clic pentru a dezactiva comutatorul de lângă „Titlu”.

Dacă titlul nu este esențial, eliminarea acestuia va crea mai mult spațiu pentru linkuri și alte conținuturi din meniul de navigare mobil.

Pentru a înlocui textul „Adăugați mai mult conținut aici....” cu propriul mesaj, faceți clic pentru a extinde zona „Conținut suplimentar”.

Acum puteți introduce propriul text, schimba culoarea textului, schimba alinierea textului și multe altele, utilizând setările din meniul din stânga.

Pentru a șterge complet textul, faceți clic pentru a dezactiva comutatorul.

Din nou, acest lucru poate crea mai mult spațiu pentru restul conținutului meniului. Acest lucru este deosebit de util pe smartphone-uri și tablete, care au de obicei ecrane mai mici.

Implicit, Meniul Responsiv va afișa toate elementele meniului dvs. ca o singură listă. Cu toate acestea, s-ar putea să preferați să afișați aceste linkuri în mai multe coloane.

Acest lucru poate funcționa bine dacă etichetele meniului dvs. sunt mai scurte, deoarece vă permite să afișați mai multe elemente într-un spațiu mai mic, fără ca meniul să pară aglomerat.

Pentru a încerca diferite aspecte ale coloanelor, faceți clic pentru a extinde secțiunea „Meniu”.

Acum puteți deschide meniul derulant „Coloane container meniu” și puteți alege numărul de coloane pe care doriți să le utilizați.

În acest moment, este posibil să vedeți un text de tip „Actualizare necesară”. Dacă vedeți acest mesaj, faceți clic pe el pentru a actualiza previzualizarea live cu noile setări ale coloanei.

Implicit, pluginul adaugă și o bară de căutare în meniul dvs. WordPress. Aceasta poate ajuta vizitatorii să găsească conținut interesant, dar poate ocupa și spațiu prețios pe ecran.

Dacă preferați, puteți elimina bara de căutare pentru utilizatorii de mobil dezactivând comutatorul de lângă „Căutare”.

Există multe alte setări pe care le puteți configura, așa că s-ar putea să doriți să petreceți ceva timp examinând celelalte opțiuni. Cu toate acestea, acestea sunt suficiente pentru a crea un meniu mobil bine conceput.

Când sunteți mulțumit de modul în care este configurat meniul de navigare, faceți clic pe „Actualizare”.

Acum, pur și simplu vizitați blogul dvs. WordPress folosind un dispozitiv mobil pentru a vedea noul meniu în acțiune. Puteți, de asemenea, vizualiza versiunea mobilă a site-ului dvs. WordPress de pe desktop.

Metoda 2: Crearea unui meniu complet responsive, pregătit pentru mobil

O altă opțiune este să adăugați un meniu receptiv pe tot ecranul. Acesta este un meniu care se ajustează automat la diferite dimensiuni de ecran, astfel încât meniul de navigare va arăta întotdeauna bine, indiferent de dispozitivul pe care îl folosește vizitatorul.

Deoarece meniul ocupă tot spațiul disponibil, este mai ușor de navigat pe smartphone-uri și tablete, indiferent cât de mic este ecranul.

Cel mai simplu mod de a crea un meniu pe tot ecranul este prin utilizarea FullScreen Menu. Acest plugin vă permite să creați un meniu pe tot ecranul doar pentru dispozitive mobile, sau puteți afișa același meniu pe smartphone-uri, tablete și computere desktop, astfel încât toți vizitatorii să aibă aceeași experiență.

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 mai multe detalii.

După activare, vizitați pagina Opțiuni Meniu Fullscreen din meniul WordPress și bifați următoarea căsuță: ‘Activați Meniul Fullscreen Animat.’

De asemenea, recomandăm să bifați căsuța „Afișați meniul doar pentru utilizatorii administratori”. Acest lucru vă permite să vedeți modificările pe măsură ce configurați meniul, dar vizitatorii nu vor vedea meniul mobil până când nu îl activați.

Implicit, pluginul va afișa meniul pe tot ecranul pe toate dispozitivele. Dacă doriți să afișați meniul pe tot ecranul doar pe smartphone-uri și tablete, bifați căsuța de lângă „Doar mobil”.

După aceea, puteți ajusta aspectul meniului făcând clic pe fila „Design / Aspect”.

Aici puteți alege culorile, fontul și setările de animație pentru meniul fullscreen.

Când faceți aceste modificări, fiți conștient că ‘Meniu Fundal Inițial’ este iconița de comutare a meniului. Între timp, ‘Meniu Fundal Deschis’ este culoarea meniului mobil extins, fullscreen.

După alegerea culorilor meniului, derulați la secțiunea „Aspect meniu”. Aici puteți schimba culoarea fontului, familia fontului și dimensiunea fontului meniului.

Doar fiți conștienți că încărcarea de fonturi suplimentare ar putea afecta performanța și viteza site-ului dvs. WordPress. Aceasta nu este întotdeauna o alegere bună pentru dispozitivele mobile, care au, în general, mai puțină putere de procesare comparativ cu computerele desktop. Unii vizitatori pot avea, de asemenea, o conexiune slabă la internet pe mobil, ceea ce va face ca site-ul dvs. să se încarce și mai lent.

Cu asta făcut, derulați la „Setări animație”.

Pentru început, puteți alege cum se va extinde meniul atunci când un vizitator face clic pe pictograma de comutare. Pur și simplu deschideți meniul derulant „Tip animație” și alegeți o opțiune din listă, cum ar fi De sus în jos sau De la stânga la dreapta.

Când sunteți mulțumit de aspectul meniului, faceți clic pe fila „Conținutul meniului” pentru a adăuga conținut.

Aici, accesați meniul derulant „Selectați meniul” și alegeți meniul pe care doriți să îl afișați pe tot ecranul.

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 să afișați conținut suplimentar în meniu, îl puteți adăuga în caseta „HTML gratuit / Shortcodes”. Acesta acționează ca un editor de mini-pagină, astfel încât să puteți introduce text, să modificați formatarea, să adăugați puncte cu marcatori și liste numerotate și multe altele.

Există, de asemenea, o casetă de selectare care va adăuga o legătură către pagina dvs. de politică de confidențialitate. 

Apoi, ați putea dori să adăugați pictograme de rețele sociale la meniul dvs. WordPress. Aceste pictograme vor apărea într-un rând în partea de jos a meniului pe tot ecranul.

Pentru a adăuga aceste pictograme, faceți clic pentru a extinde caseta „Pictogramă socială 1”.

Acum puteți introduce un titlu pentru pictogramă, cum ar fi „Facebook”.

După aceea, faceți clic pe săgeata de lângă „Antet social” și alegeți antetul pe care doriți să îl afișați vizitatorilor mobili.

În cele din urmă, introduceți adresa pe care doriți să o utilizați în câmpul „URL social”.

Pentru a adăuga mai multe pictograme, pur și simplu faceți clic pe butonul „Adaugă o altă pictogramă”.

În final, ați putea dori să adăugați o căutare WordPress pentru a ajuta vizitatorii să găsească ceea ce caută. Pentru a face acest lucru, pur și simplu bifați căsuța de lângă „Adăugați bara de căutare”.

Implicit, pluginul va afișa un mesaj „Caută ceva...”. Cu toate acestea, puteți înlocui acest lucru cu propriul mesaj personalizat, tastând în câmpul „Placeholder pentru intrarea de căutare”.

De exemplu, dacă aveți un magazin WooCommerce, atunci ați putea dori să folosiți text precum „Începe cumpărăturile” sau „Caută produse”.

Când sunteți mulțumit de configurarea meniului, faceți clic pe butonul „Salvare modificări”.

Acum, vizitați pur și simplu site-ul dvs. web folosind un dispozitiv mobil pentru a vedea meniul pe tot ecranul în acțiune.

Puteți previzualiza, de asemenea, versiunea mobilă a site-ului dvs. web folosind personalizatorul de teme WordPress.

Bonus: Cum să adăugați un meniu mobil-responsiv la paginile de destinație

Dacă creați o pagină de destinație sau o pagină de vânzări, atunci veți dori ca designul să arate la fel de bine pe dispozitivele mobile cum arată și pe desktop.

Având în vedere acest lucru, recomandăm crearea paginii folosind SeedProd. Este cel mai bun constructor de pagini WordPress și vine cu peste 300 de șabloane proiectate profesional.

După crearea unui design folosind SeedProd, puteți adăuga un meniu receptiv pentru mobil pe pagină folosind blocul Nav Menu gata făcut de SeedProd. Acest bloc vă permite să creați meniuri separate atât pentru dispozitive mobile, cât și pentru desktopuri.

În acest fel, puteți utiliza un layout diferit și chiar puteți afișa linkuri diferite în funcție de dispozitivul utilizatorului.

Pentru a afla mai multe, vă rugăm să consultați ghidul nostru despre cum să adăugați meniuri de navigare personalizate în WordPress.

După ce ați adăugat blocul Nav la designul dvs., pur și simplu faceți clic pe fila „Avansat”.

Aici, faceți clic pentru a extinde secțiunea „Vizibilitatea dispozitivului”.

După aceea, faceți clic pe comutatorul „Ascunde pe desktop” pentru a-l activa. Acum, acest meniu va apărea doar pe dispozitivele mobile.

Acum puteți adăuga linkuri și puteți modifica aspectul meniului folosind setările din meniul din stânga.

Sperăm că acest articol v-a ajutat să învățați cum să creați un meniu WordPress receptiv, pregătit pentru mobil. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să adăugați un redimensionator de fonturi în WordPress și sfaturile experților noștri despre modalități de a crea un site WordPress prietenos cu mobilul.

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.