Cum să „ridicați” antetul Divi Sticky atunci când treceți secțiunea erou a paginii dvs.

De când a fost lansată actualizarea opțiunilor lipicioase Divi, am împărtășit cu Divi sfaturi și trucuri despre cum să le folosiți pe site-urile dvs. web, iar astăzi adăugăm altul pentru a-l marca! Acest tutorial va fi despre interacțiune. Vom plasa automat un antet personalizat sub secțiunea erou a fiecărei pagini și vom transforma antetul respectiv imediat ce vizitatorii trec pe lângă acesta, ceea ce duce la o experiență de derulare frumoasă. Veți putea descărca gratuit fișierul JSON!

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 șablonul GRATUIT

Pentru a pune mâna pe șablonul de pagină 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. Creați o pagină nouă utilizând pagina de destinație a pachetului de tapițerie Divi

Pentru acest tutorial, vom folosi pachetul de aspect pentru tapițerie și șablonul de antet și subsol gratuit pe care îl puteți descărca de pe blog. Deși folosim acest pachet de aspect special, puteți aplica această metodă oricărui tip de site web pe care îl creați. Pentru a previzualiza rezultatul în timp ce parcurgeți tutorialul de mai jos, vă recomandăm să configurați o pagină pe care o păstrați deschisă într-o filă separată. Pentru a se potrivi cu antetul și subsolul pe care le vom folosi, configurăm o nouă pagină folosind un aspect la alegere care vine cu pachetul de aspect pentru tapițerie Divi.

2. Descărcați și instalați antetul și subsolul gratuit pentru pachetul de aspect pentru tapițerie Divi

Descărcați antetul și subsolul gratuit pe blogul nostru

În continuare, vom descărca șablonul de antet și subsol gratuit pentru Divi's Upholstery Layout Pack. Descărcarea și instalarea acestui freebie ne vor ajuta să ne concentrăm asupra părții importante a acestui tutorial, care îmbunătățește tehnica. După ce ați accesat postarea de pe blog, navigați la formularul de înscriere prin e-mail și completați adresa de e-mail. Apoi, va apărea un buton de descărcare. Acest buton de descărcare vă va permite să descărcați un folder zip. După ce ați dezarhivat folderul, puteți găsi un fișier JSON care conține un șablon de site web implicit cu antet și subsol global.

Navigați la Divi's Theme Builder

Pentru a utiliza fișierul JSON pe care tocmai l-ați descărcat, navigați la Divi Theme Builder.

Încărcați șablonul de site implicit cu designuri de antet și subsol

Acolo, faceți clic pe butonul de import și export din colțul din dreapta sus și încărcați fișierul JSON pe care îl puteți găsi în folderul de descărcare.

Creați un șablon de pagină nou

De îndată ce ați încărcat șablonul, veți vedea un antet și un subsol global care apar în șablonul dvs. de site implicit. Pentru a evita plasările de antet ciudate, vom aplica doar efectul „ridicați antetul lipicios” pe paginile noastre, dar dacă aveți și o secțiune de erou construită de Divi și pe alte tipuri de postări personalizate, nu ezitați să utilizați și antetul acolo. Adăugați un șablon nou și utilizați-l în toate paginile.

• Utilizați pe: Toate paginile

Eliminați șablonul antet și subsol din șablonul de site implicit

De îndată ce adăugați șablonul de pagină, antetul și subsolul global vor fi adăugate automat la șablonul respectiv. Transformăm acest antet global într-un antet personalizat, eliminând antetul și subsolul global din șablonul nostru de site web implicit. În acest fel, modificările aduse antetului nostru se vor aplica numai paginilor.

3. Plasați secțiunea antet sub secțiunea erou

Deschideți șablonul de antet global

Acum că am configurat mediul de creare a temelor pentru antetul nostru, este timpul să trecem la șablonul nostru de antet, făcând clic pe pictograma creion.

Atribuiți un ID CSS personalizat secțiunii din antetul global

Odată ajuns în editorul de șabloane, veți vedea un design de antet care conține o secțiune, un rând și câteva module. Pentru a plasa automat antetul sub prima secțiune erou a fiecărei pagini, va trebui să atribuim un ID personalizat secțiunii noastre. Tehnica pe care o folosim se bazează pe un tutorial anterior. Diferența dintre această postare și cea menționată în propoziția anterioară este că, de îndată ce un vizitator trece pe lângă antet, acesta va deveni lipicios. Când oamenii derulează înapoi, acesta își va lua locul înapoi sub secțiunea erou.

• CSS ID: antet personalizat

Adăugați un modul de cod sub modulul de meniu din coloana 1

Continuați adăugând un nou modul de cod în prima coloană a rândului.

Adăugați codul JQuery pentru a plasa secțiunea sub prima secțiune a fiecărei pagini

Acolo, vom insera un cod JQuery care va plasa automat secțiunea antet sub prima secțiune erou a fiecărei pagini.

jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});

Adăugați cod CSS la același modul de cod

Vom include și o clasă CSS între etichetele de stil pentru a împiedica afișarea antetului în constructor în timpul construirii paginilor.

#et_pb_root #custom-header {
display: none;
}

4. Aplicați poziția și stilurile lipicioase la antet

Adăugați poziționare lipicioasă la secțiune

Acum că secțiunea noastră este plasată sub prima secțiune erou a fiecărei pagini, este timpul să aplicăm și efectul lipicios. Pentru a face acest lucru, vom utiliza setările lipicioase încorporate ale Divi în fila avansată.

• Poziție lipicioasă: lipiți-vă de sus

Adăugați Sticky Box Shadow la secțiune

Acum că a fost aplicată poziția lipicioasă, putem începe să facem modificări lipicioase la secțiunea noastră și la toate elementele copil pe care le conține. Vom începe prin a adăuga o umbră de cutie lipicioasă în containerul secțiunii noastre.

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

Modificați fundalul de gradient Sticky Row

Apoi, vom aplica un fundal de gradient lipicios pe rândul nostru.

• Culoare 1: #ffffff
• Culoare 2: # e8e8e8

Modificați culoarea textului modulului meniului lipicios

Apoi, vom deschide modulul de meniu și vom schimba culoarea textului meniului într-o stare lipicioasă.

• Culoare text meniu: # 2d2e34

Modificați culoarea pictogramei de hamburger de meniu Sticky

Vom modifica și culoarea pictogramei hamburgerului meniului lipicios.

• Culoare pictogramă meniu hamburger: # 2d2e34

Adăugați un filtru de inversare a logo-ului lipicios

Și vom completa tutorialul adăugând un filtru de inversare a imaginii. Asta e! După ce ați aplicat toate aceste modificări la antetul dvs., asigurați-vă că salvați șablonul și modificările Divi Theme Builder înainte de a vizualiza rezultatul pe pagina pe care ați creat-o în prima parte a tutorialului.

• Inversare imagine: 80%

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, am împărtășit un alt sfat și truc pe care îl puteți aplica cu opțiunile lipicioase încorporate ale Divi. Mai exact, v-am arătat cum să „ridicați” antetul odată ce ați parcurs-o. Antetul va fi plasat automat sub prima secțiune a fiecărei pagini. 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.