Bannery

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.

Typy bannerov

Podľa počtu snímok

• Statické - Do bannera je vložená len jedna snímka, preto nevznikne animácia.
• Animované (carousel) - Do bannera je vložených viacero snímok, ktoré je možné posúvať pomocou animácie.

Podľa rozvrhnutia v snímke

Možnosti zobrazenia 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.

Banner typu Obrázok

Obrázkový banner sa skladá z jedného alebo viacerých snímok. Snímka obsahuje len obrázok, ktorý sa roztiahne na celú jej plochu a proporcionálne sa prispôsobí jej šírke.

Textový obsah je súčasťou obrázku.

Postup v administrácii

1. V menu administrácie zvoľte sekciu Grafika / Bannery.
2. Vyberte už predpripravený banner (pre umiestnenie na hlavnej stránke) alebo vytvorte nový (pre umiestnenie na ďalších stránkach).
3. Prejdite do oddielu Hlavné.
4. Zapnite Rozvrhnutie v snímke na možnosť Obrázok.
   
5. Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázku v banneri. 
6. Pridajte obrázky alebo videá do snímok bannera. Viac tu.
7. V oddiele Rozšírené je možné obmedziť maximálnu veľkosť a šírku obrázku alebo kontajnera obaľujúceho samotný obrázok.
   Táto funkcia je dostupná od grafických šablón verzie 3.9 modulu Dizajnér. Viac tu.
   
8. Vykonané zmeny Uložte. 

Zobrazenie desktopu a tabletu

Texty sú priamo v obrázku snímky. Obrázok sa zmenšuje / zväčšuje podľa šírky snímky bannera.

Zobrazenie v mobilnom telefóne

Menšie texty sú v mobile nečitateľné.

Banner typu Obrázok na pozadí (cover)

Ide o typ bannera, kde je obrázok rozložený na pozadí snímky ako tapeta a prispôsobuje sa celej jeho ploche.

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ázka však zostávajú zachované. Čo je dôležité, aby sa obrázok nedeformoval.

Texty by nemali byť súčasťou obrázkov, inak môže dôjsť k nežiaducim efektom:

• Na menších obrazovkách nebudú texty čitateľné,
• Texty v obrázku na pozadí sa môžu orezať.

Rozmery obrázkov

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

1. V menu administrácie zvoľte sekciu Grafika / Bannery.
2. Vyberte už predpripravený banner (pre umiestnenie na hlavnej stránke) alebo vytvorte nový (pre umiestnenie na ďalších stránkach).
3. Prejdite do oddielu Hlavné.
4. Zapnite Rozvrhnutie v snímke na možnosť Obrázok na pozadí.
5. Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázka v banneri. 
6. Pridajte snímky do bannera (obrázok, video, textový obsah). Viac tu.
7. 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. 

Obrázok, ktorý vkladáte do snímky sa zobrazí v samostatnej vrstve vedľa textového obsahu. Viď náhľad.

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, výšky obrázku v popredí a nastavenia 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ázka.

Postup v administrácii

1. V menu administrácie zvoľte sekciu Grafika / Bannery.
2. Vyberte banner1 - Hlavný banner.
3. Prejdite do oddielu Hlavné.
4. Zapnite Rozvrhnutie v snímke na možnosť Obrázok na pozadí.
5. Zároveň sa zobrazí informačné pole, v ktorom sa dozviete odporúčané rozmery obrázka v banneri. 
6. Pridajte snímky do bannera (obrázok, video, textový obsah). Viac tu.
7. Vykonané zmeny Uložte. 
8. Pre ďalšie nastavenie snímok bannera prejdite do sekcie Grafika / Dizajnér.
9. Kliknite na ikonu v hlavnom banneri pre výber Rozloženia. Univerzálny postup podľa nápovede tu.
10. Vyberte rozloženie bannera č. 3 až 6. Len tie umožňujú nastavenie obrázka v popredí. 
11. Kliknite na ikonku v hlavnom banneri pre nastavenie Vzhľadu. Na obrázku nižšie vidíte v ľavej časti formátovacie možnosti sekcie Banner - hlavné. Šípky ďalej ukazujú na podsekciu snímky 1 a jej obrázok. Vzhľad snímok ovplyvňuje množstvo ďalších nastavení v module Dizajnér, ako napr. motív, písmo, zarovnanie atď. Univerzálny postup podľa nápovede tu.
    
    
12. 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.

Snímky v banneri

Banner sa skladá z jednej alebo viacerých snímok. V prípade, že obsahuje len jednu snímku, ide o statický banner, s viacerými snímkami je tzv. carousel.

Posúvanie medzi snímkami

Carousel je možné medzi snímkami posúvať pomocou navigácie s terčíkmi v spodnej časti bannera 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

1. V menu administrácie zvoľte sekciu Grafika / Bannery.
2. Vyberte už predpripravený banner (umiestnenie na hlavnú stránku) alebo vytvorte nový (umiestnenie na ďalších stránkach).
3. V detaile bannera prejdite do oddielu Snímky.
4. Kliknite na tlačidlo + Nový.
5. Vložte obrázky alebo videá.
6. Upravte poradie snímok podľa potreby potiahnutím za symbol šípok (viď ďalej Úprava snímok).
7. 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

1. V obsahovej časti - V hlavnej obsahovej časti e-shopu.
2. V stĺpci - Pokiaľ sa v grafike nachádza stĺpec, objaví sa banner v ňom.

Viac tu.

Vlastné rozloženie bannera

Na vytvorenie vlastného rozvrhnutia bannera môžete použiť externú agentúru. Našu aktuálnu ponuku nájdete tu.