Divi šablona a Elegant Themes

Jak s Divi vytvořit jednostránkový web

kotva
Autor příspěvku Tomáš Cirkl

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

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í

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

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

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

Divi jednostránkový web

O autorovi

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 WordCamp Praha a WordPress konferencích.

9 komentářů

  • 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

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

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

  • 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

      • Ne, díky. ale celý web 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.

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

Zanechat komentář

WordPress školení pro začátečníky a mírně pokročilé (Praha 17.9.2020)

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.