Preskočiť na hlavný obsah

Blok Obrázok s textom

Načo slúži blok Obrázok s textom?

Fotografia ukazuje, text vysvetľuje. Obe časti sa dopĺňajú: obrázok môže predstaviť výrobok, miesto alebo výsledok a text vysvetlí, čo je podstatné.

Osobitne nastavíte veľkosť a pomer strán obrázka, jeho polohu, rozostupy medzi stĺpcami aj poradie na mobile. Text môže obsahovať podnadpisy, zoznamy, citáty, odkazy a zvýraznenia.

Koľko priestoru má dostať fotografia?

Jej veľkosť určuje, akú váhu má oproti vysvetleniu.

Malá

Keď je hlavný text a fotografia iba ilustruje detail.

Stredná

Vyvážená voľba pre väčšinu sekcií.

Veľká

Keď fotografia ukazuje výsledok alebo dôležitý detail.

Mimoriadne veľká

Keď dominuje obraz a text je iba stručným komentárom.

Detail ručne vyrezávaného výrobku z orechového dreva.
Ukážka: malý obrázok · štvorec · fotografia vľavo · menší rozostup.

Malý obrázok – keď dominuje text

Malá fotografia pridá konkrétny bod bez odvádzania pozornosti. Hodí sa do úvodu aj ku krátkemu vysvetleniu.

Ruky hrnčiara tvarujú hlinu na hrnčiarskom kruhu.
Ukážka: stredný obrázok · klasický pomer · vpravo · bežný rozostup. Text obsahuje tučné písmo, kurzívu aj zoznam.

Stredný obrázok – rovnováha medzi obrazom a textom

Fotografia má svoj význam a text sa pritom ľahko číta.

  • Vhodné na predstavenie služby, keď sú obe časti rovnako dôležité.
  • Užitočné pri výrobkoch, miestach a službách.
  • Zoznam uľahčuje čítanie pri viacerých detailoch.
Stolár pracuje s drevom vo svojej dielni.
Ukážka: veľký obrázok · na výšku · vpravo · veľký rozostup. Text so zvýraznením a citátom.

Veľký obrázok – keď fotografia niečo dokazuje

Doprajte viac priestoru záberu, ktorý vysvetľuje materiál, postup alebo výsledok. Zvislý formát sa hodí na ľudí či vysoké predmety.

Dobrá fotografia neopakuje vysvetlenie. Prináša ďalšiu informáciu.

Myšlienku môžete zvýrazniť farbou alebo citátom.

Svetlá priestranná dielňa s veľkým dreveným pracovným stolom.
Ukážka: mimoriadne veľký obrázok · na šírku · vľavo · pás cez celú obrazovku. Text s číslovaným zoznamom a odkazom.

Mimoriadne veľký obrázok – keď obraz vedie sekciu

Tento variant je vhodný pre fotografiu bohatú na informácie. Vysvetlenie nech je stručné a štruktúrované.

  1. Povedzte, čo vidíme.
  2. Vysvetlite, prečo je to dôležité.
  3. Ak to pomôže, pridajte odkaz na ďalšie návody.

Praktické pravidlo: ak fotografia iba vytvára atmosféru, nemusí zaberať veľa miesta. Ak dokazuje výsledok alebo ukazuje podstatný detail, doprajte jej viac priestoru. Na mobile môžete určiť, či sa ako prvý zobrazí text alebo obrázok. ALT text opisuje obsah fotografie, viditeľný popis pod ňou pridáva kontext; nemusia opakovať tú istú vetu.

Čo sa dá pri Obrázku s textom nastaviť?

Samostatne ovládate veľkosť, výrez a poradie na mobile.

Veľkosť fotografie

Malá, stredná, veľká alebo mimoriadne veľká podľa jej dôležitosti.

Pomer strán

Pôvodný, široký, klasický, štvorcový alebo na výšku.

Poloha a mobilné poradie

Obrázok vľavo či vpravo; na telefóne môže byť pred textom alebo za ním.

Rozostup

Malý, bežný alebo veľký priestor medzi fotografiou a textom.

Formátovanie textu

Podnadpisy, tučné písmo, kurzíva, zoznamy, citáty, odkazy, veľkosti a farby.

ALT a popis

Alternatívny text pre prístupnosť a viditeľný popis na vysvetlenie.

Kedy vybrať iný blok?

Rozhoduje, či obrázok vystupuje samostatne, s textom alebo ako súčasť kolekcie.

Obrázok →

Keď fotografia hovorí sama za seba.

Úvodná sekcia s obrázkom vedľa →

Pre hlavnú úvodnú časť stránky s obrázkom, nadpisom a CTA.

Obrázok s interaktívnymi bodmi →

Keď potrebujete vysvetliť niekoľko detailov jednej fotografie.

OBRÁZOK A TEXT SPOLU

Ukážte konkrétnu vec a vysvetlite, prečo je dôležitá.

Fotografia pridáva informáciu a text ju pomáha pochopiť.

Ďalšie návody →Späť do znalostnej bázy