Sekce Text a obrázek

Sekce Text a obrázek je hlavní obsahová sekce webu školy. Zobrazuje nadpis, krátký text, volitelná tlačítka a fotografii ve dvou sloupcích vedle sebe. Používají ji redaktoři školy i správci k představení klíčových témat, jako je odborná praxe ve firmách, stáže Erasmus+, studentské firmy, zaměření oboru, historie školy nebo doprava ke škole.

Oproti sekci Text je určená pro kratší, výrazná sdělení doprovázená jednou fotografií. Na klíčových stránkách (například na úvodní stránce nebo na stránce Proč studovat u nás) se obvykle řadí dvě až tři sekce Text a obrázek za sebou s vystřídanou stranou a stylem fotografie.

Na snímku níže vidíte, jak sekce Text a obrázek vypadá na webu školy.

Kde to najdete

Sekci Text a obrázek přidáte při úpravě stránky v části Obsah webu pod položkou Stránka, v poli Sekce stránky.

Na následujícím snímku vidíte oblast Sekce stránky při úpravě stránky v administraci.

Postup krok za krokem

1. V levém menu klikněte na Obsah webu a v části Obsah vyberte Stránka.
2. Otevřete stránku k úpravě, nebo vpravo nahoře klikněte na Přidat.
3. V oblasti Sekce stránky klikněte na Přidat komponent do Sekce stránky a v nabídce Vyberte jeden komponent zvolte Text a obrázek.
4. Vyplňte Nadnadpis, Nadpis a do pole Text napište jeden až dva krátké odstavce.
5. V poli Fotka vyberte nebo nahrajte fotografii z Knihovny médií.
6. Nastavte Strana fotky (right nebo left), Styl fotky a Pozadí.
7. Chcete-li pod text přidat tlačítko, v poli Tlačítka tlačítkem pod seznamem položek přidejte novou položku a vyplňte Text odkazu a Adresa.
8. V pravém panelu Záznam klikněte na Uložit nebo na Publikovat.

Snímek níže ukazuje výběr fotografie z knihovny médií přímo z formuláře sekce.

Pole a nastavení

V tabulce najdete všechna pole sekce Text a obrázek.

Pole	K čemu slouží	Povinné	Tip
Nadnadpis	Krátký štítek nad nadpisem sekce.	Ne	2 až 5 slov (do 120 znaků), např. „Škola, která učí praxí“.
Nadpis	Hlavní nadpis sekce (H2). V designu Než zazvoní se vypisuje velkými písmeny.	Ne	Slovo mezi *hvězdičkami* (např. Založ si vlastní *firmu*) se v designu Než zazvoní zvýrazní barvou. Do 160 znaků.
Text	Odstavce textu nebo odrážky v blokovém editoru.	Ne	Jeden až dva odstavce, nejvýš kolem 250 znaků, aby text výškou ladil s fotkou.
Fotka	Jedna fotografie vedle textu.	Ne	Povolené jsou jen obrázky. Bez fotky se text zobrazí samostatně v užším sloupci.
Strana fotky	Umístění fotky na širokých obrazovkách: right (vpravo, výchozí) nebo left (vlevo).	Ne	Sousední sekce pod sebou střídejte: right, left, right.
Pozadí	Barva pozadí: white (bílé, výchozí), soft (světle šedé), brand (tmavé v barvě školy).	Ne	Tmavé pozadí brand přepne barvu nadpisu i textu na bílou.
Tlačítka	Tlačítka pod textem (položky typu Odkaz).	Ne	První tlačítko je hlavní (výrazné), další jsou obrysová. Používejte nejvýše 2 tlačítka.
Styl fotky	Vzhled fotky v designu Než zazvoní: plain (výchozí), polaroid, circle, rounded.	Ne	Popis jednotlivých stylů najdete níže v přehledu variant.
Kotva	Identifikátor sekce pro přímý odkaz (např. praxe).	Ne	Jen malá písmena bez diakritiky, číslice a spojovníky, bez # (odkaz vede na #praxe).

Položky v poli Tlačítka

Každá položka přidaná do pole Tlačítka obsahuje tato pole:

Pole	K čemu slouží	Povinné	Tip
Text odkazu	Text na tlačítku.	Ano	Stručný text (2 až 4 slova), např. „Jak praxe probíhá“.
Adresa	Cílová adresa odkazu.	Ano	Interní /stranka, kotva #kotva, externí https://..., mailto:..., tel:... nebo soubor z knihovny.
Ikona	Malá ikona před textem tlačítka (výchozí none = bez ikony).	Ne	Pro podstránku se hodí arrow-right, pro soubor file, pro e-mail mail.

Varianty a vzhled na webu

Vzhled fotografie v designu Než zazvoní určuje pole Styl fotky:

• plain (s odsazeným stínem, výchozí): Obdélníková fotka na šířku (poměr stran 5 : 4) s barevným stínem odsazeným vpravo dole.
• polaroid (s bílým rámečkem): Fotka v bílém rámečku se širším spodním okrajem a stínem, mírně natočená (doprava u fotky vpravo, doleva u fotky vlevo). Při najetí myší se narovná.
• circle (kruh): Fotka oříznutá do kruhu (1 : 1) s odsazeným stínem v akcentní barvě školy. Hodí se pro záběry s hlavním motivem uprostřed.
• rounded (zaoblené rohy): Obdélníková fotka (4 : 3) s výrazně zaoblenými rohy a jemným stínem.

Poznámka ke klasickému vzhledu

V klasickém vzhledu (klasik) se zobrazí text a obdélníková fotka vedle sebe s volitelným popiskem z knihovny médií pod snímkem. Pole Styl fotky a Kotva se v klasickém vzhledu neuplatní.

Tipy a doporučení

• Střídejte strany a styly fotek: Řadíte-li pod sebe tři sekce Text a obrázek, nastavte první sekci right a polaroid, druhé left a plain a třetí right a circle. Stránka získá přirozený rytmus.
• Držte text stručný: Sekce vypadá nejlépe s jedním až dvěma krátkými odstavci a jedním tlačítkem. Dlouhé texty vložte raději do sekce Text.
• Tlačítko pro soubor ke stažení: Odkazuje-li tlačítko na soubor z knihovny médií (/uploads/...), web k němu automaticky připojí zkratku přípony (např. PDF nebo DOC).

Časté chyby

• Fotky pod sebou na stejné straně: Necháte-li u sousedních sekcí výchozí hodnotu right, splynou fotky do jednoho pásu vpravo. U každé druhé sekce přepněte Strana fotky na left.
• Znak # v poli Kotva: Do pole Kotva pište jen samotné slovo (např. duvody). Znak # patří až do pole Adresa v odkazu nebo tlačítku.
• Oříznutý obličej u stylu circle: Kruhový výřez ořízne rohy fotky. Vybírejte snímky s dostatečným odstupem od okrajů, nebo v knihovně médií nastavte střed zájmu.

Související

• Přehled sekcí
• Sekce Text
• Sekce Karty
• Odkazy a tlačítka
• Ikony
• Obrázky
• Psaní textů pro web