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 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.
- Doprava
- Na střed
- Doleva
- 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.
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:
- Nastavení obecných parametrů
- URL odkazu
- Cíle
- Titulku
- Třídy
- Nastavení vlastností vyskakovacího okna
- Javascriptové okno
- URL vyskakovacího okna
- Název okna
- Velikost okna v pixelech
- Umístění okna
- Nastavení dodatečných možností vyskakovacího okna
- Nastavení reakce na různé události (slouží programátorům)
- 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).
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.
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ů)
- 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:
- Odsazení obsahu – určuje o kolik obrazových bodů bude odsazen obsah uvnitř tabulky
- Zarovnání – nastavení zarovnání doleva, na střed, doprava.
- Šířka – Jak široká bude tabulka
- Třída
- Tabulková data
- Neviditelná pomocná formátovací tabulka
- Textová tabulka
- (hodnota)
- Nadpis tabulky – Určuje, zda bude mít tabulka nadpis
- Rozestup buněk -
- Rámeček – Počet obrazových bodů, jak silný bude rámeček tabulky
- 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.
- Umožňuje upravovat některé vlastnosti tabulky
- Umožňuje přidávat a odstraňovat řádky
- Umožňuje přidávat a odstraňovat sloupce
- 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
- Vložit řádek před – přidá řádek před řádek, ve kterém se nachází kurzor
- Vložit řádek za – přidá řádek za řádek, ve kterém se nachází kurzor
- Odstranit řádek tabulky – odstraní řádek ve kterém se nachází kurzor
Přidání sloupců tabulky
- Vložit sloupec před – přidá sloupec před sloupec, ve kterém se nachází kurzor
- Vložit sloupec za – přidá sloupec za sloupce, ve kterém se nachází kurzor
- Odstranit sloupce buňky – odstraní sloupec, ve kterém se nachází kurzor
Rozdělování a slučování buněk
- Rozdělit buňky – pokud byly buňky dříve sloučené, rozdělí je zpět
- 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.