Základ tvorby webových stránek

Cílem tohoto návodu je se seznámit se základy tvorby webu v TwoDo CMS tak, abychom si mohli stránky tvořit a spravovat jejich obsah.

Přihlášení do administrace

Pro přihlášení napíšeme za URL adresu svého webu /admin, vyplníme přihlašovací údaje a přihlásíme se. Tedy například vas-web.cz/admin.

Modul Komponenty

Protože se stránky skládají z komponent, tak si nejprve projdeme dostupné komponenty, které lze při tvorbě stránek využít. V seznamu najdeme prvky jako formulář, menu, patičku, carousel, galerii nebo třeba integraci s Google Maps.

Komponenty si můžeme v modulu Nastavení přizpůsobit z pohledu barev, fontů a zaoblení. Takové nastavení je globální, takže na pár kliknutí můžeme změnit vizuální podobu celých webových stránek. Pokud by nám přesto chyběla specifická komponenta pro tvorbu stránek, je možné oslovit vývojáře v TwoDo, kteří mohou balíček rozšířit o komponentu vytvořenou na míru.

Pro některé komponenty může být vhodný princip dědičnosti, který zajišťuje, že změny provedené v komponentě se automaticky promítnou všude tam, kde je použita. Typickým příkladem je hlavní menu, které se objevuje na všech stránkách webu. V takovém případě stačí otevřít vzorovou komponentu Menu, upravit její obsah, a v nastavení aktivovat povinnou dědičnost. Tím zajistíme, že tuto komponentu lze pohodlně vkládat do libovolné stránky a obsah se spravuje centrálně z jednoho místa.

Modul Stránky

Pro vytvoření první stránky klikneme v levém panelu na položku "Root" a v pravém panelu klikneme na vytvoření nové položky. Otevře se dialog s následujícmi možnostmi:

• Stránka: Vytvoří stránku. Kromě běžných stránek existuje speciální typ stránky "index", která nemá žádný URL slug a je běžná pro domovské stránky. Pokud vytvoříme stránku s názvem „index“, bude fungovat jako úvodní strana dané sekce. Například „index“ přímo pod „Root“ je výchozí domovská stránka webu. Další využití index stránky může být ve složce, pokud chceme zobrazit stránku pod URL adresou složky.
• Složka: Vytváří zanořenou strukturu v URL. Například pokud vytvoříme složku „Cíl webu“ a v ní stránku „Funkční design“, bude výsledná adresa: "/cil-webu/funkcni-design".
• Odkaz: Slouží k přesměrování z jedné adresy na druhou. Například přesměrování z /black-friday na /summer-sale.

Protože chceme vytvořit úvodní stránku, vybereme v dialogu Typ: Stránka a stránku pojmenujeme "index".

Otevře se nám tato nová prázdná stránka, kterou můžeme začít plnit obsahem. Přejdeme do pravého panelu, kde je tlačíko "Přidat do builderu". Otevře se dialog, pomocí kterého do stránky vkládáme komponenty a layouty. Stránka vždy začíná s komponentou Menu a následně vložím i komponentu Záhlaví a Média.

Vkládané komponenty vyplníme obsahem a následně v pravém panelu klikneme na tlačítko "Uložit". Každým uložením vznikne nová verze, takže se můžeme díky této historii verzí jednoduše vracet k předchozím úpravám. Jakmile stránku dokončíme, můžeme danou verzi tlačítkem publikovat, aby se stránka stala veřejnou.

Tímto postupem jsme vložili komponenty do stránky, vyplnili obsah, stránku uložili a publikovali. Pokročilí administrátoři mohou v záložce nastavení vložit vlastní CSS styly, aby si například změnili barvu či jiné vlastnosti. Výsledná stránka pak může vypadat takto:

Každé stránce můžeme vyplnit SEO parametry jako nadpis, popis, nebo Open Graph obrázek. Pokud bychom paramtery nechali prázdné, využijí se výchozí z modulu nastavení.

• SEO title (nebo také title tag) je krátký nadpis stránky, který se zobrazuje ve výsledcích vyhledávání a zároveň jako text v záložce prohlížeče.Ideální délka je do 60–65 znaků, aby se titulek nezkrátil a zůstal čitelný.
• SEO Description je krátký textový popis stránky, který se zobrazuje ve výsledcích vyhledávání pod hlavním nadpisem (SEO title) a ideální délka je 70–155 znaků.
• Open Graph image je obrázek, který se zobrazuje při sdílení odkazu na sociálních sítích, jako je Facebook, LinkedIn nebo Twitter.

URL slug vkládá název stránky do URL adresy. V tomto případě slug neřešíme, protože u indexů nechceme, aby název v URL byl. Tímto způsobem se však definuje URL struktura celého webu.

Vyplněné SEO parametry pak mají následující výsledek pro vyhledávání na Googlu: