Úvod do práce v CMS

Cache reset

Publikování stránky, draft stránky a cache reset

Draft stránky

Připravené stránky v contentu ukládáte buď ve formě draftu, nebo přímo publikujete.

Záleží, zda chcete uživateli webu zobrazit změny hned, nebo chcete v editaci stránky pokračovat.

Pokud uložíte stránku v podobě draftu, nepřepíše se původní vystavený obsah na webu. Nové změny zůstanou uloženy ve stránce v CMS.

Draft uložíte dvěma způsoby:

• safe draft,

• safe draft and continue.

Pokud zvolíte možnost safe draft: po uložení se dostanete zpět na výpis všech stránek v content items. Tedy tuto možnost zvolíte v případě, že jste práci na draftu ukončili a budete pokračovat s prací jinde.

Možnost safe draft and continue: provedete změny na aktuální stránce, ale můžete pokračovat v úpravách v rámci draftu. Uložení vás nepřesměruje zpět na výpis stránek v content items.

Publikování stránky

Pokud chcete úpravy na stránce rovnou zveřejnit na webu, zvolíte jednu z možností: publish nebo publish and continue.

Pokud zvolíte možnost publish: obsah se rovnou změní na dostupném webu a budete přesměrováni z editace stránky na přehled stránek v content items.

Publish and continue: změny v obsahu stránky se ihned publikují na ostrém webu, můžete však pokračovat v editaci aktuální stránky (podobně jako u safe draft and continue nebudete přesměrováni zpět na výpis stránek v content items).

Cache reset

Cache reset v CMS znamená vymazání nebo obnovení dočasné paměti (cache), kterou CMS používá k ukládání a rychlému načítání určitých informací. Cache slouží k optimalizaci výkonu webových stránek tím, že ukládá již načtené a zpracované údaje, aby se nemusely opakovaně stahovat ze serveru.

U verze CMS 1.8 a výše stačí pro smazání cache publikovat Global Widgets. Není potřeba dělat žádné změny, pouze publikovat.

Při vývoji nebo úpravách webové stránky může být občas nutné provést cache reset, abyste zajistili, že uživatelé vidí nejnovější a aktuální verzi obsahu.

Menu

Menu je jednou z nejdůležitějších součástí webu.

Menu založíte v Content -- Menus.

Pro vytvoření menu použijte tlačítko ‚‚new Menu".

Po rozkliknutí menu se vám zobrazí nabídka:

Vyplňte ‚‚title" -- název menu.

Poznámka.: Pokud má web více mutací, doporučujeme název menu spojit i s kulturou, například „menu cz" pro českou variantu webu a, „menu en" pro anglickou verzi.

Alias -- není nutné vyplňovat, vytváří se automaticky sám po uložení (pro defaultní cz kulturu se vytvoří cs -- CZ/menu).

Menu uložíte pomocí tlačítka Publish (publikovat). Pokud ho ale zatím nechcete zveřejňovat, zvolte variantu Save draft (tedy uložit jako koncept).

Zařazování stránek do menu

Do menu zařadíte pouze ty stránky, které už existují v content items. Je proto potřeba je vytvořit.

Položky do menu přidáváte pomocí tlačítka Add Menu Item (přidat položku menu).

Po rozkliknutí uvidíte nabídku.

Typy položek menu:

Existují 4 typy položek menu:

• Link Menu Item

• Content Menu Item

• Html Menu Item

• Megamenu Category Item

Pokud chcete rozšířit nabídku o novou položku, stiskněte tlačítko ‚‚Add".

Link Menu Item

Tato funkce umožňuje vložení odkazu na jakoukoliv externí URL adresu.

• Name -- Zadejte název pro vaši položku menu.

• Url -- Zadejte internetovou adresu, kam má odkaz směřovat.

• Class -- Vyplnění tohoto pole není nutné. Slouží pro přidání CSS třídy specifického stylování.

Checkboxy -- zaškrtávací políčka

• New window -- pokud zaškrtnete, odkaz se otevře v novém okně prohlížeče. Není-li zaškrtnuto, odkaz se otevře ve stejném okně

• Visible -- určuje, zda má být položka v menu skrytá nebo viditelná

Změny uložíte pomocí tlačítka publish. Content Menu Item

Do menu přidáte stránku, která je vytvořená přímo v obsahu webu, který spravujete. Tedy vkládáte odkaz na existující stránku z content items (obsahových položek).\

• Name -- název položky v menu (propisuje se na web).

• Selected Content Item -- pomocí nabídky v drop downu vybereme stránku, na kterou se bude v menu odkazovat.

• Class -- není třeba vyplňovat (jinak je možné vložit CSS třídu).

• Checkbox: Visible -- určuje, zda má být menu item v menu skrytý nebo viditelný

Změny uložíme pomocí tlačítku publish.

Html Menu Item -- aktuálně není vyvinuto.

Megamenu Category Item -- aktuálně není vyvinuta funkce megamenu.

Řazení položek v menu:

Po vytvoření všech požadovaných položek menu se všechny odkazy seřadí pod sebe v pořadí, v jakém byly vytvářeny.

Pomocí drag and drop (přetažení) můžete jednotlivé položky přesouvat a měnit tak jejich pořadí.

Dále je možné pomocí toho zařadit položky do ‚‚submenu".

Pokud chcete stránky PUX a BLOG (ukázáno na předchozím obrázku) zařadit pod položku menu TEST, stačí je pouze přesunout myší a umístit je pod tuto položku. Tím se automaticky vytvoří submenu.

Na webu to bude v menu vypadat takto:

Důležité informace

Chcete-li v menu vytvořit položku, která nebude klikatelná a bude sloužit pouze jako nadpis pro submenu, vytvořte novou položku typu „Link menu item". Během jejího zakládání nezadávejte žádnou URL adresu a položku takto publikujte.

Všechny změny v menu uložíte pomocí tlačítka publish. Pokud si menu zatím jen připravujete a nechcete zveřejnit, postačí uložit jako draft (save draft).

Menu akce

Menu založíte v Content -- Menus.

U vytvořeného menu můžete upravovat i to, co se s menu má stát.

Přes tlačítko actions se vám otevře nabídka:

• Unpublish -- odpublikuje menu. 

• Delete -- smaže menu. 

• Clone -- vytvoří kopii menu. 

• Audit trail -- historie změn (pro vývojáře). 

• Clone in Culture -- vytvoří kopii v aktuální kultuře.

Lokalizované menu

Máte-li na webu více jazykových mutací, můžete vytvořit tzv. lokalizované menu pro každou jazykovou mutaci zvlášť. 

1. Vytvoříte nové menu. 

2. Jako titulek napíšete například Menu en. 

3. Alias vložíte například: en-US / menu. 

4. Přidáte si požadované položky menu/menu itemsy (v dané kultuře). 

5. Menu uložíme.

Sekce

Abychom mohli v rámci stránky vytvářet a používat widgety, musíme nejdřív pro widgety vytvořit sekce, do kterých je budeme vkládat.
Sekci si na stránku přidáme pomocí modrého tlačítka se symbolem "+" a poté z nabídky vybereme "section"

V dané sekci máme pak několik možností, které můžeme na sekci nastavit

• Title → jedná se o název sekce, tento název je pouze pro orientaci v administraci, abychom v případě, kdy zde máme sekcí více, věděli ve které máme konkrétní widgety hledat.

• Checkbox "use container" → slouží pro nastavení odsazení sekce od stran obrazovky.

• Background color → nastavení podbarvení dané sekce.

• Container type → v případě zaškrtnutého checkboxu pro container, lze docílit ještě většího odsazení.

• Line → nastavení linky (čáry) pod sekcí.

• Animation type → slouží pro nastavení animace pro danou sekci a její widgety.

• Animation → nastavení čeho se bude animace týkat.

• Items → jednotlivé položky ve widgetu

• Container → jednotlivých widgetů

• All → celé sekce

• Animation delay → nastavení času, za jak dlouho se animace zobrazí.

Záložka properties

\

V této části si lze nastavit:

• Padding Top a Margin Top - slouží pro nastavení odsazení horní části sekce - vybírá se z možností po 10 pixelech (rozsah nastavení: 0 - 120 px)

• Padding Bottom a Margin Bottom - podobně jako u předchozího, nyní tedy pro odsazení spodní části sekce (vybírá se z možností po 10 pixelech, rozsah nastavení: 0 - 120 px)

• ID slouží pro nastavení kotvy ( vložíme zde ID kotvy odkazu, ze kterého chceme na tuto sekci odkazovat)

Nakonec do takto připravené sekce můžeme libovolně vkládat widgety.

Content items

Tato část administrace se týká primárně obsahu webu samotného.

V této části se nachází v řádkovém výpisu:

• Content items - tato sekce obsahuje všechny stránky vašeho webu. Můžete zde najít běžné webové stránky, blogové příspěvky, stránku pro chybu 404, informace o GDPR a další.

• Localizaion - slouží k překládání textů (tzv. Resource stringů) na vašem webu do různých jazyků. Pro každý jazyk, který máte v administraci k dispozici, vytvoříte jeho vlastní verzi lokalizace. Podrobnější informace najdete v samostatném návodu.

• Global widgets - slouží zejména pro úpravu odkazů a informací v patičce. Více v samostatném návodu.

• Menu - v této části můžete upravovat navigační menu vašeho webu. Více najdete v samostatném návodu menu.

• PuxCategory - jinak také taxonomie, umožňuje třídit a organizovat obsah vašeho webu do kategorií. Více naleznete v samostatném návodu.

• Labels - obdobně, jako PuxCategory, slouží pro zakládání a třídění štítků zejména pro blogové články. Více naleznete v samostatném návodu.

Každý řádek obsahuje následující informace

• Název stránky - propisuje se z titulku stránky

• Typ stránky - nebo také content type. Může jít například o PuxPage, BlogPost apod.

• Status publikace - status uvádí, zda je stránka publikovaná (lze se na ni tedy dostat z webu) nebo  nepublikovaná, tedy tzv. draft. Draft označuje klasicky pracovní verzi stránky a nelze se na ni dostat jiným způsobem, než z administrace

• Lokalizace - značí v jakém jazyce je stránka připravena, např: cs-CZ pro český jazyk, en-US pro angličtinu atd.

• Datum - uvádí datum/čas poslední uložené změny v rámci dané stránky

• Uživatel - autor poslední změny na dané stránce

• Štítek - štítek kategorie (více v samostatném návodu)

Uživatelé

Uživatelé se zakládají a spravují v sekci security -> users.

Kliknutím na users se dostanete do přehledu všech aktuálních uživatelů, kteří jsou na webu založení.

V přehledu je možné filtrovat pomocí:

• show - filtrováním se vám zobrazí povolení/zneaktivnění uživatelé.

• Sort - mění řazení uživatelů podle emailu nebi jména

 Jednotlivé uživatele lze spravovat pomocí několika tlačítek:

• Edit -- editujete uživatele, jejich role a heslo, viz níže.

• Delete -- můžete smazat uživatele z administrace.

• Edit password -- zde nastavujete nové heslo.

Založení uživatele

Nového uživatele založíte pomocí tlačítka "Add user" v pravém horním rohu nad výpisem uživatelů.
Nyní se dostaneme přímo do nastavení samotného uživatele, kde je třeba vyplnit:

• User name -- název uživatele (vkládáte bez diakritiky).

• E-mail -- e-mailová adresa uživatele.

• Is enabled -- zde můžete aktivovat nebo deaktivovat účet uživatele.

• Role -- v této části přiřazujete role uživatele. Nejčastěji editor nebo projektový manažer, případně administrátor.

Role

Podle přiřazené role daný uživatel vidí, případně může editovat, omezené prostory v rámci CMS.

Můžete nastavit role:

• Editor -- má oprávnění upravovat obsah a publikovat články.

• ProjectManager -- zodpovídá za plánování a řízení projektů.

• Administrator -- má plný přístup k systému a jeho nastavení.

• Helpdesk -- poskytuje uživatelskou podporu a řeší incidenty.

Media Library

Media Library je knihovna médií, kam nahráváte soubory jako: obrázky, loga, animace, videa či pdf soubory. Tedy jsou to všechny soubory, které můžete na webu používat.

V administraci najdeme Media Library v Content / Media Library.

Media Library potom vypadá následovně:

Editace / zobrazení prostředí

Soubory je možné do knihovny nahrávat pomocí tlačítka upload v pravém horním rohu.

Nahrajete je i tak, že označíte soubory ve složce ve svém počítači a přetáhnete je nad okno Media Library.

Mezi soubory je možné i filtrovat --- zadáním názvu nebo přípony souboru do pole filter.

Výpis nahraných souborů je možné měnit z klasického seznamu na mřížku. Změnu provedete pomocí dvou piktogramů na řádku vedle pole filter.

Soubory můžete hromadně editovat pomocí -- select all/select none a následně například mazat pomocí delete.

Zakládání podsložek
V rámci knihovny lze vytvářet podsložky pomocí piktogramu ‚‚+.' '

 

Zadáme název nové složky a změny uložíte.
 

V případě, že si chceme zobrazit všechny soubory v Media Library, tedy ze všech složek, stačí kliknout na šipku dolů.

Pro smazání složky stačí kliknout na danou složku, kterou chceme smazat a pak už jen kliknout na ikonu koše.
 

Editace jednotlivých souborů

U každého souboru máme 3 možnosti:

• Edit - slouží k editaci názvu souboru

• Delete - slouží ke smazání souboru

• View - slouží k zobrazení souboru v novém okně

Soubory přesunete pomocí Drag & drop -- tedy přetáhnutím souboru myší.

Dashboard

Po přihlášení do administrace webu se vám zobrazí tzv. dashboard.

V levé části máme najdete menu administrace

Content se dělí na tři části a jedná se hlavně o obsahovou část:

• Content items - zde najdete všechny stránky, které se na webu nachází.

• Media Library - nachází se zde všechny obrázky, které na web chcete vkládat.

• Menu - v této části měníte a přidáváte strukturu menu.

Security → Users
V této části vidíte všechny uživatele s přístupem na daný web.

Můžete jim tedy upravit oprávnění, odebrat přístup nebo změnit heslo.

Ostatní záložky slouží spíše pro vývojářské účely, nejsou proto pro uživatele administrace.

V pravé horní části administrace potom máte možnost nastavit následující:

• Ikona měsíce: tmavý / světlý režim administrace.

• Ikona čtverce se šipkou: po kliknutí se otevře nové okno s administrací (měla by se otevřít produkce webu).

• Ikona osoby: Zde nastavíte profil přihlášeného uživatele (role apod.), změníte heslo, odhlásíte se
  z administrace.

Práce%20s%20obsahem

Jak přeložit stávající stránky

Vytvoření stránky v další jazykové mutaci předchází několik kroků:

1. V nastavení v localizations přidáte kulturu (pokud není):

• Configuration -> settings -> localization -> cultures

Pokud je povolen jen defaultní jazyk čeština (cz--CZ) nebo angličtina (en--US), je třeba přidat další jazyk. Pozor, pokud je nastaven defaultní jazyk, tak tento jazyk neměnit. Z dropdownu vyberete danou kulturu a uložíte.

Nyní přejdete do content items a vyberete si stránku, kterou chcete lokalizovat -- přeložit do dané kultury.

Na vybrané stránce v přehledu je dropdown „Localizations". Po rozkliknutí se vám nabídnou kultury, které jste si vybrali v settings.

Kliknutím na vybraný jazyk se vytvoří a otevře stránka již vytvořená do daného jazyka (nahoře se zobrazí hlášení o vytvoření lokalizované stránky).

Nyní upravíme/přeložíme Title stránky, alias stránky, obsah widgetů apod. Před uložením ještě zaškrtnete „refresh path", aby se URL nastavila do nové kultury a uložíte.

Nyní se nám tedy vytvořila lokalizovaná verze stránky. V přehledu stránek v content items vidíme, že každá stránka má i svůj štítek s kulturou.

Založení kategorie / štítku pro stránky a články

Kategorizace slouží pro uspořádání struktury stránek v CMS

Založení kategorie

Kategorie upravujete / vytváříte v Content items, primárně v PuxCategory:

Přidání další / nové kategorie

Pomocí tlačítka „add taxonomy category" vytvoříte novou kategorii.

Zde vyplníte:

• Title -- název kategorie

• Link -- zde se odkaz na stránku, která daný termín reprezentuje.

Například na níže uvedeném obrázku, reprezentuje item s názvem "FAQ". kategorii na webu s názvem „FAQ". Vyberete tedy provázání s touto kategorií.

Po úpravách opět změny uložíme/publikujeme.

Jednotlivé kategorie lze přesouvat a zanořovat.

Struktura nám pak umožní generování lokalizovaných adres a drobečkové navigace.

Založení štítku (pro blog, aktualitu, apod...)

Dalším typem kategorizace jsou štítky pro blogové články, aktuality apod. Pokud je třeba u tohoto typu nějakým způsobem potřeba filtrovat obsah.

Často se tohoto typu využívá u blogových článků, kdy každý článek může mít svůj štítek (i více štítků), například: novinka, akce

Vyhledáte v content items -> Labels. Labels může být několik a tehdy se rozlišují podle šablony. Např. reference -> reference labels, kariéra -> career labels atd.

Nový štítek založíte pomocí add label

Vyplníte: 

• Title -- název štítku 

• PuxFilterItemNate -- určuje, v jakém tvaru se hodnota objeví v url adrese v případě filtrace

• Alias -- po uložení se vygeneruje sám, není nutné vyplňovat

Po úpravách publikujete jak upravený štítek, tak i stránku se strukturou štítků.

Takto vytvořené štítky pak můžete přidávat u blogových článků

Založení blogového článku / reference

V content → content items vyberete položku "new" a zvolíte možnost blog post.

Po založení stránky je nutné u blogových článků vybrat i štítek.

Ten se pak bude zobrazovat na webu u samotného článku a s jeho pomocí můžete také omezit zobrazení článků.

V administraci:

Na webu:

Výpis článků se stejným štítkem:

Title -- název článku

Alias: 

• slouží k identifikaci článku a přidává se například do URL adresy

• vůbec nevyplňujeme. Automaticky se nastaví po prvním uložení podle názvu

Založení stránky a její správa

Nové stránky založíte v content → content items.

Nové stránky připravíte buď kopií již existující stránky nebo vytvoříte zcela novou stránku.

Kopie existující stránky

V contentu vyberete nebo vyhledáte stránku, kterou chcete zkopírovat. Zde záleží, co je vaším cílem. Pokud máte již existující stránku, kterou chcete jen zkopírovat obsahově nebo upravit, vyplatí se kopírování stránky. Zde si dejte pozor na to, jaký typ stránky kopírujete (page type). Každý typ stránky se používá ve specifických případech.

Kopii stránky vytvoříte tak, že si konkrétní stránku najdete a pomocí tlačítka "actions" vyberete clone.

Po kliknutí na clone se vám vytvoří ihned kopie původní stránky a uloží se jako draft.

Draft stránky si můžete prohlédnout pomocí Preview draft nebo upravit pomocí edit.
U zkopírované stránky myslete na několik věcí:

1. Upravte alias

2. Vytvořte zcela nové stránky

Vytvoříte opět v content items -- vedle pole pro vyhledávání je dropdown "new" s výběrem několika možností.

V contentu vyplňte:\

• Title -- název stránky v CMS,

• alias (ale můžeme ponechat prázdný, Lze dodatečně přepsat),

• category -- vybere kategorie stránky (zda jde o obyčejnou stránku, blogový článek, detail produktu apod.),

• breadcrumbs (checkbox slouží pro zobrazení/skrytí drobečkové navigace),

• perex stránky,

• image.

SEO

V záložce SEO můžete vyplnit vlastní metadata pro jednotlivé stránky.
Možnost vyplnit u každé stránky zvlášť:

title, description, keywords, canonical url, image, search engine indexing, ogtitle, ogdescription, ogimage.

Sekce a widgety -- na stránce nastavujeme pomocí modrého symbolu "+."

Zde se nejčastěji používá "Section" (sekce).
Po vybrání sekce můžete do dané sekce vybírat jednotlivé widgety dle požadovaného zobrazení na webu.

Permalink -- nevyplňujeme, vygeneruje se sám.

Připravenou stránku uložíte (buď v draftu, nebo klasicky publikovat).

Pokud změníte například title stránky a chcete, aby se změnila i URL adresa, zaškrtněte checkbox „refresh the path". Po uložení se link regeneruje podle vyplněného titlu stránky.

Localization

Stránka localization / překlad resource stringů

Localization používáte pro překlad systémových textů. Pro každou jazykovou mutaci, která na webu je, je třeba založit localization zvlášť. Tedy pokud máte jazyky cz, sk a en, každý jazyk bude mít vlastní stránku localizations.

Localization naleznete v Content -> Content items:

Stránka localization obsahuje v levé části resource string, ve tvaru například „Footer.Copyright.After" a v pravé části překlad, tedy „Všechna práva vyhrazena."

Další stringy přidáte pomocí tlačítka „add translation", kde vyplníte string a jeho překlad. Upravené nebo nově zadané stringy vždy uložíte.

U resource stringů samotných je nutné dodržovat velikost písmen, viz obrázek výše. U překladů jednotlivých stringů to již není potřeba. Vámi vložený překlad a velikost písmen se ve stejném znění propíše i na web.

Localization pro další jazyky

V základu v CMS je vždy stránka localization již připravena. Záleží, jaký je hlavní jazyk webu, tedy v češtině, angličtině apod. Abychom pro další jazykové mutace nemuseli vždy vytvářet stránku novou, využijete možnosti kopírování do daného jazyka. Obdobně jako u klasických stránek, vytvoříte lokalizovanou stránku s resource stringy. Kliknete tedy na tlačítko Localizations a vyberete, do jaké kultury se má stránka vytvořit.

Nově vytvořenou stránku pojmenujete například Localization EN. Dále je pak třeba upravit překlady stringů, tedy přeložit termíny do angličtiny.

Widgety

Button

Button je komponenta, která se používá ve widgetech. Díky ní si můžete tlačítko nastavit v každém widgetu jinak. Zde je celá komponenta a probereme si ji bod po bodu.

1. Vybereme, zda použijeme interní nebo externí odkaz

   • Interní -- odkaz v rámci webu

     • V poli „Link text" vyplníme text tlačítka.

     • V „Type to search" vybereme stránku z webu.

   • Externí

     • Opět vyplníme text tlačítka.

     • V „URL address" doplníme požadovaný odkaz.

   

2. Type -- vybereme typ (tlačítko nebo odkaz)

   • Button -- tlačítko

   • Link -- odkaz

3. Color -- barevné provedení

   • Primary

     • Primární tlačítko pro web.

     • Bývá výrazné.

   • Default

     • Druhý typ tlačítka.

     • Barevně méně výrazný.

     • Někdy se vůbec nepoužívá (záleží na grafice).

4. Extension -- rozšíření

   • Arrow -- šipka vpravo

   • Back -- šipka vlevo

   • Scroll -- šipka dolů

5. New window -- otevření v novém okně

   • Po zaškrtnutí se odkaz otevře v novém okně.

   • Zpravidla se používá, když odkaz vede mimo web. Někdy však dává smysl i v rámci webu.

6. Download -- stažení souboru

   • Po zaškrtnutí se aktivuje stažení souboru.

   • Uživatel si tak může stáhnout např. PDF soubor.

   • Používáme externí typ odkazu a vyplníme adresu souboru.

7. Modal -- vyskakovací okno

Widget - Iframe

Pokud iframe neznáte, nemusíte se bát. Iframe je předpřipravený typ kódu, který stačí jen vložit do webu a funguje bez dalšího nastavování. Krásnou ukázkou jsou například Google mapy nebo YouTube videa. Iframe pro Google mapy poznáte vcelku jednoduše. Na většině webů ho najdete jako náhledovou mapku v kontaktu.

Iframe pro YouTube video zase znáte např. z článků, kde máte náhled videa a po kliknutí se vám začne přehrávat, jako byste byli přímo na YouTube.

My jsme pro ještě jednodušší použití iframu vytvořili speciální widget, který si společně projdeme.

Obsah widgetu

 Title -- název pro orientaci v CMS

Description -- editor pro nadpis a perex, který chceme zobrazit nad iframem

• Nadpis by měl mít velikost H2.

Type -- typ iframu

• Map

• Video

• PDF

• Other

Url -- adresa, která se zadává podle typu

• Map

• Video

• PDF

• Other

Widget - Repeater

Repeater je speciální widget pro výpis stránek. Jednoduše si ho můžeme přiblížit na blogu. Zde máme kartičky s výpisem, které obsahují obrázek, název a krátký text. Tento výpis nám právě provádí repeater. V základu funguje právě pro zmíněný blog. Pokud je v grafice obdobný výpis použitý na jiné typy stránek, např. kariéra, produkty, připravuje se tento výpis speciálně pro každý typ. Výpisy se musí chystat samostatně, protože mohou mít odlišnosti.

Obsah widgetu

 
a. Title - název pro orientaci v CMS

b. Type - typ zobrazení

c. Content Type - typ šablony

• V základu CMS je připraven Blog

• Repeater používáte prakticky pro klasické typy výpisů. Dají se použít i pro kariéru, produkty atd.

d. Top N

• Definuje maximální počet výsledků na stránku, které chcete vypsat.

• Dá se použít v případě, že chcete repeater použít na výpis např. 3 položek a nechcete zobrazovat tlačítko načíst více

e. Link text a Link URL address

• Tlačítko neslouží jako načíst další, ale jako odkaz na stránku s větším výpisem

• Ideální kombinace je s Top N. Nastavíte maximální počet vypsaných článků na 3 a pak vyplníte text a odkaz tlačítka, které vás dostane na stránku s kompletním výpisem blogu

  • Link text - text na tlačítku

  • Link URL address - odkaz na cílovou stránku v rámci webu

f. Page Size - počet položek na jedno načtení

  a. Pokud je na stránce více položek, než jich aktuálně máte zobrazených (a nemáte vyplněné Top N), máte k dispozici tlačítko „Načíst více". A právě tato hodnota určí, kolik položek se načte a kolik se jich načte po kliknutí na tlačítko „Načíst více"

g. Show All Results - zobrazit vše

• V některých případech nechcete vůbec používat načítání dalších položek. Přesně k tomu slouží tento checkbox

• Tuto možnost je dobré pořádně promyslet. Pokud totiž necháte vypsat všechny položky, a bude jich na výpisu hodně, může se několikanásobně prodloužit načítání stránky. Přesně proto jste tlačítko „Načíst více" vyvinuli

h. Fallback culture

i. Item view name - šablona pro výpis položek

• V některých případech můžete mít více možností výpisu položek

• Např. budete chtít vybírat z klasických kartiček pro blog (obrázek, datum, název a perex) a zkrácenou verzi bez obrázku (datum, název a perex)

j. Layout view name - šablona pro detail

• Zde můžete mít k dispozici více šablon pro detail článku

• Už se nám stalo, že klient chtěl mít 2 typy šablon pro články. Měl k dispozici velkou šablonu s widgetovou zónou a pak malé informační články, které byly vizuálně jiné

Widget - Testimonial

Testimonial se nejčastěji používá pro reference od klientů nebo pro medailonky zaměstnanců. 

V sekci vyberete Testimonial Container.

Pod Perexem najdete tlačítko „Add Testimonial Item".

Teď si vyplníte samotný testimonial:

a. Title - je opět pro orientaci v CMS

b. Image - jako obrázek se většinou dává fotka nebo logo firmy. Záleží, k čemu přesně widget použijete

c. Name - jméno

d. Company - název firmy

e. Position - pozice

f. Content - popisek

Widget - Person

V sekci vyberete widget Person Container.

Kliknete na „Add Person Item".

Důležitá pole: „Title", „Post", „Email", „Phone" a „Image":

• Title - jméno

• Post - pozice

• Email Phone - telefonní číslo

• Image - obrázek (fotka)

Widget - Numbers

V sekci vyberete widget Numbers Container.

Pod Perexem kliknete na tlačítko „Add number item".

Zde vás zajímají pole „Number", „Unit" a „Text":

Number - hodnota čísla

• Zde vyplníte číselnou hodnotu.

• Číslo musí být ve tvaru (TODO: doplnit).

Unit - jednotka

• Jednotka se zobrazí vedle čísla.

Text 

• Doplňující informace, která se zobrazí pod číslem.

Widget - Logos

V sekci vyberete Logos Container.

Pod Perexem najdete tlačítko „Add Item".

Po kliknutí vyberete možnost „Logo Item".

Zde jsou důležitá pole „LogoImage" a „Url":

LogoImage - Obrázek loga

• Zde vložte požadovaný obrázek.

• Ideální formát loga je svg.

• Vždy je lepší použít větší obrázek než menší. Máme automaticky zařazeno zpracování obrázků, aby se vždy zobrazovala ideální velikost. Tzn., že velký obrázek se zmenší. Pokud ovšem vložíte malý obrázek, zvětší se a bude rozmazaný.

• Doporučená velikost obrázku je minimálně 300px na šířku a 100px.

• Máte-li problém s nahráním obrázku, přejděte na návod pro Knihovnu médií (Media Library).

Url - odkaz loga

• Odkaz vyplníte pouze tehdy, máte-li stránku na webu, na kterou chcete odkazovat, případně na externí stránku.

• Zde nemusíte vyplňovat text odkazu (TODO: možná by zde ani neměl být).

• Vyberete „Internal url" (interní odkaz).

• Nemusíte adresu nikde kopírovat a najdete si ji v „Link URL address".

• Pokud odkaz povede na externí web, vyberete „External url". 

• Objeví se vám nové pole „Link URL address".

• Zde vložíte odkaz.

Slider Pod tlačítkem „Add Item" máte možnost zapnout Slider.

• Pokud jej nezapnete, budou se vám loga zalamovat vždy po šesti na řádek.

Nebo můžete zapnout slider.

Widget - Top image

Widget Top image je klíčovou součástí webové stránky, který se nachází pod hlavním menu.

Jeho úkolem je zaujmout poutavým obsahem a esteticky přitažlivým obrázkem uživatele na první pohled. Správně naplněný Top image může ovlivnit rozhodnutí uživatele, zda zůstane na stránce nebo odejde. 
Top image doporučujeme mít na stránce jeden, případně lze nastavit v rámci widgetu funkci, kdy se budou jednotlivé obrázky v Top image měnit, jde o nastavení tzv. slideru. 

V administraci na dané stránce založíte novou sekci a vyberete widget Top image. 

Po otevření nastavení můžete editovat následující položky:

1. Title - popis/název pro lepší orientaci v rámci stránky

2. Background - obrázek na pozadí

3. Content - zde vyplníte textový obsah (jedná se o klasický wysiwyg, detailněji najdete popis zde)

4. Button - tlačítko, které se zobrazí pod vyplněným obsahem

5. Overlay - pokud je v rámci tohoto widgetu vyvinuto, overlay přidá například barevný překryv vybranému obrázku

6. Breadcrumbs - umožňuje zobrazit/skrýt drobečkovou navigaci

7. Style -zde vyberete styl Top image

• normal - standardní výška Top image - šířka je pak určena šířkou sekce

• big - v tomto případě je výška o cca 30 px než v případě typu normal

Labels

Ve výběru widgetů se jedná o název Wysiwyg.

Jedná se o textové pole, které si můžeme ještě upravovat.

Widget vypadá takto:

• Title → slouží pro orientaci v administraci.

• Content → používáme pro výpis textů / obrázků / tlačítek / odkazů na web.

• Container type → nastavení odsazení containeru od stran obrazovky.

Vysvětlivka pro panel u wysiwygu:

• <> → zobrazení HTML kódu

• ← vrátit se o krok zpět v úpravách

• → vrátit se o krok vpřed v úpravách

• ¶ - možnost nastavení velikosti textu / H1, H2, H3...

• B - ztučníme si textový obsah

• / - nastavení kurzívy pro textový obsah

• Del - označený text se nám přeškrtne

• A - lze si nastavit barvu textu a pozadí textu / nastavení menšího písma nad nebo pod textem

• Link - můžeme si přidat link na označený text, který může odkazovat kamkoliv.

• [/] - vkládáme pomocí toho shortcodes, o nich si víc řekneme zde (bude odkaz na slovo zde)

• Image - můžeme vložit obrázek

• Table - můžeme vložit tabulku

• Add link - přidání tlačítka do textového pole

• Underline - udělá nám podtržítko u označeného textu

• Add custom class - další možnosti změny textu, které závisí na daném projektu

• Align - zarovnání textu

• Unordered / ordered list - můžeme si nastavit seznamy

Global widgets

Global widgets najdete v content → content items.

Po rozkliknutí se rozbalí tato nabídka:

V základu obsahují global widgets obecné položky jako:\

\

• Schema Org -- strukturovaná data webových stránek.

• Custom Scripts (Head) -- zde můžete vložit například Google Tag Manager script head, Google Analytics a další.

• Custom Scripts (Body) -- prostor pro vložení skriptů do těla webu.

• Footer -- patička. 

• Socials

  • Zde přidáváte a editujete sociální sítě.

  • Vyplníte title (název), type (máme předpřipravené ikony na základě grafiky) a URL (odkaz na profil).

• Logo

  • Pokud používáte v patičce na webu logo, zde ho můžete editovat.

  • Jednotlivé sloupce v patičce (left, center a right) se zobrazují v tomto pořadí. Sloupce nemusí vždy sedět, záleží na typu grafiky. Někde se použijí jen dva a někde pět a je nutné vytvořit další.

  • Poslední položka je copyright. Zde editujete část textu, která se zobrazuje vždy až na úplném konci patičky. sloupce.

Widget - sekce Modal

U tlačítek ve widgetech máme možnost zakliknout checkbox Modal, nebo-li pop-up okno.

Jak si modal nastavit si ukážeme například na CTA widgetu.

Na widgetu CTA se nastaví titulek atd (v části button):

• external url

• Text tlačítka, na které se bude klikat

• link url address - zde na nastaví ID modalu (dodatečný popis níže)

• Extension se nechá none, ale v checkboxech se vybere Modal

Jakmile máme vytvořený widget, ze kterého budeme pop-up okno ovládat, musíme dále vytvořit obsah pro toto popup okno.

Vytvoříme si tedy další sekci, sekci modal:

Co je důležité, tak u sekce je potřeba vždy vyplnit Modal ID, což poslouží jako kotva pro CTA. 

Dále v této sekci vybereme widget wysiwyg (nejvhodnější widget pro vkládání textů, případně obrázků)

Vyplníme obsah a stránku uložíme/publikujeme.

Na webu to pak bude fungovat tak, že po kliknutí na tlačítko ve widgetu CTA block se otevře pop-up okno s požadovaným textem

Widget - CTA block

Ve výběru widgetů se jedná o název CTA, nebo-li "Call To Action".

Pomocí tohoto widgetu, můžete návštěvníka na něco upozornit, oznámit, upozornit. Tedy chtít po něm nějakou "akci".

Na webu pak může vypadat tento widget takto:

Nebo například takto:

Jedná se widget s designem na míru. Obsahem toho widgetu může být libovolný text s tlačítkem.

V administraci se widget skládá ze 2 částí: Content, properties

Content:

• Title - slouží pouze pro orientaci v rámci upravované stránky a na web se nepropisuje

Button

• Pod tímto polem máme možnost upravit/přidat tlačítko

• Tlačítko není povinné vyplnit, ale je možné zvolit, kam bude tlačítko odkazovat a vyplnit text, který se nám v tlačítku zobrazí.

Existují dva typy, jak tlačítko nastavit v závislosti, kam se má uživatel na webu dostat.

• Internal url - lze vybrat stránku, na kterou se bude odkazovat v rámci webu. V tlačítku upravíte název tlačítka a z výběru vyberete stránku, na kterou se bude tlačítkem dokazovat.\

• External url - lze vložit odkaz na stránku, která směřuje mimo web. V tlačítku upravíte název tlačítka a do vedlejšího pole vložíte url adresu, kam se bude tlačítkem přesměrovávat.

• Color - zde můžete nastavit barvu tlačítka (primary nebo default)

• Extension - nebo-li rozšíření = nepoužívá se

Další volby:

• New Window - po kliknutí na tlačítko se otevře nové okno prohlížeče

• Download - standardně se nepoužívá

• Modal - v určitých případech lze využít pro zobrazení informace v pop-up okně nebo zobrazení formuláře

• Content - sem vložíte textový obsah widgetu

Properties

V této záložce je dodatečné nastavení widgetu:

• Padding Top a Margin Top je pro odsazení horní části widgetu.

• Padding Bottom a Margin Bottom je pro odsazení spodní části widgetu.

• ID slouží pro nastavení kotvy ( vložíme zde ID kotvy odkazu ze kterého chceme na tento widget odkazovat).

Widget - Wysiwyg

Ve výběru widgetů se jední o widget s názvem Wysiwyg.

Jedná se o textové pole, které můžete upravovat, podobně jako například ve Wordu.

Widget vypadá takto:

Widget obsahuje:

• Title: slouží pro orientaci v administraci.

• **Content: **používáme pro výpis textů / obrázků / tlačítek / odkazů na web.

• Container type: nastavení odsazení containeru od okrajů obrazovky.

Přehled vysvětlivek pro panel wysiwygu:

• <> - zobrazení HTML kódu

• ← vrátíte se o krok zpět v úpravách

• → vrátíte se o krok vpřed v úpravách

• ¶ - možnost nastavení velikosti textu, jako H1, H2, H3...

• B - nastavíte tučný text

• / - nastavení kurzívu pro označený text

• Del - přeškrtnete označený text

• Superscript, Subscript - nastavíte u písma horní nebo dolní index

• A -nastavíte barvu a pozadí textu / nastavíte menší písmo nad textem nebo pod textem

• Link -můžete přidat link na označený text, který může odkazovat kamkoliv.

• [/] -vkládáte pomocí shortcodes -- o nich se dozvíte více zde (bude odkaz na slovo zde)

• Image - vložíte obrázek

• Table - vložíte tabulku

• Add link - přidáte tlačítko do textového pole

• Underline - podtržení označeného textu

• Add custom class - další možnosti změny textu, které závisí na daném projektu

• Align - zarovnání textu

• Unordered / ordered list - nastavíte seznamy

• Insert horizontal Line - vložíte horizontální linku

• Remove format - odeberete formátovaný text

U všech widgetů můžete nastavit i odsazení samotného widgetu, tak jako je tomu u sekce. Dodatečné nastavení najdete v záložce Properties

• Padding Top  je pro odsazení horní části widgetu.

• Padding Bottom je pro odsazení spodní části widgetu.

• ID slouží pro nastavení kotvy (vložíme zde ID kotvy odkazu, ze kterého chcete na tento widget odkazovat).

Widget - Image content

• V sekci vybereme widget Image Content.

• Zde nás zajímají 3 části - Textový obsah, obrázek a tlačítko.

Textový obsah - Content

 

1. Zde napíšete text podobně, jako to znáte například z Wordu

2. Pro nadpis používejte zpravidla úroveň H1.

3. Speciální zobrazování či zarovnání vychází z grafiky a řešíme je již při vývoji (custom úpravě šablony).

4. Pokud potřebujete poradit s nastavením editoru, zkuste návod přímo pro Wysiwyg editor.

Obrázek - Image

1. Zde vložte požadovaný obrázek.

2. Vždy je lepší použít obrázek větší než menší. Máme automaticky zařazeno zpracování obrázků, aby se vždy zobrazovala ideální velikost. Tzn. velký obrázek se zmenší. Pokud ovšem vložíte malý obrázek, zvětší se a bude rozmazaný.

3. Doporučená velikost obrázku je minimálně 700 px na šířku a 400 px na výšku.

4. Máte-li problém s nahráním obrázku, přejděte na návod pro Knihovnu médií (Media Library).

Tlačítko - Button

1. V případě využití tlačítka vyplňte název a odkaz, jinak se nezobrazí.

2. Odkaz můžete použít přímo na stránku webu nebo můžete použít klasický odkaz, který povede na jiný web, či službu.

3. Základní nastavení tlačítka má vždy hlavní barvu webu. Pokud jej chcete nastavit jinak, podívejte se na návod pro TODO.

Obecné nastavení Image Contentu

Přidání videa - Video Link

1. Pokud chcete přidat video do widgetu, vyplňte jeho URL adresu, například z Youtube.

2. Zde je potřeba vyplnit i obrázek, který bude pouze v náhledu.

3. Na obrázku se zobrazí icona Play, díky které uživatel pozná, že se jedná o video.

4. Po kliknutí se video otevře v lightboxu (zobrazení videa pro přehrávání), a začne se přehrávat.

Type

Na výběr je zde 2 typů: Boxed, Wide

• Boxed: Zachová obrázek ve čtvercové variantě (záleží dle konkrétního designu webu)

• Wide: Roztáhne obrázek na celou šířku, kterou má obrázek v rámci widgetu k dispozici

Na webu to pak může vypadat následovně

Varianta Boxed:

Varianta Wide:

Pozice obrázku - Image Position

1. Zde nastavíte pozici zobrazení obrázku -- vlevo nebo vpravo.

2. Základní nastavení je vlevo. Pokud ovšem vkládáte více Image Contentů pod sebe, je vždy lepší pozici obrázků střídat.