Webgarden nám při počátečním vytvoření stránek vloží do záhlaví titulek. To je praktické, ale pokud chceme, aby stránky byly osobité, je dobré doplnit záhlaví o grafické prvky, logo či třeba fotografii.

Nejprve si na modelové stránce ukážeme, jak nahradit titulek obrázkovým záhlavím. Předpokladem je, že si takový obrázek umíme pomocí grafického editoru na svém počítači zhotovit. K tomu musíme znát šířku zobrazovací plochy své stránky (v pixelech – obrazovkových bodech). Ta může být u každé vzhledové šablony jiná, obvykle bývá kolem 900px. Pokud si neumíme šířku změřit, můžeme postupovat metodou pokus – omyl. Důležité ale je velikost trefit, protože pokud uděláme obrázek větší nebo menší a umístíme do něj nějaké texty, při následné změně velikost ztratí ostrost.

Pokud obrázky obsahují spíše pravidelné tvary a text, doporučujeme je ukládat do formátu .png. Naopak, pokud jsou součástí obrázku fotografie a pestré složité obrazce, doporučujeme formát .jpg.

Pro tento příklad zhotovíme obrázek kombinací výřezu z fotografie (pro pozadí) a na popředí umístíme logo fiktivní společnosti.

Přihlásíme se do administrace Webgarden stránek a v sekci Obsah > Struktura webu > Záhlaví smažeme titulek (a případně další obsah).

Poté na místo titulku vložíme nový prvek Obrázek.

Do prvku nahrajeme předtím vytvořený soubor s obrázkem a na záložce rozšířené přepneme Styl zobrazení na „Původní velikost“. Tím docílíme toho, že se obrázek nebude v případě menší šířky roztahovat a tím pádem deformovat.

Obrázek se nám pravděpodobně zobrazí jen přes jednu dlaždici a proto ho táhnutím za zelenou chlopeň roztáhneme po šířce.

Stránky rázem získají svůj nosný prvek, podle kterého si je návštěvníci mohou zapamatovat.

Bývá zvykem, že logo proklikává na domovskou stránku a proto se vrátíme do administrace, rozklikneme editační okno obrázku a na kartě Rozšířené vyplníme do kolonky Odkaz adresu stránek včetně protokolu http:// .

Prvky, které umístíme do záhlaví stránky jsou vidět stále, nezávisle na tom, kam návštěvník klikne. Při větším množství prvků nebo velkém obrázku záhlaví je ale takto pokryta velká část obrazovky a návštěvník je pak nucen po každém kliku posouvat stránku dolů. Elegantním řešením je přesunutí grafiky ze záhlaví do výchozí rubriky.

Ze záhlaví vše vymažeme a umístíme zde pouze prvek Menu s horizontálním uspořádáním.

Také tento prvek Menu roztáhneme přes celou šířku.

Pak smažeme Menu z levého sloupce (a případně další prvky, pokud zde jsou). Pokud bude levý sloupec prázdný, zobrazí Webgarden střední část po celé šířce.

Rozbalíme si domovskou rubriku a před první prvek vložíme nový prvek Obrázek. Do prvku nahrajeme dříve zhotovený soubor s obrázkem a roztáhneme po celé šířce. Obrázku nezapomeneme nastavit zobrazení v Originální velikosti.

Nad obrázkem nám zůstal nevzhledný (a v tomto případě i zbytečný) titulek s navigační lištou. V sekci administrace Nastavení > Zobrazení vypneme zobrazování těchto dvou prvků a uložíme.

Při tomto řešení uvidí návštěvník logo pouze při vstupu na stránky, ale při klikání již bude mít celou plochu stránky k dispozici pro obsah. Ukážeme si ještě kompromisní variantu. Logo umístíme zvlášť tak, že bude vidět stále, ale větší grafiku ponecháme v rubrice.

Nejprve rozklikneme domovskou rubriku a na první místo nahrajeme nový obrázek. Obrázek nebude obsahovat logo, ale místo toho jej doplníme hesly, grafikou nebo firemními texty, které se na homepage hodí a stránky budou charakterizovat. Ohlídáme si správnou šířku obrázku v pixelech a zobrazení v originální velikosti a také datovou velikost obrázku, ideální je vejít se do 150 KB.

Proklikneme opět do levého sloupce a vrátíme sem prvek Menu ve vertikální podobě.

Před menu pak umístíme nový obrázek, do kterého nahrajeme samostatný soubor s logem. Opět nezapomeneme na originální velikost, správnou šířku a nastavení prokliku na homepage.

Při nastavení zobrazení v originální velikosti se nám bude zdát obrázek vůči menu úzký, ale na samotné stránce pak bude mít velikost správnou.

Při klikání stránkami vidíme logo stále, zobrazovací plochu ale máme volnou pro obsah odshora dolů.

V záhlaví pak můžeme menu přepnout do formy „Odkazy“. Tato forma je subtilnější a na horní okraj webu se obvykle hodí lépe. Nezapomínejme, že můžeme mít pro různá menu různé sady rubrik.

Esteticky smýšlejícím bude trnem v oku rozdílné odsazení loga a uvítací grafiky. Je to způsobeno tím, že jsou titulek a navigační lišta skryty, ale obalující elementy na stránce zůstaly. Můžeme je skrýt pomocí Vzled > Editace CSS. Posuneme se na konec kódu a přidáme tento odstavec