Kép szöveggel blokk

Mire jó a Kép szöveggel blokk?

A kép megmutatja. A szöveg elmagyarázza. A Kép szöveggel blokk akkor működik jól, ha a két oldal kiegészíti egymást. A vizuál mutathat terméket, helyszínt, részletet vagy eredményt; a szöveg pedig elmondja, mit érdemes észrevenni rajta.

A kép mérete, képaránya, oldala, a két hasáb közti rés és a mobilos sorrend külön állítható. A szöveg sem egyszerű bekezdés: használhatsz félkövért, dőlt kiemelést, címsorokat, listákat, idézetet, linket, valamint kijelölt szövegrészen méret- és színkiemelést is.

Mekkora teret kapjon a kép?

A képméret azt szabályozza, mennyire legyen hangsúlyos a vizuál a szöveghez képest.

Kicsi

Ha a szöveg a főszereplő, a kép pedig csak részletet vagy vizuális kapaszkodót ad.

Közepes

Jó általános kiindulópont, ha kép és szöveg hasonló súlyt kap.

Nagy

Ha a kép bizonyít, részletet mutat vagy fontos része a történetnek.

Extra nagy

Ha a vizuál dominál, a szöveg pedig inkább rövid értelmező kíséret.

Közelkép egy kézzel faragott diófa tárgy részleteiről. — Példa: kicsi kép · négyzetes képarány · kép bal oldalon · szűk térköz.

Kicsi kép — amikor a szöveg a főszereplő

A kisebb kép segít megtörni a szöveget és konkrét részletet mutatni, de nem vonja el róla a figyelmet. Jó választás bemutatkozáshoz, magyarázó részhez vagy kisebb illusztrációhoz.

Fazekas kezei agyagot formáznak munka közben. — Példa: közepes kép · klasszikus képarány · kép jobb oldalon · normál térköz. Szöveg: félkövér, dőlt kiemelés és lista.

Közepes kép — kiegyensúlyozott alap

A közepes méret a legtöbb helyzetben biztos kiindulópont: a kép már érdemi figyelmet kap, miközben a szöveg továbbra is kényelmesen olvasható marad.

Jó bemutatkozó szakaszhoz, ahol kép és szöveg egyformán fontos.
Hasznos terméknél, helyszínnél vagy egy szolgáltatás rövid bemutatásánál.
Listával is tagolhatod, ha több gyorsan áttekinthető részletet szeretnél kiemelni.

Asztalos fán dolgozik egy műhelyben. — Példa: nagy kép · álló képarány · kép jobb oldalon · tág térköz. Szöveg: kiemelőszín és idézet.

Nagy kép — amikor a vizuál bizonyít

Ha a minőség, az anyag, az ember vagy maga az eredmény a képen érthető meg igazán, adj neki nagyobb teret. Az álló képarány különösen jól működik függőleges témáknál.

A jó kép nem illusztrálja a mondanivalót, hanem hozzátesz valamit.

A szövegben külön színkiemelést és idézetet is használhatsz, ha egy fontos gondolatnak nagyobb hangsúlyt adnál.

Világos, tágas műhely nagy fa munkaasztallal. — Példa: extra nagy kép · fekvő képarány · kép bal oldalon · teljes szélességű sáv. Szöveg: nagyobb betűméret, számozott lista és link.

Extra nagy kép — amikor a vizuál viszi a szakaszt

Az extra nagy méret akkor működik jól, ha a kép önmagában is sok információt hordoz. Ilyenkor a szöveget érdemes rövid, jól tagolt részekre bontani.

Mondd el röviden, mit látunk.
Emeld ki, miért fontos.
Ha kell, adj továbbvezető linket egy kapcsolódó tartalomhoz.

Egyszerű ökölszabály: ha a kép csak hangulatot ad, ne foglaljon el túl nagy teret. Ha bizonyít, részletet mutat vagy segít megérteni a mondanivalót, érdemes hangsúlyosabbra venni. Mobilon külön beállíthatod, hogy a kép vagy a szöveg jelenjen meg előbb. Az alt szöveg azt írja le, mi látható a képen; a képaláírás látható kontextust ad, ezért ne ugyanazt a mondatot használd mindkettőre.

Mit állíthatsz a Kép szöveggel blokkban?

A vizuális súlytól a szöveg formázásán át a mobilos sorrendig minden fontos döntés külön szabályozható.

Képméret

Kicsi, közepes, nagy vagy extra nagy: azt szabályozza, mennyi helyet kapjon a kép a szöveg mellett.

Képarány

Eredeti, fekvő, klasszikus, négyzet vagy álló. A témához illő arányt válaszd.

Kép helye és mobilos sorrend

A kép kerülhet balra vagy jobbra; mobilon pedig külön dönthetsz arról, hogy a kép vagy a szöveg jelenjen meg előbb.

Térköz

Szűk, normál vagy tág: azt szabályozza, mennyire kapcsolódjon szorosan egymáshoz a kép és a szöveg.

Szövegformázás

Címsor, félkövér, dőlt, lista, idézet, link, betűméret és színkiemelés is használható a kijelölt szövegrészeken.

Alt szöveg és képaláírás

Az alt szöveg akadálymentes képleírás, a képaláírás pedig a látogatónak látható kiegészítő kontextus.

Mikor válassz inkább másik blokkot?

Azt nézd, hogy a kép önmagában áll, a szöveggel alkot párt, vagy több egyenrangú elemet mutatsz egyszerre.

Kép →

Ha a vizuál önmagában a főszereplő, és nincs szükség mellette hosszabb magyarázatra.

Nyitókép · kép mellett →

Ha a kép–szöveg elrendezést az oldal legelső, kiemelt nyitóblokkjában használnád.

Kép jelölőpontokkal →

Ha egyetlen képen belül több részlethez szeretnél külön magyarázatot kapcsolni.

Kép és szöveg együtt

Mutass valami konkrétat, majd mondd el, miért fontos.

A jó kép–szöveg páros nem ismétli önmagát: a vizuál mutat, a szöveg értelmez.

Elkészítem a weboldalamat →Vissza a blokkokhoz