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.
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í.
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.
Vhodné vánoční fotografie můžete volně stahovat z unsplash.com, pexels.com, gratisography.com nebo pixabay.com.
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.
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.
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;
}
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:
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.
Nyní byste na Vašem webu měli mít zobrazenou krásnou fotografii přes celé pozadí.
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í.
Vložte následující kód na konec textového pole:
.page{
background: rgb(255,255,255);
}
background: rgb(255,255,255);
}
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ý.
Postupujte stejně jako u předchozí úlohy. Kód pro vložení je následující:
.page{
background: rgba(255,255,255,0.85);
}
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ě.
Na závěr bychom Vám chtěli popřát klidné a spokojené Vánoce!
