Bannery

V tomto článku sa dozviete, kde a ako nastaviť rôzne typy bannerov. Viac o rozmeroch jednotlivých prvkov v šablónach sa dozviete v článku Rozmery bannerov, loga a hlavičky na šablónach.

Využitie bannerov

Pod kartou Vzhľad a obsah → Bannery môžete ovplyvniť vzhľad vášho e-shopu (obrázok 01). Môžete pridať banner priamo na titulnú stránku (jedná sa o rotujúci banner, tzv. carousel), alebo do ľavého a pravého stĺpca šablóny. Prípadne aj využiť doplnkové bannery, ktoré sa svojim umiestnením líšia podľa šablóny.

Všetky bannery majú podobný detail nastavenia, líšia sa len v drobnostiach. Pri obrázkovom type sa nahraná fotografia vymaže jednoducho cez červený krížik, stačí myšou nabehnúť do sekcie s obrázkom.

Bannery

Banner je možné vložiť do ľavého alebo pravého stĺpca a pätičky, záleží na nastavení Rozvrhnutie stránky. Môžete nastaviť tieto vlastnosti (obrázok 02):

• Názov: slúži iba pre administráciu a vašu orientáciu.
• Typ banneru:
  • Obrázok: umožňuje nahranie obrázku z počítača.
  • Textový banner: umožňuje vkladanie HTML kódu.
• Dátum vloženia: určuje, od kedy sa má obrázok zobraziť.
• Dátum odstránenia: dátum, kedy sa má obrázok skryť. Tento dátum je vrátane, ak chcete zobraziť banner do 1.2., nastavte 1.2.
• Zobraziť banner: viditeľnosť banneru.
• Popis obrázku: informácie o obrázku, ktoré sa prenášajú do atribútu alt.
• Cieľová URL adresa: pokiaľ je URL adresa vyplnená, obrázok funguje ako odkaz na danú URL adresu, môžete teda zákazníkov smerovať napr. do kategórie.
• Otvoriť v novom okne: určuje, či zákazník po kliknutí zostane v otvorenom okne alebo sa odkaz otvorí v ďalšej záložke.

Doplnkové bannery

Líšia sa podľa konkrétnej šablóny a sú najčastejšie len na úvodnej stránke.

Poradie doplnkových bannerov určuje ich názov. Radí sa podľa abecedy, od najnižšieho čísla k najvyššiemu. Zmenou názvu banneru môžete zmeniť jeho poradie.

Kliknite do stĺpca pomenovaného Názov. Otvorí sa detail doplnkového banneru. Vyplňte pole Názov. Ten slúži na identifikáciu banneru v systéme alebo pre Google Analytics.

Zákazníci na e-shope však po nabehnutí myšou na banner uvidia text, ktorý nastavíte v poli Popis obrázku. Pre prehľadnosť odporúčame dať pred samotný názov číslo (napr.: 01, 02, atď.).

Môžete nastaviť tieto vlastnosti (obrázok 03):

• Názov: slúži iba pre administráciu a vašu orientáciu. Určuje poradie bannera.
• Typ banneru: 
  • Obrázok: umožňuje nahranie obrázku z počítača.
  • Textový banner: umožňuje vkladanie HTML kódu.
• Dátum vloženia: určuje, od kedy sa má obrázok zobraziť.
• Dátum odstránenia: dátum, kedy sa má obrázok skryť. Tento dátum je vrátane, ak chcete zobraziť banner do 1.2., nastavte 1.2.
• Pozícia:
  • Top: horná časť úvodnej stránky.
  • Stred: medzi popisom a produktmi na titulnej strane. Pre zobrazenie na tejto pozícii je nutné mať vytvorenú aspoň jednu skupinu produktov na titulnej strane.
  • Zápätie: zobrazuje sa nad pätičkou.
  • Kategória.
  • Podpora doplnkových bannerov sa v rámci jednotlivých šablón môže líšiť. Informácie o tom, aké pozície vrátane veľkosti šablóna podporuje, nájdete v článku Rozmery bannerov, loga a hlavičky na šablónach.
• Zobraziť banner: viditeľnosť banneru.
• Popis obrázku: informácie o obrázku, ktoré sa prenášajú do atribútu alt.
• Cieľová URL adresa: pokiaľ je URL adresa vyplnená, obrázok funguje ako odkaz na danú URL adresu, môžete teda zákazníkov smerovať napr. do kategórie.
• Otvoriť v novom okne: určuje, či zákazník po kliknutí zostane v otvorenom okne alebo sa odkaz otvorí v ďalšej záložke.

Carousel

Ide o veľký obrázok na titulnej strane, ktorý sa v prípade viacerých obrázkov mení v čase. Môžete nastaviť tieto vlastnosti (obrázok 04):

• Názov: slúži iba pre administráciu a vašu orientáciu.
• Typ banneru: 
  • Obrázok: umožňuje nahranie obrázku z počítača.
  • Textový banner: umožňuje vkladanie HTML kódu.
• Dátum vloženia: určuje, od kedy sa má obrázok zobraziť.
• Dátum odstránenia: dátum, kedy sa má obrázok skryť. Tento dátum je vrátane, ak chcete zobraziť banner do 1.2., nastavte 1.2.
• Zobraziť banner: viditeľnosť banneru.
• Popis obrázku: informácie o obrázku, ktoré sa prenášajú do atribútu alt.
• Cieľová URL adresa: pokiaľ je URL adresa vyplnená, obrázok funguje ako odkaz na danú URL adresu, môžete teda zákazníkov smerovať napr. do kategórie.
• Otvoriť v novom okne: určuje, či zákazník po kliknutí zostane v otvorenom okne alebo sa odkaz otvorí v ďalšej záložke.

Čas, počas ktorého sa zobrazí každá jedna snímka, nastavíte v umiestnení Vzhľad a obsah → Bannery na záložke Ďalšie nastavenia , sekcia Carousel. Viac informácií nájdete v článku Ostatné nastavenia vzhľadu.

Konkurenčné výhody

Pre úvodnú stránku, kategóriu a detail produktu je možné pridať bannery s tzv. konkurenčnou výhodou. Umožňujú zákazníkov jednoducho informovať, aké výhody má nákup na vašom e-shope (napr. doprava zadarmo, darček zadarmo alebo predĺžená záruka). 

Pre úvodnú stránku sa banner zobrazí pod carouselom alebo bannermi. Jedinou výnimkou je šablóna Tango, ktorá bannery zobrazuje v spodnej časti stránky. V kategóriách je zobrazený nad pätičkou stránky. V detaile produktu je umiestnený medzi fotografiou a popisom produktu.

Doporučený rozmer banneru Konkurenčné výhody je 150 x 150 px a pre optimálnu ostrosť treba dodržať pomer strán 1:1.  

Po založení banneru môžete nastaviť nasledujúce informácie (obrázok 05): 

• Názov: slúži iba pre administráciu a vašu orientáciu.
• Typ banneru: umožnená je iba jedna voľba Konkurenčné výhody.
• Dátum vloženia: určuje, od kedy sa má obrázok zobraziť.
• Dátum odstránenia: dátum, kedy sa má obrázok skryť. Tento dátum je vrátane, ak chcete zobraziť banner do 1.2., nastavte 1.2.
• Zobraziť banner: viditeľnosť banneru.
• Popis obrázku: informácie o obrázku, ktoré sa prenášajú do atribútu alt.
• Cieľová URL adresa: pokiaľ je URL adresa vyplnená, obrázok funguje ako odkaz na danú URL adresu, môžete teda zákazníkov smerovať napr. do kategórie.
• Otvoriť v novom okne: určuje, či zákazník po kliknutí zostane v otvorenom okne alebo sa odkaz otvorí v ďalšej záložke.
• Názov banneru: Názov konkurenčnej výhody, ktorá sa zobrazí vpravo vedľa obrázku.
• Text banneru: Slúži na popis konkurenčnej výhody, taktiež sa zobrazuje vpravo od obrázku pod názvom banneru.

Mobilné zobrazenie

Pre bannery, doplnkové bannery, carousel a konkurenčné výhody podporujeme možnosť mobilného zobrazenia. Toto nastavenie je k dispozícii v detaile každého z bannerov.

Jeden banner teda môžete zobrazovať na desktope, na mobile alebo na oboch zariadeniach. Odpadá nutnosť použiť pre každé zariadenie iný banner. Samozrejme je aj tak možné používať inú sadu bannerov na mobilné zariadenia a inú na desktop. 

Na zobrazenie na mobilných zariadeniach odporúčame voliť pomer strán blízky štvorcu. Takýto obrázok bude vyzerať na zvislej mobilnej obrazovke lepšie ako široký obrázok. Pomôcť vám môže sprievodca veľkosťou bannerov v pomocníkovi Google. Odporúčame voliť rozlíšenie 800 x 665 px kvôli lepšej viditeľnosti na mobiloch s vyšším rozlíšením displeja. V prípade carouselu je dobré mať pre plynulé striedanie obrázkov každý z nich rovnako veľký s rovnakým pomerom strán.

Pokiaľ si chcete na počítači otestovať, ako budú vaše bannery či carousel na mobile vyzerať, odporúčame použiť napr. v prehliadači Edge Ďalšie nástroje → Vývojárske nástroje (klávesová skratka Fn + F12) funkciu Emulácia (v záložkách hore), ktorá nasimuluje zobrazenie na mobilných telefónoch.

Alebo môžete využiť aj Nástroje pre vývojárov v prehliadači Chrome. Tam môžete v hornej nástrojovej lište použiť nástroj Toggle Device Toolbar (skratka Ctrl+Shift+I).