info@amcreation.cz

+ 420 774 941 211

info@amcreation.cz

+420 774 941 211

Jak vytvořit scrollovací jednostránkový web s kotvením v menu | Divi

od | CSS, Divi, Rady a tipy, SEO, Webdesign, Wordpress

V dnešním článku si s pomocí šablony Divi vytvoříme jednostránkový scrollovací web. K jednoduché orientaci na něm nám pomůže klasické menu – každá položka bude mít své vlastní ukotvení na webu – to znamená, že při kliknutí na položku se náhled automaticky posune k požadované sekci na webu. Tím potěšíme uživatele – nebude muset scrollovat sám. 🙂

Ať už patříte mezi příznivce nebo odpůrce tohoto jednostránkového stylu – volila bych jej v případě, že přemýšlíte např. o:

– tvorbě vlastní webové prezentace,
– představení svého produktu (kniha, výrobek, apod.),
– tvorbě jednoduchého portfolia, aj.

Ve všech případech se totiž jedná o weby, které budou obsahovat minimální množství informací. Nepotřebujeme tedy překlikávat na další podstrany. Vystačíme si s jednou, kde bude pár obrázků a popisky.

1. Vytvoření jednostránkového webu

Prvním krokem je vytvoření webu, na který budeme aplikovat kotvy. Tvoříme postupně jednu sekci za druhou. U Divi lze přiřadit kotvu k čemukoli – sekci, řádku i samostatnému modulu. Já vždy raději kvůli přehlednosti tvořím pro každé obsahově rozdílné oddělení jednu nadřazenou sekci. Takto budeme pracovat i nyní.

2. Vytvoření kotvy – ID

Pokud máte web vytvořen dle svých představ, začneme na něj aplikovat kotvy. Půjdeme do nastavení sekce, na kterou má odkazovat první položka v menu. V záložce “Pokročilé” přiřadíme libovolnou CSS ID (identifikaci). Já jsem první sekci nazvala kotva1 (pište bez diakritiky  a velkých písmen). Stejně tak budete přiřazovat ID postupně ke všem sekcím, na které chcete odkazovat. Nezapomeňte uložit!

3. Vytvoření menu s odkazem na kotvu

V této fázi máme vytvořený web a přiřazené kotvy (CSS ID). Teď už nám zbývá pouze vytvořit menu, které na ně bude odkazovat. To uděláme jednoduše tak, že v administraci WordPressu najdeme záložku Vzhled a budeme pokračovat na Menu. Položky vytvoříme pomocí Uživatelských odkazů. Do pole URL vložíme # + název, který jsme dříve přiřadili kotvené sekci (v našem případě #kotva1 – musí být napsáno totožně, jako u sekce) a do pole Text odkazu napíšeme text, který se nám zobrazí v menu.

Dále už jen kliknete na Přidat do menu a Aktualizovat menu. Nyní aktualizujte stránku a po kliknutí na Vaši novou položku v menu by měl webík plynule sjet na sekci, kterou jsme ukotvili.

Doufám, že Vám tento tip pomohl při sestavení Vašeho jedinečného jednostránkového webu. Pokud ano, zanechte na něj prosím v komentářích odkaz! Rády se podíváme, jak se Vám  povedl. 🙂

Keep up the good work!

Monika

Pomohl Vám článek? Podělte se o něj – sledujte nás, sdílejte nás a posouvejte tipy mezi další nadšence!

Follows

Pomohl Vám článek? Podělte se o něj – sledujte nás, sdílejte nás a posouvejte tipy mezi další nadšence!

Follows

0 komentářů

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Pin It on Pinterest