V současném webdesignu se často objevují domovské stránky začínající tzv. fullscreen sekcí – tedy sekcí přes celou obrazovku monitoru.
Fullscreen sekce se ale mohou hodit nejen pro úvodní stránky – využitelné jsou třeba i pro děkovací stránky po stažení magnetu zdarma, nebo pro prodejní stránky a landing pages.
Pro příklad se můžeme podívat třeba na stránku prodejce nábytku a doplňků Westwing.cz (stránka s úvodní fullscreen sekcí pokračující dalším obsahem), nebo třeba vstupní stránku Twitteru, kde jediná fullscreen sekce představuje celý obsah úvodní stránky.
Jak podobnou stránku vytvořit v Divi?
Vytvoření fullscreen sekce v Divi je velice jednoduché.
- Otevřte si Nastavení sekce (modré pole), které chcete nastavit plnou výšku.
- Nastavte barvu nebo obrázek pozadí a přepněte se do záložky Pokročilé.
- V nastavení Vlastní CSS zadejte do pole Hlavní prvek kód height: 100vh;
A to je vše.
Použitá jednotka vh (namísto obvyklých pixelů nebo procent) znamená viewport height. 1vh = 1% výšky prohlížeče.
Tipy pro použití
Při vytváření stránky se nemusíte omezovat jen na jednu fullscreen sekci – zejména na homepage vypadá zajímavě i sled několika fullscreen sekcí po sobě. V Divi tak jednoduše nastavíte parametr height: 100vh všem sekcím, které chcete mít přes celou plochu prohlížeče.
Použít můžete samozřejmě libovolnou výšku a jejich kombinace – stačí u parametru height změnit hodnotu. Časté je např. použití výšky 90vh u úvodní sekce a 100vh u sekcí následujících. Návštěvník stránky tak na první pohled vidí, že stránka pod úvodní sekcí pokračuje dalšími informacemi.
Vyzkoušet můžete i nastavení první sekce na 100vh, dalších dvou na 50vh a následující např. opět na 100vh – nebo v případě delších sekcí ponechání automatické výšky.
Další možností, jak dát návštěvníkovi najevo, že stránka pokračuje, je použití tečkové navigace. Ta vytvoří v pravé části stránky navigační tečku pro každou sekci dané stránky.
Stránky bez hlavičky a patičky
Fullscreen stránky se často objevují na landing pages či děkovacích stránkách. Návštěvníka zde často chceme přesvědčit ke konkrétní akci, např. vyplnění formuláře nebo nákupu – a nechceme ho rušit odkazy na další stránky webu. V takovém případě stačí v administraci stránky nastavit šablonu stránky (vpravo v Page Attributes) z výchozí šablony na Blank Page.
Tuto změnu můžete udělat kdykoliv v průběhu úpravy stránky.
