Bannery

Banner je pole s obrázkovým obsahem obvykle reklamního charakteru. Pomocí banneru, který je umístěn na nejatraktivnějších místech e-shopu, můžete informovat zákazníky o zajímavých marketingových příležitostech jako jsou akční produkty, novinky, výprodej, aktualita apod.

Typy bannerů

Podle počtu snímků

• Statické - Do banneru je vložen pouze jeden snímek, proto nevznikne animace.
• Animované (carousel) - Do banneru je vloženo více snímků, které lze posouvat pomocí animace.

Podle rozvržení ve snímku

Možnosti zobrazení obrázku a textového obsahu ve snímku:

• Obrázek - Obrázek (případně video) se proporcionálně přizpůsobuje celé ploše snímku. Textový obsah je třeba zakomponovat do samotného obrázku. Více zde.
• Obrázek na pozadí - Obrázek (případně video) se vloží do pozadí snímku jako tapeta. Součástí obrázku by neměl být textový obsah. Ten se plní v administraci u jednotlivých snímků. Více zde.
• Obrázek v popředí - Obrázek (případně video) se vloží do popředí snímku vedle textového obsahu. Jeho pozice se nastavuje v modulu Designer. Součástí obrázku by neměl být textový obsah. Ten se plní níže v administraci u jednotlivých snímků. Více zde.

Banner typu Obrázek

Obrázkový banner se skládá z jednoho nebo více snímků. Snímek obsahuje pouze obrázek, který se roztáhne na celou jeho plochu a proporcionálně se přizpůsobí její šířce.

Textový obsah je součástí obrázku.

Postup v administraci

1. V menu administrace zvolte sekci Obsah / Bannery.
2. Vyberte již předpřipravený banner (pro umístnění na hlavní stránce) nebo vytvořte nový (pro umístnění na dalších stránkách).
3. Přejděte do oddílu Hlavní.
4. Zapněte Rozvržení ve snímku na možnost Obrázek.
   
5. Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru. 
6. Přidejte obrázky nebo videa do snímků banneru. Více zde.
7. V oddílu Rozšířené lze omezit maximální velikost na šířku obrázku nebo kontejneru obalujícího samotný obrázek. 
   
   Tato funkce je dostupná od grafických šablon verze 3.9 modulu Designer. Více zde.
8. Provedené změny Uložte. 

Zobrazení desktopu a tabletu

Texty jsou přímo v obrázku snímku. Obrázek se zmenšuje / zvětšuje dle šířky snímku banneru.

Zobrazení v mobilním telefonu

Menší texty jsou v mobilu nečitelné.

Banner typu Obrázek na pozadí (cover)

Jedná se o typ banneru, kde je obrázek rozložen na pozadí snímku jako tapeta a přizpůsobuje se celé jeho ploše.

Rozměry banneru

• Šířka banneru se přizpůsobí na celou plochu snímku.
• Výška banneru je dynamická. Odvíjí se od výšky textového obsahu uvnitř banneru a nastavení minimální výšky banneru v modulu Designer. Více zde.

Obrázek na pozadí

Do tohoto banneru se obvykle vkládá pouze podkresový obrázek nebo video. Zobrazí se na pozadí plochy snímku a zcela ho vyplní bez případných mezer. Obrázky bývají oříznuté dle následující logiky:

• Široké obrázky se oříznou vpravo a vlevo.
• Vysoké obrázky se oříznou nahoře a dole.

Proporce obrázku však zůstávají zachovány. Což je důležité, aby se obrázek nedeformoval.

Texty by neměly být součástí obrázků, jinak může dojít k nežádoucím efektům:

• Na menších obrazovakách nebudou texty čitelné,
• Texty v obrázku na pozadí se mohou oříznout.

Rozměry obrázků

Doporučené rozměry obrázků získáte přímo v administraci e-shopu po nastavení typu banneru.

Textový obsah

Jak už jsme si řekli, texty nejsou součástí obrázku. Vkládají se do administrace. Zobrazí se v HTML formě nad obrázkem coveru. Takový text bude mít vždy neměnnou velikost písma, takže bude čitelný i v mobilu. Z hlediska SEO je navíc perfektně optimalizovaný a indexovatelný.

Na obrázku níže vídíte, že text lze označit, což znamená, že není součástí obrázku.

Postup v administraci

1. V menu administrace zvolte sekci Obsah / Bannery.
2. Vyberte již předpřipravený banner (pro umístnění na hlavní stránce) nebo vytvořte nový (pro umístnění na dalších stránkách).
3. Přejděte do oddílu Hlavní.
4. Zapněte Rozvržení ve snímku na možnost Obrázek na pozadí.
   
5. Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru. 
6. Přidejte snímky do banneru (obrázek, video, textový obsah). Více zde.
7. Provedené změny Uložte. 

Zobrazení v desktopu a tabletu

Zobrazení v mobilním telefonu

Struktura banneru se přeskládá tak, aby jednotlivé grafické prvky a texty zůstaly v původní velikosti.

Banner typu Obrázek v popředí

Obrázek v popředí je možné nastavit pouze u hlavního banneru (banner1) na hlavní stránce e-shopu. 

Obrázek, který vkládáte do snímku se zobrazí v samostatné vrstvě vedle textového obsahu. Viz náhled.

Rozměry banneru

• Šířka banneru se přizpůsobí na celou plochu snímku.
• Výška banneru je dynamická. Odvíjí se od výšky textového obsahu uvnitř banneru, výšky obrázku v popředí a nastavení minimální výšky banneru v modulu Designer. Více zde.

Obrázek v popředí

V mobilních zařízeních se obrázek zobrazí pod textovým obsahem. V případě nutnosti se proporcionálně zmenší na základě šířky snímku.

Texty by neměly být součástí obrázku.

Postup v administraci

1. V menu administrace zvolte sekci Obsah / Bannery.
2. Vyberte banner1 - Hlavní banner.
3. Přejděte do oddílu Hlavní.
4. Zapněte Rozvržení ve snímku na možnost Obrázek na pozadí.
   
5. Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru. 
6. Přidejte snímky do banneru (obrázek, video, textový obsah). Více zde.
7. Provedené změny Uložte. 
8. Pro další nastavení snímků banneru přejděte do sekce Grafika / Designer.
9. Klikněte na ikonu v hlavním banneru pro výběr Rozložení. Univerzální postup dle nápovědy zde.
   
10. Vyberte rozložení banneru č. 3 až 6. Pouze ty umožňují nastavení obrázku v popředí. 
11. Klikněte na ikonku  v hlavním banneru pro nastavení Vzhledu. Na obrázku níže vidíte v levé části formátovací možnosti sekce Banner - hlavní. Šipky dále ukazují na podsekci snímku 1 a jeho obrázek. Vzhled snímků ovlivňuje řada dalších nastavení v modulu Designer, jako např. motiv, písmo, zarovnání atd. Univerzální postup dle nápovědy zde.
    
12. Provedené změny Uložte.

Zobrazení na e-shopu

Desktop / tablet

Obrázek je vedle textu v samostatné vrstvě.

Mobilní telefon

Obrázek se přesune pod text.

Snímky v banneru

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.

Posouvání mezi snímky

Carousel lze mezi snímky posouvat pomocí navigace s terčíky ve spodní části banneru nebo šipek "předchozí" a "další". 

Možnosti posouvání snímků v banneru lze upavit v oddílu Rozšířené.

Přidání snímku do banneru

1. V menu administrace zvolte sekci Obsah / Bannery.
2. Vyberte již předpřipravený banner (umístnění na hlavní stránku) nebo vytvořte nový (umístnění na dalších stránkách).
3. V detailu banneru přejděte do oddílu Snímky.
4. Klikněte na tlačítko + Nový.
5. Vložte obrázky nebo videa.
6. Upravte pořadí snímků dle potřeby potažením za symbol šipek (viz. dále Úprava snímků).
7. Uložte.

Úprava snímků

Po najetí myší na snímek se zobrazí základní informace o jeho obrázku a dále akční tlačítka.

Přesunout snímek - Uchopením ikonky myší a potažením lze měnit pořadí snímků.

Detail snímku - Otevře okno pro vyplnění popisu snímku. Viz dále.

Smazat snímek - odebere snímek z nabídky včetně jeho obrázku.

Popis snímku

Do snímku je třeba vyplnit texty. To se liší podle toho, zda máte zapnutou funkci Cover.

• Obrázkový banner - Obsahuje pouze titulek, který se vloží jako alternatvní popis a titulek obrázku. Zobrazuje se pouze ve zdrojovém kódu a pro návštěvníka je viditelný pouze v podobě bublinky po najetí myší na obrázek.
• Cover banner - Obsahuje kompletní nabídku pro vyplnění textového obsahu, která je přímo viditelná návštěvníkovi. Zobrazí se v HTML podobě a je umístěný nad obrázkem v pozadí.

Změna obrázku ve snímku

Pokud jste se rozhodli změnit obrázek ve snímku, není třeba smazat celý snímek, čímž navíc přijdete o jeho textový obsah. V popisu lze také změnit obrázek snímku.

Optimalizace obrázků

Obrázky v bannerech mohou významně ovlivnit rychlost načítání celého e-shopu. Proto se snažte jejich velikost i počet optimalizovat. Doporučujeme maximálně 4 - 5 snímků v jednom banneru.

Pro zachování rozměrů a kvality obrázku je potřeba vložit jej do složky Grafika ve Správci souborů. Obecně platí, že čím větší obrázek, tím méně rozostřený. Ovšem s rozměry roste velikost v kB. Více o optimalizaci obrázků najdete zde.

Dle typu banneru se v některých případech zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru. Pokud není toto pole zobrazeno, pak se obrázek přizpůsobuje responzivně a nelze pro něj stanovit optimální velikost.

Během responzivní změny velikosti banneru systém provádí automatický výřez u zdrojového obrázku. Nelze si uživatelsky nastavit konkrétní výřez obrázku, který by se v této situaci použil. 

Zdroje obrázků

Obrázky do pozadí coveru lze stáhnout v různých fotobankách jako např. www.freeimages.com, www.unsplash.com nebo www.openphoto.net. Výhodou je, že jsou zdarma.

Umístění banneru

1. V obsahové části - V hlavní obsahové části e-shopu.
2. Ve sloupci - Pokud se v grafice nachází sloupec, objeví se banner v něm.

Více zde