Vytvořte si web hotgod.eu
Podnikáte, máte vlastní restauraci, bar nebo bistro? Podívejte se na web hotgod.eu a inspirujte přehledným webem s hravým designem. Přinášíme Vám návod na to, jak si tento web vytvořit.
Nejdříve si v sekci „Vzhled“ vybereme šablonu s názvem 160a.
Nastavení záhlaví
Začneme horní částí webu, která se nazývá „Záhlaví“. U vzhledu Hot God se jedná o horní modrou pruhovanou část, která obsahuje menu.
V záložce „Obsah“ zvolíme „Záhlaví“.
1. vymazání přednastavených prvků
Nejprve si smažeme všechny přednastavené prvky. Klikneme na červený koš a stiskneme „OK“.
2. logo webu a menu
Nyní klikneme na žluté ozubené kolečko a nastavíme šířku záhlaví na hodnotu 1 a počet buněk na hodnotu 7.
Klikneme na zelené plus a přidáme „Obrázek“. Pomocí tlačítka „Vybrat soubor“ si zvolíme vlastní obrázek (logo webu), který chceme na stránkách zobrazovat vlevo nahoře.
Zobrazí se nám okno pro nastavení obrázku. V záložce „Rozšířené“ nastavíme „Šířku“ na hodnotu 2 a pro „Způsob zobrazení“ vybereme „Původní velikost“.
Kolonku „Zvýraznění“ nastavíme na „Vlastní“ a napíšeme zde slovo logo (budeme s ním později pracovat).
Do kolonky pro odkaz vložíme lomítko „/“, díky kterému nás tento obrázek bude vracet vždy na úvodní stránku webu. Pokud lomítko nevložíme, obrázek se nám po kliknutí myší rozbalí.
Po vložení obrázku bychom měli v administraci vidět toto rozložení prvků:
Nyní klikneme na zelené plus napravo od obrázku a přidáme „Menu“.
V záložce „Základní“ nastavíme pro „Styl zobrazení menu“ „Horizontální - rozbalit po najetí“ .
V záložce „Rozšířené“ zvolíme u „Šířky“ hodnotu 5 a „Zarovnání“ nastavíme „Doprava“. Kolonku „Zvýraznění“ nastavíme na „Vlastní“ a napíšeme zde slovo my-menu, se kterým budeme následně pracovat.
Přesto, že jsme nastavili menu doprava, bude se v administraci zobrazovat vlevo.
Nyní bychom v administraci měli vidět následující rozmístění prvků:
Nyní bychom v administraci měli vidět následující rozmístění prvků:
3. zarovnání prvků
Nyní si upravíme záhlaví tak, abychom jednotlivé prvky rozmístili více od sebe a náš web působil přehledněji tak jako hotgod.eu.
Klikneme v horní části na sekci „Vzhled“ a vybereme „Editor vzhledu“.
Klikneme na obrázek, který jsme nahráli. Zobrazí se nám okno pro nastavení prvku. Poté klikneme na group underdesign logo.
Nyní nastavíme vnější levý okraj na hodnotu 20px.
Prvek uložíme a podobně upravíme menu. Klikneme na „Menu“ a zvolíme group userdesign my-menu.
Horní vnější okraj nastavíme na 55px.
V „Editoru vzhledu“ ještě chvilku zůstaneme. Klikneme na záhlaví tak, aby se nám celá horní část zažlutila a poté v group parts detailparts nastavíme vnější dolní okraj na 100px.
V levém sloupci klikneme na sekci „Editor CSS“.
V editoru vzhledu najdeme text „/*WEBGARDEN_EDITOR*/“, který bývá úplně dole.
Zde změníme 100px u dolního okraje (margin-bottom) na -115px. Tím se nám podaří odstranit velkou mezeru pod menu a logo tak bude přesahovat ze záhlaví do další části webu.
Zde změníme 100px u dolního okraje (margin-bottom) na -115px. Tím se nám podaří odstranit velkou mezeru pod menu a logo tak bude přesahovat ze záhlaví do další části webu.
Výborně, nyní máme záhlaví nastaveno.
Nastavení hlavní stránky
Nyní si nastavíme hlavní stránku, tedy to, co na našem webu uvidí naši návštěvníci jako první.
Klikneme na sekci „Obsah“, rubriku „O nás“.
1. vymazání přednastavených prvků
Nejprve si smažeme všechny přednastavené prvky. Vždy klikneme na červený koš a stiskneme „OK“.
2. vložení textů a obrázků
Klikneme na žluté ozubené kolečko a nastavíme šířku.
U „Šířky“ zvolíme hodnotu 2 a pro „Počet buněk“ nastavíme hodnotu 1. Tímto si nastavíme rozvržení prvků na hlavní stránce tak, jako je to na stránkách hotgod.eu.
Nyní přidáme hlavní obrázek, který se bude zobrazovat pod záhlavím. Klikneme na zelené plus a přidáme „Obrázek“.
Jeho šířku nastavíme na hodnotu 8. V kolonce „Zvýraznění“ zvolíme „Vlastní“ a napíšeme zde banner. Pro „Způsob zobrazení“ vybereme „V plném rozlišení“.
V administraci se nám objeví následující rozložení prvků:
Klikneme na zelené plus pod obrázkem a přidáme „Formátovaný text“, který se bude zobrazovat pod obrázkem. Jeho šířku nastavíme na hodnotu 1.
Nyní bychom měli vidět následující rozložení prvků:
Dále přidáme „Sloupec“ pomocí zeleného plus vedle červené šipky. Šířku sloupce nastavíme na hodnotu 1, počet buněk na hodnotu 2.
Nyní bychom měli v administraci vidět následující:
Do sloupce můžeme nyní vložit dva prvky. Podle webu hotgod.eu přidáme „Formátovaný text“ a napravo vedle něj „Obrázek“, obojí s šířkou 1.
U „Obrázku“ zvolíme v kolonce „Zarovnání“ možnost „Na střed“ a „Způsob zobrazení“ nastavíme na „Původní velikost“.
U „Obrázku“ zvolíme v kolonce „Zarovnání“ možnost „Na střed“ a „Způsob zobrazení“ nastavíme na „Původní velikost“.
Pod texty a obrázek vložíme další „Sloupec“ o šířce 1 s počtem buněk 2.
Nyní nám vznikl prostor pro přidávání dalších prvků.
Přidáme „Titulek“. Jeho velikost nastavíme na „Střední“ a pro „Zvýraznění“ zvolíme „Vzor 3“.
Do Nadpisu napíšeme libovolný text, například „Naše božské menu >>“.
Pod nadpis umístíme „Formátovaný text“ s libovolným obsahem. Výsledkem bude následující uspořádání prvků:
Do Nadpisu napíšeme libovolný text, například „Naše božské menu >>“.
Pod nadpis umístíme „Formátovaný text“ s libovolným obsahem. Výsledkem bude následující uspořádání prvků:
3. zarovnání prvků
Nyní půjdeme do „Editoru vzhledu“, abychom nastavili odsazení prvků na stránce.
Klikneme na hlavní obrázek, konkrétně na group userdesign banner.
Klikneme na hlavní obrázek, konkrétně na group userdesign banner.
Nastavíme si levý a pravý vnější okraj na 30px. Horní vnější okraj na 15px a dolní vnější okraj na 50px.
Otevřeme si „Editor CSS“ a přenastavíme levý, pravý a horní vnější okraj na záporné hodnoty - (stačí přidat před čísla znaménko „-“).
nejprve vyhledáme text „/*WEBGARDEN_EDITOR*/“, který bývá úplně dole. Poté přidáme u zvýrazněných hodnot znaménko „-“ tak, abychom viděli toto:
{margin-top:-15px;margin-bottom:50px;margin-left:-30px;margin-right:-30px}.
Díky tomuto nastavení bude hlavní obrázek pevně umístěn v této pozici a to při jakémkoli zobrazení na jakémkoli zařízení.
nejprve vyhledáme text „/*WEBGARDEN_EDITOR*/“, který bývá úplně dole. Poté přidáme u zvýrazněných hodnot znaménko „-“ tak, abychom viděli toto:
{margin-top:-15px;margin-bottom:50px;margin-left:-30px;margin-right:-30px}.
Díky tomuto nastavení bude hlavní obrázek pevně umístěn v této pozici a to při jakémkoli zobrazení na jakémkoli zařízení.
Nastavení uložíme. Nyní máme hlavní stránku nastavenou.
Nastavení zápatí
Klikneme na „Obsah“ a zvolíme „Zápatí“.
Nejprve si smažeme všechny přednastavené prvky. Vždy klikneme na červený koš a stiskneme „OK“.
Pomocí žlutého ozubeného kolečka nastavíme počet buněk na hodnotu 8.
Klikneme na zelené plus a vložíme „Odstavec textu“ s počtem buněk 7, který necháme prázdný.
Následně klikneme na zelené plus vpravo vedle prázdného textu a přidáme „Sloupec“ s šířkou 1 a počtem buněk 2.
Nyní bychom měli vidět následující rozložení prvků:
Do tohoto sloupce přidáme dva obrázky stejným způsobem, jako jsme je vložili do záhlaví a na hlavní stránku. Tyto obrázky budou sloužit jako odkazy na sociální sítě.
Zarovnáme je „Doprava“, ve „Způsobu zobrazení“ nastavíme „Původní velikost“. V kolonce „Zvýraznění“ zvolíme „Vlastní“ a napíšeme zde img-icon (dále s tím budeme pracovat).
Zarovnáme je „Doprava“, ve „Způsobu zobrazení“ nastavíme „Původní velikost“. V kolonce „Zvýraznění“ zvolíme „Vlastní“ a napíšeme zde img-icon (dále s tím budeme pracovat).
Do kolonky pro odkaz vložíme adresu na náš profil na dané sociální síti, například https://www.facebook.com/Webgarden.cz/. Po kliknutí na obrázek budeme na tuto stránku přesměrováni.
Nyní si zvolíme „Editor vzhledu“.
Klikneme na obrázek a poté na prvek img-icon.
Nastavíme šířku 70px.
Gratulujeme, nyní máte nastavený vzhled webu podle hotgod.eu!
