Salut,
Am discutat intr-o postare anterioara despre cum sa iti creezi un header si un footer folosind Elementor Pro si de data asta am zis sa venim cu cateva imbunatatiri asupra lor.
Pentru inceput putem discuta despre cum sa iti faci header-ul sticky folosind Elementor Pro si pentru acest aspect nu sunt decat cativa pasi super simplii de urmat:
1. Du-te in Dashboard -> Theme Builder -> Header & Footer
2. Pune mousele peste template-ul de header si apasa “Edith with Elementor/Edit”
3. Odata incarcata pagina selecteaza sectiunea pe care doresti sa o faci sticky
4. Du-te in tabul Advance -> Motion effects
5. In sectiunea denumita Stiky -> Selecteaza Top
Asta este tot.
Acestia sunt toti pasii pentru a avea un header sticky, dar acum trebuie sa ne ocupa si de partea de responsive. Trebuie sa fim siguri ca headerul nostru arata bine pe toate dispozitivele de pe care ar putea intra un potential client. Acest lucru nu este un moft, este o necesitate, din moment ce peste 60% din cei care navigheaza pe net la nivel global, o fac de pe dispozitive mobile. Un alt factor important este Google, care, la randul sau, cere acest lucru. Daca website-ul tau nu este optimizat pentru dispozitive mobile, Google il va declasa in cautari.
Deci sa incepem!
Elementor iti permite sa lucrezi direct in modul de “telefon” printr-o metoda super usoara.
Daca inca esti in modul de editare cu Elementor mergi in coltul din stanga jos si o sa observi 5 icoane mici si butonul de save. Apasa pe cea cu “Laptop & telefon” si un toolbar se va deschide sus. Acest toolbar are ca scop trecerea dintr-o rezolutie de desktop intr-una de tableta/telefon.
Apasa pe icoana telefon si site-ul o sa ajunga in rezolutia telefon. Acum nu mai trebuie decat sa aranjam header-ul sau footer-ul nostru in varianta telefon. In acest moment toate elementele pe care le contine headerul iti permit sa le modifici marginile, paddingul, marimea si multe alte optiuni, doar in viaranta mobil. Deci varianta de desktop nu o sa fie afectata.
Un mic trick, daca ai nevoie sa inversezi coloanele in varianta mobil, sfatul meu este:
1. Sa selectezi “sectiunea”
2. Mergi in tab-ul Advance
3. Poti face scroll pana jos la tab-ul “Responsive”
4. O sa gasesti 2 optiuni denumite “Revers column for mobile/tablet”
Acum sa discutam putin si despre footer. O sa va prezint alegerile pe care le-am facut noi in footer si de ce am ales asa, dar si cum am realizat footer-ul site-ului nostru.
Pentru inceput acesta este footerul nostru.
Dupa cum se vede si in poza, dar si pe website, am ales un footer simplu, care contine un CTA si anume “hai sa vorbim”, dar si adresa de email, plus cele 2 numere de contact, copyrights si un link catre politica de cookies.
Ai observat bine, sunt Politica de cookies apare de 2 ori. Am facut acest lucru pentru ca acest link apare o data pe dekstop si o data pe mobil. Am ales sa facem asa pentru ca am dorit ca designul nostru pe varianta de mobil sa fie dupa gusturile noastre.
In varianta mobil, footer-ul arata asa:
In footer se pot adauga mai multe elemente, nu doar cele prezentate de noi. De fel acolo regasim inca o data navigatia sau link-uri utile, logo-ul, adresa fizica sau harta, link-uri catre social media si alte elemente specifice ficarei nevoi. Noi am ales acest design simplu, pentru ca viziunea noastra pentru website-ul PixelRomanesc a fost una de minimalism.
Partea practica din aceasta postare, care este legata de footer este aceea de duplicare de elemente si ascunderea lor in functie de nevoie, exact cum v-am aratat si in pozele de mai sus. Acest lucru se obtine foarte usor:
- Se duplica elementul necesar
- Se trage cu functia “drag & drop” in locul in care este nevoie
- Mergem in tabul Advance/Avansat si dam scroll pana la partea de responsive
- Apasam pe toggle-ul de Hide this on mobile / Ascunde pe mobil
- Mergem pe elementul clonat (cel pe care il vrem afisat doar pe mobi) si facem aceeasi pasi ca mai sus, dar de aceasta data apasam pe Hide this on dekstop / Ascunde pe dekstop
Aplicand regulile de mai sus, putem sa afisam cate elemente dorim pe dekstop/tableta/mobil. Aceasta metoda este una eficienta cand dorim sa avem aceleasi elemente in locuri diferite, elemente diferite in variante de responsive diferite sau pur si simplu dorim ca designul website-ului in varianta mobil sa fie diferita de cea in varianta dekstop.
Ca o recomandare personala, nu va sfatuiesc ca varianta mobil sa fie foarte diferita de cea de pe dekstop pentru ca poate creea confuzie, dar recomand folosirea acestei metode cand dorim sa obtinem un design de calitate.
Daca ai nevoie de mai multa flexibilitate in ceea ce priveste aranjarea coloanelor pe mobil/tableta ai nevoie de un plugin precum Crocoblock (care iti permite ordonarea pe fiecare dispozitiv dupa bunul planc) sau sa iti faci propriu design strict pe mobil si sa le ascunzi bazat pe dispozitive, din sectiunea Advance -> Responsive, dar o sa acoperim aceste aspect cu alta ocazie. Pentru inceput mentine-ti site-ul simplu si curat.
Daca ai ajuns pana aici, iti multumesc pentru lecturat!
Sa ai o zi faina,
Robert P. – Echipa Pixelromanesc.
