A múlt heti blogbejegyzésünkben két új webáruház kinézetet mutattunk be. Sokan kérdezik, hogy mivel jár az átváltás, milyen teendők vannak. Ami a legfontosabb a sabloncsere után, a módosítható elemek feltöltése, testreszabása. Ebben a cikkünkben összefoglaljuk, mit kell tudnod a webáruház módosítható elemeiről, és mire kell ügyelned a leginkább.
Milyen részei vannak az Unas webáruháznak?
A webáruház alapvetően termékekhez, kategóriákhoz kapcsolódó tartalmakból, egyéb szöveges és képi jellegű elemekből áll. Most itt az utóbbit, az egyéb tartalmakat taglaljuk inkább, amivel színesebbé, felhasználóbarátabbá és a keresőkben is optimálisabbá tehető a webshop. A módosítható elemek mellett kitérünk az alapszövegek és a kiegészítő szöveges részekre is, hogy minden lehetőségről átfogó képet adjunk.
Alapszövegek
A webáruházban alapértelmezetten megjelenő menüket, gombok feliratait, boxok fejléceit a Beállítások / Szövegek, Nyelvek / Alap szövegek menüben tudod szerkeszteni. Itt jelenleg közel 1000 db szövegrész található, ami beállításoktól függően megjelenhet a webáruház publikus felületén. Ha valamelyik nem felel meg az igényeidnek, vagy nem passzol a webáruházadhoz, egyszerűen átírhatod, és mentés után máris cserélődni fog a vásárlói felületen. Ha több nyelvet is beállítottál a webáruházadban, ugyanitt találod a nyelvi fordításokat, amiket szintén módosíthatsz. Ha például tegezésre szeretnéd állítani a szövegeidet, itt egyszerűen átfogalmazhatod őket.
Szerkeszthető tartalmak
A webáruházban alapértelmezetten létező oldalak alsó és felső részében kialakítottunk szerkeszthető tartalmakat. Ezt a Tartalom / Szerkeszthető tartalmak menüben találod. Ide került például a kapcsolati oldal elemeinek alsó és felső része, itt tudsz saját szöveget beszúrni a kosár oldalra, vagy tartalommal töltheted fel a regisztrációs űrlap részeit. Itt egészítheted ki a megrendelés folyamat lépéseinél megjelenő oldalakat, és a megrendelés köszönő oldalát is. Legördülő menüből választhatod ki, hova szeretnél szöveget írni, ami természetesen lehet nyelvenként más és más.
Tartalmi elemek, plusz oldalak
Tartalom / Plusz menük, Oldalak menüben az aloldalakon kívül saját menüpontokat, egyéb tartalmú oldalakat hozhatsz létre. Ezekre az oldalakra Tartalom / Tartalmi elem kezelés menüben létrehozott tartalmi elemeket társíthatod. A tartalmi elemek lehetnek egyszerű HTML szerkesztőben szerkesztett részek, de űrlap, blog, vagy képgaléria is. Ezek azok a funkciók, amelyekkel a webáruházat weboldalfunkciókkal láthatod el. A tartalommarketing fontosságát szem előtt tartva vezess blogot, készíts esettanulmányokat a termékeidről, mutasd be őket felhasználás közben. A tartalmi elemek kezelése egy nagyobb lélegzetvételű kérdés, ezért ezzel egy későbbi blogbejegyzésben külön fogunk foglalkozni.
Módosítható elemek
Megérkeztünk cikkünk fő témájához, a módosítható elemekhez. Általában itt képi elemekről beszélünk, amelyek megadják a webáruház stílusát. Mivel ezekkel találkozik először a látogató, rendkívül fontos, hogy bizalmat ébressz bennük. Sokat javíthatnak a konverziós rátán, de nem megfelelő minőség esetén ronthatják is. Nem győzzük hangsúlyozni, hogy ezek a képi elemek megfelelő méretűek és méretarányúak legyenek: ne legyen torz, bazári megjelenésű tőlük a webshopod. A módosítható elemeket a Beállítások / Kinézet, Arculat / Módosítható elemek menüben kezelheted, de a kiválasztott kinézetnél is megtalálod a hozzájuk vezető gombot.
Honnan szerezd be és hogyan kezeld?
Ahhoz, hogy a webáruházad profizmust sugalljon, megfelelő harmóniát kell teremts a hozzáadott képi elemekkel is. Ezekhez jól megszerkesztett, esztétikus nyers képekre van szükséged, melyeket átméretezel, feliratozol, kiegészíted a saját információiddal. Korábbi cikkünkben összefoglaltuk, hogy milyen képi elemek vannak a webáruházban. Fontos kitérni itt is arra, hogy mindig jogtiszta képeket használj! Léteznek ingyenes képgyűjtemények, bár ezeken belül is már csak előfizetéssel érhetők el a jobban használható, prémium minőségű képek. Ilyen portálok például a freepik.com, pexels.com, unsplash.com és pixabay.com. A legnagyobb fizetős képgyűjtemény szolgáltatók pedig a istockphoto.com, shutterstock.com, 123rf.com és a stock.adobe.com. Ezeken az oldalakon bármilyen termékkörhöz, bármilyen marketing kampányhoz kereshetsz stockfotókat, vagy akár rajzolt elemeket is.
A nyers képeket bármilyen képszerkesztő programmal szerkesztheted. Ezekből léteznek ingyenes (pl. Gimp, Inkscape, Krita) vagy licencköteles programok (pl. Adobe Photoshop, CorelDraw, Luminar), de manapság egyre több az online editor, ahol kész sablonokkal, képtárral várják a felhasználókat. Az egyik legnépszerűbb ezek közül a Canva, ahol már az ingyenes verzióban is sok szolgáltatást kapsz, de természetesen egy megfizethető havidíjért még több funkciót használhatsz.
Méretek, méretarányok és minőség
Elérkeztünk ahhoz a részhez, ami sokszor fejtörést okoz az ügyfeleinknek, mivel a módosítható elemek kezelőfelületén rengeteg beállítási lehetőség van. Ha kiválasztottál egy sablont, a kiválasztott verziónál megjelenik egy gomb, amivel a módosítható elemek kezeléséhez navigálhatsz. Itt a legördülő menüben találod a kinézetcsalád kiválasztott verziójához kapcsolódó elemeket.
A megnevezés elé odaírtuk, hogy a webáruház melyik részén jelenik meg (fejléc, start oldal, kosár oldal, lábléc, stb.) Kiválasztva egy bizonyos elemet, annak tartalma kerül eléd. A módosítható elem - típusától függően - lehet olyan, amibe csak szöveg konfigurálható, valamelyikbe egy kép tölthető be, valamelyik pedig slideshowként funkcionál, ahol a képkockák beállított időnként váltakoznak, illetve a megjelenő vezérlőelemekkel a látogató is váltogathat közöttük.
A Hozzáad gomb segítségével új tartalmat helyezhetsz el a módosítható elembe, vagy a meglévők sorában módosíthatod, vagy törölheted a korábban beállított tartalmat.
Az Alapadatoknál megadható egy cím a tartalomhoz. Beállítható a státusza (aktív esetén jelenik meg a publikus felületen), illetve a megjelenés kezdő és befejező időpontja is szabályozható. Akciós időszakok esetén előre időzítheted a slideshowban szereplő bannereket.
A Szűrés szekció lenyitásával tovább finomhangolható, hogy ki és milyen URL-en láthatja a feltöltött tartalmakat. Ezzel a lehetőséggel különböző bannereket kaphatnak a vásárló csoportok tagjai, a regisztrált és belépett vásárlók. Ha a kinézet tartalmaz olyan módosítható elemet, ami minden oldalon megjelenhet, itt szűrheted, hogy mit kell tartalmazzon az URL a megjelenés feltételeként.
A következő szekcióban a Képek következnek. Ez a leggyakrabban használt tartalomtípus a módosítható elemekben. Itt jön a két mumus, a töréspont és a retinakép kifejezés, amivel sokan nincsenek tisztában. A legtöbb rendszerben elintézik ezeket az elemeket egyetlen képpel, azonban a helyzet ennél sokkal bonyolultabb. Mivel az összes használható kinézetcsalád reszponzív, azt többféle kijelzőn használják a látogatók. Ebből egyből látszik, hogy ugyanaz a képarányú banner nem fog jól mutatni asztali kijelzőn és mobiltelefonon is. Ezért alakítottuk ki úgy, hogy a különböző kijelzőméretekhez különböző méretű, képarányú elemeket lehessen feltölteni. Természetesen ez nem kötelező, azonban a monitorra optimalizált hosszúkás banner, mobilon csak egy vékony csíkot fog eredményezni. Meg kell itt említeni azt is, hogy a Google robotjai sem fognak örülni, hogy ha mobil nézeten óriási méretű kép jelenik meg. Ezért ha igazán a tökéletességre törekedsz, nézd meg a webáruházadnál milyen töréspontoknál változik az elrendezés, és ezekhez megfelelő méretarányú képeket szerkessz!
A másik említésre méltó dolog a retina kijelzőkön megjelenő képek esete. Bár a retina kijelző az Apple szóhasználatából ered, mára már a legtöbb nagyfelbontású kijelzőt ezzel illetnek a szakemberek. Szinte minden mobiltelefon már minimum 2x pixel ratioval dolgozik, ami azt jelenti, hogy 360px weboldal szélességnél, a nagy felbontásnak köszönhetően 720px széles képet is meg tud jeleníteni. Ugyanez igaz a mára már elterjedőben lévő 4K monitorokra is. Ebből adódik, hogy ha csak 360px képet töltesz fel, az mobiltelefonokon nagy valószínűséggel homályos lesz, emiatt érdemes 720px szélességben is feltenni ugyanazt a vizuális tartalmat.
Ha már a képeknél tartunk, a pixelméreten és a képarányon felül rendkívül fontos a fájlméret is, hiszen a Google kényes a nagy fájlméretű képekre. Meg kell találnod azonban az egyensúlyt a robotok által elfogadható, de még a látogatók számára is tetszetős minőségben. Mindezek miatt a képeket optimalizálnod, tömörítened kell. A legtöbb képszerkesztő már el tud végezni ilyen feladatokat, de már online megoldások is léteznek erre a célra (pl. TinyJPG, Optimizilla, Compressor), ahol egyszerűen átfuttathatod a képi elemeidet, mielőtt feltöltöd a webáruházba.
Ha nem megy a képszerkesztés, vagy nincs ötleted, mindig érdemes szakember segítségét kérni.
Feliratozás
A legtöbb webáruházban olyan bannereket, slideshowkat találunk, ahol a képre írva eleve szerepel némi szöveges tartalom is. Ez az egyik legegyszerűbb megoldás, hiszen a képszerkesztő programok tartalmaznak rengeteg betűtípust, effektet, árnyékolási módszereket, amelyekkel a feliratozás esztétikus lehet. A rendszerünkben biztosítunk emellett szöveges feliratozási lehetőséget is, amivel slideshow képkockáira, kategória ajánló bannerekre az adminisztrációs felületen írhatsz szöveges feliratokat. Beállíthatod a betűméretet, betűszínt, hover állapotot és külön linket is megadhatsz. Ha igazán jártas vagy a HTML szerkesztésben a módosítható elem típusától függően egyedi HTML-t is szerkeszthetsz, amiből összeáll a megjelenő tartalom.
Módosítható elemek fajtái
Módosítható elemekből épül fel a fejléc több része, a lábléc és a webáruház főoldalának legtöbb eleme. Ezek mind egy kicsit különböznek egymástól, a felhasználási cél és az elhelyezkedés függvényében. Nézzük sorra!
Logó és kapcsolati adatok
A legtöbb kinézetcsaládnál már a fejlécben több módosítható elemet helyeztünk el. Ami mindig jelen van, az a logó, mivel ez az egyik legfontosabb elem egy weboldalon. Ide leginkább képi elem kerül. Itt is érdemes normál és retina méretet használni, hogy minden kijelzőn megfelelően éles legyen. Ha olyan kinézetet használsz, aminek a fejléc háttérszíne nem fehér, ott érdemes transzparens (átlátszó hátterű) logó fájlt feltölteni. Úgy is megoldhatod, ha már a logó tartalmazza a fejléccel megegyező háttérszínt, de semmiképp se hagyd úgy, hogy pl. kék háttéren egy fehér téglalapon van a logód.
A fejléc másik módosítható eleme általában szöveges, ide kapcsolati adatokat, telefonszámot, email címet javasolt elhelyezni. A mintaadatokban is ezek szerepelnek, amiket persze tetszőlegesen átírhatsz.
Nanobar
Nanobarnak nevezzük azt a sávot, ami jellemzően a weboldalak tetején jelenik meg, és időszakos - általában egysoros - szöveges információkat tartalmaz. Ezek bezárható elemek, így ha valaki elolvasta, azt később nem fogja zavarni, illetve ha nincs benne tartalom, nem is jelenik meg. Mivel itt fontos információk szoktak előbukkanni, a kinézet vezérszínét kapta a sáv. Ide írhatod az esetleges zárvatartásokat, vagy kiszállítással kapcsolatos tudnivalókat.
Slideshow
A slideshow, a startoldali nagy banner a webáruház kirakataként funkcionál. Ezt az elemet látja meg először a látogató, ha a főoldalra érkezik. A "hajtás feletti tartalom" egyik legfontosabb része. Volt időszak, amikor a marketing szakemberek nem javasolták ennek használatát, de az idő mégis igazolta a létjogosultságát. Szinte nincs olyan webáruház, ahol a főoldalon ne hívnák fel a figyelmet az akciókra, a legfontosabb márkákra, termékkörökre. Használd te is bátran, de vedd figyelembe a fentieket, hisz sokat árthat egy összedobált, karácsonyfa jellegű banner, amire mindent rázsúfoltál. Túl sok képkockát sem érdemes használni a slideshowban, mert a látogatók nem nézik végig. Az optimális 3-6 banner, ami váltakozik a főoldaladon.
Kategória ajánló
A webáruház startoldalán rendszerint kialakítunk egy olyan szekciót, amibe tetszőleges számú képi elem sorolható. Ezeket kategóriák, termékkörök eléréséhez javasoljuk. Helyezd el ezekben a legfontosabb kategóriáidat, aloldalaidat, amit a menün kívül, innen alternatív útvonalként is elér a látogató.
Bizalmi sáv
A vásárlói bizalmat növelheted, ha a bizalmi sávban elhelyezed azokat az információkat, amire büszke vagy, előnynek érzel a versenytársaiddal szemben. Ide érdemes feltüntetni a szállítási határidőt, a bankkártyás fizetési lehetőséget, illetve bármilyen információt, amitől szívesebben lesz a látogatóból vásárló. A bizalmi sáv egy olyan speciális módosítható elem, amibe egy nagyobb méretű ikon mellé írhatsz szöveges tartalmat. Az ikon megadásához a szerkesztésnél a fontawesome ikon kódját kell csupán megadnod. Illetve az ikon helyett természetesen tölthetsz fel saját képet is.
Márka, gyártó slider
A főoldalon még egy speciális módosítható elem is rendszerint helyet kap, ez a márka slider. Ez hivatott arra, hogy az általad forgalmazott termékek márkáinak, gyártóinak logóit felsorakoztasd. Ez a sáv is bizalmat ébreszt a látogatókban, hiszen az általa ismert logók fognak itt mozogni. A logókra linket is elhelyezhetsz, így egy kattintással gyors termékkeresést tud indítani a vásárló az adott gyártmányú termékekre.
Lábléc
Ahogy a weboldalak, úgy a webáruházak alja is a lábléccel zárul. Itt többnyire fontos linkeket szoktak megjeleníteni az üzemeltetők, amelyek a webáruház felső menüjében nem szerepelnek. Ide kerül az ÁSZF, az Adatkezelési tájékoztató, kapcsolati adatok, a legfontosabb kategóriák és aloldalak linkjei, illetve a közösségi média oldalai. Ezt a részt kinézetcsaládtól függően 3-5 elemből állítjuk össze. Mindenképpen nézd át ezek tartalmát, állítsd be a közösségi ikonokhoz a saját profiljaidat, cseréld le a mintaként feltöltésre került menüket. Ha valamelyik részben nem menüket jelenítenél meg, akár képre is cserélheted, vagy valamilyen dinamikus tartalom beszúrásában is gondolkodhatsz (pl. Google Maps térkép, Facebook Page plugin).
Végszó
Ahogy a fentiekből te is láthatod rengeteg felületet adunk az Unas webáruházhoz használható sablonokban, hogy a saját tartalmaidat is elhelyezd a termékadatokon kívül. Ezekkel a felületekkel, képi elemekkel kitűnhetsz a tömegből. A jól elkészített, esztétikus, de mégis lényegre törő bannerekkel sokat nyerhetsz a webáruház üzemeltetése során. Ha van már webáruházad, de nehézkesen tudod kezelni ezeket az elemeket, érdemes elgondolkoznod egy Unas webáruház nyitásán.
