Bannery
Co je to Banner
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.
Co je to Snímek
Snímky v banneru jsou jednotlivé obrázky, které jste do banneru přidali.
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.
Rozvržení banneru
Banner může mít dvě rozvržení:
- Klasický banner - Každý snímek má vlastní "stránku" (posouvání pomocí navigačních teček)
- Sloupcový banner - Každý snímek má vlastní sloupec (zobrazí se ihned, bez nutnosti posouvání)
(více zde)
Rozvržení snímku
Rozvržení 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.
Počet 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.
Snímek typu Obrázek
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
- V menu administrace zvolte sekci Grafika / Bannery.
- 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).
- Přejděte do oddílu Hlavní.
- Zapněte Rozvržení ve snímku na možnost Obrázek.
- Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru.
- Přidejte obrázky nebo videa do snímků banneru. Více zde.
- Provedené změny Uložte.
Zobrazení desktopu a tabletu
Zobrazení na menších zařízeních
Texty jsou přímo obsahem samotného snímku (obrázku). Jelikož se snímek pro menší zařízení automaticky upravuje (zmenšuje) dle šířky zařízení, na menších zařízeních jsou texty nečitelné.
Hodí se tedy pouze pro snímky, ve kterých se text nenachází, anebo je dostatečně velký.
Snímek typu Obrázek na pozadí
Snímek je rozdělen na dvě části:
- Pozadí - Pozadí tvoří samotný obrázek
- Text - Text je v popředí obrázku. Není závislý na zmenšování obrázku pro menší zařízení a bude vždy čitelný.
(na příkladu je textová část, která se odděluje od pozadí zvýrazněna červeně)
Obrázek na pozadí
Do tohoto snímku 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.
V obrázku by se neměly zobrazovat žádné texty, jinak dojde k jejich nečitelnosti při zmenšování obrázku.
Rozměry pozadí snímku
- Šířka snímku se přizpůsobí na celou plochu banneru.
- Výška snímku je dynamická. Odvíjí se od výšky textového obsahu uvnitř banneru a nastavení minimální výšky snímku v modulu Designer. Více zde.
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í snímku (obrázku). Vkládají se do administrace. Zobrazí se v HTML formě nad obrázkem. Takový text bude mít vždy čitelnou formu 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
- V menu administrace zvolte sekci Grafika / Bannery.
- 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).
- Přejděte do oddílu Hlavní.
- Zapněte Rozvržení ve snímku na možnost Obrázek na pozadí.
- Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru.
- Přidejte snímky do banneru (obrázek, video, textový obsah). Více zde.
- 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.
Snímek 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.
Snímek je rozdělen na tři části:
- Pozadí - Pozadí tvoří jej konkrétní barva, anebo barva s motivem (nastavená v Designerovi)
- Obrázek - Tvoří samotný nahraný snímek.
- Text - Text je v popředí obrázku. Není závislý na zmenšování obrázku pro menší zařízení a bude vždy čitelný.
Rozměry pozadí snímku
- Šíř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
- V menu administrace zvolte sekci Grafika / Bannery.
- Vyberte banner1 - Hlavní banner.
- Přejděte do oddílu Hlavní.
- Zapněte Rozvržení ve snímku na možnost Obrázek na pozadí.
- Zároveň se zobrazí informační pole, ve kterém se dozvíte doporučené rozměry obrázku v banneru.
- Přidejte snímky do banneru (obrázek, video, textový obsah). Více zde.
- 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.
Posouvání mezi snímky
Mezi snímky se lze posouvat pomocí navigace s tečkami ve spodní části banneru nebo šipek "předchozí" a "další".
V případě vypnutého ručního posouvání se mění snímky automaticky podle zadaného časového intervalu.
Možnosti posouvání snímků v banneru lze upravit v oddílu Rozšířené. Automatické posouvání aktivujete odškrtnutím volby Manuální posouvání snímků. Poté se zpřístupní pole Délka zobrazení snímku (ms), kde si můžete nastavit délku zobrazení snímků v banneru. Zadává se v milisekundách.
Přidání snímku do banneru
- V menu administrace zvolte sekci Grafika / Bannery.
- 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).
- V detailu banneru přejděte do oddílu Snímky.
- Klikněte na tlačítko + Nový.
- Vložte obrázky nebo videa.
- Upravte pořadí snímků dle potřeby potažením za symbol šipek (viz. dále Úprava snímků).
- 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.
Detail snímku - Otevře okno pro vyplnění popisu snímku. Viz dále.
Přesunout snímek - Uchopením ikonky myší a potažením lze měnit pořadí snímků.
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
- V obsahové části - V hlavní obsahové části e-shopu.
- Ve sloupci - Pokud se v grafice nachází sloupec, objeví se banner v něm.
Publikované a neveřejné bannery
Všechny bannery, které upravujete v Designerovi se upravují a ukládají vždy pouze pro zobrazení Designera (vidíte jen vy). Pokud změny v banneru budete chtít propsat na svou ostrou publikovanou doménu, musíte vámi uložené změny publikovat pomocí tlačítka v horní liště designera.
Pokud však ale budete pracovat dlouhodobě na grafické úpravě ať už přes Designer, anebo přes Editor kódu, máte možnost si bannery rozdělit a ponechat si možnost upravovat bannery pro svou grafickou úpravu, aniž by úpravy zasahovaly do publikované verze bannerů. Díky tomu můžete například v případě nutnosti (sezonní akce) upravit banner nezávisle na tom, zda-li upravujete grafiku, anebo ne.
Jak rozdělení provést?
Rozdělení bannerů můžete aktivovat v sekci Nastavení / Grafika.
Po aktivaci se vám v sekci Grafika zobrazí sekce Publikováno, která obsahuje podsekce Bannery, Headlines a Vyskakovací okno.
Pokud upravíte tyto sekce v této části Grafika / Publikováno, automaticky se vám vámi provedené změny projeví na Publikované verzi.
Všechny změny provedené v Grafika / Bannery se vám po uložení projeví pouze v Designerovi a na Publikované verzi se neprojeví.
Banner typu Group
Banner typu group je banner, který je rozdělen na 4 samostatné snímky ve sloupcích.
Jak banner nastavit
- V menu administrace zvolte sekci Grafika / Bannery.
- V pravém horním rohu klikněte na tlačítko + Nový.
- Přidejte požadované snímky banneru a jejich textace.
- V sekci Rozšířené najděte pole Atribut a vyplňte hodnotu
group.
- V sekci hlavní nezapomeňte banner nastavit pro zobrazení na eshopu a v konkrétním jazyku (pokud jazyky máte)
- Provedené změny Uložte.
Po vytvoření se banner automaticky umísti na Homepage vašeho eshopu. V jiné sekci není možné banner zobrazit.
Pozici banneru můžete změnit v Designerovi (Více zde).
