Cum să faci orice element de pagină Divi lipicios

Știind cum să faci orice element de pagină Divi lipicios (sau fix) este una dintre acele abilități utile pe care designerii de web le pot folosi în mai multe moduri. Dacă nu sunteți familiarizați cu termenul „lipicios”, acesta se referă pur și simplu la un element dintr-o pagină web care rămâne „fix” pe măsură ce utilizatorul derulează pagina în jos. Un exemplu popular de element lipicios este un meniu de navigare fix. Divi are o funcționalitate de navigare fixă ​​(sau lipicioasă) disponibilă în mod implicit. Deci, atunci când utilizatorul derulează pagina în jos, o versiune fixă ​​a meniului rămâne blocată în partea de sus a paginii pe măsură ce utilizatorul derulează. Dar elementele lipicioase pot fi folosite pentru aproape orice și este o modalitate excelentă de a atrage atenția asupra îndemnului dorit de acțiune pe orice pagină dată.

În acest tutorial, vă voi arăta o modalitate ușoară de a face orice element de pe pagina dvs. lipicios folosind pluginul numit Sticky Menu (sau Orice!) De pe Scroll. Este nevoie doar de câteva momente pentru a configura setările pluginului. Apoi, tot ce trebuie să faceți este să adăugați un ID CSS personalizat la elementul dvs. Este atât de ușor.

Hai să intrăm în asta!

De ce aveți nevoie pentru acest tutorial

Pentru acest tutorial veți avea nevoie de următoarele:

• Tema Divi
• Meniul Sticky (sau orice altceva!) De pe pluginul Scroll
• Aspectul paginii de blog contabil (disponibil din cadrul Divi Builder)

Cum să faci orice element de pagină Divi lipicios

Abonați-vă la canalul nostru Youtube

Configurarea setărilor pluginului

Odată ce aveți instalat și activat meniul Sticky (sau Anything!) Pe pluginul Scroll pe tema Divi, mergeți la tabloul de bord WordPress și navigați la Setări> Meniul Sticky (sau Anything!).

Sub fila Setări de bază, actualizați opțiunile după cum urmează:

Mai întâi, va trebui să adăugați un identificator unic pentru elementul dvs. lipicios. Acesta poate fi un ID CSS sau o clasă. Apoi vom adăuga acest identificator elementului nostru din Divi mai târziu. Pentru a vă aminti ușor, voi adăuga ID-ul CSS „#sticky”.

Element lipicios: # lipicios

Apoi, trebuie să adăugați valoarea pixelilor pentru spațiul dintre partea de sus a paginii și elementul lipicios. Deoarece bara de navigare fixă ​​a lui Divi are înălțime de 54 px în mod implicit, dorim să adăugăm cel puțin 54 px pentru această opțiune, astfel încât elementul nostru lipicios să nu se suprapună peste navul fix.

Spațiu între partea de sus a paginii și elementul lipicios: 54 pixeli

De asemenea, este o idee bună să dezactivați elementul lipicios de pe mobil. Pentru a face acest lucru, trebuie să configurăm pluginul pentru a nu lipi elementul atunci când ecranul este mai mic de 980 px.

Nu lipiți elementul când ecranul este mai mic de: 980 pixeli

Salvați setările, apoi accesați fila Setări avansate și actualizați următoarele:

Pentru opțiunea index z, vrem să ne asigurăm că elementul nostru este stivuit deasupra tuturor celorlalte elemente de pe pagină, mai ales dacă planificăm elementul nostru suprapunându-se cu alte elemente din scroll. Pentru a vă asigura că se întâmplă acest lucru, setați indexul z la 99998.

Z-index: 99998

Pentru a vă face o idee despre cum sunt ordonate elementele în Divi, secțiunile au un indice z de 2, coloanele au un indice z de 9, iar antetul / bara de navigare are un indice z de 99999. Deci, practic, suntem dorind ca elementul nostru lipicios să fie cu 1 număr mai mic decât indexul z pentru navigarea în antet. Acest lucru vă va asigura că elementul lipicios se află deasupra tuturor celorlalte pagini, cu excepția nav. Acest lucru vă va fi la îndemână ori de câte ori doriți să vă opriți elementul și să îl împingeți în sus, astfel încât elementul lipicios să nu stea deasupra navului în timp ce derulați (arată dezordonat și rupt).

Apoi, putem adăuga un identificator de element „push up”. Vă puteți gândi la asta ca la un opritor pentru elementul nostru lipicios. Acesta este de obicei un element de subsol. Practic, acest lucru identifică elementul care va opri elementul lipicios atunci când derulați pagina în jos, permițând elementului lipicios să fie împins în sus cu restul paginii. Pentru acest exemplu, voi seta identificatorul cu ID-ul CSS „#stop”.

Element push-up: #stop

Salvează setările.

Acum suntem echipați cu puterea de care avem nevoie pentru a crea un element lipicios!

Realizarea unui element de pagină Divi lipicios

Pentru a vă arăta cum să faceți un element Divi lipicios, voi folosi pagina Blogului contabil Divi din pachetul de aspect contabil. Pentru a începe, creați o pagină nouă, dați un titlu paginii dvs. și implementați Visual Builder. Apoi selectați opțiunea „Alegeți un aspect premade”. Din fereastra pop-up de încărcare din bibliotecă, selectați pachetul de aspect contabil și alegeți pagina Blog.

Această pagină prezintă un formular optin de abonament prin e-mail în bara laterală dreaptă a unei secțiuni de specialitate. Într-un efort de a atrage mai multă atenție asupra acestui formular, îl putem face să devină lipicios odată ce utilizatorul parcurge pagina. Apoi, putem face ca elementul să se oprească (sau să împingă în sus) ori de câte ori ajunge în secțiunea următoare a paginii, astfel încât să nu se suprapună.

Cum să faci o coloană lipicioasă

În acest moment, totuși, trebuie să decidem ce element specific vrem să facem lipicios. Am putea face ca modulul Opțiune de e-mail să fie lipicios, dar acest lucru nu ar reprezenta modulul Social Media Follow chiar sub formular, pe care dorim să îl facem și lipicios. Și putem oferi ambelor module același identificator, deoarece ambele ar deveni lipicioase în aceeași poziție provocând suprapunere. Cel mai bun mod de a face acest lucru este de a face întreaga coloană (coloana 2) lipicioasă.

Pentru a face coloana 2 lipicioasă, deschideți setările de rând ale rândului care conține coloana pe care dorim să o vizăm. Apoi, sub fila Advanced, adăugați ID-ul CSS „lipicios”. Acesta corespunde identificatorului unic al elementului lipicios pe care l-am adăugat în setările plugin-ului nostru.

ID CSS: lipicios

(NOTĂ: Nu puneți simbolul hashtag (sau lira) în fața ID-ului aici. De asemenea, asigurați-vă că îl adăugați la ID-ul CSS și nu la clasa CSS)

Salvați setările și previzualizați versiunea live a paginii. Dacă derulați în jos, veți observa că coloana 2 (cu ambele module) va deveni lipicioasă odată ce devin 54 px din partea de sus a ferestrei și rămân în poziția respectivă pe măsură ce continuați să derulați.

Oprirea elementului lipicios la o secțiune

După cum puteți vedea, elementul continuă să rămână lipicios, astfel încât să suprapună conținutul celorlalte secțiuni de mai jos. Pentru a opri acest lucru, putem folosi identificatorul nostru „push up” (#stop) pe care l-am adăugat în setările pluginului.

Pentru a opri elementul lipicios din secțiunea de mai jos, trebuie să deschidem setările secțiunii și să adăugăm ID-ul CSS „stop”.

ID CSS: stop

Acum, vizualizați versiunea live a paginii. Observați cum se oprește elementul lipicios la secțiunea pe care ați identificat-o.

Destul de cool nu?

Cum să faci un modul lipicios

Pentru a face un singur modul lipicios, va trebui să faceți o ajustare în Divi pentru a vă asigura că elementul dvs. are indexul z corect, astfel încât să stea deasupra altor elemente de-a lungul paginii atunci când derulați. După cum am menționat mai devreme, Divi atribuie un indice z de 2 tuturor secțiunilor. Iar pluginul aplică indexul z de 99998 elementului lipicios. Dar, deoarece un modul nu poate fi comandat (sau indexat) deasupra elementului său părinte (secțiunea), modulul va rămâne în continuare în spatele altor module de pe pagină. Pentru a remedia acest lucru, trebuie să ne asigurăm și să oferim secțiunii care deține modulul nostru lipicios un index z de 99998 manual.

Pentru a ilustra acest lucru, voi folosi același aspect al paginii Blog contabil pe care l-am folosit mai devreme. Înainte de a adăuga ID-ul nostru CSS într-un modul, mai întâi, trebuie să scoatem ID-ul CSS (lipicios) pe care l-am setat pentru coloana 2. Și apoi scoatem ID-ul CSS (oprire) pe care l-am setat pentru secțiunea de mai jos. După aceea, deschideți setările modulului Social Media Follow și adăugați ID-ul CSS „lipicios” la modul.

Dacă vizualizați pagina live, veți observa că elementul lipicios este ascuns când se suprapun celelalte module din secțiunile de mai jos în timp ce derulați.

Pentru a remedia acest lucru, deschideți setările secțiunii pentru secțiunea care conține elementul lipicios al modulului follow media social. Apoi adăugați următorul CSS personalizat la elementul principal:

z-index: 99998;

Acum verificați pagina live. Observați cum pictogramele de pe rețelele de socializare vor rămâne în partea de sus a paginii (54 px din partea de sus), chiar sub navul fix și apoi rămâneți deasupra celorlalte module în timp ce derulați.

Realizarea unei secțiuni lipicioase

Pentru a face o întreagă secțiune lipicioasă, urmați același proces de adăugare a ID-ului CSS „lipicios” la secțiunea la alegere. Nu este nevoie să actualizați indexul z folosind css personalizat, deoarece pluginul o face automat pentru dvs.

Efectele Hover pot cauza erori lipicioase

Dacă aveți efecte de hover active pe întreaga pagină sau pe elementul lipicios, este posibil să întâlniți câteva erori. Dacă se întâmplă acest lucru, este posibil să fie necesar să dezactivați efectele de plutire a elementului lipicios.

Doar un element lipicios pe pagină

Pluginul permite doar un element lipicios pe pagină, deci dacă doriți să adăugați mai multe elemente lipicioase, veți avea nevoie de o soluție mai avansată (sau de un alt plugin care să accepte acest lucru).

Gânduri finale

Sper că acest articol a fost de ajutor pentru a oferi un mod răcoritor de simplu de a face orice element de pagină Divi lipicios. Folosiți-l pentru a crea submeniuri lipicioase, CTA-uri lipicioase, oferte promoționale lipicioase și aproape orice altceva la care vă puteți gândi. Distrează-te explorând posibilitățile!

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!