3 snadné způsoby, jak svůj web připravit na Vánoce

Maminky pečou cukroví, děti se těší na Ježíška a tátové shání ten nejpěknější stromeček. Vánoční atmosféra je všude kolem nás, pojďme ji dostat i na weby Webgarden. Přinášíme tři tipy, jak si pozměnit vzhled svých stránek a připomenout si čas vánoční i online.
vánoce_001.jpg
1. zvolte si přednastavenou vánoční šablonu
Ve Webgarden jsme pro Vás nachystali několik tematických vzhledů mezi kterými najdete i ty vánoční. Změna vzhledu Vašeho webu je otázkou několika kliknutí.
2010_156x_xxl_wide.png
2010_141x_xxl_wide.png
2010_140x_xxl_wide.png
2010_140i_xxl.png
2010_130b_xxl.png
2010_130a_xxl.png
Tyto šablony naleznete v administraci pod záložkou Vzhled.
Stejně jako při volbě jakékoli jiné šablony počítejte i zde s tím, že se vzhled Vašeho webu kompletně změní. Jak si naopak upravit Váš stávající vzhled do vánoční podoby si povíme níže.
2. upravte si vlastní vzhled
Vánoční atmosféru můžete na svém webu vytvořit například pomocí změny pozadí – třeba vložením fotografie či vzoru. Následujte pět kroků níže.

Vhodné vánoční fotografie můžete volně stahovat z unsplash.com, pexels.com, gratisography.com nebo pixabay.com.
Původní vzhled webu
Původní vzhled webu
1. Nejprve v administraci na záložce Vzhled zvolte možnost Editace CSS. Zde klikněte na zelené tlačítko „+“ vpravo nahoře a nahrajte obrázek, který chcete mít na pozadí svého webu.
TIP: Obrázek by měl mít velikost minimálně 1920px x 1080px., což je běžná velikost Full HD monitorů. Problém takového obrázku ale může být datová velikost, ta by neměla přesáhnout 500kB.
01.png
2. Obrázek je nyní nahraný v administraci, podobně jako na obrázku níže. Těsně pod ním je text začínající http://media1.webgarden ... , se kterým budeme za chviličku pracovat.
02.png
3. Zkopírujte si následující CSS kód:
body {
background-image: url('adresa_obrazku');
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
4. Zkopírovaný CSS kód vložte úplně na konec textového pole:
Vánoční vzhled_004.png
Vysvětlivky k vkládanému kódu:
body
pro většinu vzhledů by tato možnost měla fungovat. Pokud nefunguje, zkuste místo body napsat .screen
background-image
místo pro vložení obrázku viz krok 5
background-position
nastavení pozice pozadí, v tomto případě na střed stránky
background-size
nastavení velikosti pozadí. Možnost „cover“ Vám roztáhne obrázek tak, aby vyplnil celou plochu pozadí. (Můžete ale zvolit i jinou hodnotu)
background-attachment
tato možnost způsobí, že při posouvání stránky zůstane obrázek „na místě“. Pokud Vám tato funkce nevyhovuje, jednoduše řádek smažte.
5. Do pole v kódu background-image: url('adresa_obrazku'); vložte namísto textu adresa-obrazku kód, který je zobrazen v rámečku těsně pod obrázkem.
003.png
Nyní byste na Vašem webu měli mít zobrazenou krásnou fotografii přes celé pozadí.
04_3.png
Jak zvýraznit text?
Může se stát, že text na stránkách splyne s pozadím. To lze vyřešit přidáním jednobarevného pozadí pod obsah - fotografie tak bude vidět pouze po stranách, kde žádný obsah není.
05.png
Vložte následující kód na konec textového pole:
.page{
background: rgb(255,255,255);
}
Vánoční vzhled_005.png
TIP: U některých šablon, je přes základní vrstvu pozadí naneseno ještě další pozadí těla stránky, které má vlastní barvu. Doporučujeme si u těchto šablon nastavit stejnou barvu, aby Vám stránka barevně ladila.
Další možností, jak zachovat čitelnost textu je nastavit si průhledné pozadí. V takovém případě bude fotografie lehce prosvítat i pod obsahem, nicméně text bude stále dobře čitelný.
06.png
Postupujte stejně jako u předchozí úlohy. Kód pro vložení je následující:
.page{
background: rgba(255,255,255,0.85);
}
TIP: Číslo 0,85 udává průhlednost a jeho hodnota se může pohybovat od nuly k jedné. Pokud chcete, aby byly stránky ještě průhlednější číslo zmenšete. Naopak čím více se číslo blíží k jedničce, tím je barva plnější.
3. další úpravy webu
Svůj web můžete samozřejmě ozdobit jakkoliv jinak. Ať už vánoční hlavičkou, bannerem nebo čímkoliv jiným. Tady už návody končí a vše záleží jen na Vaší fantazii a kreativitě.
07.png
Na závěr bychom Vám chtěli popřát klidné a spokojené Vánoce!
25.11.2015 15:20:49
Tým Webgarden
Name
Email
Comment
Or visit this link or this one