Cum se adaugă o etichetă de colț „Nouă” sau „Prezentată” la un element de meniu din antetul Divi personalizat

Când creați antetul site-ului dvs., acordarea unei atenții deosebite comportamentului vizitatorilor dvs. poate ajuta la creșterea ratelor de clic. Antetul dvs. nu numai că ar trebui să arate bine, dar ar trebui să ajute și vizitatorii să acceseze cele mai importante pagini de pe site-ul dvs. web. O tehnică frecvent utilizată este adăugarea unui apel la acțiune în antetul dvs. global, dar aceasta nu este singura opțiune existentă. De asemenea, puteți opta pentru o etichetă de colț pe elementele de meniu pe care doriți să le puneți în centrul atenției. În acest tutorial, vă vom arăta cum să adăugați o etichetă „prezentată” sau „nouă” la anumite elemente de meniu. Aceste etichete de colț vor ajuta la sublinierea elementelor de meniu din listă, ceea ce sporește schimbarea vizitatorilor dvs. fiind curioși și făcând clic. Veți putea descărca și șablonul global de antet!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra conceptului de tutorial pe diferite dimensiuni de ecran.

Descărcați gratuit șablonul Global Header

Pentru a pune mâna pe șablonul global gratuit de antet, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Adăugați etichete la articolele din meniul WordPress

Accesați Meniuri în aparență

Prima parte a acestui tutorial este dedicată configurării etichetelor din meniul dvs. WordPress. Pentru aceasta, navigați la tabloul de bord WordPress> Meniuri> Deschideți meniul principal pe care îl utilizați sau creați unul nou.

Adăugați etichetă la elementul de meniu recomandat

Apoi, vom adăuga o etichetă recomandată la un element de meniu la alegerea noastră, plasând etichetele etichete HTML în fața elementului de meniu.

• <label class="menu-label featured-label">Featured</label>

  Servicii

Adăugați etichetă la noul element de meniu

Vom face același lucru pentru un alt element de meniu la alegere și vom schimba clasa CSS din etichete împreună cu copia etichetei.

• <label class="menu-label new-label">New</label>

  Cursuri gratuite

2. Accesați Divi Theme Builder

Accesați Divi Theme Builder & Add Global Header

Acum că etichetele au fost configurate, este timpul să treceți la Divi. Navigați la site-ul dvs. Divi Theme Builder și faceți clic pe „Adăugați un antet global”.

Începeți să construiți de la zero

Apoi, selectați „Build Global Header” pentru a fi redirecționat către editorul de șabloane.

3. Construiți Header Global

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și adăugați o culoare de fundal. Proiectarea antetului pe care o vom construi merge bine cu pachetul de aspect pentru tutori, dar nu ezitați să creați orice design de antet doriți, atâta timp cât includeți modulul de cod (mai târziu) în el.

• Culoare fundal: # 2a3749

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos din setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Datorită suprapunerii pe care o vom adăuga la rândul nostru (după cum puteți observa în previzualizare), va trebui să setăm deversările secțiunii la vizibile.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și aplicați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Dimensionare

Treceți la fila de proiectare și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Vom aplica și câteva valori de umplere personalizate setărilor de spațiere.

• Căptușeală superioară: 25 px
• Căptușeală inferioară: 25 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Împreună cu câteva colțuri rotunjite.

• Toate colțurile: 6 px

Box Shadow

Și o umbră de cutie subtilă.

• Box Shadow Vertical Position: 16 px
• Culoare umbră: rgba (0,0,0,0.07)

Transformă Traducere

Apoi, vom repoziționa rândul folosind setările de traducere de transformare din fila de proiectare.

• Transformați la dreapta: 50 px

Revărsări

Pentru a ne asigura că meniurile noastre drop-down apar pe dimensiuni de ecran mai mici, vom finaliza setările rândurilor prin setările revărsărilor la vizibile.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Adăugați modulul de meniu în coloană

Selectați Meniu

Este timpul să adăugați modulul de meniu. Selectați meniul pe care l-ați editat în prima parte a acestui tutorial.

Încărcați sigla

Încărcați o siglă în continuare.

Setări text meniu

Apoi, treceți la fila de proiectare și modificați setările textului meniului după cum urmează:

• Font meniu: PT Sans
• Culoare text meniu: # 000000
• Dimensiune text meniu: 16 px
• Alinierea textului: dreapta

Setări meniu derulant

Modificați și culoarea liniei meniului derulant.

• Culoare linie meniu drop-down: # 007aff

Icoane

Continuați schimbând culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # 007aff

Dimensionare

Și finalizați setările modulului prin atribuirea unei lățimi maxime a logo-ului setărilor de dimensionare.

• Lățimea maximă a logo-ului: 40%

Adăugați un modul de cod în coloană

După ce ați completat aspectul general al modulului de meniu, continuați prin adăugarea unui modul de cod chiar sub acesta.

Adăugați cod CSS

Următorul cod CSS ne va ajuta să stilizăm etichetele meniului individual și să creăm un design receptiv:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Salvați toate modificările și rezultatele previzualizării temelor

După ce ați finalizat proiectarea antetului, asigurați-vă că salvați toate modificările Divi Theme Builder înainte de a vizualiza rezultatul pe site-ul dvs. web!

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Gânduri finale

În această postare, v-am arătat cum să evidențiați anumite elemente de meniu din antetul dvs. global construit de Divi. Mai precis, am inclus etichete de colț în meniul nostru WordPress, care sunt afișate într-un modul de meniu. Acesta este un mod excelent de a evidenția diferite elemente de meniu din meniul dvs. fără a crea o călătorie copleșitoare de navigare. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.