Domů > ŠABLONY PRO WEB > Šablona Vzor Page

Test hlavního
nadpisu stránky (H1)

POZOR!!! Hlavní nadpis stránky (H1) se zadává jako černý widget Guttenberg, né modrý widget Spectra.

Perex: Tato stránka slouží jako pracovní vzor pro ladění Design systému 2026. Neřeší konkrétní téma. Jejím jediným cílem je ověřit vzhled všech důležitých prvků webu v reálném prostředí.

Perex stránky se zadává hned pod blok H1 (Guttenberg, né Spectra) jako blok „Odstavec“ a sekci „Pokročilé“ (dole vpravo na stránce) se do kolonky „Další třída CSS“ napíše pouze text ms-perex.

Test Nadpisu druhé úrovně (H2)

POZOR!!! Nadpis druhé úrovně (H2) se zadává jako černý widget Guttenberg, né modrý widget Spectra.

Je určen pro hlavní nadpisy kapitol, sekcí atd.

Test Nadpisu třetí úrovně (H3)

Lorem ipsum … Druhý odstavec je o něco delší. Obsahuje více vět, různou délku řádků a přirozenou strukturu textu. Díky tomu snadno poznáme, zda je šířka obsahu správná, zda se dobře čte na monitoru i mobilním telefonu a jestli mezi odstavci vzniká příjemný rytmus.

Komponenta Diamant (H3)

Diamant se zadává jako blok „Vlastní HTML“ a do kódu se vloží následující syntaxe:

<div class=“ms-diamond“>
<div class=“ms-diamond__text“>
   Zde napiš text diamantu
  </div>
</div>

Výsledek potom vypadá takto:

Někdy stačí změnit jediný pohled a celý problém začne dávat nový smysl, který vás bude bavit nejen objevit, ale také nově zařadit do vaší osobnosti.

Tohle považuji za jeden z největších posunů dneška. Ty už nepíšeš vzhled. Píšeš pouze obsah. Vzhled automaticky vytváří Design systém 2026. Přesně to byl cíl, ke kterému jsme se chtěli dostat.

Komponenta Citace (H3)

Citace se zadává jako blok „Vlastní HTML“ a do kódu se vloží následující syntaxe:

<blockquote class=“ms-quote“>
    <div class=“ms-quote__mark“>“</div>
    <div class=“ms-quote__content“>
    <div class=“ms-quote__body“>
            Zde vlož text citace, který chceš zviditelnit.
    </div>
    <cite class=“ms-quote__author“>
            Zde vlož jméno autora citace
    </cite>
    </div>
</blockquote>

Výsledek potom vypadá takto:

“
Zde vlož text citace, který chceš zviditelnit.
Zde vlož jméno autora citace

Komponenta Otázka na zamyšlení (H3)

Otázka na zamyšlení se zadává jako blok „Vlastní HTML“ a do kódu se vloží následující syntaxe:

<div class=“ms-question“>
    Zde vlož text otázky
</div>

Výsledek potom vypadá takto:

… Co když problém neleží tam, kde ho celý život hledáte?

Komponenta Odkazy v textu (H3)

Komponenta Odkazy v textu se upravují přímo v textu klasickým propojovačem. Používám tyto 3 typy odkazů:

Na e-mail: odkaz vede k tomu napsat e-mail. Nezadává se zobrazení na samostatné stránce.

Na vlastní stránku: přechod pouze na jinou stránku mého webu. Nezadává se zobrazení na samostatné stránce.

Na cizí stránku: přechod mimo můj web na cizí stránku. Zadává se „Zobrazit na samostatné stránce“.

Výsledek potom vypadá takto:

Delší odstavec, který navazuje na předchozí myšlenku a obsahuje několik vět různé délky. V textu je použitý nejprve aktivní odkaz na mail , potom dlouho dlouho nic, a potom aktivní odkaz na jinou stránku tohoto webu a nakonec aktivní odkaz na cizí stránku mimo web. Právě na podobném textu se nejlépe pozná kvalita typografie, řádkování a délka řádku.

Komponenta Seznamy (H2)

Používám celkem 5 různých typů seznamů:

Vzhled běžného Guttenberg widgetu Seznam:

  1. Odrážkový
  2. Vnořený
  3. Číslovaný
  4. ANO seznam s fajfkou (k otestování)
  5. NE seznam s křížkem (k otestování)

Odrážkový seznam (H3)

Tento typ seznamu používám pro běžné položkové seznamy.

Vzhled běžného Guttenberg widgetu Seznam:

  • Položka 1
  • Položka 2
  • Položka 3
  • Položka x

Můj Odrážkový seznam se zadává přes widget … a do kódu se vloží …

info-box modrý

Výsledek potom vypadá takto:

ukázka seznamu

Vnořený seznam (H3)

Tento typ seznamu používám pro běžné položkové seznamy s podrobnějšími upřesněními. Možnost až 2 vnoření:

Vzhled běžného Guttenberg widgetu Seznam:

  • Položka 1 (bold zadávám ručně)
    • Položka 1.1
    • Položka 1.2
    • Položka 1.x
  • Položka 2 (bold zadávám ručně)
    • Položka 2.1
      • Položka 2.1.1
      • Položka 2.1.2
      • Položka 2.1.x
    • Položka 2.2
    • Položka 2.x
  • Položka x

Můj Vnořený seznam se zadává přes widget … a do kódu se vloží …

info-box modrý

Výsledek potom vypadá takto:

ukázka seznamu

Číslovaný seznam (H3)

Tento typ seznamu používám pro různé postupy a kroky, co a jak dělat, co počem atd.

Vzhled běžného Guttenberg widgetu Seznam:

  1. Položka 1 (bold zadávám ručně)
    • Položka 1.1
    • Položka 1.2
    • Položka 1.3
  2. Položka 2 (bold zadávám ručně)
  3. Položka x (bold zadávám ručně)

Můj Odrážkový seznam se zadává přes widget … a do kódu se vloží …

info-box modrý

Výsledek potom vypadá takto:

ukázka seznamu

ANO seznam (H3)

Tento typ seznamu používám např. pro kladná doporučení, co dělat, co si vzít s sebou atd.

ANO seznam se zadává přes Guttenberg widget Seznam (musí se označit celý blok položek nahoře v liště) a vpravo v nastavení v sekci Pokročilé se do Další třída CSS se napíše ms-list-yes.

Výsledek potom vypadá takto:

Doporučuji vám:

  • Položka 1
  • Položka 2
  • Položka x

NE seznam (H3)

Tento typ seznamu používám např. pro varování, co nedělat, čemu se vyhnout, seznam negativních vlastností, co se mi nepovedlo atd.

ANO seznam se zadává přes Guttenberg widget Seznam (musí se označit celý blok položek nahoře v liště) a vpravo v nastavení v sekci Pokročilé se do Další třída CSS se napíše ms-list-no.

Výsledek potom vypadá takto:

Nedoporučuji vám:

  • Položka 1
  • Položka 2
  • Položka x

Tabulky

Mám možnost používat různé druhy tabulek a různou grafiku. Vybral jsem si pro začátek pouze jednu univerzální pro všechno. Přehledovou. Zde jsou přehledně všechny.

  • Přehledová
  • Srovnávací
  • Parametrová

Přehledová tabulka

Používám ji dosud pro všechno, co potřebuji tabulkou přehledně sdělit.

Přehledová tabulka se zadává přes Guttenberg widget Tabulka a vpravo v nastavení v sekci Pokročilé se do Další třída CSS se napíše text ms-table-overview.

Výsledek potom vypadá takto:

Název sloupce 1Název sloupce 2Název sloupce 3Název sloupce 4
Položka 1Hodnota 1Hodnota 1Hodnota 1
Položka 2Hodnota 2Hodnota 2Hodnota 2
Položka xHodnota xHodnota xHodnota x
Autor: Marek Ščotka

Zvýrazněný box

Tento box bude sloužit pro testování informačních bloků, upozornění nebo praktických doporučení.

Odkazy v textu

Toto je ukázka běžného odkazu uvnitř odstavce. Později zde otestujeme odkaz na stránku O mně, článek i externí web.

Obrázek

Sem později vložíme testovací fotografii.

Tlačítka

Objednat konzultaci

Zjistit více

Tabulka

Služba
Délka
Poznámka

Konzultace
60 min
Ukázkový řádek

Masáž
90 min
Druhý řádek

Program
Individuálně
Delší text

Závěrečné CTA

Chcete pokračovat dál?

Tato část bude sloužit jako vzor závěrečného bloku většiny obsahových stránek.

Objednat konzultaci

Patička stránky

Krátká závěrečná věta nebo navigace na další obsah.