Sekce: základní stavební prvek stránky

Sekce je widget, do kterého vkládáte další widgety. Spojuje související obsah do jedné části stránky a umožňuje mu nastavit společné pozadí, šířku a odsazení. Například text a fotografie představující službu mohou patřit do stejné sekce; kontakty pod nimi mohou tvořit další sekci s jiným pozadím.

Stránka → sekce → obsahové widgety

Tabulka – širší obsah posuňte do stran

Úroveň	Co představuje	Příklad
Stránka	Celek, který návštěvník otevře na jedné adrese.	Stránka „O nás“.
Sekce (Section)	Jedna tematická a vizuální část stránky. Obsahuje další widgety.	Představení firmy, výsledky, tým.
Obsahový widget	Konkrétní druh obsahu uvnitř sekce.	Text, obrázek s textem, čísla nebo kontaktní karty.

Představte si stránku jako několik vodorovných pásů pod sebou. Každý pás je sekce; texty, obrázky a další prvky do ní teprve vložíte. Sekce nemusí mít barevné pozadí ani viditelný rámeček. I dvě bílé části mohou být samostatnými sekcemi.

Příklad uspořádání stránky O nás:

Stránka O nás
├── Sekce: Představení firmy
│   └── Image Content — fotografie a úvodní text
├── Sekce: Naše výsledky
│   ├── WYSIWYG — nadpis a vysvětlení
│   └── Numbers — několik číselných údajů
└── Sekce: Náš tým
    └── Person Container — kontaktní karty lidí

Schéma ukazuje, co do čeho patří. Neurčuje počet sloupců na webu. Více widgetů v jedné sekci samo o sobě neznamená, že se zobrazí vedle sebe; to závisí na rozložení a šabloně projektu.

Kdy přidat sekci a kdy jen widget

Novou sekci přidejte, když začíná nové téma nebo potřebujete samostatné pozadí, šířku či odstup od okolního obsahu. Například za představení služby vložíte samostatnou kontaktní část.

Widget přidejte do stávající sekce, pokud rozvíjí stejnou část stránky a má sdílet její vzhled. Nadpis, krátké vysvětlení a čísla o firmě tak mohou zůstat společně.

Není nutné vytvářet sekci pro každý odstavec. Zároveň není vhodné dát celou dlouhou stránku do jediné sekce jen proto, že to editor umožní: obtížněji pak upravíte vzhled pouze jedné její části.

Prázdná sekce zatím nemá obsah, který chcete návštěvníkovi sdělit. Vyplnění pracovního názvu Title nenahrazuje vložení textu nebo obrázku. Některé projekty nabízejí také Perex a Button přímo na sekci; jde o samostatná pole pro úvodní text a tlačítko.

Než začnete

Otevřete požadovanou stránku a ověřte, že její editor nabízí sekce. Některé typy obsahu používají odlišný editor nebo pevnou strukturu. Tento návod se vztahuje k editoru se sekcemi, nikoliv automaticky ke každému zobrazení EditorJS nebo Live Edit.

Přidání sekce

1. V obsahu stránky použijte tlačítko + pro přidání položky.
2. Vyberte Section, pokud ji dané místo nabízí.
3. Vyplňte pracovní Title, podle kterého sekci později poznáte, například „Přehled služeb“.
4. Přidejte potřebné obsahové bloky do této sekce.
5. Uložte koncept stránky a ověřte rozložení v náhledu.

Pracovní název sekce nenahrazuje nadpis, který má číst návštěvník. Veřejný nadpis vložte do vhodného obsahového bloku podle struktury stránky.

Praktický příklad: nadpis a čísla v jedné sekci

1. Na úrovni stránky přidejte Section a do Title napište „Naše výsledky“.
2. V seznamu položek uvnitř nové sekce přidejte widget Wysiwyg. Napište nadpis „Naše výsledky“ a krátký úvod. Tento text má číst návštěvník.
3. Stále uvnitř stejné sekce přidejte Numbers Container a vyplňte údaje podle návodu Numbers.
4. Pro první pokus ponechte výchozí vzhled a Use Container. Uložte koncept a ověřte, že nadpis a čísla tvoří jednu srozumitelnou část.
5. Chcete-li pod výsledky přidat tým, vraťte se na úroveň seznamu sekcí stránky a vytvořte další Section. Do ní vložte Person Container podle návodu Person.

Při přidávání sledujte, na které úrovni stisknete +. Tlačítko u stránky nabízí prvky stránky, tlačítko uvnitř sekce přidává její obsah. Nabídka závisí na typu místa a nastavení projektu.

Co nastavujete na sekci a co na widgetu

Tabulka – širší obsah posuňte do stran

Chci změnit	Kde začít
Pozadí celé části s nadpisem a čísly	Nastavení sekce.
Společnou šířku a prostor kolem této části	Kontejner a odsazení sekce.
Text nadpisu nebo odstavce	Textový widget, případně pole Perex, pokud jej projekt používá.
Konkrétní číslo, fotografii nebo kontakt	Příslušný obsahový widget.
Cíl odkazu na celou část stránky	ID sekce a odkaz na tuto kotvu.

Změna pozadí sekce se vztahuje ke společnému obalu. Pokud má vložený widget vlastní neprůhledné pozadí, může jej v části plochy překrýt.

Šířka, vzhled a odsazení

Use Container drží obsah v omezené šířce a odděluje jej od krajů obrazovky. Pozadí sekce přitom může podle šablony sahat přes celou šířku stránky. Pokud je dostupný Container type, zvolíte jeho variantu. Přesnou šířku určuje vzhled webu; není to univerzální počet pixelů. Vypnutí kontejneru také není automatický pokyn k roztažení každého vloženého obrázku.

Další volby mohou zahrnovat Background color, Line a nastavení animace. Použijte pouze varianty, které váš projekt skutečně vykresluje. Nastavení v administraci samo nezaručuje, že existuje odpovídající vizuální provedení na webu.

V části Properties nastavují Padding Top / Bottom prostor uvnitř sekce nad a pod obsahem. Margin označuje vnější odstup vůči sousedním částem, ale není součástí této společné základní nabídky. Pokud váš projekt nabízí také nastavení marginu, jde o jeho rozšíření.

Význam variant odsazení, ID a viditelnosti vysvětluje společný návod Properties. Pro animování sekce použijte návod Animace.

Vyberte hodnotu z dostupné nabídky a posuďte výsledek. Rozsah i výsledné mezery závisejí na projektu. Zvlášť zkontrolujte mobilní zobrazení, kde se velké mezery projeví výrazněji.

Odkaz na konkrétní sekci

Pokud editor nabízí ID, lze podle zapojení šablony vytvořit cíl odkazu na sekci. Použijte jedinečný identifikátor bez mezer, například kontakt, a v odkazu na stejné stránce #kontakt. Identifikátor nezaměňujte s pracovním názvem sekce.

Po publikaci ověřte, že odkaz skutečně přejde na požadovanou sekci. Dvě sekce se stejným ID mohou vést k nejednoznačnému výsledku.

Kontrola hotové stránky

Nejčastější nejasnosti:

• Title se na webu nezobrazil: pracovní název nenahrazuje viditelný nadpis v obsahu.
• Sekce je prázdná: přidejte widget dovnitř sekce; vytvoření obalu a vyplnění obsahu jsou dva kroky.
• Dva widgety nejsou vedle sebe: sekce není automaticky dvousloupcové rozložení. Použijte variantu připravenou pro váš projekt.
• Pozadí se změnilo i u dalšího obsahu: obsah sdílí stejnou sekci. Má-li mít vlastní vzhled, umístěte jej do samostatné sekce pomocí možností editoru.
• Mezi částmi je velká mezera: zkontrolujte padding sekce i widgetů a případná další odsazení nabízená projektem. Nepoužívejte prázdné odstavce jako náhradu odsazení.

Zkontrolujte pořadí bloků, čitelnost nadpisů, mezery a šířku obsahu na velké i malé obrazovce. Teprve potom stránku publikujte.

Pokud se volba neprojevuje, neměňte náhodně další parametry. Podpoře pošlete URL, název sekce, konkrétní nastavení a očekávanou podobu. Jestli editor sekci nenabízí, ověřte typ stránky a podporované rozložení projektu.