Közel egy évvel ezelőtt írtunk arról a blogunkban, hogy a Proteus névre keresztelt sabloncsaláddal új mércét állított fel az Unas rendszer a testreszabhatóság terén. A mai napig ez igaz is volt, most azonban elérkezett az idő, hogy bemutassuk az Unas galaxis legújabb tagját – egy új sablont, amely méltó kihívóként lép színre: ez pedig nem más, mint a Triton. A névválasztás sem véletlen, a Triton a valóságban is a Proteus szomszédja a Neptunusz holdjai között, viszont ő a legnagyobb a társai között. Kétségtelen, hogy a sablon is közeli rokonságot mutat elődjével, miközben minden eddiginél nagyobb lehetőséget rejt magában.
Rendszerint a legolvasottabb blogcikkeink azok, amelyekben új kinézetcsaládot mutatunk be. Ezek a leghosszabb cikkeink is, holott ilyenkor kizárólag az újdonságokra koncentrálunk, a már korábbi sablonokban megismert funkciókat általában nem ismételjük meg. Most sincs ez másként, de annyi új lehetőséggel és fejlesztéssel bővült a rendszer, hogy ismét egy maratoni hosszúságú blogcikkbe sikerült belesűríteni az információkat. A Triton ugyanis sokkal több, mint egy új sablon: egy új szint a webáruházak megjelenésében.
Általános jellemzők
Immáron 10.000 webshop számára tervezzük a sablonokat, különös figyelmet fordítunk arra, hogy az alapváltozatok és a testreszabás által minden termékpalettához jól illeszkedjen, minden ügyfelünk jó szívvel választhassa. A Triton is ilyen, jól használható akár több, akár kevesebb kategóriával is. A választható oldalkinézetek révén pedig sok paraméterrel, több termékfotóval rendelkező webshopok üzemeltetésére is alkalmas.
Asztali kijelzőkön a Taurus kinézetet 1400 pixelre, a Proteust 1920 pixel szélességűre terveztük. A Triton ezúttal dinamikus szélességű, ugyanis váltakozó méretű tartalmak követik egymást. A tartalomtörzs 1400 pixel, de a különböző lapozható elemek (pl. a start oldali nagy banner vagy a termékajánlók) esetén a kinézet beállításoknál szabályozható, hogy azok teljes kijelző szélességűek legyenek vagy maradjanak oldaltörzsön belül, esetleg a két szélesség között, arányosan.
A Triton kinézetcsalád fontos jellegzetessége, hogy a Proteus felugró ablakos tartalmai (kategória, kosár, stb.) után, itt oldalról beúszó elemekkel dolgozunk. A képernyő bal oldaláról úsznak be a kategóriák és a menük, jobb oldalról pedig a kosár box, a belépés és ha van, akkor a nyelv- és pénznem váltó ablak. Ez utóbbiból kétféle stílus is választható az oldalkinézeteknél, egyiknél nagyobb termékfotókat alkalmazunk, a másikat pedig tömörebb, jellemzően soktételes kosarak esetén javasoljuk. Első körben nézzük át az alapváltozatokat, majd visszatérünk az újdonságokra és a számtalan beállítási lehetőségre.
Alap színváltozatok
Ahogy már megszokhattad, a kinézetcsaládjainkat négyféle színvilágban kínáljuk – nincs ez másként a Triton esetében sem. Sőt, itt nemcsak a színek különbözőségéről van immáron szó, hanem 4 különálló stílust alkottunk meg. Az egyes alverziók között más betűtípust, más lekerekítésű elemeket, más oldaltípusokat találsz. Egyszerűen kiválaszthatod azt a változatot, amelyik leginkább illik a termékpalettádhoz. Ha egyik szín sem passzol a céged arculatához, az admin felületen könnyedén átszínezheted az elemeket. Fontos azonban tudnod, hogy ezek a verziók rendre csak publikus beállításokban különböznek egymástól, tehát egyiknek sincs olyan tulajdonsága vagy beállítási lehetősége, ami a másik változatban ne lenne. Ezek tehát csupán előre beállított hangulatú sablonok, amelyek megkönnyítik, hogy a hozzád legközelebbiből indulj ki.
A színek testre szabásán túl - ahogy a bevezetőben már utaltunk rá - számtalan beállítási lehetőséget is hoztunk. Ha ez sem lenne elég, természetesen lehetőséged van saját CSS hozzáadására is, így további elemeket is módosíthatsz. Amennyiben jártas vagy a HTML/CSS világában, a béta időszak lezárulta után akár le is töltheted a kinézet forrásfájljait, és ezek alapjaira építve teljesen egyedi arculatot hozhatsz létre. Ezenfelül még hoztunk egy további finomságot a Triton sablonnal együtt, amit lejjebb megismerhetsz!
A nyugalom formába öntve
A Triton kinézetcsalád első változatát lágy földszínek, természetes tónusok és finom zöld árnyalatok jellemzik. Ez a színvilág egyszerre sugároz megbízhatóságot, nyugalmat és stílust – olyan hangulatot teremtve, amelyben a vásárlók könnyen otthon érzik magukat. Ideális választás lakberendezési tárgyak, növények, natúr kozmetikumok, fenntartható termékek vagy akár kézműves áruk bemutatására. A harmónia itt nemcsak vizuális élmény, hanem üzleti előny is: segít kiemelni a termékek szépségét és értékét.
Ízek, illatok, otthonosság
A Triton sablon második változata a meleg barna és földközeli árnyalatokat ötvözi friss, hívogató kék tónusokkal – olyan hangulatot teremtve, amely egyszerre modern és meghitt. Ez a színösszeállítás tökéletes választás lehet konyhai eszközök, gasztronómiai termékek, kézműves áruk vagy otthonhoz kapcsolódó webshopok számára. A természetes árnyalatok segítenek közvetíteni a minőséget, az emberközeliséget és előhozzák a termékfotók legízletesebb részleteit. Ha fontos számodra az őszinte hangulat és az átgondolt dizájn, akkor ez a kombináció a te főzőlapodra való.
Innováció, pontosság, szenvedély
A Triton sablon kék változata a digitális világ lendületét és a precizitás érzését közvetíti. A tiszta, karakteres árnyalatok és a kontrasztos elemek remekül kiemelik az elektronikai termékeket, okoseszközöket vagy prémium tech-kiegészítőket. Ez a színvilág nemcsak modern, de bizalmat is ébreszt: ideális azoknak, akik stabil, letisztult és jövőbe mutató márkát építenének. A vásárlói élmény itt nemcsak vizuálisan letisztult, de funkcionálisan is villámgyors.
A mozgás szabadsága
A Triton sablon 4-es változatát azoknak terveztük, akik nem félnek kilépni a komfortzónából – sem a hegyekben, sem az online térben. A karakteres vörös-narancs színvilág mozgást, szenvedélyt és céltudatosságot sugall. Ez a dizájn lendületbe hozza a webshopodat és azonnal megragadja a kalandvágyó, aktív célcsoport figyelmét. Ideális sporteszközök, túrafelszerelések, síruházat vagy outdoor kiegészítők értékesítéséhez. Ha a márkád a szabadságról, a kitartásról és az élményekről szól, akkor ez a kinézet pontosan neked való.
Bemutató oldal
A választható kinézetekhez hasonlóan mind a négy verzióhoz készítettünk - a bemutató áruházakon felül - bemutató oldalakat is, amik színeikben, hangulatukban, témakörükben mutatják be a sablont. A képernyőképekkel, kiemelt elemekkel illusztrált oldalak alapján könnyen eldöntheted, hogy melyik a számodra legjobban megfelelő design, valamint itt is megismerheted a kinézetcsalád legfontosabb jellemzőit.
Fejléc lehetőségei
Talán a webshop legfontosabb eleme a fejléc, hiszen itt indul a böngészés, a leggyakrabban használt navigációs elemek a fejlécen találhatóak. Parázs vita szokott kialakulni, hogy melyik működés a jobb: a gördítéskor rögzülő vagy az eltűnő fejléc. Mi nem szeretnénk ezt eldönteni helyetted, így a Triton-ban három lehetőség közül választhatsz ez ügyben.
Újdonságként a fejléc beállításainál adhatod meg, hogy egy kompaktabb, alacsonyabb fejléced legyen vagy egy dupla soros és részletesebb, így a kategória gomb és menük elhelyezkedése külön sávban legyenek vagy a hamburger menüben. Előbbi lehetőséget azoknak ajánljuk, akiknek a célközönsége nagyobb arányban látogatja a webshopot asztali kijelzőn és fontos, hogy a plusz menük állandóan láthatóak legyenek a fejlécben. Utóbbi pedig egy tömörebb, "mobilosabb" megoldást ad.
Betűtípus és ikon választó
Természetesen az eddigi kinézetcsaládok esetén is könnyedén lehetett betűtípust cserélni saját CSS segítségével, viszont a Triton használatával a tipográfiai beállításoknál még egyszerűbben teheted ezt meg. 8 féle betűtípus közül választhatsz, külön a címek és külön a folyó szövegek betűcsaládjaként. A lehetőségek között találsz letisztult, modern betűket, de kiválasztható klasszikus talpas verzió is az alábbiak közül: DM Sans, Public Sans, Inter, Red Hat Text, Roboto, Fraunces, Red Hat Display, Space Grotesk.
Az általános ikonok stílusát is szabályozhatod, alkalmazhatsz könnyed, esetleg vastagabb, szögletes, de akár duotone ikonokat is. Proteus sablonnal hoztuk be a kategória ikonokat, itt ezek színét és méretét is szabadon állíthatod.
Szűrés beállításai
Kétségkívül a megfelelő termékek megtalálásának egyik legfontosabb eszköze a szűrő. A szűrő pedig akkor működik jól, ha minél részletesebben rögzíted a termékekhez a paramétereket. Szerencsére az Unas rendszerben több mint 20-féle paraméter típusból választhatsz (szabad szavas, szín, szám, ikon, kép, intervallum stb.) így biztos lehetsz abban, hogy vizuálisan is egyértelmű lesz a vásárlónak, hogy merre induljon tovább.
Az új kinézettel új alapokra helyeztük a szűrőt is és egy tucat beállítást is készítettünk hozzá. A legfontosabb, hogy a szűrést hogyan tudja előhívni a látogató, bal oldalon rögzülő lebegő füllel vagy a kategória neve melletti, esetleg a terméklista feletti sávban lévő gombbal. Ez legfőképpen kisebb kijelzőkre vonatkozik (mobiltelefon), hiszen asztali nézeten fixen kirakhatod a terméklista mellé, a bal oldalra.
Dönthetsz úgy, hogy csak a paraméterek nevei látszódjanak és a jobb felső ikonnal nyithatja ki a látogató a szűrhető értékeket. Újdonságként a lehetséges értékek mennyiségét figyelembe véve te szabályozhatod, hogy alapból hány érték legyen kint, utána beállíthatsz egy több/kevesebb gombot is. Konfigurálhatod úgy is a működést, hogy a kiválasztott paraméter értékek előre kerüljenek, így jobban látja a látogató, hogy mire szűrt éppen, de maradhatnak a helyükön is, ha a sorrend fontos számodra. Előfordulhat, hogy valamelyik értékre nincs találat; ezek lehetnek inaktívak vagy akár el is tüntetheted őket.
Sablonszerkesztő az új admin felületen
Eddig minden kinézetet egyformán használhatott minden Unas webshop, bármilyen csomaggal is fizette azt elő az üzemeltetője. A Triton sablonnal viszont az új admin felületet használó VIP ügyfelek jókora előnyben részesülnek, immár a tartalmi elemeket is átrendezhetik az új sablonszerkesztő funkciónak köszönhetően. Fogd és vidd módszerrel szabadon átrendezheted a főoldal tartalmait, a termékkártyák elemeit vagy akár teljesen egyedi felépítésű termékoldalakat is létrehozhatsz – technikai tudás nélkül. Így minden részlet pontosan ott és úgy jelenhet meg, ahogy azt a célközönséged elvárja: lényegre törően, hatékonyan, esztétikusan. Legyen szó akciókról, USP-kről, termékelőnyökről, csomagajánlatokról vagy véleményekről – te döntöd el, mit emelsz ki és milyen sorrendben. Ha még nem használtad az új admin felületet, mindenképpen érdemes átváltanod, hiszen sok olyan új funkciót találhatsz ott, amit a régi felületre nem építettünk be. Átváltani a Beállítások / Alapbeállítások / Admin felület menüben tudsz.
A funkciót a Beállítások / Kinézet, Arculat / Oldal kinézetek menüben éred el. Ezen az oldalon választhatod ki az egyes oldalrészekhez tartozó előre elkészített elrendezéseket. Választhatsz többféle listanézetből, többféle termékoldal típusból, ahogy eddig megszokhattad a korábbi kinézetek esetén. A Triton esetén azoknál a tartalom típusoknál, ahol szerkesztheted az elrendezést, találsz egy Szerkeszt gombot, amivel eljuthatsz az új felületre.
Főoldal sorrendezése
A Triton főoldalán a fejlécen és a láblécen felül 16-féle szekció helyezhető el. Ha tehát az előbbi menüben a Start oldal szekcióban behívod a sablonszerkesztőt, ezt a 16 elemet fogod látni egymás alatt, abban a sorrendben, ahogy előzetesen megterveztük. Bal oldalon látsz egy nem használt blokkok részt, ami első körben üres, hiszen alapból minden elérhető elem megjelenik a webshopodban. Ha nem szeretnéd valamelyik tartalom típust használni, egyszerűen húzd ki a nem használtak közé, a megmaradóknál pedig állítsd be az általad kívánt sorrendet. A Ment gombbal piszkozatként fogod menteni az elrendezést, ha pedig élesíteni szeretnéd, a bal felső sarokban található kapcsoló segítségével teheted meg.
Fontos megemlíteni, hogy az elhelyezett szekciók közötti távolságokat az eredeti sorrend alapján állítottuk be ideálisra. Előfordulhat azonban, hogy az átrendezés következtében túl nagynak vagy túl kevésnek ítéled meg a távolságokat bizonyos elemek között. Ha ezt szeretnéd optimalizálni akkor a Beállítások / Kinézet, Arculat / Kinézet testreszabása menüben, az egyes elemeknél a Függőleges irányú belső eltartás beállítást keresd.
Termékkártyák módosítása
A Triton kinézetcsaládhoz háromféle terméklista elrendezést készítettünk. Az első verziónál nagyobb méretű termékkártyák vannak egymás mellett, a második típusnál kisebbek, a harmadik esetén pedig egy sorban csak egy termék szerepel részletesebb tartalommal. A sablonszerkesztő segítségével az első két termékkártyát rendezheted át. Ahogy az előbb is olvastad, az oldalkinézetek listájából navigálhatsz át a szerkesztésre.
A kártya felső részében mindig a termékfotó helyezkedik el, aztán külön szerkesztheted a kép alatti részt illetve a kártya alsó részét, ami mindig az aljához igazodik. Ahogy az alap elrendezésből látható, rakhatsz a kártyára értékelést, cikkszámot, paramétereket, raktár kijelzést, de ezeket akár el is hagyhatod, ha egyszerűbb megjelenést szeretnél.
Egyedi termékoldal kialakítása
Elérkeztünk az igazán ínyenc falathoz, ami a termékoldal szerkesztését illeti. Alapból itt is kétféle termékoldal elrendezés készült. A 2-es verzió hasonlóan a blokkok átrendezésére ad lehetőséget, kötött struktúra mellett. Azonban az 1-es verzió teljesen szabadon szerkeszthető, innentől tényleg a te kezedben van az irányítás, hogy a termékoldaladdal is maximalizáld a konverziót. Mindent úgy alakíthatsz, hogy a rendelkezésre álló tartalmaid, termékinformációid a lehető legjobb elrendezést kapják.
Joggal merül fel a kérdés, hogy eleve miért nem olyan az elrendezés, hogy az a legtöbb vásárlást hozza. Egyszerű a válasz: mivel nincs két egyforma webshop. Valakinél több termékfotó van, valahol bővebb leírások vannak, valahol sok a termék paraméter vagy a kapcsolódó termék. Általános elrendezés esetén óhatatlanul keletkezhetnek üres helyek, ha olyan tartalmad épp nem áll rendelkezésre, amit oda várna a sablon.
Lássuk az 1-es oldaltípus lehetőségeit! A bal felső sarokban egy fontos elemet helyeztünk el, ez pedig a töréspont kiválasztása. Mivel minden választható sablonunk 100%-ban reszponzív, igazodik a különböző képernyőméretekhez. A Triton alapértelmezetten 2 aktív töréspontot használ, az alapértelmezett vonatkozik kisebb kijelzőkre, mobilokra, a másik 992px kijelző szélesség feletti tartományt jelöli, ami jellemzően az asztali monitorokat jelenti. A legördülő menüben azonban 8 töréspont található arra az esetre, ha ezek megjelenését külön-külön szeretnéd optimalizálni. Ha egy nem aktívat választasz ki, akkor a szerkesztéshez először aktiválnod kell. Javasoljuk azonban, hogy új töréspontokat csak akkor aktiválj, ha teljesen átlátod a szerkesztő valamint a reszponzivitás működését.
Alapértelmezetten az LG (large, azaz nagy) töréspont van kiválasztva, ami 992px felett látható. A jobb oldali részben vizualizáljuk a termékoldal struktúráját, benne konténerekkel és blokkokkal. Képzelj el egy 12 részre osztott rácsszerkezetet. Egy konténer esetén ebben a 12-es kiosztásban gondolkozhatsz. Ahogy látod, alapból felül egy teljes szélességű konténer helyezkedik el, ami ezek alapján 12/12 szélességű, alatta pedig 2 db 6/12 kiosztású oszlopra bomlik az oldal. Utána pedig ismét egy teljes szélességű következik. Ezekbe helyeztük el a blokkokat, amiket a fent már megismert módszerrel rendezhetsz vagy helyezhetsz át másik konténerbe.
Most ugrik a majom a vízbe: a konténereket szabadon törölheted, létrehozhatsz újakat vagy megváltoztathatod a kiosztásukat. Ha kitörölsz egy konténert, akkor a benne található blokkok kikerülnek a nem használtak közé, ahonnan majd újra bepakolhatod őket valahova. A konténerek jobb felső sarkában látod a kiosztást, ha tehát úgy gondolod, hogy még nagyobb kijelző méreteken (pl. 1240px felett) 3 oszlopos verzióban gondolkodsz, akkor 3 db 4/12-es konténert kell elhelyezned. Értelemszerűen ezeknek nem kell egyformáknak sem lenniük, de akkor fognak egy sorba kerülni, ha kiosztás összege 12 lesz. Így váltakozva, dinamikusan alakíthatod ki a termékoldalt.
Megmutattuk az új sablonszerkesztőt néhány külső szakértőnknek, akik kinézetmódosításokat végeznek az ügyfeleinknek. Őszintén szólva nekik is elállt a szavuk a lehetőségek láttán, hiszen ettől kezdve pofonegyszerű egy teljesen új elrendezés kialakítása, mindenféle szaktudás nélkül.
Akadálymentesség (2022. évi XVII. törvény)
A weboldalak akadálymentesítése alapvetően azt jelenti, hogy a tartalmakat úgy alakítjuk ki, hogy azok mindenki – így például a fogyatékossággal élő emberek – számára is hozzáférhetők és használhatók legyenek. Ez immáron nemcsak etikai és esélyegyenlőségi kérdés, hanem a 2022. évi XVII. törvénynek köszönhetően idén nyártól jogi kötelezettség is a nagyobb vállalkozások számára.
Nem kell megijedned egyből, szerencsére 10-nél kevesebb főt foglalkoztató és 2 millió euró bevétel alatti vállalkozásokra nem vonatkozik az új szabályozás. Viszont az Unas felhasználók körében szép számmal vannak érintett cégek is. Emiatt a Triton kinézetet eleve úgy készítettük el, hogy a törvény szempontjából is akadálymentes legyen. Rengeteg munkát fordítottunk erre, emiatt itt nem is szeretnénk felsorolni részletesen és tételesen az egyes pontokat, nem adunk tippeket más fejlesztőknek, hogy mivel jár egy webáruház felkészítése az új szabályozásra. Továbbá nagyon fontos kiemelnünk, hogy a vállalásunk az alapsablonra vonatkozik, azaz ha változtatsz a színezésen, kontraszton, betűméreten vagy bármi máson, ami érinti ezt a területet, akkor körültekintően járj el, hogy a webshopod utána is akadálymentes maradjon.
Új jogi dokumentum: Akadálymentességi nyilatkozat
A törvény szabályozásának következtében az érintett szereplőknek nyilvánosan kell nyilatkozniuk arról, hogy a weboldaluk, webáruházuk mennyire akadálymentes. Erre bevezettünk az Unas rendszerbe egy új dokumentum típust az ÁSZF és az Adatkezelési tájékoztató mellett, amit a Beállítások / Vásárlási feltételek / Akadálymentességi nyilatkozat menüben találsz meg.
Ebben a dokumentumban deklarálhatod, hogy milyen a webshopod megfelelőségi szintje, itt sorolhatod fel a részeket, tartalmakat abból a szempontból, hogy mi akadálymentes illetve mi az, ami korlátozottan férhető hozzá. Utóbbi esetben hivatkozhatsz aránytalan teherre is, ha az akadálymentesítés indokolatlanul magas költséggel járna a vállalkozásod számára.
Technikai háttér
Fent már érintettük, hogy a kinézetcsaládok tervezésénél minden apróságot figyelembe veszünk, ami gyorsíthat a működésen vagy hatékonyabbá teheti a felhasználást. Így volt ez a Triton esetén is, felülvizsgáltuk a korábbi kinézetcsaládok tapasztalatai alapján a technikai hátteret, a választott megoldásokat és tovább optimalizáltuk a rendszert. Természetesen a hatékonyság érdekében a keretrendszerek legfrissebb verzióit alkalmazzuk (Bootstrap 5.3, jQuery 3.7.1 stb.)
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 elvárásainak is meg fog felelni.
Mikor válts Tritonra?
Amennyiben még nagyobb szabadságot szeretnél élvezni a webshopod testre szabásában, akkor egyértelműen érdemes elgondolkodnod az új sablonra váltáson. Fontos azonban megjegyezni, hogy minden új sablonnal együtt számos friss funkció és korszerű megoldás is érkezik, ugyanakkor ez mégsem jelenti azt, hogy minden esetben azonnal érdemes lecserélni a meglévő megjelenést. Gyakran előfordulhat ugyanis, hogy az új sablon nem illeszkedik tökéletesen a jelenlegi tartalomstruktúrához vagy kategóriafelosztáshoz.
Például, ha viszonylag kevés fő kategóriával dolgozol, akkor érdemes lehet olyan sablont választani, amely felső menüs elrendezést kínál – mint a Polaris vagy az Antares –, hiszen ezek kifejezetten az egyszerűbb struktúrákhoz lettek optimalizálva. Ezzel szemben, ha webshopod sok kategóriát tartalmaz és fontos számodra, hogy ezek mind egyből, jól áttekinthetően megjelenjenek asztali nézetben, akkor olyan sablonok jelenthetnek ideális megoldást, mint például a Sirius vagy a Taurus.
Amennyiben viszont kifejezetten egy modern, gyors, akadálymentes és mobilbarát megjelenés a célod – ráadásul szeretnéd, ha még több egyedileg módosítható elem állna rendelkezésedre –, akkor bátran ajánljuk a Triton sablont. Letisztult kialakítása, reszponzív működése és testreszabhatósága révén ideális választás lehet mindazok számára, akik a korszerű online élményt tartják szem előtt.
Béta teszt időszaka
Az új kinézetet 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!
