Možnosti vložení a zobrazení motivu - šablona ONE

27. 4. 2017

Chcete oživit webové stránky přidáním motivu? Pak je tento návod přímo pro vás. V inPage najdete několik možností, jak si v šabloně ONE motiv zobrazíte. V článku si ukážeme popis těch nejčastějších postupů i s názornými ukázkami chování motivu v responzivních velikostech.

Pro tyto účely jsme úmyslně použili motiv, který má ústřední obrázek vpravo, nikoliv uprostřed, aby vynikly rozdíly v zobrazení.

Doporučujeme zvolit velikost 1920x390px, na vyšších rozlišeních se obrázek roztáhne. Kvůli vyššímu rozměru původního motivu pak doporučujeme použít aplikaci Tinypng, která vám pomůže uspořit velikost souboru a tím zvýšit rychlost načtení stránky. 

1. možnost: Motiv přes celou šířku obrazovky, v menším rozlišení se ořezává z obou stran

Tento typ zobrazení je výhodný zejména pro motivy, které mají ústřední obrázek uprostřed. Při užším zobrazení se motiv výrazně nezmenšuje na výšku, ale je ořezáván souměrně z obou stran. Výška při jednotlivých úrovních zobrazení je uvedena v následujícím výpisu. Více o úrovních responsivního zobrazení naleznete v článku Jak upravit responzivní design. 

Výška motivu v jednotlivých úrovních responsivního zobrazení

Postup vložení motivu

Jde o výchozí postup. V záložce Vzhled → Motiv vyberete dle názvu obrázku ten, který jste si dopředu přidali mezi obrázky. Vpravo je také možnost vložit nový obrázek motivu přímo z vašeho počítače.  

Výsledné zobrazení na menším monitoru a telefonu

2. možnost: Motiv přes celou šířku obrazovky, v menším rozlišení je zobrazen stále v plné šířce

Tento typ zobrazení je vhodný v případě motivu, který má prvky rozprostřené přes celý motiv nebo například pouze vpravo (jako v našem příkladu). Po celou dobu jde vidět motiv v plné šířce, ale zůstává zachován jeho poměr stran, a proto se oproti první možnosti výrazně zužuje. Výška motivu je tak po celou dobu dopočítávána z aktuální šířky. 

Postup vložení motivu

V prvním kroku si vytvořte stránku s názvem např. Motiv, do které vložte obrázek a nastavte mu šířku 100 %. Stránku uložte. 

V druhém kroku v záložce Struktura  → Prvky Stránek → Základní prvky → Motiv vyberte stránku Motiv, kterou jste před chvílí vytvořili a změny uložte. 

Výsledné zobrazení na menším monitoru a telefonu

3. možnost: Motiv v šířce obsahu, v menším rozlišení je zobrazen stále v plné šířce

Tento typ zobrazení se využívá asi nejméně, ale na některých webech motiv nejlépe vynikne, pokud nezasahuje až do krajů stránky, ale je pouze v rozsahu textu. 

Postup vložení motivu

První kroky jsou stejné jako u druhé možnosti. Nejdříve si vložte novou stránku, do ní vložte obrázek motivu a nastavte šířku 100 %. 

Poté si otevřete zdrojový kód a kód obrázku obalte do prvku div s třídou .container podle vzoru na obrázku. 

Výsledné zobrazení 

Poznámka k výšce motivu

Rozměr 390px na výšku je výchozí hodnotou nastavenou v šabloně jako maximální výška motivu. V případě zájmu o vyšší motiv je nutné provést změnu pomocí kódu ve vlastních stylech CSS, nebo se obrátit na nás a my vám s úpravou pomůžeme.