V tomto dílu si ukážeme, jak si v eshopu vytvořit základní obsahovou strukturu. Pro jistotu připomínáme, že nejprve se musíme přihlásit na adrese www.webgarden.cz svým uživatelským jménem a heslem.

Začneme - možná trochu nečekaně - mazáním veškerého obsahu. Webgarden nám stránky vyplnil ukázkovým obsahem. My si ale ukážeme přidání obsahu postupně.

Nejprve smažeme všechny rubriky. Na záložce Obsah vybereme v obsahovém stromě Obsah > Rubriky > Domů. V pravé horní části pak klikneme na tlačítko Smazat. Potvrdíme. Stejný postup opakujeme pro další rubriky Speciální nabídky a Nákupní řád. Přejdeme ve stromě k Obsah > Produkty > Produkty A a postup opakujeme pro rubriky s produkty.

Přejdeme do větve stromu Struktura webu > Záhlaví. Zde nemáme žádné rubriky, ale zato najdeme na stránce ukázky multimediálního obsahu neboli prvků obsahu. Ty ze stránky smažeme postupně tak, že nad ně najedeme myší, objeví se kontextové ikonkové menu a symbolem „x“ prvky postupně promažeme.

Postoupíme do Struktura webu > Levé panely a smažeme opět všechny prvky. Stejně tak v Pravých panelech. Nakonec rozklikneme Struktura webu > Zápatí a symbolem X opět odstraníme poslední panely.

Abychom obsah ze stránek zcela odstranili, vysypeme ještě Koš. Ten najdeme v obsahovém stromu v Ostatní > Koš. Rozklikneme a v pravé části stiskneme tlačítko Vyprázdnit koš.

Obvyklý Eshop nemá pouze jediné Menu se všemi rubrikami pohromadě. Takové Menu totiž na stránce působí nepřehledně a špatně se v něm orientuje. Je ideální, když pod sebou na jedné úrovni nemáte více než 7 položek. Je to individuální a není toho možné vždy docílit. Když máme zboží tříděné podle výrobce a výrobců je 30, tak nám asi jiná možnost nezbude.

Obecně je ale dobré, oddělit od sebe rubriky na základě významu. Do jedné skupiny soustředit samotné kategorie zboží, takovou skupinu můžeme nazývat třeba Produkty. Do druhé skupiny zařadíme hlavní rubriky prezentující Eshop jako takový, například titulní stránku nebo kontakt na prodejnu. Třetí skupinu ponecháme důležitým, ale málo navštěvovaným sekcím, jako např. Reklamační řád nebo Fakturační údaje.

V našem příkladu začneme Produkty, bude to jednoduché. Dejme tomu, že prodáváme hrnečky keramické, nerezové, skleněné a s motivem. Setrváme nadále v záložce Obsah a v obsahovém stromě vstoupíme do větve Obsah > Produkty. Po pravé straně klikneme na tlačítko + Rubrika.

Po tomto kliknutí se ocitneme v editaci nově vytvořené rubriky. Nejprve ji pojmenujeme kliknutím na její titulek, zadáním jména „Keramika“ a uložením.

Poté klikneme v obsahovém stromě na sousedící odkaz „Nová rubrika“ a tím přidáme další prázdnou rubriku. Vstoupíme do ní a opět přejmenujeme, tentokrát na Nerez.

Totéž opakujeme pro nové rubriky Skleněné a S motivem. Nakonec bude vypadat naše administrace takto.

Teď by se nám hodilo dále rozvést sekci S motivem. Předpokládejme, že nabízíme hrnečky s mnoha motivy a že návštěvníci si budou chtít právě podle motivu vybírat. Webgarden umí rubriky dále větvit do podrubrik. Přidáme si tedy do sekce S motivem podrubriky - Květiny, Nápisy, Děti, Reklama a Abstraktní. A rovnou můžeme větvit dále. Abstraktní vybavíme dalšími podrubrikami - Orientální, Geometrie, Ostatní - a sekci Nápisy doplníme o podrubriky - České a Cizí.

Vstoupíme do rubriky S motivem a v pravé části zvolíme tlačítko + Rubrika.

Opět se ocitneme uvnitř nové rubriky. Přejmenujeme ji na Květiny. Bezprostředně pod rubrikou Květiny nám přibude v obsahovém stromě odkaz Nová rubrika také na této úrovni. Kliknutím na něj postupně vytvoříme rubriky Nápisy, Děti, Reklama a Abstraktní. Nakonec bude vypadat naše administrace takto.

Zbývá doplnit poslední úroveň rubrik. Přejdeme do rubriky Nápisy a v pravé části stiskneme tlačítko + Rubrika. Vzniklou rubriku přejmenujeme na České. Na stejné úrovni vytvoříme obdobně rubriku Cizí. Nakonec ještě navštívíme rubriku Abstraktní a vytvoříme podrubriky Orientální, Geometrie a Ostatní. Pokud jsme postupovali správně, bude naše administrace vypadat takto.

Když si v této chvíli zobrazíme náš Eshop (ikonkou Oka v úplném záhlaví administrace) žádné z rubrik na něm neuvidíme. Rubriky jsme totiž vytvořili pouze v databázi. Do stránek je vložíme za chvíli prvkem Menu, předtím ale musíme zvolit vhodné umístění. Ačkoliv se fantazii meze nekladou, zvolíme v tomto příkladu prověřené cesty - Menu s Produkty vložíme na stránky vlevo a rubriky v něm seřadíme pod sebe.

V obsahovém stromě vybereme Struktura - Levé panely a poněkud vpravo klikneme na velký symbol +.

Vyskočí nám Dialog výběru nového prvku. Klikneme na prvek Menu.

V dalším dialogu vybereme Kořen menu - Produkty. Hloubku menu nastavíme na 3, abychom viděli v menu také třetí úroveň rubrik. Styl ponecháme zatím na Vertikální. Uložíme.

Webgarden vložil menu do obsahu pouze na 1/4 šířku, proč to tak udělal si vysvětlíme jindy. Uchopíme prvek Menu za Roztahovací chlopeň a táhneme doprava k okraji. Pustíme ve chvíli, kdy se Menu vykreslí přes celou šířku. Možná vypadá divně, proč roztahujeme Menu, které bude na stránce stejně úzké. Je to proto, že v administraci se na celý blok Levé panely díváme jakoby „pod lupou“, v rámci bloku tedy bude Menu po celé šířce, ale na vlastní stránce je pak tento blok zúžen celý.

Znovu zobrazíme náš Eshop (znovu ikonkou Oka) a měli bychom vidět obdobu této obrazovky.

Nyní si vytvoříme druhou sekci rubrik, do které zařadíme obecné rubriky. V administraci - opět v záložce Obsah - vstoupíme do sekce rubrik Obsah > Rubriky. Kliknutím na titulek v pravé části celou sekci přejmenujeme na „O Eshopu“.

V pravé části pak klikneme na tlačítko + Rubrika. Nově vytvořenou rubriku pojmenujeme „Úvodní stránka“. Pak ještě klikneme v této rubrice na tlačítko Nastavit jako výchozí - touto volbou Webgardenu říkáme, že tato rubrika se návštěvníkům zobrazí vždy první.

Vedle Úvodní stránky pak přidáme ještě rubriku Prodejna a rubriku Zeptejte se.

Teď potřebujeme opět zobrazit nové rubriky někde na stránce. Tentokrát zkusíme vložit menu do Záhlaví stránky. V obsahovém stromě vybereme Struktura > Záhlaví. V pravé části klikneme na velký symbol +.

V prvním Dialogu vybereme prvek Menu, v druhém Dialogu ponecháme Kořen menu „O Eshopu“ a Styl zobrazení menu nastavíme na „Horizontální“. Uložíme.

Roztáhneme Menu pomocí Roztahovací chlopně po celé šířce záhlaví. Ikonkou Oka v záhlaví administrace si zobrazíme stránky a uvidíme obdobnou obrazovku.

V administraci v záložce Obsah vybereme ve stromě rubriku Úvodní stránka. Klikneme na velký symbol +.

V prvním Dialogu zvolíme prvek Titulek.

V druhém dialogu napíšeme do „Text titulku“ uvítací větu. Velikost nastavíme na „Malý“. Uložíme.

Nakonec vložíme do záhlaví stránek Nadpis a Logo. Vrátíme se ve stromě do Struktura > Záhlaví, najedeme myší na dříve vložený prvek Menu a v kontextové nabídce klikneme na malý symbol +. Tímto tlačítkem vkládáme nový prvek před ten aktuální.

V Dialogu vybereme Obrázek.

V dalším Dialogu vybereme cestu k libovolnému obrázku na našem počítači, který bude symbolizovat logo. Uložíme.

Během několika vteřin - v závislosti na datové velikosti - se objeví obrázek v administraci. Vedle něj vložíme titulek. Klikneme na velký symbol + vedle obrázku.

V Dialogu vybereme prvek Titulek a v následujícím Dialogu napíšeme do „Text titulku“ název našeho Eshopu, např. „MojeHrnečky.cz - Vychutnávejte!“. Velikost titulku nastavíme na Velký. Tentokrát zatím neukládejte.

V Dialogu přepneme na záložku Rozšířené a vyplníme do kolonky Odkaz celou adresu našeho Eshopu včetně http:// a uložíme. Stejně tak můžeme kolonku Odkaz vyplnit i u loga.

Kliknutím na ikonku Oka v záhlaví administrace si zobrazíme stránky. Budou obsahovat záhlaví s logem a titulkem, záložky s rubrikami O Eshopu, vlevo hlavní menu s produkty a na titulní stránce ještě uvítání. Webgarden také do stránek vložil reklamu, ta slouží k financování provozu stránek. Kdykoliv máme možnost přejít na placenou verzi Webgarden a reklamy se zbavit. Na to ale nastane čas až budeme bezpečně vědět, že je náš obchod hotov.