Kontakt

Kako Napraviti Animirani Mobilni Meni u Elementoru: Icon + Off-Canvas + CSS

Mobilni uređaji dominiraju internet prometom. Stoga, kreiranje mobilnog menija koji nije samo funkcionalan, već i vizuelno privlačan i moderan, postaje ključni deo svakog web dizajna. U ovom detaljnom vodiču, pokazaću vam kako da koristeći snagu Elementor Page Builder-a i samo malo dodatnog CSS-a, napravite zanimljiv mobilni meni sa animiranom hamburger ikonicom koja se pretvara u „X“. Ovo rešenje koristi Off-Canvas widget i pruža premium korisničko iskustvo bez potrebe za kompleksnim kodiranjem.

Zašto je Kvalitetan Mobilni Meni Presudan?

Pre nego što zaronimo u korake, važno je razumeti zašto posebna pažnja treba biti posvećena mobilnoj navigaciji. Mobilni korisnici imaju manje ekrane i manje strpljenja. Konfuzna ili spora navigacija jedan je od glavnih razloga za visok stopa napuštanja sajta. Dobar mobilni meni treba da bude:

  • Jasan i intuitivan: Sve opcije moraju biti lako dostupne.
  • Brzo responsive: Da se otvara i zatvara bez zastoja.
  • Vizuelno integrisan: Da se uklapa u celokupni dizajn vašeg sajta.
  • Interaktivan: Pruža povratnu informaciju korisniku, kao što je animirana ikonica.

Pristup pomoću Elementorovog Off-Canvas widgeta i CSS animacije rešava sve ove zahteve na elegantan način.

Šta Vam je Potrebno za Ovaj Tutorijal?

  • WordPress saj sa instaliranim Elementor Page Builder-om.
  • Elementor Pro (za pristup Offcanvas widgetu).
  • Osnovno razumevanje Elementor interfejsa.
  • Pristup Custom CSS opciji.

Korak 1: Podešavanje Off-Canvas Widgeta u Elementoru

Offcanvas widget je moćan alat koji vam omogućava da kreirate skočne prozore (obično sa strane, odozgo ili odozdo) koji sadrže bilo koji drugi Elementor widget. Za naš mobilni meni, koristićemo ga da drži našu navigaciju.

  1. Otvorite Editor: Idite na stranicu gde želite da postavite mobilnu navigaciju (obično header template ili početna stranica).
  2. Dodajte Dugme za Toggle: Prevucite widget „Icon“ na svoj header. Ovo će biti vaša hamburger ikonica. U našem slučaju, biramo ikonicu „hamburger„.
  3. Pronađite i Podesite Off-Canvas: U paleti widgeta, potražite „Offcanvas“ (pod „Theme Elements“ u Elementor Pro) i prevucite ga na stranicu. Neće biti direktno vidljiv – pojaviće se u panelu sa „Elements“ kao offcanvas instanca.
  4. Povežite Ikonicu sa Off-Canvas-om: Kliknite na Dynamic Tags, pa u levoj traci, idite na „Action“ sekciju i izaberite „Off-Canvas“. Zatim, u „Settings“ pod „Action“ postavimo opciju „Toggle Off-Canvas“ i na kraju izaberemo nas Off-Canvas u „Choose Off-Canvas widget“.
  5. Dizajnirajte Sadržaj Offcanvas-a: Kliknite na ikonu „Edit Off-Canvas“ u panelu sa elementima. Otvoriće se editor samo za taj offcanvas. U „Settings“ kartici offcanvas-a možete podesiti poziciju (npr. „Slide In From Left“), veličinu i animaciju otvaranja.

Korak 2: Animacija Hamburger Ikone pomoću CSS-a

Ovo je deo koji naš obični mobilni meni pretvara u poseban. Želimo da se hamburger ikona (tri linije) animira u „X“ kada je meni otvoren. Ovo daje korisniku jasnu vizuelnu povratnu informaciju.

Da bismo to postigli, koristićemo malo CSS-a koji menja ikonicu kada je povezani offcanvas otvoren. Elementor dodaje klasu .e-off-canvas__no-scroll u body delu, i na osnovu te klase manipulišemo efektom.

CSS

/* Icon style */
selector a{
    background-color: var(--e-global-color-secondary);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}
/* Hide the middle line when expanded */
body.e-off-canvas__no-scroll .menu-icon a.elementor-icon svg path:nth-of-type(2) {
  opacity: 0;
}
/* Transform top and bottom lines into X */
body.e-off-canvas__no-scroll .menu-icon a.elementor-icon svg path:nth-of-type(1),
body.e-off-canvas__no-scroll .menu-icon a.elementor-icon svg path:nth-of-type(3) {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.e-off-canvas__no-scroll .menu-icon a.elementor-icon svg path:nth-of-type(1) {
  transform: translate(-7px, 8px) rotate(45deg);
}
body.e-off-canvas__no-scroll .menu-icon a.elementor-icon svg path:nth-of-type(3) {
  transform: translate(-7px, -6px) rotate(-45deg);
}
/* Initial state and transitions for all lines */
.menu-icon a.elementor-icon svg path:nth-of-type(1),
.menu-icon a.elementor-icon svg path:nth-of-type(2),
.menu-icon a.elementor-icon svg path:nth-of-type(3) {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Gde dodati ovaj CSS?

  1. U Elementor editoru, idite na Site Settings (ikonu zupčanika) > Custom CSS.
  2. Ili, za konkretnu stranicu/widget, selektujte dugme, idite na Advanced Tab > Custom CSS i unesite kod u polje za taj widget.
  3. Možete ga dodati i u vašu temu u Appearance > Customize > Additional CSS.

Eksperimentišite sa vrednostima (rotate, translate) i transition vremenima da postignete željeni efekat.

Korak 3: Finalna Podešavanja i Responsivnost

Vaš mobilni meni sada je funkcionalan i ima animiranu ikonu. Vreme je za finalne doterivanja:

  1. Sakrij Desktop Meni na Mobilnim: Selektujte vaš glavni desktop meni, idite na Advanced Tab > Responsive, i uključite Hide On za „Mobile“. To će sakriti desktop navigaciju na malim ekranima.
  2. Prikaži Ikonicu samo na Mobilnim: Selektujte svoju hamburger ikonicu. Idite na Advanced Tab > Responsive, i uključite Hide On za „Desktop“ i „Tablet“. Zatim, podesite Display da bude „Show“ samo za „Mobile“. Ovo osigurava da se dugme vidi samo kada je potrebno.
  3. Testirajte Funkcionalnost: Uvek koristite Elementorov Responsive Mode da testirate kako meni funkcioniše na telefonima i tabletima. Proverite da li se off-canvas zatvara klikom na linkove u meniju.
  4. Dodatni CSS za Off-Canvas: Možete dodati senku, zaobljene ivice, ili pozadinsku blurnu efekt vašem offcanvas prozoru da izgleda savremenije.

Video objašnjenje:

Snaga Jednostavnih Poboljšanja

Kreiranje ovakvog mobilnog menija nije samo tehnički trik – to je unapređenje korisničkog iskustva koje može značajno da utiče na angažman i konverzije na vašem sajtu. Kombinacijom intuitivnog Off-Canvas widgeta iz Elementor Pro i prilagođenog CSS-a za animaciju, postigli smo premium izgled bez pisanja stotina linija koda.

Ovaj pristup vam daje kontrolu i fleksibilnost da dizajnirate meni koji savršeno odgovara vašem brendu. Ne bojte se da eksperimentišete sa različitim animacijama, pozicijama off-canvas-a i paletama boja.

Želite li da unapredite svoje veštine dalje?

Ako vam se svideo ovaj tutorijal i želite da dublje zaronite u svet WordPressa, Elementora ili web dizajna, nudim mentorstvo 1 na 1 i mogućnost saradnje na kompleksnijim projektima. Bilo da ste početnik koji želi da izgradi čvrst temelj ili iskusniji korisnik koji teži naprednim tehnikama i optimizaciji, možemo raditi zajedno da postignete vaše ciljeve.

Kontaktirajte me da razgovaramo o vašim potrebama i kako mogu da vam pomognem da ubrzate svoj napredak.