CS EN
29. listopadu 2019 Návody pro weby verze 2018

Nové grafické prvky v editoru

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?

  1. Napište text nadpisu.
  2. 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?

  1. Napište text.
  2. 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?

  1. Napište text a vytvořte z něj odkaz.
  2. Odkaz označte a v nabídce Formáty > Texty vyberte položku Decentní odkaz.

Ukázka

Toto je decentní odkaz

Toto je normální odkaz

Odrážkovaný seznam

Seznamy mají nově odrážku ve formě "charitního plamínku".

Jak na to?

  1. Napište více řádků (odstavců) pod sebou.
  2. 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 první úroveň seznamu

Tabulky

Tabulky mají nově o trochu menší texty, lehce upravenou barevnost a rámečky.

Jak na to?

  1. 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ů.
  2. 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í

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?

  1. Napište požadovaný text.
  2. Vytvořte z něj odkaz (na stránku, externí web, soubor atd.).
  3. 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 červené tlačítko

Toto je světle šedivé tlačítko

Toto je tmavě š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.

Staň se dobrovolníkem

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?

  1. Napište požadovaný text a označte ho.
  2. 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?

  1. Napište požadovaný text a označte ho.
  2. 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.

Chci vědět více

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?

  1. Z nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
  2. V dalším okně vyberte z nabídky Šablony volbu Blok s obrázkem vlevo/vpravo/nahoře.
  3. Do obsahu se vloží vybraná šablona s výchozím obrázkem, nadpisem a textem.
  4. Změňte obrázek a další texty dle potřeby.

Ukázka

Blok s obrázkem vlevo
Ukázkový obrázek

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ý obrázek

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ý obrázek

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...

Ukázkový obrázek

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.

Čtete více

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?

  1. V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
  2. V dalším okně vyberte z nabídky Šablony volbu Dva bloky / Tři bloky.
  3. Upravte obrázky a text dle potřeby nebo dále doplňte tlačítka.

Ukázka

Dva bloky
Ukázkový obrázek

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ý obrázek

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ý obrázek

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ý obrázek

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ý obrázek

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.

Ukázkový obrázek

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

Více

Ukázkový obrázek

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.

Více

Ještě jeden tip...

Vložte do bloku nějaký widget, např. darujme.cz.

Ukázkový obrázek

Bankovní převodem nebo platební kartou

Pro vložení widgetu použijte v editoru funkci Vložit HTML kód. Widget darujme.cz bude viditelný pouze v případě, že bude umístěn na webu s patřičnou doménou. Místo widgetu si můžete také představit vloženou mapu, např. mapy.cz. 
Ukázkový obrázek

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.

Napište nám

 

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?

  1. V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
  2. V dalším okně vyberte z nabídky Šablony volbu Rozbalovací lišta.
  3. Do obsahu se vloží lišta v rozbaleném stavu s ukázovým textem.
  4. 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?

  1. V nabídky v horním menu editoru klikněte na Vložit a vyberte Šablony.
  2. 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ů

  1. 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.
  2. 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.
  3. 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