Cum se creează un subsol Reveal cu Divi

În tutorialul Divi de astăzi, vă vom arăta cum să atingeți un anumit efect pe care probabil nu v-ați gândit niciodată să îl integrați în propriul dvs. site web sau al unui client. Mai precis; vă vom arăta cum să creați o revelație de subsol. Dezvăluirea subsolului așteaptă până la sfârșitul paginii și dezvăluie subsolul în funcție de modul în care derulați. După ce ați parcurs până la capăt pagina, subsolul va fi afișat în forma sa originală.

Adăugarea unui subsol de dezvăluire pe site-ul dvs. web poate aduce acea atingere suplimentară pe care ați dorit să o oferiți subsolului site-ului dvs. web. Este, de asemenea, ultimul lucru pe care îl vor vedea oamenii când parcurg orice pagină de pe site-ul dvs. web. Pentru a vă arăta exact ce înțelegem prin dezvăluire de subsol, să aruncăm o privire asupra rezultatului final:

Puteți vedea că, pe lângă dezvăluirea subsolului, am adăugat și o umbră subtilă la conținutul principal al site-ului nostru web. Procedând astfel, am creat un fel de perspectivă între conținutul principal și subsol.

Cum se creează un subsol Reveal cu Divi

Abonați-vă la canalul nostru Youtube

Adăugați codul CSS necesar

Pentru a obține rezultatul dezvăluirii subsolului, vom avea, în primul rând, nevoie de câteva linii de cod CSS. Deoarece există diferite moduri de a adăuga codul CSS pe site-ul dvs. Divi, vă vom arăta pe toate trei. În primul rând, vă vom arăta cum să adăugați codul la Opțiunile temei. În al doilea rând, vom adăuga codul prin Theme Customizer. Prin adăugarea de cod prin una dintre cele două metode, dezvăluirea subsolului dvs. se va aplica imediat pe întregul site web. Pe de altă parte, dacă doriți ca codul să se aplice în special unei pagini, puteți face acest lucru și. Arătându-vă cum să adăugați codul la pagina la care lucrați, puteți crea acel efect exclusiv pentru o pagină.

Cele două lucruri principale de care avem nevoie în codul nostru sunt indexul z și o margine inferioară pentru conținutul principal. Pentru a ne asigura că subsolul se potrivește perfect, trebuie să cunoaștem înălțimea subsolului. În mod normal, subsolul care este utilizat are o valoare de 53 px. Dar, s-ar putea să fi schimbat înălțimea în funcție de nevoile dvs. După ce vă vom arăta cum să adăugați subsolul în mod standard, vă vom arăta, de asemenea, cum să se potrivească cu înălțimea oricărui subsol.

Adăugați codul CSS necesar prin opțiunile temei

Primul mod în care vă vom arăta cum să adăugați codul CSS este prin Opțiunile temei Divi. Aceasta este metoda cea mai frecvent utilizată pentru a adăuga orice cod CSS suplimentar pe site-ul dvs. web. Adăugând codul CSS în această zonă, îl veți face imediat aplicabil pe întregul site web.

Pentru a adăuga codul, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Și copiați lipiți următoarele linii de cod CSS în câmpul CSS personalizat din partea de jos a filei:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

După ce ați adăugat codul, accesați site-ul dvs. web și urmăriți subsolul dezvăluind cum își face treaba.

Adăugați codul CSS necesar prin Customizer de temă

O altă modalitate de a adăuga codul CSS pe site-ul dvs. Divi este prin Theme Customizer. Adăugarea codului prin Customizerul temei sau Opțiunile temei este la fel. Odată ce ați eliminat codul din Opțiunile temei, acesta va fi eliminat și în Personalizatorul temei și viceversa. Unul dintre avantajele adăugării de cod prin Theme Customizer este că puteți vedea totul se întâmplă în timp real. Ajustările suplimentare pe care le faceți codului vă vor oferi imediat o imagine clară a rezultatului final pe care îl veți obține.

Pentru a adăuga codul la Theme Customizer, accesați tabloul de bord WordPress> Aspect> Personalizare> Derulați în jos la „CSS suplimentar”> Și adăugați următoarele linii de cod CSS:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Adăugați codul CSS necesar doar pentru o singură pagină

Ultima modalitate de a adăuga subsolul dezvăluie liniile de cod CSS este adăugându-l la o pagină în special. Acest lucru poate fi interesant dacă doriți să dați o valoare adăugată paginilor care au mai puțin conținut interacționant, de exemplu. Adăugând un dezvăluire de subsol, veți face cumva pagina un pic mai interactivă și veți pune accentul pe conținutul care este furnizat în subsol, cum ar fi pictogramele de pe rețelele de socializare.

Pentru a adăuga codul CSS la o pagină în special, deschideți pagina respectivă. În colțul din dreapta sus al Divi Builder pe pagina respectivă, veți vedea următoarea pictogramă.

Faceți clic pe pictogramă și lipiți următoarele linii de cod în câmpul CSS personalizat:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

După ce ați salvat setările, veți vedea afișarea subsolului pe pagina respectivă.

Schimbați înălțimea subsolului

Acum, metoda explicată mai sus contează doar pentru subsolul standard furnizat. Odată ce aveți de-a face cu o altă înălțime, codul nu își va face treaba corect. Am luat în considerare acest lucru și vă vom arăta cum să faceți ca subsolul să fie dezvăluit și pentru alte înălțimi.

În orice moment, puteți alege înălțimea pe care doriți să o atribuiți subsolului. Trebuie să setăm înălțimea pentru două ID-uri CSS: subsolul principal și subsolul subsolului. Reglând înălțimea în aceste două locuri, subsolul se va potrivi în poziție. Desigur, odată ce ați făcut acest lucru, trebuie să schimbați și marginea inferioară a conținutului principal. De exemplu, dacă doriți un subsol care are o înălțime de 60 px, veți avea nevoie de următoarele linii de cod:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Puteți vedea că există trei locuri în care aveam nevoie de valoarea „60px”. Dacă aveți o altă valoare a înălțimii pe care doriți să o atribuiți subsolului, asigurați-vă că o modificați în toate cele trei locuri; conținutul principal, subsolul principal și subsolul subsolului.

Adăugați CSS Box Shadow

Un alt lucru pe care îl puteți face pentru a adăuga un pic de perspectivă și interacțiune la site-ul dvs. web este să adăugați o umbră de casetă la conținutul principal. Footer-ul arată deja că este cam „sub” conținutul principal. După ce adăugați umbra casetei, veți sublinia acest lucru. Având o umbră, distanța iluzorie în înălțime între conținutul principal și subsol va părea mai mare.

Pentru a adăuga umbra casetei la afișarea subsolului, utilizați următoarele linii de cod:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Asta e! Dezvăluirea subsolului dvs. ar trebui să funcționeze bine.

Gânduri finale

În postarea de astăzi, v-am arătat cum puteți crea un efect de dezvăluire de subsol pe site-ul dvs. web. Asigurați-vă că utilizați codul CSS personalizat furnizat pentru a crea efectul și asigurați-vă că se potrivește cu înălțimea subsolului. Dacă doriți să îi oferiți această perspectivă suplimentară, vă recomandăm să adăugați umbra casetei la conținutul principal așa cum se arată în pasul de mai sus. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Demja / shutterstock.com