0 Kč bez DPH

One-page stránky na šabloně Hanami

7. 4. 2016

One-page neboli jednostránkový web má všechny informace pouze na jedné stránce bez dalších podstránek. V praxi web vypadá jako dlouhá rolující se úvodní stránka. Pomocí menu pak neprocházíte jednotlivé stránky, ale přibližujete se na sekce v rámci této jedné strany.

Typický je jednoduchý design s použitím velkých fotografií přes celou šířku prohlížeče. Toto řešení je nyní velmi vyhledávané a je vhodné především pro menší webové prezentace.

Pro one-page web se skvěle hodí inPage šablona Hanami. Na obrázku vpravo vidíte rozložení prvků stránky u šablony Hanami. Pro vytvoření one-page webu vám bude stačit, když do těchto prvků správně vložíte obsah.

Praktický příklad krok za krokem

Pro vytvoření praktického příkladu jsem si zvolila web kavárny, který bude mít prvky:

1. Úvod (O nás)

2. Náhledová fotogalerie

3. Kontakty

4. Pořádané akce v kavárně

Pro ztížení vlastních podmínek jsem se rozhodla, že mi bude stačit varianta inPage MINI, kde mohu využít pouze 3 stránky obsahu. Je zdarma a pro web kavárny dostačující.

Umístění obsahu

one-page webÚvod s fotogalerií

Nejdříve si nachystám stránku s úvodním textem. Následně si vytvořím galerii, do které umístím 3, 6 nebo 9 obrázků (za chvíli zjistíte proč). Tuto galerii budu připojovat k titulní stránce v menu Nastavení -> Prvky stránek -> Titulní stránka. Zde si vyberu Úvodní text a u roletky Způsob zobrazení vyberu obrázky fotogalerie. V pořadí další roletka je Doplňující výběr, kde zvolím vybranou fotogalerii a počet zobrazovaných obrázků na stránce. Šablona Hanami fotky řadí po 3 do jednoho řádku, je tedy vhodné vybrat 3, 6 nebo 9 obrázků.

Druhý text

Pro kavárnu je nejdůležitější vědět, kde ji najdete a kdy má otevřeno. Zvolila jsem tedy tuto informaci jako druhou v pořadí. Text o těchto údajích jsem vložila do Vlastní box 1. Lze ho využít také jako separátor s fotografií na pozadí.

Výpis aktualit nebo třetí text

Protože mám pouze inPage MINI, která mi nedovolí využívat aktivní rubriky pro výpis pořádaných akcí a aktualit, píšu tyto informace pouze textově do jedné stránky. Tyto informace jsem vložila do vlastního boxu 2.

Menu

U one-page webů se namísto klasických odkazů v menu (na určitou stránku) používají kotvy, které vás posunou na určenou část webu. Vždy potřebujete znát cíl odkazu (id), teprve pak lze vytvořit odkaz na tento cíl. Více o kotvách jsme napsali v článku Kotvy - záložky na stránce.

Cíl odkazu

V tomto případě budu využívat jako cíl prvky šablony a stačí mi, když do menu vložím odkazy na ně. V tabulce je seznam umístění a jejich id.

umístění id
vlastní box 1 #panel-custom-1
vlastní box 2 #panel-custom-2
aktivní rubrika #panel-news
kontakty #footer-contact
vlastní patička #footbox

Odkaz na cíl

Odkaz na umístění (cíl) bude vypadat takto:

https://nazev-domeny.cz#panel-custom-1 tj. odkaz na úvodní stránku, kde je kotva s názvem panel-custom-1

Pokud by vám z hlediska SEO nebo sdílení obsahu vadilo využívání id šablony a raději byste zvolili vlastní název odkazu, vytvořte si vlastní kotvy.

Do hlavního menu vložíme odkazy v menu Nastavení -> Záložky - Oblíbené odkazy.

V sekci Přidat záložku vyplňte nejprve Název nové záložky v menu, pak její url a následně zaškrtněte pouze Zobrazit v menu. Poté potvrďte tlačítkem Přidat. Odkaz se nyní objeví v hlavním menu vašich webových stránek.

odkaz na kotvu

Nyní je můj jednostránkový web hotový.

Kateřina Koukalová
Webdesigner
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • lze změnit vygenerovaný og:image?

    27. 2. 2017 17:58:52 | zdenek stoklasa

    dobrý den, je možné nějakým způsobem změnit vygenerovaný obrázek v metatagu og:image? Používám šablonu Hanami a do og:image se automaticky generuje logo. Facebook má ale rád velikost og:image 1200x630px, rád bych tam měl proto jiný obrázek...

    Odpovědět | Zobrazit odpovědi

    • Re: lze změnit vygenerovaný og:image?

      28. 2. 2017 8:31:13 | Tým inPage

      Dobrý den, pro zvolení Vámi požadovaného obrázku můžete použít funkci s označením "funkce pro experty". Zapnete si ji v nové administraci v Nastavení -> Prostředí. A poté na konci úprav každé stránky naleznete možnost si funkci zapnout i pro tuto jednotlivou stránku. Po jejím zapnutí se zobrazí prázdné pole, do kterého můžete psát různé meta tagy. Funkce slouží pro vkládání tagů, které se na stránce mezi tagy ve výchozím stavu nejsou uvedeny. Funkce je určena pouze pro zkušené uživatele.

      Odpovědět

  • Použití odkazů v menu

    14. 3. 2017 15:27:13 | Petr Suchomel

    Dobrý den,

    na webu www.austenitemeter.com jsem použil kotvy a jako cíl odkazu použil id jednotlivých boxů tak, jak je popsáno v návodu. Bohužel odkaz na kotvu nebere v úvahu lištu s menu, která tím pádem část panelu (a tedy část textu) po kliknutí na odkaz zakrývá. Bylo by možno tuto chybu odstranit, nebo to nějak vyřešit?

    Děkuji,
    Petr Suchomel

    Odpovědět | Zobrazit odpovědi

    • Re: Použití odkazů v menu

      15. 3. 2017 14:55:48 | Tým inPage

      Dobrý den,
      kotvu prohližeč načítá na začátku stránky. Tím pádem část textu překrývá menu. Lze to vyřešit JavaScriptem, který bychom naprogramovali přímo pro konkrétní web. Pokud máte o tuto službu zájem, ozvěte se nám na admin@zoner.cz

      Odpovědět

    • Re: Použití odkazů v menu

      16. 3. 2017 13:15:45 | Petr Suchomel

      Dobrý den,

      rozumím tomu tedy správně, že šablona prostě není dokonalá a problém navrhujete řešit službou, která bude předpokládám zpoplatněná a navíc bude obsahovat řešení pouze pro jeden konkrétní web?

      V tom případě děkuji, ale dočasně se spokojím s tím, co je k dispozici.

      S pozdravem,
      Petr Suchomel

      Odpovědět

      • Re: Re: Použití odkazů v menu

        24. 3. 2017 12:21:15 | Tým inPage

        Dobrý den,
        šablony není možné přizpůsobovat veškerému chování prohlížečů, proto je třeba v některých případech řešit problémy individuálně. Script se může mírně lišit v závislosti na typu šablony, takže může být potřeba jej upravit. Výchozím stavem pro hanami může být tento:
        <script>
        $("a[href*=#]").click(function(e) {
        e.preventDefault();
        var hash = $(this).prop("hash");
        $('html,body').animate({
        scrollTop: $(hash).offset().top - 130
        }, 'slow', function() {
        window.location.hash = hash;
        });
        });
        </script>

        Zkopírovaný skript vložíte na novou stránku a uložite jako normální text ( je třeba mít v editaci stránky zapnutý HTML editor kde kód vložíte) Potom v administraci zvolíte struktura -> nastavení prvku a skript vložíte ideálně do prostrou pod patičkou.

        Odpovědět

  • hlavní menu

    26. 2. 2018 21:59:29 | Zdenka Sekená

    Dobrý den,
    po přidání všech potřebných stránek do hlavního menu je celá lišta menu příliš vpravo. Chtěla bych aby byla posunutá víc vlevo. Vlastně aby Hlavní menu bylo po přidání položek vždy vycentrované. Je možné posunutí hlavního menu nastavit.
    stránky: https://www.interierovydesigner.com
    Děkuji za odpověď
    Zdenka Sekená

    Odpovědět | Zobrazit odpovědi

    • Re: hlavní menu

      2. 3. 2018 17:20:17 | Tým inPage

      Dobrý den,
      hlavní menu u šablony HANAMI se zarovnává na střed. A nezáleží ani na tom, kolik je v menu položek.
      Popisovaný problém způsobuje Vámi provedená úprava CSS stylu šablony. Konkrétně jde o prvek
      .navbar-default .navbar-nav > li > a {padding: 0 51px;}
      Pokud tento prvek odstraníte, případně upravíte velikost max. na 30px, bude se menu v pořádku zarovnávat na střed.

      s přáním pěkného dne
      Tým inPage

      Odpovědět