Cum să vă faceți piciorul Divi lipicios

În acest tutorial, vă vom arăta exact cum să faceți subsolul pe site-ul dvs. Divi lipicios. Utilizarea unui subsol lipicios poate fi una dintre solicitările pe care le primiți atunci când proiectați un site web pentru un client sau o nevoie pe care o aveți atunci când creați un site web propriu. Vă vom arăta două posibilități care vă vor face piciorul lipicios. Prima cale este prin codul CSS și a doua prin codul jQuery. Ambele moduri funcționează, dar totul depinde de cel pe care îl preferați pentru a crea acel efect lipicios pentru site-ul dvs. web.

Adăugarea unui subsol lipicios pe site-ul dvs. web nu este momentan ceva ce puteți face automat în cadrul constructorului Divi. De aceea, vă vom arăta cum să ajungeți la rezultatul exact pe care îl doriți, fără a fi nevoie să depuneți mult efort. Singurul lucru pe care trebuie să-l faceți este să urmați această postare pas cu pas, să copiați și să lipiți câteva linii de cod și să le puneți la locul potrivit.

De ce să folosiți un subsol lipicios?

Un subsol lipicios este de obicei utilizat pentru un motiv principal; dacă aveți o pagină sau mai multe pagini pe site-ul dvs. care nu au suficient conținut disponibil pentru a umple un ecran întreg. Puteți, desigur, să vă asigurați că aveți suficient conținut pe o pagină, dar dacă aceasta nu aduce valoare adăugată paginii; nu este nevoie să o faci.

Acum, în cazul în care nu există suficient conținut pentru a umple întregul ecran, pagina va avea un subsol flotant imediat după ce conținutul se termină. De obicei, nu arată bine și nu este rezultatul pe care îl doriți. Din fericire, puteți utiliza un subsol lipicios pentru a scăpa de subsolul plutitor. Footer-ul lipicios se asigură că footer-ul rămâne în partea de jos a paginii fără a crea spațiu inutil. Lungimea paginii va rămâne astfel aceeași și de fiecare dată când ajustați dimensiunea ferestrei, subsolul se va modifica pe ecran.

Aici aveți o imagine a unei pagini scurte care nu are un subsol lipicios:

Iată aceeași imagine a acelei pagini după ce a fost adăugat un subsol lipicios:

Diferența dintre subsolul fix și fix

Nu toată lumea decide să folosească un subsol pe site-ul său, dar atunci când o face; există o mulțime de moduri de a-l coafa. Totul depinde de modul în care este structura site-ului dvs. web și dacă doriți să includeți un subsol „manual” și un stil diferit, realizat cu constructorul Divi.

Dar dacă utilizați un subsol standard, puteți alege modul în care doriți să îl stilizați și cum doriți să fie poziționat pe site-ul dvs. web. Cele trei poziții principale pe care un subsol le poate avea pe un site web sunt cele plutitoare, fixe și lipicioase.

Atunci când comparați piciorul lipicios și fixul unul cu altul; s-ar putea să arate la fel la prima vedere, dar nu sunt. Subsolul fix este întotdeauna vizibil atunci când derulați o pagină de pe site-ul dvs. web, în ​​timp ce subsolul lipicios gestionează în mod specific paginile în care conținutul nu este suficient de lung pentru a ajunge în partea de jos a ecranului. În acel caz specific în care conținutul nu este suficient de lung; se va comporta ca un subsol fix și va rămâne lipit de partea de jos a paginii; creând acel „efect subsol fix”.

Cu toate acestea, dacă conținutul este suficient de lung, subsolul lipicios se va comporta ca de obicei și pagina va împinge subsolul în josul paginii pentru a vă asigura că nu apare în mod continuu pe ecran. În majoritatea cazurilor, această metodă este mai degrabă preferată decât să ai un subsol fix pe întregul site web, deoarece oferă mai mult spațiu pe fereastră pentru ca conținutul să apară.

Creați un subsol lipicios pe site-ul dvs. Divi prin CSS

Fără alte date, să începem să creăm un subsol lipicios pentru site-ul dvs. web. Codul pe care îl vom folosi este foarte simplu, dar face treaba. Veți trece rapid de la un subsol flotant pe pagina dvs. la o pagină în care subsolul este împins în jos dacă conținutul nu este suficient de lung.

Adăugați cod CSS prin setările paginii (în special pentru o pagină)

În anumite cazuri, doriți să faceți lipicios subsol pe o singură pagină special. În această parte a postării, vă vom arăta cum să faceți acest lucru exact adăugând codul CSS în câmpul CSS personalizat al unei pagini. Procedând astfel, vă asigurați că codul CSS se aplică numai acelei pagini de pe site-ul dvs. web. Ceea ce înseamnă, de asemenea, că codul CSS va fi încărcat numai atunci când cineva deschide pagina respectivă. Această metodă este de obicei utilizată în cazurile în care există doar câteva pagini mai scurte pe site pe care doriți să le dați subsolului lipicios.

Începeți prin deschiderea paginii pe care doriți ca subsolul lipicios să fie activ sau prin crearea unei noi pagini unde doriți să se aplice. Apoi, deschideți setările paginii făcând clic pe următoarea pictogramă din Divi Builder:

Continuând, adăugați următorul cod în câmpul CSS personalizat din fereastra pe care tocmai ați deschis-o:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Din momentul în care vă previzualizați pagina, codul CSS ar trebui să se aplice și să facă subsolul să fie lipicios.

Adăugați cod CSS prin personalizator de temă (vizualizare în timp real)

O altă modalitate de a adăuga codul este prin Theme Customizer. Dacă adăugați codul CSS prin acest mod, acesta se va aplica automat întregului site web. Fiecare pagină va avea acest cod CSS aplicat. Prin adăugarea codului prin Customizerul tematic, puteți vedea, de asemenea, în mod direct modificările care au loc pe site-ul dvs. web.

Pentru a adăuga codul CSS în Theme Customizer, faceți clic pe „Theme Customizer” în partea din spate a site-ului dvs. WordPress. Apoi, derulați pagina în jos și deschideți opțiunea CSS suplimentar. Veți vedea toate codurile CSS personalizate pe care le-ați folosit până acum. Continuați și adăugați următorul cod:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Adăugați cod CSS prin opțiunile temei Divi

Nu în ultimul rând, puteți adăuga codul și prin Opțiunile temei Divi. Acesta este cel mai frecvent mod de a adăuga cod la un site web în care doriți ca întregul site să beneficieze de cod.

Accesați Divi> Opțiuni temă> Derulați pagina în jos> Adăugați următorul cod CSS în caseta CSS personalizată:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Creați un subsol lipicios pe site-ul dvs. Divi prin JQuery

Adăugați cod jQuery prin modulul de cod (pentru o pagină în special)

Puteți adăuga codul jQuery utilizând modulul de cod din constructorul Divi. Acest lucru, din nou, este utilizat mai ales atunci când nu există o mulțime de pagini cu conținut scurt și dacă nu doriți să încărcați codul jQuery pentru întregul site web.

Adăugați o secțiune cu un rând de lățime completă la pagina la care lucrați.

Continuați adăugând un modul de cod la rândul cu lățime completă și lipiți următorul cod în el:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Adăugați cod jQuery prin opțiunile temei Divi

O altă posibilitate de a adăuga codul jQuery este prin Opțiunile temei Divi. Când adăugați cod jQuery pentru întregul site web, există un loc specific în Opțiunile temei Divi unde putem face acest lucru; în <capul & gt; din fila Integrare. Exact acolo vom adăuga codul chiar acum.

Deschideți site-ul WordPress> Accesați Divi> Deschideți Opțiunile temei> Accesați fila Integrare și adăugați următorul cod jQuery la <head> al site-ului dvs. web:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Gânduri finale

Adăugarea unui subsol lipicios este de obicei necesară în cazurile în care aveți o pagină cu un conținut redus. Vrei să scapi de subsolul flotant pentru ca structura paginii să se simtă mai naturală. Dacă aveți comentarii sau sugestii pentru postări viitoare pe secțiunea blogului nostru; 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 Vintagio / shutterstock.com