July 12, 2020 Instructions

New Graphic Features in Editor

Another update for new Caritas websites has arrived. You can now use directly in the editor both simple and more advanced graphic features to make your texts attractive and interactive.

Basic Text Styles

Colorful and Grey Headlines 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

 

Annotation / Lead

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. 

Unobtrusive Link

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

Bulleted List

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

Table

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í

Buttons and Color Blocks

Buttons - 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. Vyberte (označte) text 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

Circles with a Description

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.

Color Blocks

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

Teasers and More Advanced Blocks

Blocks with a Picture Right/Left/Top

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

Hubs - Combination of 2 or 3 Blocks

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

 

Drop-down Bar

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

Grids

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

General Tips for Text Writing

  1. When writing a new page, start by pasting a few new empty paragraphs. E.g. press 10 times ENTER key. By that you create space in which you may paste different templates and blocks and you will not have problem to move above or under a feature.
  2. Write only text first and divide it by headlines –- e.g. with a name of a template. Write the rest of the text, revise and save the page. Only then start dealing with visual aspects. Use annotation or grey block for selected paragraphs, create buttons out of links etc.
  3. It is better to use less than more components. You will create page such as this one only after you have tried everything, and you know exactly how the context behaves.

I wish you better work and prettier and more useful websites!

Jan Vítkovský, VIZUS.CZ