Cum să vă rezolvați subsolul Divi
Publicat: 2017-07-11În tutorialul Divi de astăzi, vă vom arăta cum să creați un subsol fix pentru site-ul dvs. în loc de unul normal. Într-o postare anterioară, v-am arătat cum să îl faceți lipicios, ceea ce diferă de fapt de a-l fixa, deși ar putea părea la fel la început. Dacă nu căutați să o faceți lipicioasă, dar fixă, această postare vă va ajuta.
Adăugarea unui subsol fixat pe site-ul dvs. web ar putea fi o cerere pe care ați avut-o de la unul dintre clienții dvs. sau o nevoie pe care o aveți pentru propriul site web. Deși nu este folosit atât de des pe cât este un antet fix, ar putea fi unul dintre acele lucruri cu care te lupți. Vă vom arăta două moduri de a vă face piciorul lipicios pe site-ul dvs. Divi. Primul va fi prin utilizarea unor linii CSS și al doilea va fi prin utilizarea codului jQuery. Ambele moduri vor face modificări la foaia de stil CSS a subsolului de pe site-ul dvs. web.
Aici aveți un exemplu de aspect al subsolului fix atunci când derulați:
Când se folosește un subsol fix
Există diferite motive pentru care doriți să aveți un subsol fix pe site-ul dvs. web. Unul dintre aceste motive ar putea fi relevanța informațiilor pe care le deține subsolul dvs. Puteți, de exemplu, să vă puneți pictogramele sociale în subsol și pentru că doriți să încurajați vizitatorii care se află pe site-ul dvs. să exploreze canalele dvs. de socializare. Un alt motiv ar putea fi acela că pur și simplu îți place efectul pe care îl dă site-ului tău.
Dacă utilizați un subsol fix, ar trebui să știți că o parte din fereastra vizitatorului va fi ocupată tot timpul. Asta înseamnă că vor trebui să deruleze mai mult pentru a vedea același conținut pe care l-ar vedea dacă nu ar exista un subsol fix. Aceasta este o provocare, deoarece vizitatorilor le place să depună cât mai puțin efort posibil.
Cu toate acestea, dacă subsolul dvs. nu este atât de mare, ar putea crește numărul de acțiuni care sunt întreprinse în subsolul dvs. Descurajăm să folosim în același timp un antet fix, un meniu principal și un subsol. Prin fixarea tuturor celor trei, conținutul care apare va fi redus drastic, ceea ce poate duce la o rată de respingere mai mare.
Diferența dintre subsol fix și lipicios
Înainte de a începe, vom explica diferența dintre un subsol fix și unul lipicios.
Un subsol lipicios este de obicei puțin mai complex. Este făcut să se comporte ca un subsol fix dacă o pagină nu are suficient conținut pentru a împinge subsolul în partea de jos a ecranului. În cazurile în care paginile sunt suficient de lungi, subsolul se va comporta ca unul normal și va fi împins în jos până la partea de jos a paginii, deci nu pe ecran.
Să începem
Abonați-vă la canalul nostru Youtube
Vom începe imediat, arătându-vă cum să adăugați subsolul fix pe site-ul dvs. web în două moduri; prin cod CSS și prin cod jQuery. Ambele metode funcționează, dar totul depinde de cea pe care o preferați pentru site-ul web de care aveți nevoie.
Adăugați subsol fix prin CSS
Primul și cel mai simplu mod de a crea un subsol fix este prin adăugarea unor linii CSS. Cu Divi Builder și WordPress, putem adăuga aceste linii în diferite locuri. Să le aruncăm o privire.
Adăugați cod CSS prin CSS personalizat pentru o pagină
Prima modalitate de a adăuga codul CSS este adăugându-l la o pagină în special. Deși este mai bine să creați un subsol fix la fel pentru fiecare pagină de pe site-ul dvs. web (pentru a avea aceeași consistență pe site-ul dvs. web), puteți alege să îl lăsați să se aplice și pe o pagină.
Deschideți pagina la care doriți să adăugați liniile de cod CSS și faceți clic pe următorul buton din Divi Builder.
Derulați în jos și adăugați următorul cod în câmpul CSS personalizat:
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
Adăugați cod CSS prin tema personalizată
O altă modalitate de a adăuga codul este prin intermediul Theme Customizer. Folosind Theme Customizer, veți urmări rezultatele în timp real pe site-ul dvs. web. Codul pe care îl adăugați prin Theme Customizer se aplică tuturor paginilor de pe site-ul dvs. web.
Accesați Theme Optimizer de pe site-ul dvs.> CSS suplimentare> Lipiți următoarele linii de cod CSS:
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
Adăugați cod CSS prin opțiunile temei
Ultima modalitate de a adăuga codul CSS pe site-ul dvs. web este prin Opțiunile temei. Când adăugați codul în câmpul CSS personalizat din Opțiunile temei, codul se va aplica și întregului site web. Acesta este cel mai utilizat mod de a adăuga cod CSS personalizat pe întregul site Divi.
Accesați Divi> Opțiuni temă> General> Derulați în jos și adăugați următorul cod în câmpul CSS personalizat:
#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}
Adăugați subsol fix prin jQuery
O altă posibilitate pe care o avem este să facem modificări CSS prin intermediul unor linii de cod jQuery. Când utilizați un subsol fix, de obicei doriți să vă asigurați că se aplică tuturor paginilor de pe site-ul dvs. web. Acest tip de coerență facilitează navigarea vizitatorilor prin site-ul dvs. web fără a se confunda.
Adăugați cod jQuery prin modulul de cod pentru o pagină în special
Deschideți pagina unde doriți să se aplice subsolul fix și adăugați o nouă secțiune standard în partea de sus a paginii. Apoi, alegeți un rând cu lățime completă și adăugați un modul de cod la acesta. Deschideți modulul de cod și treceți de următorul cod jQuery în caseta de conținut:
<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>
Prin adăugarea codului jQuery prin modulul de cod pe o anumită pagină, codul se va aplica numai acelei pagini. Restul site-ului dvs. web va avea un subsol normal, în timp ce cel în care ați utilizat modulul de cod va avea un subsol fix.
Adăugați cod jQuery prin Opțiunile temei
Ultima opțiune de adăugare a codului jQuery care face ca subsolul dvs. să fie fixat este prin Opțiunile temei. Liniile de cod se vor aplica imediat pentru întregul dvs. site web și vă vor oferi aceeași consistență de care are nevoie site-ul dvs. web.
Accesați Divi> Opțiuni temă> Integrare> Și lipiți următoarele linii de coduri în <head> a site-ului dvs. web:
<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>
Gânduri finale
V-am arătat cum să creați un subsol lipicios într-una din postările anterioare. Această postare a tratat în special cum să faci un subsol fix pentru site-ul tău. Subsolul fix va rămâne întotdeauna în partea de jos a ecranului vizitatorului în timp ce vă vizitați site-ul web. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos, astfel încât să putem lua legătura!
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 Zeeker2526 / shutterstock.com