Podrobný návod jak vytvořit webové stránky

Webové stránky jsou dnes základ, ať už jde o firmu nebo osobní portfolio. Přečtěte si podrobný návod, jak na solidpixels vytvořit web za 4 hodiny.

Na konci budete mít první verzi webových stránek, ke které se můžete kdykoliv vrátit a postupně ji vylepšovat. Práce na webu nikdy nekončí a vždy je co zlepšovat, ale i jednoduchý web může plnit svůj účel a předem definované cíle. Pomůže vám také levně a rychle vyzkoušet, co funguje a postupně web na základě zkušeností rozšiřovat.

Vytvořte si zkušební verzi webu na solidpixels zdarma a můžete se rovnou pustit do práce dle následujících čtyř kroků. 

1. Založte strukturu webu
Naučíte se pracovat se stránkami, vytvářet nové nebo přidávat položky menu.

2. Připravte obsahovou strukturu stránek
Připravíte si strukturu obsahu jednotlivých stránek webu.

3. Začněte pracovat na obsahu
Podle připravené struktury vytvoříte obsah pro vaše webové stránky.

4. Přizpůsobte si design webu
Přizpůsobíte si design tak, aby odpovídal prezentaci vaší firmy nebo projektu.

1. Založte strukturu webu

Začněte od základů a vytvořte strukturu webu. Díky tomu si ujasníte, jaké informace budete potřebovat a později si vytvoříte i osnovu pro tvorbu samotných obsahů.

Nejdůležitější složkou struktury webu je hlavní navigace. Držte ji jednoduchou a nepřidávejte více jak 7 položek.

Základní informace, které by měl návštěvník vašeho webu najít, jsou kdo jste, co děláte a jak vás mohou zákazníci kontaktovat nebo využít vašich služeb. Typické stránky, které na webu najdete v různých obměnách téměř na každém webu jsou proto Homepage, Produkt, O nás a Kontakt.

Položky pojmenujte stručně a výstižně. Každý návštěvník musí mít jasno, co na stránce čekat, aniž by ji rozklikl.

Jak na to?

Založte v administraci všechny stránky, které na webu chcete mít. Pro zjednodušení využijte stránky připravené v šabloně. Pokud potřebujete stránku přidat nebo upravit:

1. v administraci vlevo nahoře klikněte na < Přehled, tím se dostanete do přehledu stránek,

2. u položky Hlavní navigace klikněte na tlačítko plus a z nabídky vyberte možnost Stránka,

3. pojmenujte novou stránku,

4. pokud chcete položku upravit, po najetí na položku se zobrazí ikona Ozubeného kolečka,

5. kliknutím na něj se otevře okno, kde můžete nastavit 

Pro změnu pořadí chytněte položku a přetáhněte ji na požadované místo.

Po najetí na položku se vpravo zobrazí ikona ozubeného kolečka a popelnice, pomocí těch můžete upravovat název položky, smazat ji nebo nastavit jako homepage.

2. Připravte strukturu jednotlivých stránek

Dalším krokem je rozložení jednotlivých prvků na stránce. Vyberte jen pár nejdůležitější věcí a těm se věnujte. Nepište zatím konkrétní texty, jde jen o to určit, kde a co na stránce bude.

K čemu jednotlivé stránky webu slouží a jak přistupovat k jejich tvorbě?

Úvodní stránka webu

Cílem homepage je vysvětlit hlavní účel webu a pomoci návštěvníkům najít informace, kvůli kterým na web přišli.

Začněte stránku s titulkem, který popisuje vás nebo účel webu a krátkým odstavcem. Po jejich přečtení musí návštěvních chápat kdo jste a co děláte.

Poskytněte návštěvníkům výchozí bod pro hlavní úkoly, které provedou při návštěvě vašich stránek. Můžete o ní přemýšlet jako o rozcestníku, který návštěvníky nasměruje dál.

Odkažte je například na vaše produkty nebo k odeslání nezávazné poptávky. Využít k tomu můžete kombinace obrázku, krátkého odstavce s nadpisem a tlačítkem, které dovede návštěvníka na stránku s produkty.

Produkt nebo služba

Stránka s představením služeb nebo produktů má prezentovat vaší nabídku tak, aby lidé pochopili, co od vás mohou žádat a jak danou věc nebo službu dostanou.

Začněte poutavým nadpisem, popište každý typ produktu nebo služby, kterou nabízíte, v krátkém odstavci. Produktové stránky jsou jedním z důležitých míst pro výzvu k odeslání nezávazné poptávky nebo proklik na stránku s kontaktem. Zmínit můžete i ceník.

O nás

Zákazníky zajímá kdo jste a informace o vás pomáhají zvyšovat důvěryhodnost.

Začněte poutavým nadpisem. Uveďte vaší motivaci, důležité milníky v historii vaší firmy, představte váš tým a jeho kompetence nebo ukažte získaná ocenění z oboru. Zahrnout můžete i reference vašich zákazníků.

Kontakt

Na této stránce by se měla objevit vaše adresa, e-mail, telefonní číslo, otevírací doba, případně odkazy na účty sociálních sítí, které používáte. Přidat můžete i mapu, pokud vás klienti mohou navštívit v kanceláři nebo třeba prodejně.

Jak na to?

Rozložení prvků si připravte přímo v solidpixels. Pro zrychlení práce využijte výchozí rozložení obsahu ve vybraném konceptu nebo použijte připravené vzory v knihovně stránek a sekcí.

V solidpixels tvoříte obsah pomocí jednotlivých bloků nebo celých sekcí, které shlukují související obsah do jednoho celku. Skládají se většinou z několika bloků. Tvořit obsah lépe a rychleji vám pomohou předlohy sekcí, ve kterých si můžete vybrat vzory pro obsah různých kategoriích. V aktuální verzi naleznete takovýchto předpřipravených sekcí více jak 100 a postupně doplňujeme další. Máte tedy rozhodně z čeho vybírat.

Pro přidání předlohy sekce:

1. přejděte na editaci konkrétní stránky,

2. v levém horním rohu vyberte Sekce,

3. zobrazí se knihovna s předlohami, vyberte typ předlohy, který hledáte,

4. přetažením do prostoru stránky vložíte sekci.

Upravovat a přidávat můžete i jednotlivé bloky:

1. přejděte na editaci konkrétní stránky,

2. v přepínači vlevo nahoře vyberte bloky,

3. přesuňte vybraný blok do prostrou do stránky.

Při vkládání bloků do stránky se kolem dříve vytvořených bloků zobrazí vodící čáry, pro vytvoření sloupce přetáhněte blok na svislou čáru, pro vytvoření řádku přetáhněte blok na vodorovnou vodicí čáru. Pomocí vodicí čár můžete měnit také velikost jednotlivých prvků, stačí táhnutím posunout vodicí čáru.

3. Začněte pracovat na obsahu webu

Až teď přichází čas na samotné texty, fotky, videa. Držte se jednoduchosti, krátký odstavec a výstižný nadpis je víc než dlouhé texty, které nikdo nebude číst. Vyberte vždy jen nejdůležitější body a ty rozepište v pár větách.

Používejte mezititulky, zvýraznění důležitých frází tučně. Pracujte s tím, co máte. Pokud vám chybí vlastní fotky, můžete využít fotobanky. Spoustu fotografií zdarma i ke komerčnímu použití najdete například na unsplash.com.

4. Přizpůsobte design webu

Až nakonec se věnujte nastavení vzhledu webu. V nastavení designu upravíte nastavení typografie, písma, barevnosti pro veškeré prvky webu tak, aby odpovídaly vašim potřebám.

Nastavení designu je sdílené pro celý web. To znamená, že vybraná velikost nadpisu bude stejná napříč celým webem, aby byl zachovaný jednotný vzhled stejných prvků. Sdílené nastavení vám také ulehčí práci. Rozhodnete-li se nastavení změnit, změna se projeví na celém webu.

Nastavte typografii

Vyberte si maximálně dva různé fonty, se kterými budete na webu pracovat. Pokud se nemůžete rozhodnout, můžete se inspirovat jednou z našich osvědčených kombinací podle článku 12 trendy kombinací Google fontů.

Pro nastavení typografie:

1. v hlavní navigaci přejděte do záložky Design,
2. pod záložkou Typografie najdete nastavení fontů pro texty i nadpisy.

Upravte barvy

Rozhodněte se pro tři barvy, se kterými budete na webu pracovat. Pokud nemáte určené vaše barvy můžete pro inspiraci využít generátor barevných schémat coolors.co.

Myslete na to, aby barva pozadí a písma byla dostatečně kontrastní. To je důležité pro dobrou čitelnost webu.

Pro úpravu barev na vašem webu:

1. přejděte do záložky Design,

2. při úpravách nastavení barev můžete měnit:

   • barvy hlavičky a barvy písma v menu → nastavení Hlavička,

   • barvy pozadí celého webu → nastavení Stránka,

   • barvy písma → nastavení Typografie,

   • barvy patičky → nastavení Patička.

Pro úpravu pozadí jednotlivých sekcí vašeho webu:

1. najeďte kurzorem na sekci, pro kterou chcete změnit pozadí,

2. objeví se vám ovládací prvky pro sekci, klikněte na ozubené kolečko,

3. tím se dostanete do nastavení sekce, vyberte barvu pozadí.

Přidejte logo

Další příležitostí, jak propojit web s vaší značkou, je přidání vlastního loga. Pokud logo nemáte, můžete zvolit textovou variantu nebo si logo nechat vygenerovat. Často dostanete lepší návrhy než od levných grafiků: looka.com.

Jak nahrát logo?

1. Otevřete jakoukoliv stránku vašeho webu a klikněte na logo,

2. vyberte mezi obrázkem a textem,

3. nahrajte vaše logo.

5. Spuštění webu

Gratulujeme! První verze vašeho webu je na světě. Všechny úpravy, které na webu uděláte se automaticky ukládají. Aby byly změny viditelné i pro ostatní je třeba web publikovat:

1. přejděte na jakoukoliv stránku,

2. v pravém horním rohu najdete tlačítko Publikovat,

3. tím všechny změny zveřejníte.

K webu se můžete kdykoliv vrátit a informace upravovat, tak aby byl vždy aktuální a obsahoval všechny informace, které vaši zákazníci hledají. Pro finální kontrolu můžete využit náš checklist před spuštěním webu.

Nyní zbývá poslední krok a to zveřejnit web na vlastní doméně. Gratulujeme. Dnes máte hotovo.