Cum să-ți faci logo-ul să traverseze barele de meniu primare și secundare din antetul Divi

Când vine vorba de construirea unui antet, posibilitățile sunt nelimitate. Puteți include orice puteți imagina în antetul Divi dacă utilizați Divi Theme Builder. Astăzi, adăugăm un alt tutorial de proiectare a antetului foarte solicitat în lista dvs. de resurse. Vă vom arăta cum să faceți sigla dvs. să traverseze barele de meniu principal și secundar din antetul dvs. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

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. Creați un nou șablon global de antet

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress. Odată ajuns acolo, faceți clic pe „Adăugați antet global”.

Adăugați un nou antet global

Va apărea un meniu derulant. Pentru a începe construirea de la zero, continuați selectând „Build Global Header”.

2. Construiți designul antetului

Adăugați secțiunea de specialitate

Pentru a construi acest design, vom folosi o secțiune de specialitate.

Structura coloanei

Aceasta este structura de coloane pe care o folosim pentru secțiunea noastră de specialitate:

Coloana 1 Culoare fundal

După ce ați adăugat secțiunea de specialitate, deschideți setările și aplicați o culoare de fundal în coloana 1.

• Coloana 1 Culoare fundal: rgba (255.191,0,0.27)

Dimensionare

Treceți la fila de proiectare și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime interioară: 100%
• Lățime maximă interioară: 2580 px

Spațiere

Modificați și setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 0 px
• Coloana 1 Căptușeală inferioară: 0 px
• Coloana 2 Căptușeală superioară: 0 px
• Coloana 2 Căptușeală inferioară: 0 px

Coduri CSS de coloană

Apoi, accesați fila avansată și aplicați un ID CSS personalizat ambelor coloane.

• Coloana 1 ID CSS: antet-prima-coloană
• Coloana 2 CSS ID: antet-a doua-coloană

Adăugați modulul de imagine în coloana 1

Incarca imaginea

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați sigla.

Aliniere

Apoi, treceți la fila de proiectare și schimbați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Aplicați și o lățime maximă setărilor de dimensionare.

• Lățime maximă: 100 px

Vizibilitate

Și ascundeți modulul pe dimensiuni de ecran mai mici.

Adăugați rândul # 1 la coloana 2

Structura coloanei

În coloana 2 a secțiunii noastre de specialitate, vom adăuga un prim rând folosind următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și utilizați următoarea culoare de fundal:

• Culoare fundal: # a163ff

Spațiere

Treceți la fila de proiectare a rândului și modificați setările de spațiere după cum urmează:

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Aplicați următoarele setări de margine în continuare:

• Lățimea marginii inferioare: 3 px
• Lățimea marginii stângi:
  • Desktop: 3 px
  • Tabletă și telefon: 0 px
• Culoare margine: # 6c2eb9

Element principal CSS

Și utilizați următoarele linii de cod CSS în interiorul elementului principal al rândului:

display: flex;
justify-content: center;
align-items: center;

Ascundeți coloanele 1 și 2 pe dimensiunile mai mici ale ecranului

Pentru a simplifica designul pe dimensiuni mai mici de ecran, vom deschide setările coloanei 1 și 2 și le vom ascunde pe tabletă și pe telefon.

Adăugați modulul Social Media Follow în coloana 1

Adăugați rețele sociale

Este timpul să adăugați module, începând cu un modul Social Follow Follow din coloana 1. Adăugați rețelele sociale la alegere.

Culoarea de fundal a rețelei sociale individuale

Modificați individual culoarea de fundal a fiecărei rețele sociale.

• Culoare fundal: #ffeeba

Setări pictograme

Reveniți la setările generale ale modulului și schimbați culoarea pictogramei.

• Culoare pictogramă: # 6c2eb9

Frontieră

Adăugați și câteva colțuri rotunjite la setările de margine.

• Toate colțurile: 100 px

Adăugați un modul de text în coloana 2

Adauga continut

Apoi, adăugați un modul de text în coloana 2 cu un conținut la alegere.

Setări text

Modificați setările modulului după cum urmează:

• Font text: Poppins
• Aliniere text: centru

Adăugați un modul buton la coloana 3

Adăugați o copie

În coloana 3, singurul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere buton

Treceți la fila de proiectare a modulului și schimbați alinierea butonului pe diferite dimensiuni de ecran.

• Aliniere buton:
  • Desktop: Corect
  • Tabletă și telefon: Centru

Setări buton

Stilează butonul în continuare.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 14 px
• Culoarea textului butonului: # 6c2eb9
• Culoarea fundalului butonului: #ffeeba
• Buton Font: Poppins
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga

Spațiere

Și aplicați următoarele valori de umplere:

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

Adăugați rândul 2 în coloana 2

Structura coloanei

Următorul și ultimul rând de care avem nevoie în a doua coloană a secțiunii noastre folosește următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și utilizați următoarea culoare de fundal:

• Culoare fundal: rgba (161,99,255,0,1)

Spațiere

Modificați apoi setările de spațiere ale rândului.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Apoi, aplicați următoarele setări de margine:

• Lățimea marginii stângi:
  • Desktop: 3 px
  • Tabletă și telefon: 0 px
• Culoare margine stângă: # 6c2eb9

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

Selectați Meniu

Apoi, numai modulul de care avem nevoie în acest rând este un modul de meniu. Selectați un meniu la alegere.

Încărcați sigla pe tabletă și telefon

Apoi, încărcați o siglă numai pe tabletă și telefon.

Eliminați culoarea de fundal

Eliminați culoarea de fundal a modulului în continuare.

Setări text meniu

Treceți la fila de proiectare a modulului și modificați setările pentru textul meniului după cum urmează:

• Font meniu: Poppins
• Culoarea textului meniului: # 6c2eb9
• Dimensiune text meniu: 16 px

Setări meniu derulant

Aplicați următoarea culoare a liniei meniului drop-down în continuare:

• Culoare linie meniu derulant: rgba (0,0,0,0)

Setări pictograme

Apoi, modificați setările pictogramei.

• Culoare pictogramă coș de cumpărături: # 6c2eb9
• Caută pictograma Culoare: # 6c2eb9
• Culoare pictogramă meniu hamburger: # 6c2eb9

Dimensionare

Aplicați o lățime maximă de siglă pe tabletă și telefon.

• Lățimea maximă a siglei:
  • Tabletă: 70 px
  • Telefon: 50 px

Adăugați un modul de cod în coloana 1

Pentru a modifica proporțiile designului antetului nostru, vom face câteva modificări CSS ușoare. Pentru a include codul, adăugați un modul de cod sub modulul de imagine în coloana 1.

Adăugați etichete de stil

Plasați câteva etichete de stil în caseta de cod.

Introduceți codul CSS între etichetele de stil

Și plasați următoarele rânduri de cod CSS între etichetele de stil:

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. Salvați modificările Divi Theme Builder

Acum că totul este la locul său, singurul lucru rămas de făcut este să salvați toate modificările Divi Theme Builder și să vedeți rezultatul!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să deveniți creativi cu antetul Divi. Mai precis, v-am arătat cum să faceți sigla să traverseze bara de meniu principală și secundară din antetul dvs. 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.