Divi: Si të krijoni një kokë ngjitëse globale

Dëshironi të krijoni një kokë ngjitëse me Divi ?

Krijimi i titujve ngjitës ka ecur pa probleme që nga ardhja e themes, por zbulojmë se shumë njerëz nuk dinë t'i krijojnë ato pa përdorur kod shtesë. Megjithatë, është mjaft e lehtë për ta bërë këtë falë opsioneve ngjitëse të Divi.

Në fakt, jo vetëm që është më e lehtë, por kjo metodë ofron më shumë mundësi për të personalizuar dizajnin.

Prandaj, ne do të marrim kohë, në këtë tutorial, për t'ju treguar se si të krijoni një kokë ngjitëse ultra të personalizuar duke përdorur parametrat Divi.

studim

Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.

Ndërtoni strukturën e elementit të kokës

Krijo një shabllon të ri të kokës globale

Hyni në Ndërtuesin e Temave Divi dhe filloni të krijoni një titull të ri global ose të personalizuar.

Seksioni 1 Parametrat

Sfondi i gradientit

Pasi të jemi në redaktuesin e shabllonit, do të fillojmë duke ndërtuar strukturën e elementeve tona të kokës. Në pjesën e dytë të këtij tutoriali, ne do të fokusohemi në aplikimin e cilësimeve të ndryshme ngjitëse për të përfunduar dizajnin e kokës ngjitëse.

Lexo gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI

Në redaktuesin e shabllonit, do të vini re një seksion. Hapeni këtë seksion dhe aplikoni një sfond gradient.

Ngjyra 1: #ffba60
Ngjyra 2: #ffd6a0
Drejtimi i gradientit: 90 gradë
Pozicioni fillestar: 50%
Pozicioni përfundimtar: 50%

ndarje

Pastaj hiqni të gjitha kufijtë e brendshëm (lart dhe poshtë) si parazgjedhje.

Maja e marzhit të brendshëm: 0 px
Marzhi i brendshëm i poshtëm: 0 px

Shto një rresht të ri

Struktura e kolonës

Për të krijuar shiritin tonë të sipërm të kokës, ne do të shtojmë një rresht të ri në seksionin tonë duke përdorur strukturën e mëposhtme të kolonës:

sizing

Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:

Përdorni gjerësinë e personalizuar të ulluqit: Po
Hapësira e kolonave: 1
Gjerësia maksimale: 95%
Gjerësia maksimale: 2 piksele

ndarje

Shtoni gjithashtu kufijtë e brendshëm të personalizuar (lart dhe poshtë).

Maja e marzhit të brendshëm: 15 px
Marzhi i brendshëm i poshtëm: 15 px

Elementi kryesor CSS

Dhe për t'u siguruar që kolonat të qëndrojnë pranë njëra-tjetrës në madhësi më të vogla të ekranit, ne do të shtojmë një rresht të kodit CSS në elementin e rreshtit kryesor në skedën e avancuar.

display: flex;

Shtoni modulin "Na ndiqni në mediat sociale" në kolonën 1

Shtoni rrjetet sociale të zgjedhura

Është koha për të shtuar module, duke filluar me një modul 'Na ndiqni në mediat sociale' në kolonën 1. Shtoni rrjetet sociale të zgjedhjes suaj së bashku me lidhjet e tyre përkatëse.

Hiqni ngjyrën e sfondit nga çdo rrjet social

Vazhdoni duke hequr secilën nga ngjyrat e sfondit nga rrjeti social individualisht.

Cilësimet e ikonës

Pastaj kthehuni te cilësimet e përgjithshme të modulit dhe ndryshoni ngjyrën e ikonës në skedën e dizajnit.

Ngjyra e ikonës: #26333a

ndarje

Shtoni gjithashtu një diferencë të lartë.

Marzhi i sipërm: 5 px

Shtoni modulin Button në kolonën 2

Shtoni tekst në butonin

Në kolonën 2, i vetmi modul që na nevojitet është moduli Button. Shtoni një tekst sipas zgjedhjes suaj.

Shto një lidhje

Pastaj shtoni një lidhje.

Rreshtimi i butonit

Më pas, kaloni në skedën Stil dhe ndryshoni shtrirjen e butonit.

Shtrirja e butonave: djathtas

Cilësimet e butonit

Ne gjithashtu personalizojmë butonin.

Përdorni stile të personalizuara për butonin: Po
Madhësia e tekstit të butonit: 14 px
Ngjyra e tekstit të butonit: #26333a
Gjerësia e kufirit të butonit: 2 px
Ngjyra e kufirit të butonit: #26333a
Rrezja kufitare e butonit: 0 piksel

Butonat e ndarjes së shkronjave: 4 px
Butoni i lehtë i dritës: Tekst i trashë
Butoni i stilit të kopjimit: shkronja të mëdha
Butoni i shfaqjes: po

ndarje

Dhe ne do të plotësojmë cilësimet e modulit duke shtuar kufijtë e brendshëm (lart dhe poshtë) në cilësimet e ndarjes.

Maja e marzhit të brendshëm: 10 px
Marzhi i brendshëm i poshtëm: 10 px