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.
hotgod.eu

hotgod.eu

Nejdříve si v sekci „Vzhled“ vybereme šablonu s názvem 160a.
vzhledy_hotgod.png

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í“.
path34-8.png
1. vymazání přednastavených prvků
Nejprve si smažeme všechny přednastavené prvky. Klikneme na červený koš a stiskneme „OK“.
smazání_záhlaví.png
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.
path3398.png
001.png

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.

043.png
obrázek.png
003.png

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).

002.png
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ů:
023.png

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í“ .

004.png
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.
Záhlaví_doprava.png
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ů:
024.png
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“.
025.png
Klikneme na obrázek, který jsme nahráli. Zobrazí se nám okno pro nastavení prvku. Poté klikneme na group underdesign logo.
006.png
Nyní nastavíme vnější levý okraj na hodnotu 20px.
007.png
Prvek uložíme a podobně upravíme menu. Klikneme na „Menu“ a zvolíme group userdesign my-menu.
008.png
Horní vnější okraj nastavíme na 55px.
009.png
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.
0099.png
046.png
V levém sloupci klikneme na sekci „Editor CSS“.
 
036.png
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.
010.png
Výborně, nyní máme záhlaví nastaveno.
026.png

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“.
obsah-onás.png
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“.
smazání_onás.png
2. vložení textů a obrázků
Klikneme na žluté ozubené kolečko a nastavíme šířku.
037.png
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.
012.png
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“.
038.png
obrázek.png
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í“.
013.png
V administraci se nám objeví následující rozložení prvků:
030.png
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.
044.png
044.png
045.png
Nyní bychom měli vidět následující rozložení prvků:
028.png

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.

014.png
Nyní bychom měli v administraci vidět následující:
031.png
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“.
015.png
047.png
Pod texty a obrázek vložíme další „Sloupec“ o šířce 1 s počtem buněk 2.
032.png
Nyní nám vznikl prostor pro přidávání dalších prvků.
016.png
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ů:
033.png
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.
034.png
Nastavíme si levý a pravý vnější okraj na 30px. Horní vnější okraj na 15px a dolní vnější okraj na 50px.
018.png
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í.
036.png
019.png
Nastavení uložíme. Nyní máme hlavní stránku nastavenou.
Hlavní-strana_Hotgod.png

Nastavení zápatí

Klikneme na „Obsah“ a zvolíme „Zápatí“.
zápatí.png
Nejprve si smažeme všechny přednastavené prvky. Vždy klikneme na červený koš a stiskneme „OK“.
smazání_zápatí.png
Pomocí žlutého ozubeného kolečka nastavíme počet buněk na hodnotu 8.
0199.png
039.png
Klikneme na zelené plus a vložímeOdstavec textus počtem buněk 7, který necháme prázdný.
 
040.png
Následně klikneme na zelené plus vpravo vedle prázdného textu a přidámeSloupec s šířkou 1 a počtem buněk 2. 
040b.png
002.png
Nyní bychom měli vidět následující rozložení prvků:
041.png
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).
02020.png
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.
020.png
Nyní si zvolíme „Editor vzhledu“.
025.png
Klikneme na obrázek a poté na prvek img-icon.
021.png
Nastavíme šířku 70px.
022.png
Gratulujeme, nyní máte nastavený vzhled webu podle hotgod.eu!
22.01.2016 10:58:29
Tým Webgarden
Name
Email
Comment
Or visit this link or this one