Divi: Cum să creați un antet global lipicios

Doriți să creați un antet lipicios cu Divi ?

Crearea antetelor lipicioase a fost ușoară de la sosirea antetului lipicios. tematică, dar constatăm că mulți oameni nu știu cum să le creeze fără a utiliza cod suplimentar. Cu toate acestea, este destul de ușor să faceți acest lucru datorită opțiunilor lipicioase ale Divi.

De fapt, nu numai că este mai ușor, dar această metodă oferă mai multe posibilități de personalizare a designului.

Prin urmare, ne vom face timp, în acest tutorial, pentru a vă arăta cum să creați un antet lipicios ultra personalizat folosind parametrii Divi.

studiu

Înainte de a ne aprofunda în acest tutorial, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.

Construiți structura elementului antet

Creați un nou șablon de antet global

Accesați Divi Theme Builder și începeți să creați un nou antet global sau personalizat.

Secțiunea 1 Setări

Fundal gradient

Odată ajuns în editorul de șabloane, vom începe prin a construi structura elementelor noastre de antet. În a doua parte a acestui tutorial, ne vom concentra pe aplicarea diferitelor setări lipicioase pentru a finaliza designul antetului lipicios.

Citiți și: Cum se creează un meniu glisant și push în DIVI

În editorul de șabloane veți observa o secțiune. Deschideți această secțiune și aplicați un fundal gradient.

Culoare 1: #ffba60
Culoare 2: #ffd6a0
Direcția gradient: 90 de grade
Poziția de pornire: 50%
Poziția finală: 50%

spaţierea

Apoi eliminați toate marginile interne (sus și jos) în mod implicit.

Vertexul marjei interioare: 0px
Marja internă inferioară: 0px

Adăugați o linie nouă

Structura coloanei

Pentru a crea bara de antet de sus, vom adăuga un nou rând la secțiunea noastră folosind următoarea structură de coloane:

dimensionarea

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

Utilizați lățimea jgheab personalizată: da
Distanța între coloane: 1
Lățime maximă: 95%
Lățimea maximă: 2 pixeli

spaţierea

Adăugați, de asemenea, margini interne personalizate (Sus și Jos).

Vertexul marjei interioare: 15px
Marja internă inferioară: 15px

Element principal CSS

Și pentru a ne asigura că coloanele rămân una lângă cealaltă pe ecrane de dimensiuni mai mici, vom adăuga o linie de cod CSS la elementul rând principal din fila avansată.

display: flex;

Adăugați modulul „Urmărește-ne pe rețelele sociale” în coloana 1

Adăugați rețelele sociale alese

Este timpul să adăugați module, începând cu un modul „Urmărește-ne pe rețelele sociale” în coloana 1. Adăugați rețelele sociale alese de dvs. și link-urile corespunzătoare.

Eliminați culoarea de fundal din fiecare rețea socială

Continuați eliminând fiecare dintre culorile de fundal ale rețelei sociale în mod individual.

Setări pictograme

Apoi, reveniți la setările generale ale modulului și schimbați culoarea pictogramei în fila de design.

Culoarea pictogramei: #26333a

spaţierea

Adăugați, de asemenea, o marjă de sus.

Marja superioară: 5 px

Adăugați modulul Button în coloana 2

Adăugați text la buton

În coloana 2, singurul modul de care avem nevoie este un modul Button. Adăugați un text la alegere.

Adăugați un link

Apoi adăugați un link.

Aliniere butoane

Apoi, comutați la fila Stil și modificați alinierea butoanelor.

Alinierea butoanelor: dreapta

Setări buton

Personalizăm și butonul.

Utilizați stiluri personalizate pentru Buton: Da
Dimensiunea textului butonului: 14px
Culoarea textului butonului: #26333a
Lățimea chenarului butonului: 2 px
Culoarea chenarului butonului: #26333a
Raza chenarului butonului: 0 pixeli

Spațiere dintre litere de la butoane: 4px
Buton Soft Light: text îngroșat
Butonul Copiere stil: majuscule
Buton Afișare: da

spaţierea

Și vom completa setările modulului adăugând margini interne (Sus și Jos) la setările de spațiere.

Vertexul marjei interioare: 10px
Marja internă inferioară: 10px