V editoru obsahu používejte jednoduché i složitější grafické prvky, aby vaše texty byly atraktivní a interaktivní.
Základní styly pro texty
Barevné a šedé nadpisy 1 - 6
Text můžete nově členit pomocí dvou sad nadpisů - červených a šedých.
Jak na to?
- Napište text nadpisu.
- V nabídce Formáty > Nadpisy vyberte požadovanou variantu.
Ukázka
Nadpis 1
Nadpis 2
Nadpis 3
Nadpis 4
Nadpis 5
Nadpis 6
Nadpis 1
Nadpis 2
Nadpis 3
Nadpis 4
Nadpis 5
Nadpis 6
Anotace / Perex
Tento styl je určen pro úvodní texty na každé stránce. Text má větší písmo a řádkování.
Jak na to?
- Napište text.
- V nabídce Formáty > Bloky vyberte položku Anotace.
Ukázka
Toto je text napsaný pomocí formátu Anotace a slouží k psaní úvodních nebo důležitých částí textu stránky. Toto je text napsaný pomocí formátu Anotace a slouží k psaní úvodních nebo důležitých částí textu stránky. Toto je text napsaný pomocí formátu Anotace a slouží k psaní úvodních nebo důležitých částí textu stránky. Toto je text napsaný pomocí formátu Anotace a slouží k psaní úvodních nebo důležitých částí textu stránky. Toto je text napsaný pomocí formátu Anotace a slouží k psaní úvodních nebo důležitých částí textu stránky.
Decentní odkaz
Decentní odkaz je odkaz se slabým podtržením ve světlé šedivé barvě. Slouží k vkládání odkazů do textu (tak aby správně fungovalo indexování vyhledávači), které nejsou tak viditelné a nesměrují uživatele na méně důležité odkazy ve stránce.
Jak na to?
- Napište text a vytvořte z něj odkaz.
- Odkaz označte a v nabídce Formáty > Texty vyberte položku Decentní odkaz.
Ukázka
Odrážkovaný seznam
Seznamy mají nově odrážku ve formě "charitního plamínku".
Jak na to?
- Napište více řádků (odstavců) pod sebou.
- Všechny řádky označte a klikněte na ikonu odrážkovaného seznamu.
Ukázka
- Toto je první úroveň seznamu
- Toto je první úroveň seznamu
- Toto je druhá úroveň seznamu
- Toto je třetí úroveň seznamu
- Toto je druhá úroveň seznamu
- Toto je první úroveň seznamu
Tabulky
Tabulky mají nově o trochu menší texty, lehce upravenou barevnost a rámečky.
Jak na to?
- Na požadované místo na stránce klikněte pravým tlačítkem myši (nebo klikněte na ikonu pro vložení tabulky) a vyberte požadovaný počet sloupců a řádků.
- Vloží se tabulka ve výchozím stylu. Klikněte pravým tlačítkem myši na tabulku a vyberte Styl tabulky. Vyberte si požadovaný styl.
Ukázka
Výchozí styl tabulky
Toto je záhlaví tabulky | Toto je záhlaví tabulky | Toto je záhlaví tabulky |
---|---|---|
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Zvýrazněný styl tabulky
Toto je záhlaví tabulky | Toto je záhlaví tabulky | Toto je záhlaví tabulky |
---|---|---|
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Styl tabulky bez orámování
Toto je záhlaví tabulky | Toto je záhlaví tabulky | Toto je záhlaví tabulky |
---|---|---|
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Toto je text v buňce tabulky | Toto je text v buňce tabulky | Toto je text v buňce tabulky |
Tlačítka a barevné bloky
Tlačítka - Call 2 action
V editoru můžete nyní kromě obyčejných odkazů používat i tlačítka. Tlačítka slouží jako výrazné prvky pro výzvy k akci - např. Napište nám, Rezervujte si termín, Darujte apod.
Jak na to?
- Napište požadovaný text.
- Vytvořte z něj odkaz (na stránku, externí web, soubor atd.).
- Klikněte kurzorem kamkoli do odkazu a v nabídce Formáty > Texty vyberte položku Červené tlačítko (nebo světle šedivé, tmavě šedivé).
Ukázka
Toto je světle šedivé tlačítko
Tip
Tlačítko zkuste zarovnat na střed stránky a získáte uprostřed textu pěkný a viditelný prvek pro výzvy k akci.
Kuličky s popiskem
Velké prvky pro zvýraznění důkežitých informací ve stylu kuliček, které jsou na homepage a v levém sloupci webu. Např. Pomáháme již 100 let, Máme 500 klientů atd.
Jak na to?
- Napište požadovaný text a označte ho.
- V nabídce Formáty > Bloky vyberte položku Červená kulička 1/2 (nebo Tmavě šedá kulička 1/2).
Ukázka
Toto je Červená kulička 1
Toto je Tmavě šedá kulička 1
Toto je Červená kulička 2
Toto je Tmavě šedá kulička 2
Tip
Text u kuliček 2 se ve výchozí stavu zarovnává doleva. Zarovnání můžete změnit na střed.
Barevné bloky
Pro základní zvýrazněných textů můžete použít barevné bloky. Na výběr jsou bloky hranaté a bloky s kulatými rohy ve více barevných provedeních.
Jak na to?
- Napište požadovaný text a označte ho.
- V nabídce Formáty > Bloky vyberte položku Blok červený/světle šedý/tmavě šedý.
Ukázka
Blok světle šedý hranatý
Blok tmavě šedý hranatý
Blok červený
Blok světle šedý s kulatými rohy
Blok tmavě šedý s kulatými rohy
Blok červený šedý s kulatými rohy
Tip
Zkuste kombinovat blok, nadpisy, tlačítka apod.
Co je nového
Zde je popisný text, který je libovolně dlouhý. Obsah v bloku je vystředěn. Zde je popisný text, který je libovolně dlouhý. Obsah v bloku je vystředěn. Zde je popisný text, který je libovolně dlouhý. Obsah v bloku je vystředěn.
Upoutávky a složitější bloky
Bloky s obrázkem vlevo/vpravo/nahoře
Velký blok s obrázkem, nadpisem a popisem. Slouží k vytváření upoutávek, příběhů a k dalšímu zvýraznění textu.
Jak na to?
- Z nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
- V dalším okně vyberte z nabídky Šablony volbu Blok s obrázkem vlevo/vpravo/nahoře.
- Do obsahu se vloží vybraná šablona s výchozím obrázkem, nadpisem a textem.
- Změňte obrázek a další texty dle potřeby.
Ukázka
Blok s obrázkem vlevo

Ukázkový nadpis H3
Blok s obrázkem vlevo a obsahem. Vkládá se náhled velký zmenšený na 50% šířky boxu. Obrázek můžete vyměnit. Tento text můžete libovolně změnit. Pokud bude text delší, barva pozadí se bude protahovat pod obrázek, který tedy skončí vlevo nahoře celého podbarveného bloku.
Blok s obrázkem vpravo

Ukázkový nadpis H3
Blok s obrázkem vlevo a obsahem. Vkládá se náhled velký zmenšený na 50% šířky boxu. Obrázek můžete vyměnit. Vlevo se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit. Pokud bude text delší, barva pozadí se bude protahovat pod obrázek, který tedy skončí vpravo nahoře celého podbarveného bloku. Takto se pozadí protahuje i u bloku s obrázkem vlevo.
Blok s obrázkem nahoře

Ukázkový nadpis H3
Blok s obrázkem nahoře a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.
Tip
Zkuste do bloku vložit i tlačítko odkazem. Např. takto...

Příběh pana Miroslava
Dobrý konec má příběh naší pomoci. Pan Miroslav na sobě tvrdě pracoval a má novou práci i střechu nad hlavou.
Rozcestníky – kombinace 2 nebo 3 bloků
Výše popsané bloky s obrázky lze nově i kombinovat. Můžete tedy vytvářet přehledné rozcestníky na další stránky nebo upozorňovat na další informace - kontakty, akce, jídelníček, otevírací dobu apod.
Jak na to?
- V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
- V dalším okně vyberte z nabídky Šablony volbu Dva bloky / Tři bloky.
- Upravte obrázky a text dle potřeby nebo dále doplňte tlačítka.
Ukázka
Dva bloky

Ukázkový nadpis H3
Blok s obrázkem vlevo a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.

Ukázkový nadpis H3
Blok s obrázkem vlevo a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.
Tři bloky

Ukázkový nadpis H4
Blok s obrázkem nahoře a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.

Ukázkový nadpis H4
Blok s obrázkem nahoře a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.

Ukázkový nadpis H4
Blok s obrázkem nahoře a obsahem. Obrázek můžete vyměnit. Dole se předgenerovává standardní ukázkový text. Je to tento text, který můžete libovolně změnit.
Tip
Zkuste odstranit nadpis a ukázkový text a místo nich vložte tlačítko. Nebo odstraňte jenom nadpis a doplňte tlačítko.

Dobrý konec má příběh naší pomoci. Pan Miroslav na sobě tvrdě pracoval a má novou práci i střechu nad hlavou.

Dobře končí i druhý příběh naší pomoci. Pan Jan na sobě také tvrdě pracoval a má novou práci a brzy bude bydlet.
Ještě jeden tip...
Vložte do bloku nějaký widget, např. darujme.cz.

Bankovní převodem nebo platební kartou

Staňte se dobrovolníkem a pomáhejte na místě
Ceníme si každého člověka s dobrým srdcem. Dobrovolnictví je důležitá součást činnnosti mnoha neziskových organizací a velice rádi vás přivítáme v našem týmu.
Rozbalovací lišta
Rozbalovací lišta je prvek, který umožní psát do stránky více textu. Pro ovládání slouží šipka vpravo nahoře, klikací je ale celá lišta.
Jak na to?
- V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
- V dalším okně vyberte z nabídky Šablony volbu Rozbalovací lišta.
- Do obsahu se vloží lišta v rozbaleném stavu s ukázovým textem.
- Místo textu můžete vložit v podstatě cokoli - viz tato stránka s návody.
Ukázka
Rozbalovací lišta
Blok standardního ukázkového textu, který lze přepsat. V editoru v CMS se tento blok ukazuje rovnou, aby šel editovat a lze do něj cokoli vložit. Na webu je pak komponenta ve výchozím stavu zabalená. Těchto řádků lze vložit libovolný počet pod sebe.
Další rozbalovací lišta
Lišty můžete vkládat hned za sebou nebo je prokládejte dalším textem.
Tímto textem můžete rozdělit více lišt.
Rozbalovací lišta
Blok standardního ukázkového textu, který lze přepsat. V editoru v CMS se tento blok ukazuje rovnou, aby šel editovat a lze do něj cokoli vložit. Na webu je pak komponenta ve výchozím stavu zabalená. Těchto řádků lze vložit libovolný počet pod sebe.
Tip
Z této ukázky je patrné, že můžete vkládat i více lišt do sebe. Můžete také nadpis lišty udělat tučný, bude pak výraznější.
Mřížky
Pomocí mřížek můžete vedle sebe skládat různý obsah - texty, obrázky, tlačítka atd. Mřížky se v editoru obsahu zobrazují ohraničené čárkovanou čárou. Na webu jsou pak neviditelné. Tyto mřížky jsou optimalizované pro zobrazení v mobilech a jednotlivé buňky se pak zobrazují pod sebou. Mřížky mohou mít 2 – 6 buňek (sloupců) vedle sebe. Nahrazují tak (pro členění textu) často nevhodně používané tabulky.
Jak na to?
- V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
- V dalším okně vyberte z nabídky Šablony volbu Mřížka dva/tři/čtyři/pět/šest sloupců.
Ukázka
Mřížka dva sloupce
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mřížka tři sloupce
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mřížka čtyři sloupce
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mřížka pět sloupců
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mřížka šest sloupců
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tip
Mřížky můžete použít pro odstavec textu, který doprovodíte např. tlačítkem.
Toto je ukázkový doprovodný text, který by měl být akorát dlouhý. Toto je ukázkový doprovodný text, který by měl být akorát dlouhý.
Obecné tipy pro psaní textů
- Novou stránku začněte psát tak, že si nejdříve do stránky vložte více nových prázdných odstavců. Tedy např. 10 stiskněte klávesů ENTER. Tím si vytvoříte prostor, do kterého pak můžete vkládat různé šablony a bloky a nebude vám dělat problém se dostat nad nebo pod nějaký prvek.
- Nejdříve pište čistý text a používejte k jeho členění nadpisy – třeba s názvem konkrétní šablony. Text dopište, revidujte ho a uložte si stránku. Až poté přistupte k tomu, aby to bylo "hezké". Z vybraných odstavců udělejte anotaci nebo šedivý blok, z odkazů udělejte tlačítka apod.
- Využívejte raději méně než více komponent. Stránku jako tuto vytvoříte hladce až potom, co si vše vyzkoušíte a budete znát konkrétní chování obsahu.
Ať se vám lépe pracuje a vaše weby jsou hezčí a použitelnější...
Jan Vítkovský, VIZUS.CZ