0 Kč bez DPH

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í.

Vzorový motiv

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í

Šířka rozlišení obrazovky v px Výška motivu
do 767px 200px
do 991px 250px
nad 992px  390px

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ýběr motivu webu

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

Výchozí zobrazení motivu tablet Výchozí zobrazení motivu telefon

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. 

Nastavení obrázku 100%

Přidat stránku

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. 

Přidat stránku do struktury

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

Jiné zobrazení motivu tablet Jiné zobrazení motivu telefon

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. 

Zdrojový kód ikonka


Třída container

Výsledné zobrazení 

Třída container 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. 

Tým inPage
info@inpage.cz

Web s doménou ZDARMA

Přidat komentář

Přehled komentářů

  • Pozadí obrázků ve fotogalerii

    5. 2. 2019 14:13:05 | Vladislav Kubica

    Prosím, jak změním ve Fotogaleriích pozadí obrázků a border-radius v "náhledových" obrázcích? Např. U https://www.vpodpalubi.com/fotogalerie/projdete-se-v-podpalubi/
    Nelíbí se mi,. že pozadí webu je jiné než pozadí náhledových obrázků.

    Odpovědět | Zobrazit odpovědi

    • Re: Pozadí obrázků ve fotogalerii

      5. 2. 2019 14:31:49 | Tým inPage

      Dobrý den,

      úpravu u náhledových obrázků u zmíněného webu šablony ONE lze provést níže uvedeným stylem

      .item-photo .thumbnail {
      border-radius:5px; /*oblé rohy*/
      background-color:transparent; /*pozadí průhledné, nebo lze zadat barvu*/
      border: 1px solid #eee; /*tloušťka, styl a barva čáry*/
      }

      Dále je nastaveno pozadí samotného náhledového obrázku, to upravíte níže uvedeným stylem.

      .img-thumbnail {background:transparent} /*průhledné pozadí, nebo lze zadat barvu*/

      Odpovědět

  • vytvoření motivu pomocí java, css

    10. 12. 2017 7:49:09 | Jana

    Dobrý den,

    je možné pro šablonu ONE vytvořit motiv stránky pomocí JavaScriptu, tj. například do motivu vložit posuvný text tzv. slide in text?

    Odpovědět | Zobrazit odpovědi

    • Re: vytvoření motivu pomocí java, css

      11. 12. 2017 15:30:25 | Tým inPage

      Dobrý den,

      ano, možné to je. V případě problému s vložením konkrétního scriptu, nám napište na email: admin@zoner.cz

      Odpovědět