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

  1. Otevřte si Nastavení sekce (modré pole), které chcete nastavit plnou výšku.
  2. Nastavte barvu nebo obrázek pozadí a přepněte se do záložky Pokročilé.
  3. 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.