🗓️ AKTUÁLNĚ: Mezinárodní summit NASLOUCHÁME SRDCEM v květnu v Praze. Více informací ZDE.

Nadpis 1 velikost 60

Označení jako Nadpis 1 může být pouze jeden nadpis na stránce. Velikost 60 px, označit tučně to důležité.

První blok na stránce odstazení - Vlastní - počítač horní i dolní 150 a mobil obě 100. Obrázek na pozadí, který jde z bílé barvy do obrázku. Šablona v Canvě. Efekt obrázku na pozadí fixní.

Tento hlavní text pod nadpisem může být zvětšený na velikost 20 px, u jiných textů na webu neměnit velikost!

Tohle je Nadpis 2 velikost 40

Všechny nadpisy na stránkách označovat, je to z důvodů SEO. Nadpisů 2 může být více na stránce. Velikost 40 px. Označit důležité slovo v nadpisu tučně. Používat u něj oranžové podtržítko vždy zarovnané stejně s nadpisem, tedy uprostřed nebo doleva. Šířka elementu s nadpisem 700 px a zarovnání podle nadpisu doprostřed nebo doleva.

Texty na stránce vždy standardní velikosti, tedy neměnit, nechat globální. Šířka elementu s textem 600 - 650 px, nikdy ne přes celou šířku stránky! Krátké texty mohou být zarovnané doprotřed, delší vždy doleva.

Odsazení u všech prvků nechávat standardní (30 px), pokud je pod nadpisem nebo textem prvek s boxy, tak je možné zvětšit odsazení na 60 px. Vždy měnit jen spodní odsazení - horní jen vyjímečně.

Odsazení bloků (řádků) volit Střední. Pokud je obrázek na pozadí, tak Velké. Lze zvolit grafický oddělovač - vlnovku o velikosti 40 px.

Nadpis 3

U bloků vždy nastavit zakulacení rohů to největší.

Velikost 26

Vždy zvolit místo čar tak stín - Větší stín.

podtržení

Nepoužívat obrámování a různé čáry u prvků. Čáry jsou známkou líného grafika. Místo toho dát stín nebo jinou barvu pozadí.

Nadpis 2

Delší texty zarovnat doleva.

Pokud je obrázek na pozadí, tak plná barva a text umístit do bílého blokumaximálně zaoblenými rohyVelkým stínem. Obrázek roztáhnout přes celou obrazovku a zvolit u něj efekt paralax (případně fixní, pokud by to chtělo posunout střed zobrazení).

Blok (řádek) s obrázkem odsazení Velké. Grafický oddělovač vlnovka s velikostí 40 px.

pozadí

V naprosté většině případů použít bílé #ffffff.
Odsazení bloku Střední (tzn. horní i spodní 100).

Přechod na pozadí

Pro oddělení je možné použít barevný přechod na pozadí z bílé #ffffff do světlé oranžové barvy #fff9f0

Pokud potřebuji dva bloky za sebou spojit, tak velikost odstazení bude u prvního Vlastní horní 100 a spodní 50, druhý 50 a 100.

barva na pozadí

Barva na pozadí jen ve vyjímečných případech!
Když už tak jen světlý odstín oranžové #fff9f0

Pozor, když jsem dal zde obrázek vedle textu a zarovnávám jej doleva, tak musím zarovnat text a v nastavení elementu u maximální šířky taky zarovnání doleva!

Důležitá upozornění

Zde ještě pár důležitých pravidel.

 

Globální nastavení

Upravuj vždy co nejméně jednotlivé elementy, využívej na maximum globální nastavení!

Mazání stránek a přesměrování

Stránky, které se mají zachovat, ale nepoužívají se nyní, tak se u nich zvolí nadřazená stránka Záloha. Následně se přesměrují v nastavení. Také původní adresu to chce přesměrovat přes plugin.

Pokud se přímo smaže nepotřebná stránka, tak ideálně nastavit přesměrování adresy na jinou v pluginu.

Hlavička a patička stránky

Nevytvářej pro stránky samostatnou hlavičku nebo patičku. Používej globální. Ve vyjímečných případech (např. na objednávkové stránky) se může hodit hlavička pouze s logem a patičká krátká s důležitými odkazy na obchodní podmínky apod.

Tipy a triky

Potřebuješ nový řádek v textu, ale nechceš mezeru mezi odstavci?
Stiskni shift + enter.

Potřebuješ odřádkovat text, ale element neumožňuje formátování? Vlož do textu kód <br /> klidně 2x za sebou a budeš mít v textu volný řádek.

Element neumožňuje formátování textu a ty potřebuješ část tučnou. Vlož na začátek vytučnění kód <strong> a na konec </strong> a text mezi kódem se vytuční (nezapomínej na ten ukončovací).

Shrnutí Specifikace

Souhrn důležitých parametrů.

 

Celkový styl

Zaoblení rohůnejvětší
Oddělení prvkůnepoužívat čáry, ale jinou barvu pozadí nebo stín
StínyVětší stín

Odsazení bloků

S obrázkem na pozadíVlastní
počítač 150 / 150
mobil 100 / 100
OstatníStřední
NavazujícíVlastní
první 100 / 50
druhý 50 / 100

oddělení bloků

Grafické oddělenívlnovka
velikost 40 px
používat u bloků s barvou na pozadí nebo obrázkem
Možnost oddělit blokybarvou na pozadí
obrázkem na pozadí

Barva pozadí bloků

Bílá#ffffff
Barevný přechod#ffffff
#fff9f0
Barevné (používat co nejméně)#fff9f0

Barvy

Černá #212121

Oranžová #ffa927

Světle oranžová #fff9f0

Konverzní barva tyrkysová #03b5aa


U projektů se jiná barva používá v kombinaci s oranžovou např. odstín do pozadí, barva Nadpisu 1 nebo jako barva ikon na stránce. Tlačítka zůstávají standardní. Příklad.

Akademi PRO - červená #F02226

Akademi PRO - světle červená #fff0f0

Porozumění byznysu - zelená #4AC952

Porozumění byznysu - světle zelená #f0fff1

Šťastnější Česko - modrá #05A5C4

Šťastnější Česko - světle modrá #f0fdff

Šťastnější Slovensko - modrá #0064a2

Šťastnější Slovensko - světle modrá #f0f9ff

Šťastná škola - tyrkysová #03b5aa

Šťastná škola - světle tyrkysová #f0fffe

Rozměry elementů

Šířka nadpisu700 px
Šířka textumax. 600 - 650 px
Spodní odsazenínechat standardní 30 px, pokud je potřeba větší tak 60 px

Fonty písma

Nadpisy
Montserrat Normal
vše velkými písmeny

Texty
Montserrat Normal

VELIKOSTI písma

Nadpis 1 60 px

Text pod hlavním nadpisem 20px

Nadpis 2 40 px

Nadpis 3 26 px

Text 17 px

Míša pozn.

barva 1 #FFA20D

barva 2 #03B5AA