Multi Slider

SKU
Multi Slider

Címlapi slider elemek szerkesztését lehetővé tévő modul, amelyben valamennyi slide-hoz beállítható külön desktop és tablet-mobil kreatív. A slide-ok időzíthetők és egy installáció alá tartozó webshoponként, boltnézetenként kezelhetők.

Ismertető

A Magento 2-höz fejlesztett Multi Slider modul segítségével az admin felhasználók tetszőleges számú slider elemet hozhatnak létre egy címlapi sliderben. Ezek az admin felületen egy külön konfigurációs panelben érhetők el. A sliderhez használt entitások egy admin gridben látszanak, boltnézetenként szűrhetők és elemenként szerkeszthetők. A webshop adminisztrátorok meg tudnak adni címet, alcímet, slider hivatkozást, szerkeszthető az egyes slide-ok sorrendje, továbbá fel lehet tölteni a slider képét, és meg lehet határozni az elemek grafikai megjelenését. A sliderhez kapcsolódó gombfelirat nem szerkeszthető.

A reszponzív felhasználói élmény támogatása céljából a Multi Slider modulbanLehetőség van külön desktop és mobil nézetre szánt slider kép feltöltésére, így eltérő kép küldhető ki a mobil és desktop / wide desktop állapotokra. A tablet verzió esetében frontend fejlesztési kérdés, hogy melyiket hívjuk meg. A slide-ként feltöltött képekhez alt description állítható be.

Amennyiben szeretnénk, az egyes slide-oknál datepicker-rel beállítható egy megjelenési idő, hogy mikor jelenjen meg és meddig legyen kint a felületen, így a slide-ok publikálása vagy eltüntetése időzíthető.

A modul igény esetén továbbfejleszthető további paraméterezhető funkciókkal.

Beállítások

A modul rendelkezik általános beállításokkal, valamint az egyes slide-okat is paraméterezhetjük egy külön felületen.

Általános beállítások

A modul általános beállításai a Stores » Settings » Configuration » Oander Extensions » Multi Slider vagy az Oander » Multi Slider » Settings menüpontból érhetők el. Itt az alábbi opciókat találjuk:

  • Enabled: Engedélyezve van-e a modul az adott boltnézetben.
  • Base Color for Backgrounds: A sliderek háttérszínének alapértelmezett értéke hexa kódban (pl. #e7eff1).
  • Scroll Time: Milyen időközönként váltson automatikusan a slider. Az értéket ezredmásodpercben adhatjuk meg (pl.: 5000 = 5 másodperc). Amennyiben 0, a slider nem lapoz automatikusan.

Slide-ok paraméterezése

Az egyes slide-okat az Oander » Multi Slider » Slider Images felületen tudjuk szerkeszteni, illetve itt hozhatunk létre újat az Add New Slider gomb megnyomásával. Egy slide az alábbi beállításokkal rendelkezhet, melyek öt csoportba vannak osztva:

General

  • Name: A slider neve, vagyis a "nagy szöveg", cím ami megjelenik rajta. Kötelező mező.
  • Name Color: Opcionálisan megadható a címszöveg színe egy színválasztó segítségével. Amennyiben üres, a cím a sablonban meghatározott alapértelmezett színt kapja meg.
  • Text: A slide-on megjelenő kisebb szöveg. Kötelező mező.
  • Text Color: Opcionálisan megadható a kisebb szöveg színe egy színválasztó segítségével. Amennyiben üres, a cím a sablonban meghatározott alapértelmezett színt kapja meg.
  • Link: Opcionálisan megadható egy URL amire a slide mutat, ez lehet horgonylink is.
  • Status: Aktív-e vagy sem az adott slide. Kötelező mező.
  • Sort: Hányadik legyen a sorban az adott slide. Kötelező mező.
  • Tag: Megadhatunk taget, amivel könnyebben csoportosíthatók az egyes slide-ok.
  • Schedule type: Mindig látszódik-e az adott slide, vagy csak egy előre meghatározott időtartományban. Kötelező mező.
  • Set slide schedule from: Kezdőidőpont amikortól látszódik az adott slide (év, hó, nap, óra, perc, másodperc).
  • Set slide schedule to: Végidőpont ameddig látszódik az adott slide (év, hó, nap, óra, perc, másodperc).

Image in Websites

  • Itt adhatjuk meg, hogy mely boltnézetekben jelenjen meg az adott slide.

Image Upload

  • Image: Az asztali nézetben megjelenő kép. Kötelező mező.
  • Image Alt Description: Az asztali nézetben megjelenő kép alt descriptionje. SEO-szempontból erősen ajánlott kitölteni.
  • Image for Mobile: A mobilnézetben megjelenő kép. Kötelező mező.
  • Image for Mobile Alt Description: A mobilnézetben megjelenő kép alt descriptionje. SEO-szempontból erősen ajánlott kitölteni.

Button & Bubble

Itt adhatjuk meg az opcionálisan megjelenő buborékszöveg beállításait, illetve testre szabhatjuk a CTA gomb megjelenését.

  • Bubble Text: A buborékban megjelenő szöveg. Amennyiben üres, nincs buborék a slide-on.
  • Bubble Text Color: A buborékban megjelenő szöveg színe adható meg egy színválasztó segítségével. Amennyiben üres, a cím a sablonban meghatározott alapértelmezett színt kapja meg.
  • Custom Bubble Color: A buborék színe adható meg egy színválasztó segítségével. Amennyiben üres, a buborék a sablonban meghatározott alapértelmezett színt kapja meg.
  • Custom Bubble Hover Color: A buborék hover színe adható meg egy színválasztó segítségével. Amennyiben üres, a buborék a sablonban meghatározott alapértelmezett hover színt kapja meg.
  • Custom Button text: A gombon megjelenő egyedi szöveg. Amennyiben üres, a gombon az alapértelmezett szöveg fordításfájlból érkező fordítása jelenik meg.
  • Custom Button Text Color: A gombon szereplő szöveg színe adható meg egy színválasztó segítségével. Amennyiben üres, a gombszöveg a sablonban meghatározott alapértelmezett színt kapja meg.
  • Custom Button Color: A gomb színe adható meg egy színválasztó segítségével. Amennyiben üres, a gomb a sablonban meghatározott alapértelmezett színt kapja meg.
  • Custom Button Hover Color: A gomb hover színe adható meg egy színválasztó segítségével. Amennyiben üres, a gomb a sablonban meghatározott alapértelmezett hover színt kapja meg.

Background

A slide hátterét szabhatjuk testre ebben a menüpontban.

  • Use Background by
    • Default Background Settings: Az általános beállításokban megadott háttérszínt kapja meg a slide.
    • Background Color: A lentebb megadott háttérszínt kapja meg a slide.
    • Gradient Settings: A lentebb megadott színátmenet-beállításokat kapja meg a slide.
  • Background Color: A slide háttérszíne adható meg egy színválasztó segítségével.
  • Start Color: A színátmenet kiindulószíne.
  • End Color: A színátmenet végszíne.
  • Gradient Angle
    • Top to Bottom: Lineáris színátmenet fentről lefelé.
    • Left to Right: Lineáris színátmenet balról jobbra.
    • Center to Edges: Kör alakú színátmenet a slide közepéből indulva a sarkok felé.