Un ghid pentru înțelegerea și utilizarea poziției fixe în Divi

Proprietatea poziției fixe este un tip de poziție crucială pentru a afla cum să se utilizeze corect. Elementele fixe sunt importante pentru îmbunătățirea experienței utilizatorului pe site-ul dvs. web. Anteturile fixe rămân vizibile atunci când parcurgeți o pagină web, facilitând navigarea utilizatorilor pe site. Barele laterale fixe mențin vizibile CTA-urile și opțiunile de e-mail importante, sporind conversiile. Și același lucru este valabil și pentru barele de notificare fixe, ferestrele pop-up și multe altele. Odată ce vom înțelege cum funcționează poziția fixă ​​și cum să o folosim corect în Divi, vom avea un instrument puternic de proiectare pentru a duce site-urile noastre Divi la nivelul următor.

În această postare vom acoperi:

• O prezentare generală a celor patru tipuri de poziționare ale lui Divi
• Cum poziția fixă ​​„poziționează” un element în Divi
• Utilizarea opțiunilor de poziție fixă ​​din Divi
• Sfaturi de reținut atunci când utilizați poziția fixă
• 6 moduri utile de a utiliza poziția fixă ​​în Divi

Verifică!

Prezentare generală a celor patru tipuri de poziționare ale lui Divi

Poziția fixă ​​este unul dintre cele patru tipuri de poziții disponibile în Opțiunile de poziție ale lui Divi. Iată mai jos o prezentare rapidă a fiecăruia.

Static (implicit)

Din punct de vedere tehnic, elementele statice nu sunt „poziționate”, deoarece rămân la fluxul normal sau la ordinea elementelor de pe pagină și nu răspund la proprietățile de sus, dreapta, jos și stânga ca și alte elemente poziționate (motiv pentru care nu compensările sunt disponibile în Divi pentru elementele aflate în poziția statică / implicită). În Divi, când alegem poziția implicită pentru un modul, alegem poziția statică. De asemenea, merită menționat faptul că unele elemente din Divi (cum ar fi rândurile și secțiunile) vor avea în mod implicit o poziție relativă (nu poziția statică).

Relativ

Elementele relativ poziționate sunt un fel de elemente statice în sensul că urmează fluxul normal al paginii. Diferența principală este că elementele relativ poziționate pot fi poziționate folosind proprietățile de sus, jos, stânga și dreapta. De asemenea, spre deosebire de elementele statice, ele pot fi, de asemenea, poziționate folosind proprietatea Index Z.

Pentru mai multe informații, consultați ghidul nostru de înțelegere și utilizare a poziției relative în Divi.

Absolut

Un element absolut poziționat iese din fluxul normal de documente și, prin urmare, nu se creează spațiu real pe pagină pentru element. Ne putem gândi la acesta ca la un element care pluteste deasupra celorlalte elemente de pe pagină care ocupă spațiu real. Acesta va fi poziționat în raport cu cel mai apropiat container părinte poziționat.

Pentru mai multe informații, consultați ghidul nostru pentru înțelegerea și utilizarea poziției absolute în Divi.

Fix

La fel ca poziția absolută, elementele cu poziția fixă ​​vor ieși din fluxul normal al paginii și nu vor avea spațiu real creat în pagină. Diferența cheie între absolut și fix este că poziția fixă ​​este relativă la fereastra browserului sau la fereastra de vizualizare. Cu alte cuvinte, indiferent unde se află elementul în fluxul normal al paginii, odată ce i se acordă o poziție fixă, poziția sa se va raporta acum direct la fereastra browserului. Putem utiliza proprietățile de sus, jos, stânga și dreapta pentru a poziționa elementul în fereastra de vizualizare. Deoarece elementele fixe vor plasa adesea în spatele sau în fața altor elemente de pe pagină, Indexul Z va ajuta la comanda elementelor fixe deasupra altora.

NOTĂ: Există un alt tip de poziționare în CSS numit lipicios. Un element poziționat lipicios se comportă ca un element relativ poziționat până când derulăm la containerul său (la un moment dat determinat de valoarea de sus). Apoi elementul devine fix (sau blocat) până când utilizatorul derulează până la capătul containerului. Cu toate acestea, poziția lipicioasă poate fi puțin imprevizibilă, deoarece alți factori pot inhiba funcționalitatea. Poziționarea lipicioasă va fi integrată în Divi în viitorul apropiat.

Cum poziția fixă ​​„poziționează” un element în Divi

După cum sa menționat în prezentarea generală, tipul de poziție fixă ​​este similar cu poziția absolută, deoarece elementul iese din fluxul normal al documentului (codul HTML de pe pagină). Ieșirea din fluxul documentului înseamnă că elementul nu va lăsa în urmă spațiul real în care a fost localizat inițial pe pagină. Iată o ilustrare a unui modul cu o poziție relativă schimbată într-o poziție fixă. Observați cum zona pe care a creat-o / ocupat inițial în cadrul coloanei a dispărut și modulul este acum fixat în partea stângă sus a ferestrei browserului.

Diferența mare între fix și absolut este că, spre deosebire de poziția absolută care este relativă la containerul său părinte, poziția fixă ​​este relativă la fereastra browserului sau la fereastra de vizualizare. Acesta este motivul pentru care elementele fixe spun că utilizatorul derulează o pagină în jos, iar elementele poziționate absolut nu.

Iată o ilustrare a modului în care funcționează cele trei poziții (relative, absolute și fixe) atunci când derulați pagina în jos. Observați că modulul fix rămâne la locul său (poziționat în raport cu browserul) pe măsură ce utilizatorul derulează.

Utilizarea opțiunilor de poziție fixă ​​din Divi

În Divi, puteți da oricărui element o poziție fixă ​​selectând opțiunea poziție fixă ​​în comutarea grupului de opțiuni Poziție din fila Avansat. Veți găsi, de asemenea, opțiunile suplimentare de poziție fixă ​​(locație, compensări, index z) odată ce poziția relativă a fost selectată.

Reglarea locației de bază a poziției fixe

După ce selectați poziția fixă, puteți alege o locație de bază utilizând interfața vizuală de locație. În funcție de locația de bază pe care o selectați, noile controale X și Y Offset vor deveni disponibile.

Utilizarea Offset-urilor cu poziția fixă

Comenzile Offset vertical și orizontal vă permit să reglați în continuare locația de bază a elementului fix pe axa sa de locație.

Valorile Offset Origin și Offset vor funcționa împreună pentru a ne poziționa elementul oriunde dorim în fereastra de vizualizare a browserului. În acest exemplu, avem un modul care are o poziție fixă, o origine offset stânga sus, un offset vertical de 50px și un offset orizontal de 50px. Observați cum valorile offsetului vor muta elementul departe de originea offsetului orizontal și / sau vertical (departe de colțul din stânga sus al browserului).

Când utilizați valori de compensare orizontale și verticale în Divi (cum ar fi proprietățile de sus, de jos, stânga și dreapta în CSS) pentru un element fix, este important să ne amintim că acele valori vor poziționa elementul în raport cu fereastra de vizualizare a browserului. Proprietatea Index Z este de asemenea utilă cu un element fix. Deoarece de cele mai multe ori doriți ca aceste elemente fixe să rămână în fața celorlalte elemente de pe pagină, va trebui să îi acordați o valoare mare a indexului Z (cum ar fi 9999).

Utilizați ancore glisabile pentru a repoziționa elemente fixe pe pagină

Când schimbați poziția unui element în Fix, o ancoră glisabilă va apărea atunci când treceți peste element. Acest lucru vă permite să trageți elementul pentru a-i schimba poziția. Pe măsură ce repoziționați elementul, decalajul X și Y al acestuia este ajustat în setările modulului.

Câteva sfaturi pentru utilizarea poziționării fixe

Ajustați elementele fixe pentru mobil

Nu uitați, puteți seta diferite poziții și decalaje pe diferite afișaje ale dispozitivelor pentru designuri receptive. De exemplu, este posibil să doriți un antet fix pe desktop, dar nu pe mobil. Și barele laterale fixe au sens pentru desktop, dar nu sunt cu adevărat posibile pe ecranul unui telefon mobil. Pentru a face comutatorul, puteți regla opțiunea de poziție în Divi la Relativ pe tabletă și telefon. Acest lucru îl va readuce la poziția inițială în fluxul documentului.

Creați spațiu pentru elemente fixe

Deoarece poziția fixă ​​plasează elemente în afara fluxului documentului, acestea stau deasupra conținutului de pe pagină. Deci, dacă nu doriți ca elementul fix să ascundă conținutul, va trebui să creați spațiu pentru elementul fix. Acest lucru se poate face în mai multe moduri, dar de obicei se realizează prin adăugarea de padding sau margine la aspectul paginii.

Un bun exemplu este o bară laterală fixă. Dacă doriți să adăugați o bară laterală fixă ​​la șablonul de pagină din Divi, ar trebui mai întâi să vă asigurați că lățimea zonei principale de conținut este redusă pentru a crea spațiul necesar pentru bara laterală fixă. Deci, dacă utilizați o secțiune pentru a crea bara laterală, puteți da secțiunii o poziție fixă, o înălțime de 100% și o lățime de 300 px.

Apoi, ar trebui să acordați celeilalte secțiuni care dețin modulul de conținut post (zona principală de conținut a paginii) o marjă stângă de 300 px pentru a găzdui lățimea barei laterale din partea stângă a paginii.

Utilizați un index Z mai mare pentru elementele fixe

Cu excepția cazului în care elementului fix i s-a acordat spațiu adecvat pentru acesta pe pagina dvs., acesta se va suprapune cu celălalt conținut de pe pagină. În majoritatea cazurilor, veți dori ca elementul fix să rămână vizibil (deasupra), deoarece se ciocnește cu alte elemente de pe pagină în timp ce derulați. Pentru a face acest lucru, puteți adăuga un index Z mai mare la elementul fix pentru a vă asigura că rămâne deasupra tuturor celorlalte conținuturi din spațiul Z. Dacă nu știți ce valoare să dați, puteți adăuga un număr mare ca 9999.

6 moduri de a utiliza poziția fixă

# 1 Anteturi fixe

Una dintre cele mai bune utilizări ale noilor opțiuni de poziție fixă ​​este crearea de antete fixe. Folosind Divi Theme Builder, puteți crea un antet complet personalizat și puteți repara întreaga secțiune.

Cum să postezi

Iată o postare despre cum să construiți un antet fix în Divi:

• Cum să creați un antet fix cu opțiunile de poziție ale lui Divi

# 2 Fixed Footer Bars

La fel ca anteturile fixe, unele site-uri web beneficiază și de subsoluri fixe sau bare de subsol. Acest lucru permite utilizatorilor să păstreze informații proeminente în prim plan într-o locație mai subtilă. Barele de subsol fixe sunt excelente pentru telefoanele mobile, deoarece sunt foarte aproape de mâncărimea degetelor mari pentru a face clic pe un buton.

Postări de instrucțiuni

Iată câteva postări despre cum să construiți o bară de subsol fixă ​​în Divi:

• Cum să creați o bară de subsol fixă ​​pentru tema dvs. Divi
• Cum se creează bare de subsol mobile fixe cu Divi
• Cum se creează o bară de contact mobilă (fixă) în Divi

# 3 Bare laterale fixe / Meniuri verticale

Barele laterale fixe păstrează lucruri precum meniurile, opțiunile de e-mail și CTA-urile disponibile pentru vizitatori în timp ce navighează pe site-ul dvs. Și, dacă doriți, puteți adăuga o defilare cu defluire la bara laterală fixă ​​pentru a avea o bara laterală fixă ​​defilabilă drăguță, cu tone de conținut.

Postări de instrucțiuni

Iată o postare despre cum să construiți o bară laterală fixă ​​în Divi:

• Cum să construiți o bară laterală fixă ​​receptivă cu legături de ancorare cu derulare netedă cu Divi
• Cum să creați un meniu de navigare vertical (fix) pentru site-ul dvs. Divi

# 4 Butoane fixate Back-to-Top

Butoanele Back-to-Top sunt de obicei fixate în partea dreaptă jos a unui site web, întotdeauna disponibile pentru ca utilizatorii să facă clic pentru a le trimite înapoi în partea de sus a paginii.

Iată o postare despre cum să construiți butoane fixe back-to-top în Divi:

• Cum să creați modele personalizate lipicioase (fixe) înapoi la început cu Divi

# 5 Meniuri fixe

Majoritatea meniurilor care alunecă sau pop-up au o poziție fixă. Acestea sunt excelente și pentru dispozitive mobile.

Iată o postare despre cum să construiți un meniu fix în Divi:

• Cum să creați un meniu Slide-In Responsive cu Divi's Theme Builder

# 6 Casete de notificări corecte, apeluri la acțiune, înscrieri prin e-mail, etc ...

Iată o postare despre cum să construiți o casetă de notificare fixă ​​în Divi:

• Cum să adăugați un apel la acțiune care poate fi închis în orice colț al șablonului de pagină din Divi

Gânduri finale

Nu veți ajunge prea departe în dezvoltarea web înainte de a întâlni nevoia de a utiliza poziția fixă. Este utilizat în multe elemente cheie care alcătuiesc un site web. În Divi, poziția fixă ​​este la doar un clic distanță, dar este important să înțelegeți cum funcționează pentru a o utiliza bine. Sperăm că acest articol v-a ajutat să înțelegeți cum să utilizați mai bine poziția fixă ​​în Divi, astfel încât să puteți duce următorul proiect la noi culmi.

Care a fost experiența dvs. cu tipul de poziție fixă?

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!