Cum să plasați automat antetul sub prima secțiune Divi a fiecărei pagini

De când a apărut Divi Theme Builder, am împărtășit tutoriale despre cum să creați și să personalizați un antet pentru a se potrivi cu diferite nevoi pe care le-ați putea avea. În tutorialul de astăzi, vom continua călătoria arătându-vă cum să plasați automat un antet personalizat sub prima secțiune Divi a fiecărei pagini. Această abordare permite vizitatorilor să vadă mai întâi secțiunea erou a paginilor dvs. și apoi să aibă acces la meniu și la toate articolele sale. Stilul pe care îl folosim pentru antetul personalizat se potrivește cu pachetul de aspect Bistro, veți putea descărca și șablonul de pagină personalizat gratuit!

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 de antet personalizat

Pentru a pune mâinile pe șablonul de antet 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!

1. Accesați Divi Theme Builder și adăugați un șablon de pagină nou

Accesați Divi Theme Builder și adăugați un șablon nou

Începeți accesând Divi Theme Builder și adăugați un șablon nou.

Utilizați Activat

Utilizați acest nou șablon pe toate paginile.

• Utilizați pe: Toate paginile

2. Începeți să creați proiectarea antetului personalizat

Continuați construind un antet personalizat în interiorul șablonului de pagină.

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal.

• Culoare fundal: #FFFFFF

Spațiere

Eliminați umplutura implicită de sus și de jos a secțiunii în continuare.

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

Frontieră

Adăugați și o margine de sus și de jos.

• Lățimea marginii de sus și de jos: 1 px
• Culoare margine sus și jos: # 002d4c

ID CSS

Și includeți un ID CSS. Mai târziu în tutorial, vom folosi acest ID CSS pentru a plasa secțiunea sub prima secțiune a fiecărei pagini.

• CSS ID: antet personalizat

Indicele Z

Nu în ultimul rând, vom mări indexul secțiunii z pentru a ne asigura că apare în partea de sus a întregului conținut al paginii.

• Indicele Z: 99999

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe lățimea întregii secțiuni.

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

Spațiere

Eliminați și toate căptușelile implicite, de sus și de jos.

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

Elementul principal

Pentru a ne asigura că toate coloanele rămân unele lângă altele pe dimensiuni de ecran mai mici și pentru a centra conținutul coloanei, vom adăuga, de asemenea, două linii de cod CSS la elementul principal al rândului.

display: flex;
align-items: center;

Coloana 1

Spațiere

Continuați deschizând setările coloanei 1 și adăugați câteva umpluturi de sus și de jos la setările de spațiere.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

Frontieră

Adăugați și o margine dreaptă la coloană.

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: # 002d4c

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

Încărcați sigla

E timpul să începeți să adăugați module! În coloana 1, vom avea nevoie de un modul de imagine. Încărcați sigla.

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați și lățimea modulului pe diferite dimensiuni ale ecranului.

• Lățime: 4vw (desktop), 7vw (tabletă), 12vw (telefon)

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

Selectați Meniu

În cea de-a doua coloană, vom avea nevoie de un modul de meniu. Selectați un meniu la alegere.

Aspect

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

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

Text de meniu

Modificați și setările pentru textul meniului.

• Font de meniu: Cabină
• Culoare text meniu: # 77848d
• Dimensiune text meniu: 16 px (desktop), 15 px (tabletă), 14 px (telefon)
• Înălțimea liniei meniului: 1,8em

Text derulant

Apoi, modificați câteva culori în setările textului drop-down.

• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: # 002d4c

Icoane

Și completați setările modulului schimbând culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # 002d4c

Adăugați un modul buton la coloana 3

Adăugați o copie

Treceți la următoarea și ultima coloană. Acolo, vom avea nevoie de un modul buton. Adăugați o copie la alegere.

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea butoanelor.

• Aliniere buton: centru

Setări buton

Continuați stilizând butonul în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 13 px
• Culoarea textului butonului: # 002d4c
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 2 px
• Culoare margine buton: #ffffff (implicit), # d1d1d1 (Hover)
• Raza chenarului butonului: 0 px

• Distanța dintre litere și butoane: 2 px
• Buton Font: Cabină
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

Spațiere

Apoi, adăugați câteva umpluturi personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 16 px
• Căptușeală inferioară: 16 px
• Căptușire stângă: 24 px (desktop și tabletă), 13 px (telefon)
• Căptușire dreaptă: 24 px (desktop și tabletă), 13 px (telefon)

Box Shadow

Completați setările modulului adăugând o umbră de casetă.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 2 px (implicit), 6 px (plutitor)
• Culoare umbră: # 002d4c
• Box Shadow Position: Umbra interioară

3. Plasați automat antetul după prima secțiune a fiecărei pagini utilizând JQuery

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

Acum, pentru a plasa automat meniul sub prima secțiune a fiecărei pagini, vom avea nevoie de un pic de cod JQuery. Pentru a include acest cod în antetul nostru personalizat, adăugați un modul de cod în coloana 2.

Introduceți codul JQuery

Adăugați următoarele linii de cod JQuery, între etichetele de script, după cum puteți observa în ecranul de imprimare de mai jos , la modulul de cod pentru a aplica efectul:

jQuery (funcție ($) {
$ ('# custom-header'). insertAfter ('. et_pb_section_0');
});

4. Salvați modificările constructorului de teme și vedeți rezultatul

Și finalizați antetul personalizat salvând toate modificările constructorului de teme și vizualizând rezultatul pe paginile dvs.!

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ă plasați automat antetul personalizat pe care îl creați folosind Divi's Theme Builder după prima secțiune Divi a fiecărei pagini. Va trebui să construiți antetul personalizat o singură dată, să adăugați codul JQuery și antetul personalizat va fi repoziționat automat. Aceasta este o modalitate excelentă de a schimba poziția normală a meniului în partea de sus a paginii și de a permite secțiunii eroului să strălucească mai întâi. Ați putut descărca șablonul gratuit, de asemenea! 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.