Szöveg és kép együtt mondja el az első történetet. A Nyitókép · kép mellett blokk akkor jó választás, ha a kép nem csak dísz, hanem hozzátesz az üzenethez: megmutatja a terméket, az eredményt, az embert, a helyszínt vagy azt a részletet, amit szöveggel nehéz lenne gyorsan átadni.
Jó kiindulópont: tarts egyetlen fő ígéretet a szöveges oldalon, válassz egy valóban releváns képet, és csak utána döntsd el, hogy a vizuál kerüljön balra vagy jobbra.
Szolgáltatás / szakértelem
A kép legyen bizonyíték vagy kézzelfogható részlet: valódi munka, helyszín, ember, termék vagy eredmény – ne csak hangulatkép.
A Nyitókép · kép mellett blokk akkor erős, ha a vizuál információt ad, nem csak kitölti az oldal felét.
Termék, referencia, helyszín, csapat vagy konkrét eredmény legyen a képen. Olyasmi, ami önmagában is segíti a megértést.
A kép fő témája maradjon jól felismerhető akkor is, ha más képarányban vagy kisebb képernyőn jelenik meg.
Ha a kép bármelyik konkurens oldalán ugyanúgy működne, valószínűleg nem ad hozzá elég értéket a heróhoz.
Termék / vizuális fókusz
Bal oldali képpel a vizuál kapja meg előbb a figyelmet, a szöveg pedig rögtön értelmezi, mit lát a látogató.
Gyors döntési szabály: ha a kép csak dekoráció, inkább válassz Nyitókép · középre zárt blokkot. Ha a kép bizonyít, megmutat vagy kontextust ad, a Nyitókép · kép mellett blokk jó választás. A bal vagy jobb oldal pedig attól függjön, melyik elemnek kell először megfognia a tekintetet.
| Beállítás | Mit szabályoz? | Gyakorlati javaslat |
|---|---|---|
| Tartalom | Felső felirat, főcím, alcím és CTA. | A főcím legyen rövid és önmagában érthető; az alcím magyarázza el, mit tesz hozzá a kép az ajánlathoz. |
| Címsor szintje | H1, H2 vagy H3 a főcímnek. | Egy oldalon egy H1 legyen: ha a hero az oldal fő címe, maradjon H1. Ha fölötte már van Cím blokk, vagy nem ez az első hero az oldalon, válassz H2-t. |
| Cím és leírás mérete | Cím mérete (px) és Leírás mérete (px), vagy Auto. | Üresen hagyva az alapméret marad, és ez a legtöbbször elég. Keskeny képernyőn a nagy méret arányosan kisebb lesz, hogy a szöveg kiférjen. |
| Kép | Kép, ALT és TITLE szöveg. | Valódi, releváns vizuált használj. Az ALT szöveg írja le a kép lényegét, ne kulcsszólista legyen. |
| Kép helye | Bal vagy jobb oldal. | A vizuált tedd előre, ha az az erősebb belépési pont; a szöveget, ha az ajánlatot kell előbb megérteni. |
| Fókuszpont | A kép vízszintes és függőleges fókuszpontja. | Olyan képnél hasznos, ahol fontos arc, termék vagy részlet van. A fókuszpont segít, hogy vágásnál is a lényeg maradjon meg. |
| Háttér és szélesség | Háttérszín, valamint Szélesség: Kolumna, Teljes szélesség vagy Széltől szélig. | Erős, teljes sávhoz a Teljes szélesség jó: a háttér a képernyő széléig ér, a kép és a szöveg a hasábban marad. A Kolumna visszafogottabb, ott a háttér csak a tartalomhasábig ér; a Széltől szélig a képet és a szöveget is kiviszi a képernyő széléig. |
| CTA-színek | Gomb háttér- és szövegszíne. | A CTA emelkedjen ki a háttérből, de maradjon a webhely színrendszerében. |
| Tartalom szélessége és térköz | Tartalom szélessége, Sáv belső tere, Térköz alatta. | A Széles általában jó a kettéosztott elrendezéshez. Kerüld, hogy egyszerre túl sok belső és külső tér legyen. |
A Nyitókép · kép mellett blokk legfontosabb beállításai
A képet egy formára vágja, amely függönyként tárul fel, amikor a képernyőre ér.
Téglalap jól látható, lekerekített sarkokkal. Képpárnál ez az alapértelmezett.
Felül lekerekített, kapu alakú kivágás.
A keretbe férő legnagyobb kör, középen.
Két átellenes sarkán erősen lekerekített, levélszerű forma.
Lágy, szabálytalan forma, amely lassan változtatja az alakját.
Vágott keret kell hozzá (Kitöltés). Nyomtatásban a kép vágás nélkül, teljes egészében jelenik meg.
Forma: Boltív
A kép boltív formára vágva, függönyként tárul fel, amikor a képernyőre ér. A Forma csak vágott kerettel (Kitöltés) működik.
A Képek beállításnál az Egy kép helyett Képpárt is választhatsz: két fotó csúszik egymásra lágy árnyékkal, ugyanúgy, mint a Képpár blokkban. A meglévő kép marad az első, elöl álló kép, mellé egy hátsó képet választasz saját ALT és TITLE szöveggel.
Képpár: Döntött
Az első kép a nagyobb, és ez töltődik be először; a hátsó mögötte, a felső sarokban áll.
Az elsődleges gomb mellé tehetsz egy második, halkabb lépést is – például a „Kezdjük” mellé egy „Így működik” linket. A célját a blokk beállításaiban, a Másodlagos link mezőben add meg, a feliratát pedig közvetlenül a herón, az első gomb mellett írd be. A második művelet csak akkor jelenik meg, ha felirata és linkje is van.
A Nyitókép · kép mellett blokknál a két művelet a szöveges oldalon, az alcím alatt áll, a kép helyétől függetlenül.
Tipp: a két művelet ne legyen egyforma súlyú. Ha a második is gomb, maradjon visszafogottabb, hogy egyértelmű legyen, melyik a fő lépés.
A Másodlagos művelet stílusa harmadik lehetősége a Kép: a második lépés ilyenkor egy kép, amely linkként működik. Tipikus példa a pályázati infóblokk, például a Széchenyi Terv Plusz vagy egy uniós támogatás képe, amely a projekt aloldalára visz.
A hivatalos infóblokkot a pályázathoz kapott fájlból töltsd fel.
Ha azt szeretnéd, hogy a látogató előbb az ajánlatot értse meg, majd a kép erősítse meg. Szolgáltatásnál, szakértői ajánlatnál és összetettebb üzenetnél ez gyakran jó kiindulópont.
A vizuál szerepe alapján válassz.
Ha az üzenet a főszereplő, és a kép nem adna hozzá érdemi információt.
Ha egyetlen erős fotó önmagában is elbírja az első képernyőt és a hangulatot.
Ha egy rövid mozgó jelenet gyorsabban mutatja meg az élményt vagy folyamatot, mint egy állókép.
Szöveg és vizuál egyensúlyban
A kép és a szöveg ne versenyezzen egymással. Ugyanazt az ajánlatot erősítsék két külön eszközzel.