Évek óta törekszünk arra, hogy az Unas rendszerben választható kinézetek széles mozgásteret adjanak a webshopok számára. Mivel minden webshop más és más, nem lehet azt mondani, hogy egy sablon csak divat termékekre vagy épp szerszám webshopnak alkalmas. Megérkeztünk az Oberon kinézetcsaláddal, aminek ezer arca lehet. Már első pillantásra is jól látszik rajta, hogy egy sokoldalú, látványos és tudatosan felépített megjelenésről van szó, amely többféle termékkörhöz és márkavilághoz is könnyedén alkalmazkodik. Az Oberon egyszerre modern és átlátható, miközben elég karakteres ahhoz, hogy valódi vizuális élményt adjon a látogatóknak.
A névválasztás sem véletlen: Oberon az Uránusz második legnagyobb holdja, amelyet a mai napig nem ismerünk teljes egészében. Változatos, részben feltáratlan világa remekül illik ehhez a kinézetcsaládhoz. A tervezés elején mi is azt hittük, hogy a Tritonhoz képest nem lehet már több testreszabási lehetőség, de a végére mégis bővült a kör. Akár elegáns, prémium megjelenést keresel, akár egy markánsabb, játékosabb vagy praktikusabb webshop design a célod, az Oberonban jó eséllyel megtalálod azt az irányt, amely a legjobban passzol a saját márkádhoz. Ismerd meg te is a részleteket ebben a blogcikkünkben!
Általános jellemzők
Az Oberont nem lehet röviden jellemezni, mivel a testreszabási lehetőségeinek köszönhetően nem csupán egy sablonról van szó, számtalan különböző hangulat kialakítható vele. Mégis az egyik legkarakteresebb eleme a látványos, többoszlopos megamenü, amely egyszerre teszi elegánssá és rendkívül átláthatóvá a navigációt. Segítségével a nagyobb termékkínálattal dolgozó webáruházak is jól strukturáltan, könnyen befogadható formában tudják megjeleníteni kategóriáikat és alkategóriáikat, így a vásárlók már az első pillanatban gyorsabban eligazodhatnak a kínálatban. Ez a típusú vízszintes menü, amiben a főkategóriák asztali nézetben a fejlécben egymás mellett helyezkednek el, korábban a méltán népszerű Polaris és Antares sablonok jellemzője volt.
Manapság az asztali kijelzők már nem csupán FullHD felbontásúak, emiatt az Oberont UHD (4K) monitorokra is optimalizáltuk, a tartalom 2448 px szélességig terjedhet. A Tritonban jól bevált jobbról beúszó ablakokat megtartottuk, így a kosár, belépés, profil, nyelv és pénznemváltó ilyen formában érhető el. Ha a kategóriákat nem vízszintesre állítod be, akkor azok balról úsznak be. A sablonba még több módosítható elem került, így biztosan találsz helyet a célközönségednek szóló tartalmaknak, illetve az ösztönző elemeknek.
Alverziók
Az Oberon kinézetcsaládot is négy különböző hangulatban mutatjuk meg, hogy könnyebben megtaláld azt a megjelenést és színvilágot, amely a legjobban illik a márkádhoz és termékpalettádhoz. Bár az egyes változatok funkcionalitásban nem térnek el egymástól, vizuális világuk, karakterük és alapérzetük mégis egészen más benyomást kelt, mintha négy különböző sablonról lenne szó. Így nem nulláról kell elindulnod: elég kiválasztani azt az irányt, amelyik legközelebb áll hozzád, majd az admin felületen tovább finomítani a részleteket.
Letisztult, de karakteres jelenlét
Az Oberon első változata a rendezett, modern megjelenést helyezi előtérbe. Tágas elrendezése, nagy méretű képei és karakteres vizuális világa különösen jól áll azoknak a webáruházaknak, ahol a termékek megjelenése önmagában is erős vonzerő, de mégis szükség van egy markáns vezérszínre a márka miatt, amit itt kékre állítottunk. Ideális választás lehet műszaki cikkekhez, háztartási gépekhez, konyhai eszközökhöz vagy bármilyen olyan kínálathoz, ahol fontos az átláthatóság, a bizalom és az elegáns összhatás.
Lágy elegancia, kifinomult részletek
Az Oberon második verziója a fekete-fehér sablon, finom vizuális hatásokra és az igényes márkamegjelenésre épít. Légies elrendezése, harmonikus képi világa és prémium összhatása különösen jól illik szépségápolási, kozmetikai, parfüm-, divat- vagy lifestyle termékeket kínáló webáruházakhoz. Olyan márkáknak lehet ideális választás, amelyek nemcsak eladni szeretnének, hanem hangulatot, stílust és bizalmat is közvetítenek már az első pillanatban.
Kompakt elrendezésben a lendület
Az Oberon harmadik változata energikusabb, markánsabb vizuális világot képvisel, amely azonnal megragadja a látogatók figyelmét. Kompakt, egysoros fejlécet állítottunk be, piros vezérszínnel, szögletes elemekkel, ami különösen jól működik műszaki, elektronikai, hangszeres, szórakoztatóelektronikai vagy egyéb szenvedélyalapú termékeket kínáló webáruházaknál. Olyan márkáknak lehet ideális, amelyek szeretnének határozott benyomást kelteni és már a nyitóoldalon is erős karaktert mutatni.
Játékos világ, otthonos hangulat
Az Oberon negyedik változata barátságos, meleg hangulatú megjelenésével azonnal közelebb hozza a márkát a vásárlókhoz. Természetes színei, kedves vizuális világa, lekerekített, árnyékos elemei és könnyen befogadható felépítése különösen jól illik játékokat, baba-mama termékeket, kreatív eszközöket vagy családoknak szóló kínálatot bemutató webáruházakhoz. Olyan márkáknak lehet ideális választás, amelyek egyszerre szeretnének bizalmat, közvetlenséget és szerethető karaktert sugározni.
Bemutató oldal
A választható kinézetekhez igazodva készítettünk külön bemutatóoldalakat is, amelyek színvilágukban, hangulatukban és tematikájukban is jól érzékeltetik az adott sablon karakterét. A képernyőképekkel és kiemelt elemekkel illusztrált oldalak segítségével könnyebben eldöntheted, melyik design illik leginkább a saját elképzeléseidhez, miközben a kinézetcsalád legfontosabb jellemzőit is részletesebben megismerheted.
Testreszabási lehetőségek
Mi azt valljuk, hogy egy kinézetcsalád ne korlátozódjon egy termékkörre, egy célközönségre, cserébe legyen kellően testreszabható és átalakítható az adminisztrációs felületen, fejlesztői tudás nélkül. Mindemellett persze támogassa a konverzió növelését, illetve a nemzetközi terjeszkedést. Ahogy a bevezetőben már utaltunk rá, tovább bővültek a Tritonnál kialakított beállítási lehetőségek, az Oberonban immáron 300 konfigurációs opciót találsz a listában. Ne rettenj el a lehetőségek sokrétűségétől, hiszen ha pl. a vezérszínt módosítod, az öröklődik tovább, ugyanakkor opcionális lehetőség, hogy az egyes elemeket külön is átszínezheted.
Az eddigi sablonokhoz hasonlóan a Beállítások / Kinézet, Arculat / Kinézet testreszabása menüben találod a beállításokat, az első lapfülön jellemzően a színeket, stílus beállításokat, betű vastagságot, lekerekítéseket állíthatod be míg a második lapfülön pedig a betűtípus, ikonszett és az egyes elemek működése szabályozható.
Alapszínek és stílus
Felsoroltuk az összes elem színét a beállításoknál, így néhány kattintással a saját márkád színéhez igazíthatod a webshop színvilágát is. Szabályozhatók a hátterek, gombok, betűk, keretek, rácsok, vonalak színei, de vannak olyan elemek ahol akár gradiens, színátmenetes megjelenés is kialakítható (pl. fejléc). Fontos stíluselem az egyes ikonok mérete, a lekerekítés vagy az elemek átlátszósága, amit ugyanitt állíthatsz be.
Térközök és szeparálás
Egy terméklista karakterét többféle tényező befolyásolja. Szeparálni lehet a termékkártyákat térközökkel, árnyékokkal, rácsokkal vagy akár eltérő háttérszínnel. A teljesség kedvéért ezek mindegyikét elérhetővé tettük az Oberonnál. Ezek kombinációjával tényleg teljesen különböző listák hozhatók létre. Első körben el kell döntened, hogy a háttérrel megegyező színűek lesznek-e a termékkártyák vagy eltérő színt adsz nekik és ezzel emeled ki őket. Ha más a színe a kártyának, jól mutathat egy kis árnyék is, amit külön szabályozhatsz. Ha nem használsz árnyékot, az elemek között külön színezhető rácsozást is bekapcsolhatsz. Emellett pedig a vízszintes térköz adja meg, hogy tömörebb vagy szellősebb hatású lesz a lista.
A fenti képen pl. egyforma színű a webshop háttere a kártyákkal, kis térközzel és egy halvány ráccsal állítottuk be a szeparálást. Természetesen emellett a lekerekítés is külön beállítható, amivel akár teljesen szögletes, de finomabb hatású nagy lekerekítést is alkalmazhatsz.
Emailek testreszabása
Korábbi kinézetcsaládok esetén a beállított színeket, stílusokat örökölték az értesítő emailek is. Oberonnál kialakítottuk, hogy az emailek külön testreszabhatóak legyenek, mind a betű méretében, mind színeiben és táblázat beállításaiban is átalakíthatók az értesítők (az email testreszabást egyébként a Tritonba is visszavezettük).
Betűtípusok és ikonok
Előző kinézetcsaládjaink esetén még CSS segítségével történt a betűtípusok módosítása. Tritonban is már több betűtípusból lehetett választani, Oberonban bővítettük ezt a listát, itt már 16 közül választhatsz. A visszajelzések alapján a legnépszerűbb betűtípusokat is bevettük, így pl. szerepel többek között a Poppins, a Nunito vagy a Roboto is a választhatók között. Fontos felhívni a figyelmet, hogy a betűtípusok szélessége változó, így ügyelned kell arra, hogy ha egy szélesebbet választasz, azzal pl. hosszú terméknevek nem biztos hogy jól fognak mutatni mindenhol.
Az Oberonba a legújabb Font Awesome 7.2 ikonkészletet építettük be, azon belül is 16 féle stílus választható ki. Mind a betűtípusnál, mind az ikonoknál az adminisztrációs felületen vizuálisan is látható a kiválasztott típus.
Fejléc
Kanyarodjunk vissza kicsit a webshop fejlécéhez, ami az egyik legfontosabb elem, mivel megadja a webshop karakterét és a navigációs útvonalat. Természetesen az Oberonnál is megvan a klasszikus hármas alapműködés: beállítható, hogy ne rögzüljön ez az elem (így ténylegesen csak az oldal tetején látható), de választható a lefele görgetéskor fixen látszódó működés vagy akár beállíthatod hogy lefele nem, csak felfele gördítéskor jelenjen meg egyből a fejléc.
Ennél fontosabb beállítás a menük, a kategóriák elhelyezése. Alapvetően a fejléc lehet egysoros és kétsoros változat. Egysoros működés esetén a menü a logó mellett a kategóriák főmenüvel kezdődik, ami lenyitja a mega menüt. A főkategóriák ilyenkor már a lenyíló részben láthatók. Mellette helyezkednek el a plusz menük, a keresés és a jobb szélen a szokásos vezérlők (profil, kosár stb.).
Kétsoros fejléc esetén a főmenük vízszintesen egymás mellett helyezkednek el a logó alatti sorban (sok főkategória esetén több sorba törnek). Emellett a plusz menük helyzete változtatható, kerülhetnek a kategóriák után folytatólagosan vagy akár külön a logó mellé a felső sorba. Ezzel a hármas választási lehetőséggel gyakorlatilag az Oberon bármilyen kategória szám esetén jó választás lehet.
Sablonszerkesztő itt is
Az Oberon kinézetcsaláddal az új admin felületet használó VIP ügyfelek nemcsak egy modern és látványos megjelenést kapnak, hanem jóval nagyobb szabadságot is a webshop testreszabásában. A Tritonnál megismert sablonszerkesztő segítségével egyszerű fogd és vidd módszerrel rendezheted át a főoldal tartalmait, módosíthatod a termékkártyák felépítését, sőt akár a termékoldalak elrendezését is a saját igényeidhez igazíthatod, mindezt technikai tudás nélkül. A funkció a Beállítások / Kinézet, Arculat / Oldal kinézetek menüben érhető el, ahol az egyes oldaltípusokhoz tartozó elrendezéseket választhatod ki, a szerkeszthető részeknél pedig egy Szerkeszt gomb vezet át a kezelő felületre.
A sablonszerkesztő egyik legnagyobb előnye, hogy a webshop megjelenését sokkal jobban hozzáigazíthatod a saját kínálatodhoz és kommunikációdhoz. A főoldalon szabadon átrendezheted az előre kialakított szekciókat, a terméklistáknál pedig eldöntheted, mely információk kapjanak nagyobb hangsúlyt a termékkártyákon. Bizonyos termékoldal elrendezések esetén még nagyobb szabadságot kapsz, így a blokkok és elemek elhelyezését is a saját tartalmaidhoz igazíthatod. Ez különösen azért hasznos, mert nincs két egyforma webshop: van ahol a képek, máshol a leírások, a paraméterek vagy éppen a kapcsolódó termékek a fontosabbak. Az Oberon ezzel nemcsak korszerű és mobilbarát megjelenést kínál, hanem egy sokkal rugalmasabban alakítható vásárlói élményt is. Ha pedig még nem használod az új admin felületet, érdemes átváltanod, hiszen számos új funkció már ott érhető el. Az átváltást a Beállítások / Alapbeállítások / Admin felület menüben tudod elvégezni.
Akadálymentesség
Az Unas rendszerben a Taurus, Proteus és Triton sablonokat akadálymentesítettük, ezek mellett természetesen az Oberon kinézetcsaládot is úgy alakítottuk ki, hogy az alapsablon megfeleljen az akadálymentességi szempontoknak, így az érintett vállalkozások számára ezen a téren is korszerű és tudatos választást jelenthet. Ez ma már nemcsak felhasználói élmény és esélyegyenlőségi kérdés, hanem bizonyos cégek számára jogszabályi kötelezettség is. Fontos ugyanakkor, hogy ez a megfelelés az alapsablonra vonatkozik, ezért ha később módosítasz a színeken, kontrasztokon, betűméreteken vagy más megjelenési elemeken, érdemes körültekintően eljárnod annak érdekében, hogy webshopod továbbra is akadálymentes maradjon.
Technikai háttér
A kinézetcsaládok tervezésénél természetesen nem csak azt vesszük figyelembe, hogy az milyen elrendezésben, milyen felépítésben jelenjen meg. Minden apróságot, technikai lehetőséget figyelembe veszünk, ami gyorsíthat a működésen vagy hatékonyabbá teheti a felhasználást. Biztos lehetsz abban, hogy ha bármelyik választható, általunk támogatott kinézetet használod és nem rontod el rengeteg beszúrt scripttel és rosszul méretezett képekkel, jól fog teljesíteni a webáruház a vásárlók szempontjából és a Google, valamint az AI szolgáltatások elvárásainak is meg fog felelni.
Mikor válts Oberonra?
Ha webshopod számára olyan megjelenést keresel, amely egyszerre modern, látványos és sokféle termékkörhöz könnyen hozzáilleszthető, akkor mindenképpen érdemes megismerkedned az Oberon kinézetcsaláddal. Természetesen itt is igaz, hogy egy új sablon nem csupán friss külsőt jelent: vele együtt modern technikai háttér, újfajta vizuális hangsúlyok, korszerű elrendezési megoldások és még kifinomultabb vásárlói élmény is érkezik. Ugyanakkor a váltás előtt most is érdemes átgondolni, hogy az adott webshop tartalmi felépítése, kategóriastruktúrája és márkavilága mennyire találkozik az új megjelenés karakterével. Mivel az utolsó néhány kinézetcsaládtól eltérően az Oberon fő jellemzője a beállítható vízszintes kategória szerkezet, így elsődlegesen azoknak ajánlott akik ezt preferálják.
Az Oberon különösen jó választás lehet azoknak tehát, akiknek kevesebb főkategóriájuk van, de azok kellően alá vannak bontva több szintre. Azoknak a webáruházaknak ideális, ahol fontos szerepet kapnak a nagy méretű képek, az inspiráló vizuális megjelenés és a márka hangulatának átadása. Legyen szó bármilyen termékről ez a kinézetcsalád úgy lett kialakítva, hogy a termékbemutatás ne pusztán informatív, hanem figyelemfelkeltő és bizalomépítő is legyen.
Béta teszt időszaka
Az Oberont a mai naptól már választhatod a webshopodban. Felhívjuk a figyelmedet arra, hogy bár a legkörültekintőbben teszteltük, mégis lehetnek olyan beállítások, tartalmak, amelyeknél hibák adódhatnak. Ezeket a béta teszt időszak alatt természetesen javítjuk. Ez azzal jár, hogy amíg minden javítás, illetve optimalizálás meg nem történik a sablonon, addig nem tudunk belőle egyedi kinézet készítést vállalni, illetve nem lesznek letölthetők a kinézet fájljai sem. Ha apróbb módosítást végeznél, azt a saját CSS segítségével megteheted addig is. Sok sikert kívánunk az új kinézetcsalád felfedezéséhez!
