Doriți să creați un subsol lipicios cu DIVI care să dezvăluie complet atunci când derulați în jos?
Adăugarea unui subsol lipicios la dvs site-ul web poate aduce acea mică atingere suplimentară pe care o căutați site-ul web. Efectul „Reveal”, care permite ca subsolul să fie dezvăluit atunci când derulați în jos, va oferi un design foarte fermecător paginilor dvs. web.
De obicei, acest efect necesită CSS personalizat, care este limitativ și dificil de utilizat. Însă, datorită DIVI, o poți realiza cu ușurință.
În acest tutorial, vă vom arăta cum să creați un efect Reveal în subsolul dvs. lipicios. Este nevoie doar de câțiva pași simpli.
Să începem!
studiu
Iată o scurtă prezentare generală a subsolului lipicios cu efect Reveal pe care îl vom crea în acest tutorial.
Creați un nou șablon de subsol
Vizita Divi >> Theme Builder din tabloul de bord WordPress.
Acolo, dați clic pe „Adăugați un subsol global”
Atunci alege „Construirea unui subsol global”
În acest tutorial, vom folosi un aspect prestabilit pentru a accelera procesul de creare, dar o puteți face și de la zero. Pentru a face acest lucru, faceți clic „Încărcare din bibliotecă”.
Sub fereastra pop-up Încărcați din bibliotecă, găsiți și utilizați aspectul " Pagina Despre Marina » din pachetul de aspect Marina.
Odată ce aspectul este încărcat, ștergeți toate secțiunile, cu excepția secțiunii de subsol. Vom folosi această secțiune de subsol pentru a adăuga efectul Reveal.
Adăugați efectul Reveal și faceți subsolul lipicios
Faceți subsolul lipicios
În primul rând, trebuie să facem subsolul lipicios. Pentru a face acest lucru, deschideți setările secțiunii și faceți clic pe fila avansat. Sub „Efecte de defilare”, modificați setările după cum urmează:
- Poziție lipicioasă: lipiți de jos
Actualizați indexul Z pentru starea lipicioasă
Apoi, trebuie să dăm secțiunii noastre de subsol un z-index de 0 atunci când secțiunea este în stare lipicioasă. Acest lucru va permite secțiunii să rămână în spatele altor secțiuni sau elemente de pe corpul paginii atunci când derulați.
Pentru a face acest lucru, actualizați poziția Z Index făcând clic pe pictograma lipicioasă de lângă opțiunea Z Index. Apoi actualizați indicele Z la 0.
- Indicele Z (lipicios): 0
Actualizați indexul Z substituent de subsol lipicios
Atunci când unui element i se atribuie o poziție lipicioasă în Divi, un element substituent duplicat este, de asemenea, creat automat. Aceasta oferă funcționalitatea necesară pentru poziționarea și proiectarea elementelor lipicioase folosind Divi Builder.
Vezi și: Cum se creează un antet global cu Generatorul de teme Divi
În acest caz, un substituent al secțiunii de subsol este creat cu un index z implicit de 1. Nu vrem secțiunea noastră de subsol lipicioasă (acum cu un indice Z de 0) în spatele secțiunii de substituent, așa că trebuie să actualizăm Indicele Z al substituentului la -1.
Pentru a face acest lucru, mai întâi adăugați o clasă CSS personalizată la secțiunea de subsol, după cum urmează:
- Clasa CSS: sticky-footer-reveal
Apoi deschideți setările paginii utilizând meniul de setări al Creator de teme.
Accesați fila „ Avansat" și introduceți următorul CSS în casetă Personalizați CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Acest lucru va forța secțiunea substituent să rămână în spatele subsolului lipicios.
Salvați modificările
Odată terminat, salvați modificările aduse șablonului de subsol.
Salvați, de asemenea, modificările Divi Theme Builder.
Rezultat final
Pentru a vedea rezultatul final, vizualizați o pagină și derulați.
Descărcați DIVI acum!!!
Concluzie
În Divi, adăugarea unui subsol lipicios la dvs site-ul web nu necesită un plugin sau un CSS personalizat complicat. Folosind constructorul tematică, puteți crea cu ușurință un șablon de subsol cu Dezvăluie efect în câteva minute.
Sperăm că acest lucru va oferi designului subsolului dvs. un impuls subtil cu o interacțiune atractivă pe care vizitatori va aprecia. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Vezi și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
