Cum să creați un antet global personalizat cu Divi's Theme Builder

Acum, când Theme Builder este aici, abia așteptăm să ne scufundăm în tutoriale noi care vă vor ajuta să vă configurați site-ul web de la A la Z. Aceasta include crearea de antete personalizate utilizând opțiunea încorporată a lui Divi. În acest tutorial, ne vom concentra pe crearea unui antet global folosind Divi's Theme Builder. Un antet global va apărea peste tot pe site-ul dvs., cu excepția cazului în care ați atribuit un alt antet paginii sau postării respective.

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 designul antetului personalizat

Pentru a pune mâna pe designul antet global personalizat gratuit, 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!

Abonați-vă la canalul nostru Youtube

1. Configurați meniul principal

Începeți prin crearea meniului dvs. în setările de aspect ale site-ului dvs. WordPress.

2. Accesați Opțiunile pentru generatorul de teme

Apoi, navigați la Generatorul de teme în Opțiunile de temă ale lui Divi. Odată ajuns acolo, veți observa un șablon de site implicit gol.

3. Adăugați și creați antet global

Șablonul de site implicit este locul în care puteți începe să creați antetul global personalizat, corpul global și subsolul global. Faceți clic pe „Adăugați antet global” și continuați făcând clic pe „Construiți antet global” pentru a începe procesul.

Setări secțiune

Dimensionare

Deschideți secțiunea pe care o puteți observa pe pagină, treceți la fila de proiectare și modificați lățimea pe diferite dimensiuni ale ecranului.

• Lățime: 100%
• Lățime maximă: 1280 px (desktop), 100% (tabletă și telefon)

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Frontieră

Adăugați o rază de margine în colțurile din stânga și din dreapta jos ale secțiunii următoare.

• În partea stângă jos: 50 px
• Jos dreapta: 50 px

Box Shadow

De asemenea, adăugăm o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 60 px
• Culoare umbră: rgba (0,0,0,0.13)

Vizibilitate

Apoi, accesați fila avansată și ascundeți revărsările. Măriți și indexul z, acest lucru vă va asigura că secțiunea rămâne în partea de sus a întregului conținut al paginii.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil
• Indicele Z: 99999

4. Dedicați noul rând la antet

Acum că am finalizat setările secțiunii generale, putem începe să adăugăm rânduri. În total, vom avea nevoie de două rânduri; una dedicată antetului și una care permite afișarea elementelor de meniu. Vom începe cu antetul adăugând un rând nou folosind următoarea structură de coloane:

Setări rând

Culoare de fundal

Fără a adăuga module la rând, deschideți setările rândului și modificați culoarea de fundal.

• Culoare fundal: # 38383f

Dimensionare

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

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Afişa

Și asigurați-vă că coloanele apar una lângă cealaltă și pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

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

Încărcați sigla

După ce ați completat setările rândului, este timpul să începeți să adăugați module. Adăugați un modul de imagine în coloana 1 și încărcați sigla.

Aliniere

Treceți la fila de proiectare și asigurați-vă că utilizați alinierea imaginii din stânga.

• Aliniere imagine: Stânga

Dimensionare

Modificați și lățimea modulului.

• Lățime: 100 px

Spațiere

Și adăugați câteva valori de marjă personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 5 px
• Marja stângă: 50 px (desktop), 20 px (tabletă și telefon)

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

Adăugați rețele sociale

La a doua coloană. Acolo, vom avea nevoie de un modul Social Follow Follow. Adăugați rețelele sociale la alegere.

Culoarea de fundal a rețelei sociale

Apoi, deschideți fiecare rețea socială individual și schimbați culoarea de fundal într-una complet transparentă.

• Culoare fundal: rgba (0,0,0,0)

Aliniere

Reveniți la setările normale ale modulului și schimbați în continuare întregul aliniament al modulului.

• Alinierea modulului: centru

Pictogramă

Modificați și setările pictogramei.

• Culoare pictogramă: #ffffff
• Utilizați dimensiunea pictogramei personalizate: Da
• Pictogramă Dimensiune font: 16 px (desktop și tabletă), 12 px (telefon)

Spațiere

Și adăugați o marjă de sus.

• Marja superioară: 10 px

Adăugați un modul buton la coloana 3

Adăugați o copie

Treceți la a treia coloană și adăugați un modul buton cu o copie la alegere.

Aliniere

Schimbați alinierea butoanelor din fila design.

• Aliniere buton: dreapta

Setări buton

Stilează setările butonului în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 12 px (desktop), 10 px (tabletă), 8 px (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ffae25
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Distanța dintre litere pentru butoane: 5 px (desktop), 3 px (tabletă și telefon)
• Buton Font: Deschideți Sans
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 50 px (desktop și tabletă), 15 px (telefon)
• Căptușeală dreaptă: 50 px (desktop și tabletă), 15 px (telefon)

5. Dedicați noul rând la bara de meniu

După ce ați completat rândul dedicat antetului global, puteți adăuga un alt rând chiar sub acesta folosind următoarea structură de coloane:

Setări rând

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare în fila Design.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

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

Selectați Meniu

Apoi, adăugați un modul de meniu în coloană și selectați meniul pe care l-ați creat în prima parte a acestui tutorial.

Aspect

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

• Stil: Centrat
• Direcția meniului drop-down: în jos

Link-uri

Modificați și culoarea linkului activ în fila design.

• Culoare link activ: # ffae25

Meniul derulant

Faceți același lucru pentru culoarea liniei meniului drop-down din setările meniului drop-down.

• Culoare linie meniu drop-down: # ffae25

Icoane

Apoi modificați culoarea pictogramei meniului hamburger.

• Culoare pictogramă meniu hamburger: # ffae25

Text de meniu

Împreună cu setările de text din meniu.

• Font meniu: Prata
• Culoare text meniu: # 000000

6. Faceți ca antetul și bara de meniu să rămână în partea de sus

Deschideți Setări secțiune

După ce ați finalizat al doilea rând, singurul lucru rămas de făcut este să faceți ca secțiunea să rămână în partea de sus a paginilor și a postărilor noastre. Pentru aceasta, vom deschide din nou setările secțiunii.

Adăugați CSS personalizat la elementul principal

Apoi, vom merge la fila avansată și vom adăuga câteva linii de cod CSS la elementul principal al secțiunii.

position: fixed;
top: 0;
left: 0;
right: 0;

7. Salvați opțiunile Global Header & Theme Builder

După ce ați finalizat întregul design global al antetului, asigurați-vă că salvați designul înainte de a ieși din aspectul șablonului. Odată ce vă aflați în afara aspectului șablonului, salvați modificările întregului dvs. constructor de teme și ați terminat!

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ă creați un antet global personalizat cu noul Divi Theme Builder. Acest tutorial vă arată cât de ușor este să creați antete frumoase și să le aplicați pe întregul dvs. site web sau pe tipuri specifice de postări personalizate. Sperăm că acest tutorial vă inspiră să începeți imediat cu Theme Builder! Dacă aveți întrebări sau sugestii, asigurați-vă că 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.