Trebuie să creați un antet global pentru dvs site-ul web cu Divi?
Un antet global va apărea peste tot pe dvs site-ul web, cu excepția cazului în care ați atribuit un antet diferit unei pagini sau unei postări.
Să începem!
studiu
Iată o previzualizare a antetului global pe care îl vom proiecta.
Configurați meniul principal
Începeți prin a vă crea meniul în setările de aspect ale site-ului dvs. WordPress.
Accesați opțiunea Theme Builder din Divi
În opțiunile de Divi tema, faceți clic pe Generator de teme. Odată ajuns acolo, vei observa o șablon de site Implicit.
Adăugați și creați un antet global
Le șablon 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 „Creați antet global” pentru a începe procesul.
Setări secțiune
dimensionarea
Deschideți setările secțiunii pe care o veți găsi pe pagină, în fila Stil, modificați dimensiunile pe diferite dimensiuni de ecran.
- Latime maxima: 100%
- Lățimea maximă: 1280 px (pentru computer și tabletă), 100% (pentru mobil)
spaţierea
Îndepărtați toate marginile interne de sus și de jos
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
frontieră
Acum adăugați o rază de margine în colțurile din stânga și din dreapta jos ale secțiunii.
- stânga jos: 50px
- dreapta jos: 50px
Cutie de umbră
Să adăugăm și o umbră subtilă de casetă.
- Intensitatea estomparii umbrei casetei: 60px
- Culoare font subtitrare: rgba(0,0,0,0.13)
vizibilitate
- Debord orizontal: vizibil
- Debordare verticală: vizibil
Dedică o nouă linie antetului
Acum că am finalizat setările generale ale secțiunii, putem începe să adăugăm rânduri. În total, vom avea nevoie de două linii; unul care este dedicat antetului și unul care permite afișarea elementelor de meniu. Vom începe cu antetul prin adăugarea unui nou rând folosind următoarea structură de coloane:
Setări de linie
Setări de fundal
Fără a adăuga module la linie, deschideți setările liniei și schimbați culoarea de fundal.
- Fundal: #38383F
dimensionarea
Apoi modificați parametrii de dimensiune a liniei.
- Utilizați lățimea jgheab personalizată: DA
- Distanța între coloane: 1
- Latime maxima: 100%
- Latime maxima: 100%
Se afișează
Acum să ne asigurăm că coloanele apar una lângă alta pe ecrane mai mici, adăugând această linie de cod CSS la elementul rândul principal.
01
display: flex;
Adăugați modul de imagine în coloana 1
Descărcați logo-ul
După ce ați finalizat 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
Accesați fila Stil și aliniați imaginea la stânga.
dimensionarea
Modificați, de asemenea, Lățimea modulului.
spaţierea
Adăugați, de asemenea, valori personalizate ale marjelor.
Adăugați modul de urmărire a rețelelor sociale în coloana 2
Adăugați rețele sociale
Să trecem la a doua coloană. Acolo vom avea nevoie de un modul de urmărire a rețelelor sociale. Adăugați rețelele sociale alese. Puteți adăuga oricâte rețele sociale doriți.
Culoarea fundalului rețelei sociale
Apoi, deschideți fiecare rețea socială individual și schimbați culoarea de fundal într-o culoare complet transparentă.
- Culoare de fundal: rgba (0,0,0,0)
aliniere
Reveniți la setările normale ale modulului și apoi modificați alinierea completă a modulului.
icoană
Modificați și setările pictogramei.
- Culoare pictogramă: #FFFFFF
- Utilizați dimensiunea personalizată a pictogramei: Da
- Dimensiunea fontului pictogramei: 16px (PC și tabletă), 12px (telefon)
spaţierea
Adăugați o marjă de sus.
Adăugați modulul Button în coloana 3
Treceți la a treia coloană și adăugați un modul Button care conține un text la alegere.
aliniere
Schimbați alinierea butonului în fila Stil.
Setări butoane
Personalizați setările butonului după cum urmează:
- Utilizați stiluri personalizate pentru butonul: Da
- Dimensiunea textului butonului: 12px (desktop), 10px (tabletă), 8px (telefon)
- Culoarea textului butonului: #ffffff
- Buton de fundal: #ffae25
- Lățimea chenarului butonului: 0 pixeli
- Butonul Raza chenarului: 0 pixeli
- Spațiere între litere: 5 px (desktop), 3 px (tabletă și telefon)
- Buton Font: Deschideți Niciunul
- Buton Soft Light: text îngroșat
- Copiați stilul butonului: TT
spaţierea
Personalizați valorile marjelor.
Dedicați o nouă linie barei de meniu
După ce ați completat linia dedicată antetului global, puteți adăuga o altă linie chiar mai jos.
Setări de linie
dimensionarea
Fără a adăuga încă module, deschideți setările liniei și modificați setările de dimensionare în fila Stil.
spaţierea
Apoi îndepărtați toate marginile de jos și de sus.
Adăugați un modul Meniu la coloană
Selectați Meniu
Apoi, adăugați un modul Meniu la coloană și selectați meniul creat în prima parte a acestui tutorial.
Dispoziţie
Comutați la fila Stil și modificați setările de aspect după cum urmează:
Conexiuni
Schimbați și culoarea link-ului activ în fila Stil.
- Culoare activ link: #ffae25
Meniul de derulare
Faceți același lucru pentru culoarea liniei meniului drop-down din setările meniului drop-down.
- Culoarea rândului dropdown: #ffae25
icoană
- Culoarea pictogramei meniului Hamburger: #ffae25
Textul meniului
Cu setări de text din meniu.
- Font meniu: Prata
- Culoarea textului meniului: #000000
Faceți antetul și bara de meniu să rămână în partea de sus
Deschideți setările secțiunii
După ce ați completat a doua linie, tot ce trebuie să faceți este să vă asigurați că secțiunea rămâne în partea de sus a paginilor și postărilor noastre. Pentru a face acest lucru, vom deschide din nou setările secțiunii.
Adăugați CSS personalizat la elementul principal
În continuare, vom merge la fila avansată și vom adăuga câteva rânduri de cod CSS la elementul principal al secțiunii.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Salvați antetul global și opțiunile pentru generatorul de teme
După ce ați finalizat întregul design al antetului global, asigurați-vă că îl salvați înainte de a părăsi aspectul șablonului. Odată ce ați ieșit din aspectul șablonului, salvați toate modificările generatorului de teme și ați terminat!
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire asupra rezultatului.
Concluzie
În acest articol, v-am arătat cum să creați un antet global personalizat cu noul generator de teme Divi. Acest tutorial arată cât de ușor este să creezi anteturi frumoase și să le aplici pe întregul tău site-ul web sau anumite tipuri de postări personalizate.
Sperăm că vă va ajuta să vă personalizați site-ul web cu Theme Builder.
Dacă aveți întrebări sau sugestii, vă rugăm să ne lăsați un comentariu în secțiunea de comentarii CI-Dessous.
...
