Marketing Srbija – Sajtovi + SEO

FLOATING HEADER ELEMENTOR FIXED TOP CSS

Kako postaviti Plutajući Fixed Header u Elementor FREE (no plugin)

Naša agencija koristi 4 jednostavne linije prilagođenog CSS-a za dodavanje u plutajući header/ zaglavlje. Na kraju ovog članka, takođe će biti uključeni napredni dodaci vašem lepljivom headeru (meniju) i Elementor koji vam pomažu da promenite veličinu slike pri pomeranju, promenite boju pozadine lepljivog zaglavlja na pomeranju i još mnogo toga.

Prvo ćemo napraviti naše osnovno zaglavlje i primeniti ga na sve stranice u Elementoru. Da biste pristupili alatu za pravljenje zaglavlja, idite do šablona na pozadinskom dashboardu administratora, a zatim kliknite na alatku za pravljenje tema. Ovde može biti od koristi plugin Elementor Header Footer builder koji je besplatan.

Takođe kako bi dodali Custom CSS trebaće vam još jedan plugin SiteOrigin CSS koji je takođe besplatan za instalaciju. Dodate ga u sekciji Plugins > Add New i u serach polje upišite naziv plugina koji želite.

Postavka CSS koda

Na kartici za oblikovanje u Elementoru možete da manipulišete da pozadina zaglavlja bude providna ili obojena. U ovom primeru, želimo da naše zaglavlje preklopi naš početni deo headera, što znači da ćemo pozadinu držati transparentnom. Da bismo to uradili, postavili smo boju pozadine sekcije na rgb(0,0,0).

Obavezno promenite HTML oznaku sa podrazumevane na „Header“.

Zatim kada podesite Header menu na mobilnoj ili desktop verziji, klikom na kolonu (6 tačkice) u opciji Advanced imate opciju CSS ID, tu dodajemo naš custom naziv. Mi smo izabrali primer “stickey-header”. Ovaj deo ćemo kasnije upotrebiti u CSS kodu.

Sada se rvatimo u Dashboard i sa leve strane imamo novu opciju Custom CSS (jer smo dodali plugin prethodno). Tu ćemo dodati sledeći kod:

#stickey-header {
    position: fixed;
    width:100%;
    top:0;
    z-index: 9999;
}

u ovom delu primećujemo da je #vašnazivkoda upravo onaj koji smo stavili kao CSS ID u polju samog dela koji želimo da fixiramo kada skrolujemo.

Evo još jednog koda koji možete dodati u CSS ukoliko Vam prvi nije rešio problem na svim stranama.

html,
body{
width:100%;
overflow-x:hidden;
}   

Za nas, dva najvažnija efekta za bilo koje lepljivo zaglavlje/header/menu u Elementoru su sledeća:

Promena pozadine iz transparentne u boju kada vaš korisnik skroluje nadole po ekranu

Ovo je važno jer osigurava da će elementi menija biti vidljivi kada se pomerate nadole po ekranu. Tipično, logo se sastoji od fotografije koja je tamna, što znači da postoji adekvatan kontrast da bi vaš posetilac mogao da pogleda i klikne na vašu navigaciju. Međutim, dok se pomerate nadole po ekranu, promena boje pozadine na lepljivom zaglavlju Elementor-a čini ga mnogo lakšim za čitanje i korišćenje.

Promena slike na skrolu

U mnogim slučajevima, početni meni ima logo kompanije koji prikazuje ime unutar njega. To ga čini širokim odnosom, nešto poput 16 sa 9, koji se može smanjiti dok posetilac skroluje niz ekran.

Smanjenjem veličine logotipa kompanije, ukupna visina lepljivog zaglavlja u Elementoru se takođe smanjuje, maksimizirajući količinu okvira za prikaz koji korisnik može da koristi za gledanje sadržaja.

Na primer, naš logo možemo imati kao onaj pravi kada se nalazi na vrhu stranice. Ali logo se zatim menja ulevo (i smanjuje) kada korisnik skroluje nadole, minimizirajući visinu svega.

Postoje nekoliko besplatnih i PRO plugina koja vam daju ovu opciju, naš savet je uvek da smanjite broj plugina i stvari radite kodom jer su sigurnije i bezbednije za duži period.

Podeli sa prijateljima:
Facebook
WhatsApp
LinkedIn
Email
Scroll to Top
Call Now Button