Příklad: Obrázek s textem
Toto je příklad komponenty Obrázek s textem. Obrázek a text jsou umístěny vedle sebe. Ideální pro prezentaci služeb nebo produktů.
Text může obsahovat formátování, seznamy a odkazy.
Co je Obrázek s textem
Obrázek s textem je komponenta, která vytvoří layout s obrázkem a textem umístěnými vedle sebe. Ideální pro prezentaci služeb, produktů nebo informací s vizuální podporou.
Kdy použít
- Pro prezentaci služeb nebo produktů
- Pro popis funkcí s ilustrací
- Pro "o nás" sekce s fotografií
- Kdykoliv chcete propojit obrázek s popisným textem
Jak přidat
- V záložce Obsah klikněte na "Přidat komponentu"
- Vyberte "Obrázek s textem"
- Vyplňte následující pole
Dostupná pole
Nadpis
Nadpis sekce (např. název služby, funkce).
Obrázek (povinné)
Fotografie nebo ilustrace k textu.
Technické požadavky:
- Rozměry: 800 × 600 px nebo větší
- Formát: JPG pro fotografie, PNG pro grafiku s průhledností
- Velikost: Do 500 KB
ALT text: Nezapomeňte vyplnit ALT text v detailu média pro přístupnost.
Příklad ALT textu: "Screenshot rozhraní elektronické podatelny" nebo "Ikona znázorňující odesílání dokumentů online"
Pojmenování souboru: Pojmenujte smysluplně před nahráním, např. "elektronicka-podatelna-screenshot.jpg" místo "IMG_5678.jpg". Systém automaticky transliteruje česká písmena.
Pozice obrázku
- Vlevo: Obrázek na levé straně, text vpravo
- Vpravo: Text vlevo, obrázek vpravo (výchozí)
Tip: Střídejte pozici pro vizuálně zajímavější stránku.
Obsah
Textový obsah vedle obrázku. Můžete použít formátování, seznamy, odkazy.
Odkaz
Volitelný odkaz "Více informací" zobrazený jako tlačítko pod textem.
Příklad použití
Nadpis: "Elektronická podatelna"
Obrázek: elektronicka-podatelna-screenshot.jpg
ALT text: "Screenshot rozhraní elektronické podatelny"
Pozice: Vpravo
Obsah: "Odesílejte dokumenty úřadu online, bez nutnosti osobní návštěvy. Systém podporuje datové schránky a elektronický podpis."
Odkaz: /sluzby/elektronicka-podatelna
Dobré praktiky
- Kvalitní obrázek: Použijte profesionální fotku nebo kvalitní ilustraci
- Vyvážený obsah: Text by neměl být příliš dlouhý (max 2-3 odstavce)
- Střídejte pozici: Pokud máte více komponent pod sebou
- Relevance: Obrázek by měl přímo souviset s textem
- ALT text vždy: Vyplňte popisný ALT text
- Správné pojmenování: Pojmenujte soubor před nahráním
Časté chyby
- ❌ Chybějící ALT text
- ❌ Špatné pojmenování souboru
- ❌ Příliš velký obrázek (nad 1 MB)
- ❌ Rozmazaný nebo nekvalitní obrázek
Varianta: Obrázek vlevo
V této variantě je obrázek umístěn vlevo a text vpravo. Střídejte pozici pro zajímavější vzhled stránky.