Amikor maga a kép viszi az első benyomást. A Nyitókép · háttérképpel blokk akkor erős, ha van egy olyan fotód, amely önmagában is hangulatot, minőséget, eredményt vagy helyzetet közvetít. Itt a kép nem háttérdísz: az egész nyitóképernyő vizuális alapja.
Jó kiindulópont: válassz egyetlen erős képet, állítsd be a megfelelő magasságot, majd a sötétítés és a fókuszpont segítségével tedd olvashatóvá és reszponzívvá.
A magasság azt szabályozza, mennyi szerepet kap a kép az első képernyőn.
Belső oldalon vagy rövidebb kampánynyitásnál jó. Erős képet ad, de gyorsan továbbengedi a látogatót a tartalomhoz.
A legtöbb képközpontú főoldalhoz jó kiindulópont. Elég nagy a vizuális hatáshoz, de nem foglalja el feltétlenül az egész képernyőt.
Akkor használd, ha a kép tényleg elbírja az egész első képernyőt, és a látogató figyelmét tudatosan erre az egy nyitásra akarod tenni.
Alacsony / belső oldal
Az Alacsony magasság jó választás, ha a kép fontos, de a látogatót gyorsan tovább szeretnéd engedni a tartalomhoz.
Magas / főoldali nyitás
A Magas beállítás jó alap, ha a fotó fontos része az üzenetnek, de a következő szekcióból is szeretnél valamit közel tartani.
Teljes képernyő / teljes szélesség
Itt nemcsak a háttér fut ki a képernyő széléig: a tartalom is teljes szélességű elrendezést kap, biztonságos oldalsó belső térrel.
Gyors döntési szabály: ne a legszebb képet keresd, hanem azt, amelyik a szöveggel együtt is jól használható. A fő téma ne kerüljön a cím mögé, legyen hely a szövegnek, és a kép fontos része vágás után is maradjon felismerhető.
| Beállítás | Mit szabályoz? | Gyakorlati javaslat |
|---|---|---|
| Kép | A teljes hero vizuális alapja. | Olyan képet válassz, amelynek van egyértelmű témája és marad hely a szövegnek is. |
| Magasság | Alacsony / Magas / Teljes képernyő. | A Magas jó alap. A Teljes képernyő csak erős kompozíciónál; az Alacsony akkor, ha a tartalmat gyorsabban szeretnéd megmutatni. |
| Sötétítés | Enyhe / közepes / erős sötét fátyol a képen. | A szöveg olvashatósága alapján válassz. Világos képnél gyakran erősebb sötétítés kell, sötét képnél az enyhe is elég lehet. |
| Fókuszpont | A kép vízszintes és függőleges fókuszpontja. | Jelöld ki az arcot, terméket vagy fontos részletet, hogy képkivágásnál is a lényeg maradjon meg. |
| Szöveg és CTA | Felső felirat, főcím, alcím, CTA és gombszínek. | A szöveg legyen rövid. A CTA kontrasztja legyen egyértelmű a képpel és a sötétítéssel együtt. |
| 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. |
| Háttér és szélesség | Háttér, valamint Szélesség: Kolumna, Teljes szélesség vagy Széltől szélig. | A Nyitókép · háttérképpel blokknál a Teljes szélesség a természetes: a kép a képernyő széléig ér, a szöveg a hasábban marad. Széltől szélig beállításnál a szöveg is kifut a szélekig, ezért adj neki oldalsó belső margót. |
| Tartalom szélessége és láthatóság | Tartalom szélessége, Térköz alatta, eszköz- és időzített láthatóság. | A Széles jó kiindulópont. Időzítést kampányhoz használj; a Csak mobil / Csak asztali ne legyen reszponzív hibák kerülőútja. |
A Nyitókép · háttérképpel blokk legfontosabb beállításai
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.
Kép előtt a második művelet a kép fölötti szöveg színét követi, így a sötétítéssel együtt olvasható marad. Ha gombként saját színt adsz neki, nézd meg a kép legvilágosabb és legsötétebb részén is.
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.
A képnek nagy méretben is részletesnek kell maradnia, és legyen rajta egyértelmű fókusz. Ha csak kis bélyegképként működik jól, teljes képernyőn valószínűleg gyengének hat.
A kép szerepe dönti el, hogy háttér legyen-e, külön vizuál vagy egyáltalán szükség van-e rá.
Ha a képet külön szeretnéd megmutatni, és nem akarod, hogy a szöveg közvetlenül rákerüljön.
Ha a fő üzenet a lényeg, és a kép inkább elvonná róla a figyelmet.
Ha mozgással vagy rövid jelenettel sokkal gyorsabban átadható az élmény, mint egyetlen állóképpel.
Adj teret a legerősebb vizuálnak
Válassz jó kompozíciót, megfelelő magasságot és sötétítést, majd ellenőrizd a fókuszpontot kisebb képernyőn is.