0 Kč s DPH

Šablona Hanami - podrobný popis nových funkcí

Hanami je šablona, která se vám zcela přizpůsobí. Moderní vzhled ve stylu “onepage” umožňuje lépe
manipulovat s jednotlivými prvky na stránce, které nově můžete na konkrétních stránkách zobrazit či skrýt. V tomto článku vám ukážeme, jak na to.

Doporučené rozměry a zobrazované velikosti

Tyto velikosti se vám budou hodit kdykoli budete chtít změnit motiv, nastavit velikost loga nebo třeba jen zkrotit velikost zobrazovaných obrázků e-shopu.

Motiv

Doporučená velikost je 1920 x 500px. Obrázek vyplňuje vždy celou výšku i šířku motivu a je centrován na střed. Při velkém zobrazení (monitor) se nezobrazuje žádný prázdný okraj stránky a při malém (mobil) vidíte vždy střed obrázku. 

Logo

Doporučená velikost je 300 x 66px. Logo je limitováno pouze výškou. Maximální výška je 55px. Tomuto rozměru je přizpůsobena jeho šířka. Logo se vám nikdy neořízne, ale přizpůsobí.

Náhledové obrázky

Obrázky ve fotogaleriích a e-shopu se zobrazují v poměru 5:4. Zobrazuje se vždy minimálně 100% šířka a výška. Případný přesahující rozměr je v náhledovém obrázku oříznut.

Práce s vlastními boxy

Šablona Hanami je svým rozložením sestavena jako jednosloupcová šablona. Jednotlivé prvky stránky se řadí pod sebe. Na náhledu vpravo vidíte základní rozvržení prvků. Pro lepší orientaci jsou barevně odlišené.

Modré prvky, jako jsou vlastní box motiv, vlastní box 1, vlastní box 2, vlastní box 3 a patička, lze naplnit libovolným obsahem v sekci Nastavení -> Prvky stránek.

Růžové prvky, jako jsou Top produkty, Aktivní rubrika, oblíbené odkazy a náhodný obrázek, se plní automaticky podle funkce, pro kterou jsou vytvořeny. Většině z těchto prvků můžete také měnit pozici v sekci Nastavení -> Rozmístění prvků stránek.

Zobrazení prvků na stránce

Vy výchozím stavu se všechny prvky zobrazují na všech stránkách. Na některých místech si je můžeme jednoduše vypnout přiřazením vlastnosti "display: none".

Stránky kód stránky Prvky  kód prvku
Hlavní strana #index Motiv #motiv
Rubrika .rubric Separator #separator
Detail příspěvku .article-detail Vlastní box 2 #second
Výpis galerií #galleries Aktivní rubrika #blog
Detail galerie .gallery-detail Vlastní patička #footbox
Stránka obrázku .photo-detail    
Vstupní strana e-shopu #eshop    
Kategorie e-shopu .category-detail    
Detail produktu .product-detail    
Stránka košíku #order    
Dokončení objednávky #finish    
Stránka vyhledávání #search    
Stránka stahování #download    
Stránka složky .folder-detail    
Kontakt #support    
Mapa webu #webmap    

Práce s prvky

V administraci vlastního vzhledu přejdeme do sekce VZHLED a v postranním panelu na pravé straně vybereme položku Vlastní CSS styl. Do editoru Definice stylů zapíšeme naše hodnoty a v nastavení nad editorem zaškrtneme políčko Nastavit styl jako aktivní.

Jednotlivé třídy a identifikátory vypisujeme v pořadí, v jakém jsou na webu obsaženy. Stránka tedy bude vždy před prvkem. Zapíšeme identifikátor (#) či třídu (.) stránky a následně zapsaný prvek oddělíme mezerou.

Příklad skrytí motivu na stránce e-shopu:

 #eshop #motive { display: none } 

Separátor

Separátory ve one-page šablonách fungují jako vizuální oddělovače obsahu. Nejběžněji tvoří obsah takovýchto oddělovačů odkazy na sociální média, citace, různá počítadla, tlačítka atd. Zpravidla se jedná o obsah s nepříliš vysokou informační hodnotou.

Vlastní box 1 je už pro tuto funkci přichystán. Jeho základní umístění je mezi Úvodním textem a Vlastním boxem 2, ve kterém můžete mít další stránku textu. V živém náhledu šablony vidíte, že tento prvek má pozadí se zajímavým efektem parallax. 

Vytvoření separátoru

Vytvořte si stránku, do které umístíte text nebo obrázky, které se v separátoru budou zobrazovat. Tuto stránku vyberte jako vlastní box 1 v Nastavení -> Prvky stránky.

Nachystejte si obrázek na pozadí, doporučená velikost je 1920 x 1200px, a nahrajte ho do obrázků v administraci. Url obrázku najdete v jeho detailu v sekci optimalizace pro vyhledávače.

Do vlastního CSS stylu napište:

#separator { background-image: url("/obrazek/3/vas-obrazek/") }

Obrázek se chová podobně jako motiv: vyplní vždy celý prostor, takže zde nezůstane prázdný okraj. Pokud chcete obrázek vystředit, zapište do stylu i pozicování background-position, kde první hodnota znamená údaj o horizontálním umístění a druhá hodnota údaj o vertikálním umístění.

Příklad:

#separator { background-image: url("/obrazek/3/vas-obrazek/"); 
 background-position: center center; }

Kontakty

Kontakty se zobrazují, když vyplníte údaje v sekci Nastavení -> Kontakty. Při vyplnění kontaktů se automaticky zobrazí i rychlý kontakt (telefon, e-mail) v hlavičce stránek.

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Písmo v menu

    29.7.2017 17:50:29 | Zdenka Sekená

    Dobrý den,
    na web ( https://www.interierovydesigner.com ) stránkách by jsme chtěli v hlavním menu písmo Century Gotik, ve Vašich návodech se mi návod nepodařilo najít.
    Platí pro šablonu Hanami ve Vašich návodech:
    https://blog.inpage.cz/inpage/sirius-upravy-menu/ ?
    Děkuji za odpověď Zdenka Sekená

    Odpovědět | Zobrazit odpovědi

    • Re: Písmo v menu

      31.7.2017 13:54:05 | Tým inPage

      Dobrý den,
      zde máte návod na to jak změnit písmo na stránkách: https://blog.inpage.cz/inpage/zmena-pisma-na-webu/
      Písmo, které jste si zvolila v rámci google fonts není, ale nabízí plno dalších jiných zajímavých stylů písma.

      Případně pro více informací napište na admin@zoner.cz

      Odpovědět

  • úprava pozadí stránky

    7.3.2017 15:32:57 | Květoslav Vilímek

    Dobrý den,

    je prosím možné v šabloně HANAMI měnit pozadí stránky, ideálně bych chtěl vložit "gradient", jak je popsáno na vašem blogu, vzorový zápis body { background: url("/obrazek/3/url obrázku") repeat-x 0 0 #F2F2F2; } mi bohužel nefunguje.

    Děkuji

    Odpovědět | Zobrazit odpovědi

    • Re: úprava pozadí stránky

      8.3.2017 13:08:25 | Tým inPage

      Dobrý den,
      kód pro "gradient" je třeba vygenerovat např. na těchto stránkách:http://www.colorzilla.com/gradient-editor/ . Vygenerovaný css kod zapsat do zápisu:

      body {
      *zkopírovaný kod*
      }

      Odpovědět

      • Re: Re: úprava pozadí stránky

        9.3.2017 13:27:27 | Květoslav Vilímek

        Dobrý den,

        jde mi o to, že ať dělám, co dělám, žádný background zadaný v ccs stylu se mi v šabloně Hanami neobjevuje. Nevím kde dělám chybu, zkoušel jsem jen jednobarevné pozadí, a to také nefungovalo. Můžete se mi na to, prosím, podívat, stránky se teprve snažím postavit v demo módu, odkaz je: https://demo-11942.inpage.cz/

        Děkuji!

        Odpovědět

        • Re: Re: Re: úprava pozadí stránky

          14.3.2017 15:07:56 | Tým inPage

          Dobrý den,

          v případě, že Vám nefungovala ani jedna z možností zkuste tento zápis:
          ( Gradient si mužete vygenerovat na této webové stránce: http://www.colorzilla.com/gradient-editor/ )

          #wrap {
          *zkopirovaný gradient*
          }

          Odpovědět

  • zveřejňování data u fotogalerie + vlastní box1

    6.3.2017 21:19:26 | katazaj

    Dobrý den,
    prosím, je možné vypnout zverejňování datumu u fotogalerie? Případně i informaci o počtu fotografií?
    Vlastní box1 - lze nastavit jeho zveřejnění pouze na HP?
    Děkuji, KZ

    Odpovědět | Zobrazit odpovědi

    • Re: zveřejňování data u fotogalerie + vlastní box1

      8.3.2017 13:24:41 | Tým inPage

      Dobrý den,
      jedná se o složitějiší úpravu CSS,
      vypnout zveřejnění datumu lze, i počet fotografii. Stači v administraci v sekci Vzhled → vlastni css styl napsat:

      #photogalleries .thumbnail dl {
      display: none;
      }

      Co se vlastního boxu týče kod pro zobrazení vlastního boxu 1 na HP je potřeba zapsat tento kód ve vlastních stylech css
      #separator{
      display:none;
      }
      #index #separator{
      display: block;
      }
      #panel-custom-1 {
      display: none;
      }
      #index #panel-custom-1 {
      display:block;
      }

      V případě že si nebudete vědět rady, nebo budete potřebovat další úpravy šablony mužete využit našich doplnkových služeb a my práci uděláme za Vás.
      https://www.inpage.cz/doplnkove-sluzby/

      Odpovědět

  • odstranění motivu z kategorií

    28.2.2017 12:35:06 | Radek Trnka

    Dobrý den
    je možné použít nějaký způsob jak v jednom řádku nahradím motiv u všech produktů nebo je nutné pro každý přidaný produkt na eshopu přidávat do vlastního stylu záznam
    tedy místo category-123456 například jen category -******

    Odpovědět | Zobrazit odpovědi

    • Re: odstranění motivu z kategorií

      3.3.2017 15:10:27 | Tým inPage

      Dobrý den, tyto stránky mají společnou třídu .category-detail a produkty zase .product-detail, tak k hromadné úpravě doporučuji využití právě těchto tříd.

      Odpovědět

  • RE: RE: Anglické názvy měsíců

    10.8.2016 23:21:08 | Pavel Král

    Dobrý den, děkuji za skvělý servis.

    Odpovědět

  • RE: Anglické názvy měsíců

    8.8.2016 10:41:03 | Tým inPage

    Dobrý den, děkujeme za komentář. Šablonu jsme upravili, aby se zkratky měsíců zobrazovaly dle vybraného jazyka webu. Nyní se Vám již budou zobrazovat v češtině.

    Odpovědět

  • Anglické názvy měsíců

    4.8.2016 15:15:21 | Pavel Král

    Dobrý den,
    je možno, prosím, nějakým dostupným způsobem změnit anglické zkratky měsíců ve výpisu článků z rubriky na české?
    Děkuji.
    PK

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.