--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak s Divi vytvořit jednostránkový web url: https://www.wplama.cz/divi-jednostrankovy-web/ date: 2016-06-08 modified: 2016-06-05 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi, jednostránkový web] --- Divi šablona a Elegant Themes # Jak s Divi vytvořit jednostránkový web [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 8. 6. 2016 2 min čtení Pozor: Článek je z roku 2016. Některé postupy se mohly změnit. ![kotva](https://www.wplama.cz/wp-content/uploads/2016/06/kotva.jpg "kotva") Obsah článku (2 kapitoly) 1. [Vytvoření struktury stránky](https://www.wplama.cz/divi-jednostrankovy-web/#vytvoreni-struktury-stranky) 2. [Vytvoření menu pro jednostránkový web](https://www.wplama.cz/divi-jednostrankovy-web/#vytvoreni-menu-pro-jednostrankovy-web) Nedávno se mě jeden z našich čtenářů ptal jak udělat s **Divi jednostránkový web**, kde menu pouze slouží k posouvání návštěvníka po stránce. V tomto článku napíšu návod jak takovéto stránky se šablonou Divi docílit. Postup je prakticky stejný i u jiných page builderů, jen se může lišit ve způsobu přiřazovaní ID (kotvy) k dané sekci. ## Vytvoření struktury stránky Nejdříve si vytvořte samotnou stránku **pomocí Divi builderu**. Využít můžete i předpřipravené struktury, které si jen upravíte podle sebe. [![Připravená struktura stránky](https://www.wplama.cz/wp-content/uploads/2016/06/pripravena-struktura-stranky-1024x500.png "Připravená struktura stránky")](https://www.wplama.cz/wp-content/uploads/2016/06 / pripravena-struktura-stranky.png) Připravená struktura stránky Když máte základní strukturu hotovou můžete začít přiřazovat **ID jednotlivým sekcím**. Toto ID funguje vlastně kotva, která se posléze přidá jako položka do menu. Pokud někdo na kotvu v menu klikne, bude posunut na odpovídající prvek. ID sekci přiřadíte tak, že kliknete na ikonu **Nastavení**, která vypadá jako 3 vodorovné čáry. [![Tlačítko nastavení](https://www.wplama.cz/wp-content/uploads/2016/06/tlacitko-nastaveni.png "Tlačítko nastavení")](https://www.wplama.cz/wp-content/uploads/2016/06 / tlacitko-nastaveni.png) Tlačítko nastavení *Poznámka: ID lze přiřadit každému prvku v Divi šabloně. Sekci, řádku i modulu. Doporučuji však ID u jednostránkového webu dávat na sekci (ten nejširší prvek) z důvodu správného posunu na stránce.* V nastavení vyberte záložku **Vlastní CSS** a první položka by měla být **CSS identifikace**. Napište do ni ID vaší sekce. **Důležité: 08Nepoužívejte diakritiku a velká písmena**. [![CSS identifikace](https://www.wplama.cz/wp-content/uploads/2016/06/css-identifikace-1024x500.png "CSS identifikace")](https://www.wplama.cz/wp-content/uploads/2016/06 / css-identifikace.png) CSS identifikace Tento proces opakujte pro každou sekci, na kterou chcete mít odkázáno v menu. ## Vytvoření menu pro jednostránkový web Jakmile máte strukturu a kotvy vytvořené, běžte do *Vzhled -> Menu* a vytvořte nové menu. Jednotlivé položky se do menu budou přidávat pomocí možnosti **Uživatelské odkazy**. Do políčka **URL vložte # a ID sekce**. Je důležité, aby ID bylo napsané úplně stejně jako je u sekce. Jinak to nebude fungovat. Do políčka **Text odkazu vložte název**. [![Vytvoření položky pro menu](https://www.wplama.cz/wp-content/uploads/2016/06/vytvoreni-polozky-pro-menu-1024x500.png "Vytvoření položky pro menu")](https://www.wplama.cz/wp-content/uploads/2016/06 / vytvoreni-polozky-pro-menu.png) Vytvoření položky pro menu Pak klikněte na tlačítko **Přidat do menu**. Celý tento proces opět opakujte, dokud nebudete mít v menu všechny položky, které chcete. Nakonec jen přiřaďte menu k jeho umístění a **menu aktualizujte**. Jestli jste udělali všechno správně, tak nyní při zobrazení stránky a kliknutí na položku menu vás stránka posune na vybranou sekci. [![Divi jednostránkový web](https://www.wplama.cz/wp-content/uploads/2016/06/divi-jednostrankovy-web.gif "Divi jednostránkový web")](https://www.wplama.cz/wp-content/uploads/2016/06 / divi-jednostrankovy-web.gif) Divi jednostránkový web - [#Divi](https://www.wplama.cz/stitek/divi/) - [#jednostránkový web](https://www.wplama.cz/stitek/jednostrankovy-web/) Sdílet - - [](mailto:?subject=Jak s Divi vytvořit jednostránkový web&body=Jak s Divi vytvořit jednostránkový web https://www.wplama.cz/divi-jednostrankovy-web/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-jednostrankovy-web%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-jednostrankovy-web%2F) TC Autor Tomáš Cirkl Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (9) [Přidat komentář →](https://www.wplama.cz/divi-jednostrankovy-web/#respond) M Martin [8. 6. 2016](https://www.wplama.cz/divi-jednostrankovy-web/#comment-42458) Super! Tohle zrovna řeším, hned to jdu vyzkoušet. [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-42458) --- O Ondřej [28. 7. 2016](https://www.wplama.cz/divi-jednostrankovy-web/#comment-43587) Zdravím Vás Tomáši, dělám teď jeden jednostránkový web, ale mám problém, že když ve 3. sekci chci dám celošířkový slider, tak se mi objedvuje v malé výšce a za boha nemohu najít řešení. Prosím Vás o radu. Moc děkuju. Stránka je to tato: [http://www.ondrejmaly.cz/ukazka/82-2](http://www.ondrejmaly.cz/ukazka/82-2) [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-43587) RČ Ram Čunža [17. 2. 2017](https://www.wplama.cz/divi-jednostrankovy-web/#comment-50226) Tohle mě taky trápilo a trápí, protože nevím, čím to je. Zatím jsem to ale vyřešil tak, že jsem si stáhnul některý předpřipravený fullwith slider od elegantthemes a vložil do něj fotky. Pak to funguje. Ale i když se o to samé pokouším přímo přes český tučný posuvník v sekci na plnou šířku, tak je fotka vždy úzká – i když má originál třeba 1600x1200px. Třeba Vám to pomůže a ještě někdo odpoví, čím to je. [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-50226) TC Tomáš Cirkl WPlama [17. 2. 2017](https://www.wplama.cz/divi-jednostrankovy-web/#comment-50233) Tohle je způsobeno tím, že velikost slideru určuje obsah v něm vložený. Pokud chcete slider větší, musite na to přes padding nebo modul slider s řádkou přes celou šířku. [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-50233) --- --- --- V Viktor [14. 8. 2018](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72954) Dobrý den, jednoduchá stránka hotová ale z nějakého důvodu mi zmizelo zobrazení na mobilu a tabletu. Nejsem si vědom, že bych to někde vypínal. Neví někdo čím by to mohlo být? Děkuji VM [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72954) TC Tomáš Cirkl WPlama [14. 8. 2018](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72955) Zdravím, myslíte ikony ve Visual Builderu? Ty se zobrazí při rozbalení menu (fialové kolečko se třemi tečkami). [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72955) V Viktor [14. 8. 2018](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72957) Ne, díky. ale celý web [https://www.gdprtime.eu](https://www.gdprtime.eu). Udělal jsem v DIVI šabloně. Když jsem ho vyráběl, tak byl na mobilu vidět ale někde v průběhu práce zmizel. Kontroloval jsem všechny prvky a všude je zobrazení na mobilu zapnuto. Když ve visual builderu přebnu na mobil nebo tablet, tak se zobrazí prázdná čistá stránka. [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72957) TC Tomáš Cirkl WPlama [14. 8. 2018](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72959) Web jsem zkusil otevřít na PC i na telefonu a funguje na obou. Zkuste v anonymním okně. [Odpovědět](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72959) V Viktor [14. 8. 2018](https://www.wplama.cz/divi-jednostrankovy-web/#comment-72960) Dík, tak jsem zkusil na na iPhone 7+, Safari – nic, Aloha browser – nic, Chrome – nic a to jak v anonymním režimu tak v normálním. Tak nevím. Je to nějaká záhada. Na PC běží v Chromu i v Edge, prý ve Firefoxu ne ale to budu řešit později. --- --- --- --- --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-jednostrankovy-web/#respond) [← Předchozí článek Jak ve WordPress opravit špatně zadanou URL instalace a úvodní stránky webu](https://www.wplama.cz/jak-ve-wordpress-opravit-spatne-zadanou-url-instalace-uvodni-stranky-webu/) [Další článek → Jak nastavit upozornění emailem na dostupné aktualizace pro WordPress](https://www.wplama.cz/upozorneni-emailem-na-dostupne-aktualizace-pro-wordpress/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---