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