Bannery
Čo je to Banner
Banner je pole s obrázkovým obsahom obvykle reklamného charakteru. Pomocou bannera, ktorý je umiestnený na najatraktívnejších miestach e-shopu, môžete informovať zákazníkov o zaujímavých marketingových príležitostiach ako sú akčné produkty, novinky, výpredaj, aktualita apod.
Čo je to Snímka
Snímky v banneri sú jednotlivé obrázky, ktoré ste do bannera pridali.
Banner se skládá z jednoho nebo více snímků. V případě, že obsahuje jen jeden snímek, jedná se o statický banner, s více snímky je tzv. carousel.
Rozvrhnutie banneru
Banner môže mať dve rozvrhnutia:
- Klasický banner - Každá snímka má vlastnú "stránku" (posúvanie pomocou navigačných bodiek)
- Stĺpcový banner - Každá snímka má vlastný stĺpec (zobrazí sa ihneď, bez nutnosti posúvania)
Rozvrhnutie snímok
Rozvrhnutie obrázku a textového obsahu v snímke:
- Obrázok - Obrázok (prípadne video) sa proporcionálne prispôsobuje celej ploche snímky. Textový obsah je potrebné zakomponovať do samotného obrázku. Viac tu.
- Obrázok na pozadí - Obrázok (prípadne video) sa vloží do pozadia snímky ako tapeta. Súčasťou obrázku by nemal byť textový obsah. Ten sa plní v administrácii u jednotlivých snímok. Viac tu.
- Obrázok v popredí - Obrázok (prípadne video) sa vloží do popredia snímky vedľa textového obsahu. Jeho pozícia sa nastavuje v module Dizajnér. Súčasťou obrázku by nemal byť textový obsah. Ten sa plní nižšie v administrácii pri jednotlivých snímkach. Viac tu.
Počet snímok
- Statické - Do banneru je vložená iba jedna snímka, preto nevznikne animácia.
- Animované (carousel) - Do banneru je vložených viac snímok, ktoré je možné posúvať pomocou animácie.
Snímka typu Obrázok
Snímka obsahuje iba obrázok, ktorý sa roztiahne na celú jeho plochu a proporcionálne sa prispôsobí jej šírke.
Textový obsah je súčasťou obrázku.
Postup v administrácii
- V menu administrácie zvoľte sekciu Grafika / Bannery.
- Vyberte už predpripravený banner (pre umiestnenie na hlavnej stránke) alebo vytvorte nový (pre umiestnenie na ďalších stránkach).
- Prejdite do oddielu Hlavné.
- Zapnite Rozvrhnutie v snímke na možnosť Obrázok.
- Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázku v banneri.
- Pridajte obrázky alebo videá do snímok bannera. Viac tu.
- Vykonané zmeny Uložte.
Zobrazenie desktopu a tabletu
Zobrazenie v mobilnom telefóne
Texty sú priamo obsahom samotnej snímky (obrázku). Keďže sa snímka pre menšie zariadenia automaticky upravuje (zmenšuje) podľa šírky zariadenia, na menších zariadeniach sú texty nečitateľné.
Hodí sa teda iba pre snímky, v ktorých sa text nenachádza, alebo je dostatočne veľký.
Snímka typu Obrázok na pozadí
Snímka je rozdelená na dve časti:
- Pozadie - Pozadie tvorí samotný obrázok
- Text - Text je v popredí obrázku. Nie je závislý na zmenšovaní obrázku pre menšie zariadenia a bude vždy čitateľný.
(Na príklade je textová časť, ktorá sa oddeľuje od pozadia zvýraznená červenou farbou)
Rozmery bannera
- Šírka bannera sa prispôsobí na celú plochu snímky.
- Výška bannera je dynamická. Odvíja sa od výšky textového obsahu vnútri bannera a od nastavenia minimálnej výšky bannera v module Dizajnér. Viac tu.
Obrázok na pozadí
Do tohto bannera sa obvykle vkladá len podkresový obrázok alebo video. Zobrazí sa na pozadí plochy snímky a úplne ju vyplní bez prípadných medzier. Obrázky bývajú orezané podľa nasledujúcej logiky:
- Široké obrázky sa orežú vpravo a vľavo.
- Vysoké obrázky sa orežú hore a dole.
Proporcie obrázku však zostávajú zachované. Čo je dôležité, aby sa obrázok nedeformoval.
V obrázku by sa nemali zobrazovať žiadne texty, inak dôjde k ich nečitateľnosti pri zmenšovaní obrázku.
Rozmery pozadia snímky
- Šírka snímky sa prispôsobí na celú plochu bannera.
- Výška snímky je dynamická. Odvíja sa od výšky textového obsahu vo vnútri bannera a nastavenia minimálnej výšky snímky v module Designer. Viac tu.
Odporúčané rozmery obrázkov získate priamo v administrácii e-shopu po nastavení typu bannera.
Textový obsah
Ako už sme si povedali, texty nie sú súčasťou obrázka. Vkladajú sa do administrácie. Zobrazia sa v HTML forme nad obrázkom coveru. Taký text bude mať vždy nemennú veľkosť písma, takže bude čitateľný aj v mobile. Z hľadiska SEO je navyše perfektne optimalizovaný a indexovateľný.
Na obrázku nižšie vidíte, že text je možné označiť, čo znamená, že nie je súčasťou obrázka.
Postup v administrácii
- V menu administrácie zvoľte sekciu Grafika / Bannery.
- Vyberte už predpripravený banner (pre umiestnenie na hlavnej stránke) alebo vytvorte nový (pre umiestnenie na ďalších stránkach).
- Prejdite do oddielu Hlavné.
- Zapnite Rozvrhnutie v snímke na možnosť Obrázok na pozadí.
- Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázka v banneri.
- Pridajte snímky do bannera (obrázok, video, textový obsah). Viac tu.
- Vykonané zmeny Uložte.
Zobrazenie v desktope a tablete
Zobrazenie v mobilnom telefóne
Štruktúra bannera sa preskladá tak, aby jednotlivé grafické prvky a texty zostali v pôvodnej veľkosti.
Banner typu Obrázok v popredí
Obrázok v popredí je možné nastaviť len pri hlavnom banneri (banner1) na hlavnej stránke e-shopu.
Snímka je rozdelená na tri časti:
- Pozadie - Pozadie tvorí ho konkrétna farba, alebo farba s motívom (nastavená v Designerovi)
- Obrázok - Tvorí samotný nahraný snímok.
- Text - Text je v popredí obrázku. Nie je závislý na zmenšovaní obrázku pre menšie zariadenia a bude vždy čitateľný.
Rozmery pozadia snímky
- Šírka bannera sa prispôsobí na celú plochu snímky.
- Výška banneru je dynamická. Odvíja sa od výšky textového obsahu vo vnútri bannera, výšky obrázku v popredí a nastavení minimálnej výšky bannera v module Designer.Viac tu.
Obrázok v popredí
V mobilných zariadeniach sa obrázok zobrazí pod textovým obsahom. V prípade nutnosti sa proporcionálne zmenší na základe šírky snímky.
Texty by nemali byť súčasťou obrázku.
Postup v administrácii
- V menu administrácie zvoľte sekciu Grafika / Bannery.
- Vyberte banner1 - Hlavný banner.
- Prejdite do oddielu Hlavné.
- Zapnite Rozvrhnutie v snímke na možnosť Obrázok na pozadí.
- Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázka v banneri.
- Pridajte snímky do bannera (obrázok, video, textový obsah). Viac tu.
- Vykonané zmeny Uložte.
Zobrazenie na e-shope
Desktop / tablet
Obrázok je vedľa textu v samostatnej vrstve.
Mobilný telefón
Obrázok sa presunie pod text.
Posúvanie medzi snímkami
Medzi snímkami sa dá posúvať pomocou navigácie s bodkami v spodnej časti banneru alebo šípok "predchádzajúci" a "ďalší".
V prípade vypnutého ručného posúvania sa menia snímky automaticky podľa zadaného časového intervalu.
Možnosti posúvania snímok v banneri je možné upraviť v oddiele Rozšírené. Automatické posúvanie aktivujete odškrtnutím voľby Manuálne posúvanie snímok. Potom sa sprístupní pole Dĺžka zobrazenia snímky (ms), kde si môžete nastaviť dĺžku zobrazenia snímok v banneri. Zadáva sa v milisekundách.
Pridanie snímky do bannera
- V menu administrácie zvoľte sekciu Grafika / Bannery.
- Vyberte už predpripravený banner (umiestnenie na hlavnú stránku) alebo vytvorte nový (umiestnenie na ďalších stránkach).
- V detaile bannera prejdite do oddielu Snímky.
- Kliknite na tlačidlo + Nový.
- Vložte obrázky alebo videá.
- Upravte poradie snímok podľa potreby potiahnutím za symbol šípok (viď ďalej Úprava snímok).
- Uložte.
Úprava snímok
Po nabehnutí myšou na snímku sa zobrazia základné informácie o obrázku a ďalej akčné tlačidlá.
Presunúť snímku - Uchopením ikonky myši a potiahnutím je možné meniť poradie snímok.
Detail snímky - Otvorí okno pre vyplnenie popisu snímky. Viď ďalej.
Zmazať snímku - odoberie snímku z ponuky vrátane obrázku.
Popis snímky
Do snímky je potrebné vyplniť texty. To sa líši podľa toho, či máte zapnutú funkciu Cover.
- Obrázkový banner - Obsahuje len titulok, ktorý sa vloží ako alternatívny popis a titulok obrázku. Zobrazuje sa len v zdrojovom kóde a pre návštevníka je viditeľný len v podobe bublinky po nabehnutí myšou na obrázok.
- Cover banner - Obsahuje kompletnú ponuku pre vyplnenie textového obsahu, ktorá je priamo viditeľná návštevníkom. Zobrazí sa v HTML podobe a je umiestnený nad obrázkom v pozadí.
Zmena obrázka v snímke
Pokiaľ ste sa rozhodli zmeniť obrázok v snímke, nie je potrebné zmazať celú snímku, čím navyše prídete o jej textový obsah. V popise je možné tiež zmeniť obrázok snímky.
Optimalizácia obrázkov
Obrázky v banneroch môžu významne ovplyvniť rýchlosť načítania celého e-shopu. Preto sa snažte ich veľkosť aj počet optimalizovať. Odporúčame maximálne 4 - 5 snímok v jednom banneri.
Pre zachovanie rozmerov a kvality obrázka je potrebné vložiť ho do zložky Grafika v Správcovi súborov. Všeobecne platí, že čím väčší obrázok, tým menej rozostrený. Samozrejme s rozmermi rastie veľkosť v kB. Viac o optimalizácii obrázkov nájdete tu.
Podľa typu bannera sa v niektorých prípadoch zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázka v banneri. Pokiaľ nie je toto pole zobrazené, potom sa obrázok prispôsobuje responzívne a nemožno pre neho stanoviť optimálnu veľkosť.
Počas responzívnej zmeny veľkosti bannera systém vykonáva automatický výrez u zdrojového obrázka. Nemožno si užívateľsky nastaviť konkrétny výrez obrázka, ktorý by sa v tejto situácii použil.
Zdroje obrázkov
Obrázky do pozadia coveru je možné stiahnuť v rôznych fotobankách ako napr. www.freeimages.com, www.unsplash.com alebo www.openphoto.net. Výhodou je, že sú zadarmo.
Umiestnenie bannera
- V obsahovej časti - V hlavnej obsahovej časti e-shopu.
- V stĺpci - Pokiaľ sa v grafike nachádza stĺpec, objaví sa banner v ňom.
Publikované a neverejné bannery
Všetky bannery, ktoré upravujete v Designerovi sa upravujú a ukladajú vždy iba pre zobrazenie Designera (vidíte len vy). Pokiaľ zmeny v banneri budete chcieť prepísať na svoju ostrú publikovanú doménu, musíte vami uložené zmeny Publikovať pomocou tlačidla v hornej lište dizajnéra.
Pokiaľ však ale budete pracovať dlhodobo na grafickej úprave či už cez Designer, alebo cez Editor kódu, máte možnosť si bannery rozdeliť a ponechať si možnosť upravovať bannery pre svoju grafickú úpravu bez toho, aby úpravy zasahovali do Publikovanej verzie bannerov. Vďaka tomu môžete napríklad v prípade nutnosti (sezónnej akcie) upraviť banner nezávisle od toho, či upravujete grafiku, alebo nie.
Ako urobiť rozdelenie?
Rozdelenie bannerov môžete aktivovať v sekcii Nastavenie / Grafika.
Po aktivácii sa vám v sekcii Grafika zobrazí sekcia Publikované, ktorá obsahuje podsekcie Bannery, Headlines a Vyskakovacie okno.
Pokiaľ upravíte tieto sekcie v tejto časti Grafika / Publikované, automaticky sa vám vami vykonané zmeny prejavia na Publikovanej verzii.
Všetky zmeny vykonané v Grafika / Bannery sa vám po uložení prejavia iba v Designerovi a na Publikovanej verzii sa neprejavia.
Banner typu Group
Banner typu group je banner, ktorý je rozdelený na 4 samostatné snímky v stĺpcoch.
Ako banner nastaviť
- V menu administrácie zvoľte sekciu Grafika / Bannery.
- V pravom hornom rohu kliknite na tlačidlo + Nový.
- Pridajte požadované snímky bannera a ich textácie.
- V sekcii Rozšírené nájdite pole Atribút a vyplňte hodnotu
group.
- V sekcii hlavné nezabudnite banner nastaviť pre zobrazenie na eshope av konkrétnom jazyku (ak jazyky máte)
- Vykonané zmeny Uložte.
Po vytvorení sa banner automaticky umiestni na Homepage vášho eshopu. V inej sekcii nie je možné banner zobraziť.
Pozíciu banneru môžete zmeniť v Designerovi (Viac tu).
