Nápověda k modulům ANT CMS

Základy práce s obsahem v ANT CMS

Slovy klasika: udělejte obsah králem. Jak správně pracovat s obsahem v ANT CMS?

Co je to obsah?

Obsah jsou veškeré texty, obrázky, tlačítka, videa a tak podobně. Aby, jste se naučili efektivně pracovat s obsahem bude se vám hodit alespoň základní znalost nějakého textového editoru (např. Wordu). Vv obsahovém poli v ANT CMS se nachází několik možností jako v textových editorech. Ať už je to změna velikosti písma, barvy pozadí nebo fontu. 

Jaké jsou standardní možnosti editace obsahu v ANT CMS?

Kromě výše zmíněných možností, které se nachází v textových editorech, umí  ANT CSM ještě několik dalších funkcí navíc, které jsou optimalizované přímo pro webovou stránku.

  • Práce s textem
    • Nastavení nadpisů
    • Vytváření odstavců
    • Formátování textu
    • Hypertextové odkazy
  • Možnost vytváření tlačítek
  • Přednastavené šablony
  • Možnost nastavení tabulek
  • Možnost detailnějších úprav pomocí HTML
  • Možnost nahrání textu z textového editoru MS Word
  • Několik dalších komponent

Obsah nápovědy

  • Práce s textem
    • Základní formátování textu
    • Zarovnání textu
    • Nastavení předdefinovaných stylů a nadpisů
    • Změna barvy písma a pozadí
    • Nastavení indexů
  • Tlačítka
  • Obsahové šablony
  • Komponenty
  • Tabulky
  • Jak správně vložit text z MS Word

Představení obsahového pole

Obsahové pole

Obsahové pole se skládá ze 2 hlavních částí:

  • Část pro formátování a úpravu obsahu (horní část s ikonkami)
  • Textové pole pro vkládání samotného obsahu
     

Práce s textem

Základní formátování textu

Toto formátování je stejné jako ve všech textových editorech, lze zde nastavit tlusté písmo, kurzívu, podtrhnutí písma a přeškrtnuté písmo.

Písmeno B označuje tučné písmo, I kurzívu, U podtržené písmo a ABC přeškrtnuté písmo. Formátovat můžete pomocí označení textu v náhledovém poli a následným kliknutím na jednu z ikon.

Zarovnání textu

Vedle skupiny základní formátování textu se nachází skupina zarovnání textu. Text lze zarovnat na doprava, na střed, doleva anebo do bloku.
Zarovnání do bloku se na webu moc nepoužívá z hlediska UI, ale občas se hodí mít tuto možnost.

  1. Doprava 
  2. Na střed 
  3. Doleva 
  4. Do bloku

Nastavení předdefinovaných stylů a nadpisů

V další části lze formátovat text a odlišit nadpis od písma. V této části se nachází předdefinované styly odstavců a také zde lze nastavit tzv. úrovně textu.

TIP: Úrovně textu jsou důležité z hlediska SEO optimalizace. Webové stránky disponují 6 úrovněmi nadpisů a jednou úrovní pro základní text.

Změna barvy písma a pozadí

V následující části lze změnit barvu písma a barvu pozadí.

Po kliknutí na ikonu, se zobrazí několik základních barev. Dole se pak nachází tlačítko Další barvy.

Pokud kliknete na toto tlačítko zobrazí se vyskakovací okno, kde můžete navolit přesně tu barvu, kterou požadujete.

Výběr barvy

Nahoře se nachází menu, ve kterém přepínáte mezi zobrazením barev. Dole se pak nachází tlačítko Použít a Storno, dále zde lze nastavit barvu pomocí kódu (např. #ffffff pro bílou barvu). Napravo od pole pro nastavení kódu barvy se nachází náhled barvy.

Nastavení indexů

Nastavení indexů je poslední část z kapitoly základní formátování textu. Část pro upravení indexů se nachází ve 3. řádku.

Zde X2 znázorňuje dolní index a X2 horní index.

Tlačítka

Základní funkce tlačítka je odkazovat na jiné stránky či scripty.  U tlačítek kromě odkazu je možné nastavit i další, např. kde se se otevře požadovaný odkaz (jestli se má odkaz otevřít na nové kartě či v novém okně), nebo titulek. Tlačítko také může odkazovat na vyskakovací okno a mnoho dalšího.

Základní funkčnosti tlačítek:

  1. Nastavení obecných parametrů
    • URL odkazu
    • Cíle
    • Titulku
    • Třídy
  2. Nastavení vlastností vyskakovacího okna
    • Javascriptové okno
    • URL vyskakovacího okna
    • Název okna
    • Velikost okna v pixelech
    • Umístění okna
  3. Nastavení dodatečných možností vyskakovacího okna
  4. Nastavení reakce na různé události (slouží programátorům)
  5. Nastavení rozšířených parametrů (převážně pro programátory)

Obecné parametry

URL odkaz

Url odkaz určuje na jakou stránku bude okno odkazovat (např. https://www.antstudio.cz).

URL odkaz

Cíl

Určuje, jakým způsobem bude okno otevřeno

  • V aktuálním okně a na aktuální kartě (defaultní nastavení)
  • _blank – na nové kartě
  • _parent – v nadřazeném okně
  • _top – v hlavním okně

Titulek

Definuje titulek tlačítka.

Titulek

Třída

Slouží programátorům, zde lze nastavit tlačítku CSS třídu. Je možné vybrat z předdefinovaných.

Vyskakovací okno

Javascriptové okno

Javascriptové okno určuje, zda bude okno otevřené přes Javascript nebo ne. Javascript nemusí být ve všech prohlížečích zapnutý, ale z 99 % už v dnešní době zapnutý je.

URL vyskakovacího okna

Odkazuje na stránku s obsahem vyskakovacího okna.

Velikost

Určuje velikost okna v pixelech. Pixel je jedno obrazový bod na monitoru (např. 500px x 700px)

Umístění

Souřadnice, na kterých se má okno zobrazit.

Návod pro vytvoření tlačítka s odkazem

Nejdříve do textového pole napište nějaký text (název tlačítka).

Poté označte text a v horní liště klikněte na tlačítko sponky.

Pomocí této sponky vytvoříte nebo upravíte tlačítko.

Po kliknutí se zobrazí vyskakovací okno s upřesňujícím nastavením. Zkopírujte potřebný odkaz a vložte ho do pole URL odkazu.

Poté klikněte na konci vyskakovacího okna na tlačítko Vložit.

Tím jste nastavili, že tlačítko se bude chovat jako odkaz a bude odkazovat na vámi zvolenou URL adresu (zde: https://antstudio.cz/).

Text, který jste na začátku označili, že se má chovat jako tlačítko, se nyní přeformátoval a je z něho odkaz. Gratuluji, vytvořili jste jednoduchý odkaz. Nyní už nezbývá moc kroků a je hotové i celé tlačítko.

Znovu označte text tlačítka a rozklikněte v horní nabídce styly.

Pokud se posunete pomocí kolečka trochu níže, je zde 8 stylů tlačítek. Vyberte si jedno z nich. (zde: Tlačítko základní).

Odstranění odkazu z tlačítka.

Označte část textu, u které jste se rozhodli, že už nechcete, aby sloužil jako tlačítko. A následně klikněte na tlačítko vedle sponky.

Z textu, který byl označen, byl odstraněn odkaz a veškeré jeho formátování.

Obsahové šablony

Obsahové šablony umožňují rozdělit text na několik částí a jsou responzivní. Umožňují několik stylů zobrazení textu, ať už je to jen více sloupců pomocí systému bootstrap grid, nebo nastavení článku s obrázkem.

TIP: Pokud máte alespoň základní znalosti jazyku HTML, dokážete si pomocí HTML kódu šablony ještě více kustomizovat.

Bootstrap grid

Bootstrap grid je systém, který umožňuje vytvářet sloupce. Grid má celkově 12 sloupců. A pomocí čísel od 1 do 12 můžete vytvořit několik sloupců. Součet čísel musí být maximálně 12. Kolikrát je číslo větší, tím větší sloupce definuje.


 

TIP: Pokud máte alespoň základní znalosti bootstrapu, v HTML kódu si můžete pohrát i s responzivním zobrazením.

Přidání šablony do editoru

Část, kde se nachází tlačítko Vložit předdefinovaný obsah ze šablony, se nalézá téměř uprostřed ve třetím řádku.

Pomocí prvního tlačítku vybíráte z několika předdefinovaných rychlých obsahů (např. kontakt).

Pomocí druhého tlačítka můžete uspořádávat text do sloupců, jak bylo výše vysvětleno.

Třetí tlačítko zajišťuje výpis několika položek (fotogalerie, výpis článků)

Přidání šablony do editoru

  • Typ výpisu: Zde vyberte, jaký typ obsahu chcete vypsat (např. fotogalerie, výpis článků)
  • Typ zobrazení: Zde pro jednotlivý typ výpisu vyberte typ zobrazení.

Pozn.: Podle typu výpisu se pak mohou ještě zobrazit další pole (např. výběr článků)

Pozn.: Nahoře v menu se ještě nachází rozšířená nastavení, ty ale slouží spíše programátorům.

Poslední tlačítko umožňuje přidávat nějaký audiovizuální obsah např. pomocí platformy flash nebo z youtube.

Nejdříve vyberete typ obsahu, který chcete zobrazit a poté do řádku Soubor/URL napíšete adresu k obsahu.

Můžete případně nastavit vlastní rozměry. Dole pak uvidíte náhled.

V panelu rozšířené poté můžete nastavit nějaké rozšířené možnosti (např. kvalita, zarovnání apod.)
 

Tabulky

Ideální pro zachování responsivního zobrazení je vkládat tabulky prostřednictvím výše zmíněných šablon.

Tabulku je následně možné editovat tlačítky pro správu editaci tabulek:

  1. Odsazení obsahu – určuje o kolik obrazových bodů bude odsazen obsah uvnitř tabulky
  2. Zarovnání – nastavení zarovnání doleva, na střed, doprava.
  3. Šířka – Jak široká bude tabulka
  4. Třída 
    • Tabulková data
    • Neviditelná pomocná formátovací tabulka
    • Textová tabulka
    • (hodnota)
  5. Nadpis tabulky – Určuje, zda bude mít tabulka nadpis
  6. Rozestup buněk - 
  7. Rámeček – Počet obrazových bodů, jak silný bude rámeček tabulky
  8. Výška – Jak vysoká bude tabulka

Dále se zde nachází panel Rozšířené, ale ten slouží spíše programátorům. Případně lze zde nastavit barvu pozadí/rámečku pomocí kódu barvy nebo směr textu.

Jakmile vytvoříte novou tabulku, otevřou se vám další možnosti, jak s ní můžete pracovat. Také budou zpřístupněny další 4 části.
 

  1. Umožňuje upravovat některé vlastnosti tabulky
  2. Umožňuje přidávat a odstraňovat řádky
  3. Umožňuje přidávat a odstraňovat sloupce
  4. Umožňuje rozdělovat a slučovat buňky

Upravování vlastností tabulky

1. Vlastnosti řádku tabulky

Pokud kliknete na tlačítko, pomocí kterého lze upravovat vlastnosti tabulky, otevře se vám toto vyskakovací okno:

  • Typ řádku – Umožňuje nastavit vlastnost řádku tabulky, lze vybrat mezi:
    • Hlavička tabulky
    • Tělo tabulky
    • Pata tabulky
  • Zarovnání – Určuje zarovnání všech buněk v konkrétním řádku
  • Vertikální zarovnání – Určuje vertikální zarovnání všech buněk v konkrétním řádku
  • Třída – Pomocná vlastnost pro programátory
  • Výška – Určuje výšku všech buněk v řádku tabulky v obrazových bodech

Dole pak lze nastavit, který řádek se má aktualizovat:

  • Zvolený řádek - řádek, ve kterém se nachází kurzor
  • Všechny liché řádky
  • Všechny sudé řádky
  • Všechny řádky

2. Vlastnosti buňky

  • Zarovnání – Určuje zarovnání buňky
  • Vertikální zarovnání – Určuje vertikální zarovnání buňky
  • Šířka – Určuje šířku buňky v obrazových bodech
  • Třída – Lze nastavit CSS třídu, spíše pro programátory
  • Typ buňky – Určuje, zda buňka slouží k uchování dat, nebo je to záhlaví
  • Hlavička pro – Pokud je buňka definovaná jako záhlaví je možné nastavit pro co
  • Výška – Určuje výšku buňky v obrazových bodech

Dole pak lze nastavit, která buňka se má aktualizovat

  • Zvolená buňka – buňka ve které se nachází kurzor
  • Všechny buňky v řádku
  • Všechny buňky ve sloupci
  • Všechny buňky

Přidávání řádků tabulky

  1. Vložit řádek před – přidá řádek před řádek, ve kterém se nachází kurzor
  2. Vložit řádek za – přidá řádek za řádek, ve kterém se nachází kurzor
  3. Odstranit řádek tabulky – odstraní řádek ve kterém se nachází kurzor

Přidání sloupců tabulky

  1. Vložit sloupec před – přidá sloupec před sloupec, ve kterém se nachází kurzor
  2. Vložit sloupec za – přidá sloupec za sloupce, ve kterém se nachází kurzor
  3. Odstranit sloupce buňky – odstraní sloupec, ve kterém se nachází kurzor

Rozdělování a slučování buněk

  1. Rozdělit buňky – pokud byly buňky dříve sloučené, rozdělí je zpět
  2. Sloučit buňky – sloučí 2 a více vybraných buněk

Jak správně vložit text z MS Word

Pokud se kopíruje text z aplikace MS Word, může dojít k různým chybám formátování - například vkládání bílých znaků, kvůli kterým se následně stránka nemusí zobrazovat správně na všech zařízeních. Proto má ANT CMS možnost vložení textu přímo pro aplikaci MS Word.

Jak na to?

Klikněte na tlačítko s logem aplikace MS Word.

Nyní se otevře vyskakovací okno s polem uprostřed, do tohoto pole vložte váš text z aplikace MS Word.

Následně klikněte na tlačítko vložit a text se vloží tam, kde máte v poli umístěný kurzor. Vkládací okno zachování formátování textu z Wordu.

Položení dotazu

Položte jakoukoliv otázku. Odpověď dostanete během několika dnů. Nejzajímavější dotazy umístíme na naše stránky.

Odesláním beru na vědomí zpracování osobních údajů