Evidențierea unui element de meniu în WordPress poate atrage atenția vizitatorilor asupra paginilor importante sau a ofertelor speciale. Acest lucru poate ajuta la îmbunătățirea navigării și a implicării utilizatorilor.
Indiferent dacă doriți să subliniați o funcție nouă, o vânzare sau o actualizare esențială, a face ca anumite elemente de meniu să iasă în evidență poate spori eficacitatea site-ului dvs.
De exemplu, am evidențiat pagina de prețuri în meniul principal de navigare la multe dintre mărcile noastre partenere pentru a atrage atenția utilizatorilor. Această abordare a încurajat mai mulți vizitatori să exploreze prețurile produselor noastre și a dus la creșterea conversiilor.
În acest articol, vă vom arăta cum să evidențiați cu ușurință un element de meniu în WordPress folosind cod CSS.
De ce să evidențiați un element de meniu în WordPress?
Un meniu de navigare este o listă de linkuri care indică zone importante ale site-ului dvs. Acestea sunt de obicei prezentate sub forma unei bare orizontale în antetul fiecărei pagini de pe un site WordPress.
Evidențiind un element din meniul de navigare, puteți direcționa cu ușurință atenția utilizatorului către cea mai proeminentă acțiune de apel.
De exemplu, dacă doriți ca utilizatorii să viziteze pagina de prețuri sau un postare specifică pe blogul dvs. WordPress, atunci puteți evidenția acel element în meniul de navigare. Acest lucru poate crește traficul pe acea pagină și poate stimula vânzările.
Acestea fiind spuse, să vedem cum puteți evidenția un element de meniu în WordPress folosind CSS:
- Metoda 1: Evidențierea unui element de meniu folosind Editorul Complet al Site-ului
- Metoda 2: Evidențierea unui element de meniu folosind un personalizator de temă
- Personalizarea evidențierii elementului de meniu
Metoda 1: Evidențierea unui element de meniu folosind Editorul Complet al Site-ului
Dacă utilizați o temă compatibilă cu blocurile, atunci veți avea Editorul Complet al Site-ului în locul vechiului Personalizator de Teme. Puteți evidenția cu ușurință un element de meniu curent și în acesta.
Mai întâi, accesați pagina Aspect » Editor din tabloul de bord de administrare WordPress. Aceasta vă va direcționa către editorul complet al site-ului.
Aici, pur și simplu faceți dublu clic pe elementul de meniu pe care doriți să îl evidențiați, apoi faceți clic pe pictograma „Setări” din partea de sus. Aceasta va deschide imediat setările acelui element de meniu specific în panoul de blocuri.
Acum, pur și simplu derulați în jos la fila „Avansat” și faceți clic pe pictograma săgeată de lângă ea pentru a o extinde.
Aceasta va deschide un câmp „Clasă CSS suplimentară” unde trebuie să scrieți highlighted-menu.
Apoi, faceți clic pe butonul „Salvați” din partea de sus a paginii pentru a stoca modificările.
După aceea, va trebui să adăugați o mică porțiune de CSS temei dvs. pentru efectul de evidențiere. Puteți fie remedia lipsa Personalizatorului de temă, fie puteți utiliza un plugin pentru fragmente de cod pentru a adăuga cod CSS.
Cum să adăugați fragmente CSS folosind WPCode
Pentru adăugarea de CSS la WordPress, recomandăm utilizarea WPCode deoarece este cel mai bun plugin pentru fragmente de cod WordPress de pe piață, care face sigură și ușoară adăugarea de cod personalizat.
Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe instrucțiuni, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
Notă: WPCode are și o versiune gratuită. Cu toate acestea, puteți achiziționa și planul premium pentru a debloca biblioteca cloud de fragmente de cod, logica condițională inteligentă și multe altele.
După activare, navigați la pagina Snippete de cod » + Adăugați un snippet din panoul de administrare WordPress.
Aici, plasați cursorul mouse-ului peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat” de sub acesta.
Apoi, trebuie să selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar.
Acum veți fi direcționat către pagina „Creați un fragment personalizat”, unde puteți începe prin a alege un nume pentru fragmentul dvs.
Apoi, copiați și lipiți următorul cod CSS în caseta „Previzualizare cod”:
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Iată cum ar trebui să arate:
Odată ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare”.
Aici, pur și simplu alegeți modul „Inserare automată” pentru ca codul să poată fi executat automat pe întregul site web.
Acum, mergeți în partea de sus a paginii și comutați comutatorul de la „Inactiv” la „Activ”.
Apoi, pur și simplu faceți clic pe butonul „Salvare fragment” pentru a vă stoca setările.
Acum ați evidențiat cu succes un element din meniu în WordPress folosind un editor de site complet.
Așa va arăta elementul dvs. de meniu după ce adăugați codul CSS.
Cum să accesați personalizatorul temei folosind o temă bazată pe blocuri
Dacă doriți să utilizați personalizatorul de temă și o temă FSE, atunci pur și simplu copiați și lipiți URL-ul de mai jos în browser. Asigurați-vă că înlocuiți „example.com” cu numele domeniului propriului site:
https://example.com/wp-admin/customize.php
Aceasta va deschide personalizatorul de temă pentru tema dvs. de bloc, unde trebuie să extindeți fila „CSS suplimentar”.
De aici, copiați și lipiți fragmentul CSS în caseta „CSS suplimentar”:
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
După aceea, pur și simplu faceți clic pe butonul „Publicare” din partea de sus pentru a salva setările.
Metoda 2: Evidențierea unui element de meniu folosind un personalizator de temă
Dacă utilizați o temă WordPress mai veche, atunci probabil veți avea un personalizator de temă activat implicit. Evidențierea unui element de meniu într-un personalizator de temă este un proces destul de simplu.
Mai întâi, accesați pur și simplu Aspect » Personalizare în tabloul de bord WordPress pentru a lansa personalizatorul de teme. Odată ce se deschide, faceți clic pe fila „Meniuri” din bara laterală stângă.
De aici, faceți clic pe pictograma de angrenaj din dreapta sus pentru a afișa proprietățile avansate.
Acum, continuați și bifați caseta „Clase CSS”.
După aceea, derulați în jos la secțiunea „Meniuri”.
Dacă aveți mai multe meniuri WordPress, pur și simplu faceți clic pe meniul cu elementele de meniu pe care doriți să le evidențiați.
Aceasta va deschide o nouă filă unde puteți selecta elementul de meniu pe care doriți să îl evidențiați. Acesta ar putea fi „Contactați-ne”, ca în exemplul nostru, sau ar putea fi pagina dvs. de prețuri sau linkul către magazinul dvs. online.
Pur și simplu faceți clic pe elementul de meniu dorit pentru a extinde anumite setări. Aici, faceți clic pe câmpul „Clase CSS”.
Tot ce trebuie să faceți este să scrieți 'highlighted-menu' în câmp. Puteți adăuga această clasă CSS la mai multe elemente de meniu și toate vor fi evidențiate.
Apoi, pur și simplu accesați fila „CSS suplimentar” din personalizatorul de temă.
După aceea, copiați și lipiți următorul cod CSS:
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Felicitări! Ați evidențiat cu succes un element de meniu.
Notă: Tema dvs. s-ar putea să nu aibă un câmp „CSS suplimentar” în personalizatorul temei. Dacă nu, verificați setările temei pentru a afla cum să adăugați CSS personalizat. Dacă nu îl găsiți, s-ar putea să doriți să contactați dezvoltatorul sau adăugați-l folosind WPCode.
În cele din urmă, nu uitați să faceți clic pe butonul „Publicare” din partea de sus pentru a salva setările.
Personalizarea evidențierii elementului de meniu
Acum că ați evidențiat elementul de meniu, puteți ajusta codul CSS pentru a personaliza elementul de meniu așa cum doriți.
De exemplu, puteți schimba culoarea de fundal a elementului din meniul dvs.
Pur și simplu căutați următorul cod în fragmentul CSS pe care tocmai l-ați lipit:
background: #FFB6C1
După ce îl localizați, puteți pur și simplu să înlocuiți numărul codului de culoare roz cu codul hexazecimal al oricărei culori la alegere:
background: #7FFFD4;
Mai sus este codul hexazecimal pentru aquamarină.
Puteți consulta ghidul nostru despre cum să adăugați ușor CSS personalizat pentru alte idei despre cum să personalizați elementul de meniu evidențiat.
După ce sunteți mulțumit de alegerile dvs., pur și simplu faceți clic pe butonul „Publicați” din personalizatorul temei sau „Salvați fragmentul” în WPCode pentru a salva modificările.
Sperăm că acest articol v-a ajutat să învățați cum să evidențiați o pictogramă de meniu în WordPress. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să stilizați meniurile de navigare WordPress sau tutorialul nostru despre cum să adăugați pictograme de imagine cu meniuri de navigare î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.
Dennis Muthomi
Am folosit tehnici similare pentru a atrage atenția asupra paginilor importante. Un alt sfat pe care l-aș adăuga este să luați în considerare utilizarea animațiilor CSS pentru un efect subtil la trecerea mouse-ului peste elementul de meniu evidențiat sau o ușoară pulsație pe elementul evidențiat pentru a-l face și mai vizibil. Acest lucru poate fi captivant fără a fi prea mult.
Postare grozavă, apropo!
Jiří Vaněk
Mulțumim pentru codul CSS. A făcut căutarea mea mult mai ușoară. Funcționează perfect cu WPCode.