Cum să adăugați un buton în meniul antetului WordPress

Adăugarea unui buton în meniul principal de navigare vă permite să evidențiați apelul la acțiune al site-ului dvs., direcționând mai mult trafic către paginile dvs. cele mai importante. Este, de asemenea, o modalitate ușoară de a adăuga același buton pe fiecare pagină și postare.

Am văzut cum WPForms, una dintre mărcile noastre partenere, a adăugat un buton „Obțineți WPForms” direct în antetul WordPress. Această simplă adăugare a ajutat la creșterea conversiilor și la creșterea vânzărilor.

Plasând butonul într-un loc foarte vizibil, WPForms a făcut mai ușor pentru vizitatori să acționeze, rezultând într-o mai bună implicare și mai multe lead-uri.

În acest articol, vă vom arăta cum să adăugați cu ușurință un buton în meniul antetului WordPress.

De ce să adăugați un buton în meniul antetului WordPress?

Meniurile de navigare WordPress sunt de obicei linkuri text simple, unde totul arată la fel și nimic nu iese cu adevărat în evidență.

Cu toate acestea, unele linkuri sunt mai importante decât altele. De exemplu, este posibil să doriți să adăugați un link către un formular de comandă online sau pagina de înregistrare a site-ului dvs. de abonament WordPress.

În mod implicit, aceste linkuri importante arată la fel ca restul meniului antetului.

Puteți face aceste linkuri mai atrăgătoare transformându-le în butoane. Acest lucru vă poate aduce mai multe clicuri și conversii.

În mod implicit, puteți adăuga butoane în postările și paginile WordPress folosind blocul Butoane, dar nu le puteți adăuga în meniurile de navigare.

Acestea fiind spuse, să vedem cum puteți adăuga un buton în meniul antetului WordPress.

Adăugarea unui buton în meniul antetului WordPress

Pentru a începe, trebuie să adăugați linkul pe care doriți să îl transformați într-un buton.

Pur și simplu accesați pagina Appearance » Menus din tabloul de bord WordPress și adăugați linkul în meniul de navigare. Pentru instrucțiuni detaliate, vă rugăm să consultați ghidul nostru despre cum să adăugați un meniu de navigare în WordPress.

După aceea, trebuie să faceți clic pe butonul Opțiuni de ecran din partea de sus a ecranului.

Acest lucru va dezvălui un panou cu multe opțiuni noi. Pur și simplu bifați căsuța de lângă „Clase CSS”.

Acum, faceți clic pentru a extinde elementul de meniu pe care doriți să îl transformați într-un buton.

Veți observa o nouă opțiune de clasă CSS unde puteți introduce un nume de clasă. Puteți numi clasa CSS cum doriți, dar în acest ghid vom folosi menu-button.

După ce ați introdus un nume, faceți clic pe butonul „Salvează meniul” pentru a salva modificările.

Acum ați adăugat o clasă CSS personalizată elementului de meniu. Puteți schimba cum arată folosind cod CSS personalizat. Puteți adăuga acest cod fie prin personalizatorul WordPress încorporat, fie folosind un plugin pentru fragmente de cod.

Adăugați un buton în meniul antetului WordPress folosind WPCode (Recomandat)

Cel mai bun mod de a adăuga cod personalizat la WordPress este prin utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod care vă permite să adăugați CSS, PHP, HTML personalizat și multe altele.

Deoarece nu editați fișierele temei direct, puteți evita multe erori comune WordPress. De asemenea, puteți actualiza tema sau puteți comuta la o temă complet diferită fără a vă pierde codul personalizat.

Dacă doriți să eliminați butonul în orice moment, îl puteți dezactiva printr-un singur clic.

Mai întâi, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru mai multe informații, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Odată ce pluginul este activat, accesați pagina Code Snippets » + Add Snippet din tabloul de bord WordPress.

Aici, veți vedea toate fragmentele WPCode gata făcute pe care le puteți adăuga pe site-ul dvs. Acestea includ un fragment care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă de obicei, să dezactivați paginile de atașament, și multe altele.

Acum, pur și simplu treceți mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat” atunci când apare.

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

Pe ecranul următor, trebuie să introduceți un titlu pentru fragmentul de cod.

Numele este doar pentru referința dvs., deci puteți folosi orice doriți.

Cu aceasta făcut, sunteți gata să lipiți un fragment de cod CSS în caseta „Previzualizare cod”:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Când adăugați fragmentul de cod de mai sus, asigurați-vă că înlocuiți menu-button cu numele clasei dvs. CSS.

Fragmentul de cod de mai sus creează un buton portocaliu cu un efect de umbră, așa cum puteți vedea în imaginea următoare.

Simțiți-vă liber să experimentați cu fragmentul CSS pentru a vedea ce efecte diferite puteți crea. De exemplu, puteți schimba culoarea de fundal, culoarea textului linkului, adăuga o bordură și multe altele.

Dacă doriți să utilizați o culoare diferită, va trebui să cunoașteți codul hexazecimal al culorii respective. Dacă nu sunteți sigur ce coduri să utilizați, puteți folosi o resursă precum Color Hex.

Când sunteți mulțumit de cod, faceți clic pe comutatorul 'Inactive' pentru ca acesta să devină 'Active', apoi faceți clic pe butonul 'Save Snippet'.

Acum, dacă vizitați site-ul dvs. WordPress, veți vedea noul buton din meniul antetului în acțiune.

Adăugați un buton în meniul antetului WordPress utilizând personalizatorul

Dacă nu doriți să utilizați un plugin, puteți adăuga cod folosind personalizatorul încorporat.

Pur și simplu accesați Aspect » Personalizare, și veți vedea o previzualizare a site-ului dvs. în dreapta, plus o serie de setări ale temei în coloana din stânga.

Pentru a începe, faceți clic pe opțiunea „CSS suplimentar”.

Veți vedea acum o casetă unde puteți adăuga cod CSS personalizat.

Din nou, puteți folosi fragmentul de cod de mai sus ca punct de plecare.

Când sunteți mulțumit de aspectul butonului, faceți clic pe „Publicare” pentru a face modificările live.

Tutorial video

Dacă sunteți mai mult un cursant vizual, vă rugăm să consultați tutorialul nostru video despre cum să adăugați un buton în meniul antetului WordPress:

Bonus: Adăugați un buton Click to Call în antetul WordPress

Dacă aveți un site pentru afaceri mici, atunci s-ar putea să doriți să adăugați un buton click-to-call în meniul de navigare. Acest lucru va facilita contactul vizitatorilor cu dvs. și poate chiar să vă îmbunătățească clasamentul în motoarele de căutare, făcând site-ul dvs. mai prietenos cu SEO.

Pentru a adăuga acest buton, vizitați pagina Aspect » Meniuri din tabloul de bord WordPress și extindeți fila „Linkuri personalizate” din dreapta.

Aici, adăugați numărul dvs. de telefon VOIP în URL și adăugați o etichetă pentru acesta. După aceea, faceți clic pe butonul „Adăugare în meniu”.

Odată ce butonul click-to-call a fost adăugat la lista de linkuri de navigare, nu uitați să faceți clic pe butonul „Salvează meniul” pentru a salva setările.

Pentru instrucțiuni detaliate, s-ar putea să vă placă să vedeți tutorialul nostru despre cum să adăugați un buton de apelare prin clic în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un buton în meniul antetului WordPress. Puteți, de asemenea, să consultați ghidul nostru despre cum să creați un meniu de navigare plutitor lipicios în WordPress și tutorialul nostru despre cum să adăugați logică condițională la meniuri î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.