Ugrás a fő tartalomhoz

Nyitókép · középre zárt blokk

Mire jó a Nyitókép · középre zárt blokk?

Egy fókuszált nyitás, ahol az üzenet a főszereplő. A Nyitókép · középre zárt blokk akkor jó választás, ha nincs szükséged nagy képre ahhoz, hogy az ajánlat érthető legyen. Felső felirat, főcím, alcím és egy elsődleges CTA építi fel a nyitást – a méretet, szélességet, hátteret, színeket és térközöket pedig a helyzethez igazíthatod.

Jó kiindulópont: főoldalhoz vagy kampányoldalhoz közepes vagy nagy, belső oldalhoz gyakran kompakt. Ha bizonytalan vagy, kezdd közepes mérettel, rövid főcímmel és egyetlen konkrét CTA-val.

Főoldali / kampánynyitás

Egyetlen erős ígéret vigye az első képernyőt.

A nagy méret akkor működik jól, ha a hero az oldal legfontosabb belépési pontja, és a látogatónak egyetlen fő üzenetet kell megértenie.

Megnézem a lehetőségeketÖsszes blokk

Melyik méretet válaszd?

A hero magasságát ne ízlésből, hanem az oldal szerepe alapján válaszd.

Nagy – amikor ez a fő belépő

Főoldalhoz, kampányhoz vagy fontos kampányoldalhoz. Akkor jó, ha az első képernyőn szeretnéd megállítani a látogatót és egyetlen fő ajánlatra fókuszálni.

Közepes – a biztos alapbeállítás

A legtöbb üzleti oldalhoz jó kiindulópont. Elég hangsúlyos, de nem foglalja el indokolatlanul az egész képernyőt.

Kompakt – gyors továbbhaladáshoz

Belső oldal, szolgáltatásoldal vagy rövidebb aloldal elején. A cím megkapja a súlyát, de a tartalom hamarabb láthatóvá válik.

Általános üzleti oldal

Közepes méret, világos hierarchia, egyértelmű következő lépés.

A közepes változat jó alap, ha szeretnél hangsúlyos nyitást, de nem akarod, hogy a hero uralja az egész első képernyőt.

Kérek egy első verziótMegnézem a blokkokat

Belső oldal

A kompakt hero címet ad, de nem tartja fel a látogatót.

Használd akkor, ha a látogató már tudja, hol jár, és gyorsan tovább szeretnéd engedni az oldal tényleges tartalmához.

Ha nem tudod, mivel indulj: válaszd a közepes méretet, Olvasható tartalomszélességet, hagyj bő belső térközt, és használj egyetlen, konkrét CTA-t. Előbb legyen tiszta az üzenet – a látványosabb beállításokat utána érdemes hozzáadni.

BeállításMit szabályoz?Gyakorlati javaslat
TartalomFelső felirat, főcím és alcím.A főcím legyen önmagában is érthető. A felső felirat kategorizáljon, az alcím bontsa ki az ígéretet – ne ugyanazt ismételjék.
Címsor szintjeH1, 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éreteCí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.
CTAGombfelirat, cél, külön gombszínek és egy opcionális második művelet.Egy konkrét következő lépést nevezz meg. Ha egy halkabb második lépés is segít, add hozzá szöveges linkként vagy visszafogottabb gombként – lásd lent, a Második CTA résznél.
MéretKompakt / közepes / nagy.A közepes jó alap. A nagy csak akkor, ha a hero tényleg elsődleges belépési pont; a kompakt belső oldalakon praktikus.
Háttér és szélességAlap, Inverz vagy Egyéni háttér; a Szélesség beállítással (Kolumna / Teljes szélesség / Széltől szélig) pedig az, meddig ér ki.Színezett sávnál a Teljes szélesség a jó alap: a háttér a képernyő széléig ér, a szöveg a hasábban marad. A Széltől szélig a tartalmat is kiviszi a képernyő széléig – középre igazított szövegnél ritkán kell.
SzínekSzöveg-, kiemelő- és CTA-színek.Maradj a webhely palettájánál, és mindig ellenőrizd a kontrasztot. A CTA emelkedjen ki, de ne legyen idegen az oldaltól.
Tartalom szélességeOlvasható / Széles / Teljes.Középre igazított szövegnél az Olvasható a legbiztonságosabb. A Széles hosszabb főcímnél működhet; a Teljes ritkán szükséges.
Térköz és láthatóságKülső/belső tér, egyéni belső margó, Csak mobil / Csak asztali és időzítés.A Sáv belső tere a hero belsejét, a Térköz alatta az utána következő távolságot adja. Időzítést kampány- vagy szezonális heróhoz használj.

A Nyitókép · középre zárt blokk legfontosabb beállításai

Második CTA: gomb vagy szöveges link

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.

  • Másodlagos művelet stílusa: Szöveges link (ez az alapértelmezett, nem versenyez az első gombbal) vagy Gomb. Gombként a Színek csoportban saját színt kaphat: Másodlagos gomb háttere és Másodlagos gomb szövege.
  • Gombok: Egymás mellett (ha nem fér ki, a második a következő sorba kerül) vagy Egymás alatt.

Színezett vagy inverz háttéren a második művelet a sáv szövegszínét követi, így ott is olvasható marad.

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.

Kép második CTA-ként

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.

  • Kép kerete: Fehér kártya, így a hivatalos grafika bármilyen háttéren a saját fehér alapján marad, vagy Keret nélkül.
  • Az ALT szöveg a link neve, ezért azt írd le, hová visz, ne a képet, például: „Széchenyi Terv Plusz – a projekt oldala”. Amíg nincs ALT szöveg, a képes link nem jelenik meg az oldalon.
  • A célt ugyanúgy a Másodlagos link mezőben adod meg, mint gombnál vagy szöveges linknél.

A hivatalos infóblokkot a pályázathoz kapott fájlból töltsd fel.

Kép második CTA-ként egy Nyitókép · kép mellett blokkon: a fehér kártyán álló infóblokk az elsődleges gomb mellett (mintakép, nem valódi logó).

Így finomhangold, hogy ne legyen sablonos

  • Rövid kategória, célcsoport vagy kontextus kerüljön ide: például „Könyvelés kisvállalkozásoknak”, „Őszi kampány” vagy „Új szolgáltatás”. Ne ismételd benne a főcímet.

Mikor jobb másik hero?

Ne a látvány alapján válassz blokkot, hanem aszerint, milyen szerepe van a vizuálnak.

Nyitókép · kép mellett →

Ha a kép bizonyít vagy megmutat valamit, amit a szöveg önmagában nem tud – például terméket, embert, helyszínt vagy konkrét eredményt.

Nyitókép · háttérképpel →

Ha maga a fotó teremti meg az első benyomást, és elbírja, hogy az egész nyitóképernyő háttere legyen.

Nyitókép · videóval →

Ha mozgással vagy rövid jelenettel sokkal gyorsabban átadható az élmény vagy folyamat, mint egyetlen állóképpel.

Próbáld ki valódi tartalommal

A jó hero nem attól erős, hogy nagy. Attól, hogy az első pillanatban érthető.

Kezdj egy világos főcímmel, válassz hozzá megfelelő méretet és csak azokat a vizuális beállításokat használd, amelyek tényleg segítik az üzenetet.

Elkészítem a weboldalamat →Vissza a blokkokhoz