Használj mozgást csak akkor, ha tényleg többet mond egy állóképnél. A Nyitókép · videóval blokk rövid idő alatt tud helyszínt, folyamatot, hangulatot vagy termékhasználatot megmutatni. A fő üzenetnek azonban videó nélkül is érthetőnek kell maradnia: a háttérvideó némított vizuális réteg, nem teljes értékű videólejátszó.
Jó kiindulópont: rövid, nyugodt, szépen ismétlődő jelenet; egyértelmű poszterkép; közepes sötétítés; rövid főcím és egy konkrét gomb.
A jó hero-videó nem filmet mesél el, hanem néhány másodperc alatt ad plusz információt.
Mutass egy helyet, mozdulatot, folyamatot vagy termékhasználatot. A gyors vágások és túl sok jelenet elviszik a figyelmet a főcímtől.
Olyan részletet válassz, amely természetesen újraindulhat, és néhány másodperc alatt már átadja a lényeget.
A főcím területén ne történjen túl sok minden. A mozgás maradjon háttér, a szöveg és a gomb legyen az elsődleges.
Alacsony – belső oldal
Az alacsony változat gyors vizuális belépő lehet egy szolgáltatás, helyszín vagy folyamat bemutatásához.
Magas – főoldali hero
A magas változat jó alap, ha a mozgás fontos része az első benyomásnak, de nem akarod teljesen elfoglalni a látogató képernyőjét.
Teljes képernyő – nagy élmény
A teljes képernyős változat akkor működik, ha maga a helyszín, folyamat vagy vizuális élmény az ajánlat fontos része. A tartalom itt teljes szélességű, biztonságos oldalsó térrel.
Fontos: a háttérvideó némított. Ne építs narrációra, beszédre vagy hanghatásra. A fő üzenet poszterképpel, videó nélkül is legyen érthető. Ezen az oldalon a Magas példa mutat valódi mozgást egy YouTube-videóval, a másik kettő csak poszterképpel mutatja az elrendezést. A saját oldaladon a Videó URL (MP4 vagy YouTube) mezőbe írd a videót, és ha van, a WebM változatot is add meg.
| Beállítás | Mit szabályoz? | Gyakorlati javaslat |
|---|---|---|
| Videóforrás | Videó URL (MP4 vagy YouTube), valamint opcionális WebM változat. | Adj meg legalább egy böngészőben lejátszható videóforrást; a WebM változat alternatív forrás. |
| Poszterkép | Poszter / tartalék kép. | Mindig legyen jó állókép is. Ez látszik a videó betöltése előtt, helyettesítheti azt korlátozott helyzetben, és önmagában is hordozza a fő vizuális üzenetet. |
| Magasság | Alacsony / Magas / Teljes képernyő. | A Magas jó alap főoldalra, az Alacsony belső oldalra; a Teljes képernyő csak akkor, ha a mozgás tényleg az élmény része. |
| Sötétítés | Enyhe / közepes / erős. | A szöveg olvashatósága alapján válassz. Mozgó háttérnél a kontraszt fontosabb, mint egy állóképnél. |
| 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. |
| Gomb és színek | Gombfelirat, cél, gomb- és szövegszínek. | A gomb maradjon jól olvasható a videó világos és sötét képkockáin is. |
| Szélesség és térköz | Szélesség, tartalom szélessége, sáv belső tere. | A háttérhez a teljes szélesség természetes. A tartalom lehet Széles vagy Teljes; teljes szélességnél adj biztonságos oldalsó belső margót. |
| Láthatóság | Eszköz- és időzített megjelenés. | Kampányhoz használhatsz időzítést. A „Csak mobil” vagy „Csak asztali” nézet ne legyen kerülőút egy rosszul működő reszponzív videóhoz. |
A Nyitókép · videóval 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.
A videó vagy a poszterkép előtt a második művelet a fölötte lévő szöveg színét követi, így a sötétítéssel együtt olvasható marad. Mozgó háttéren a szöveges link könnyen elveszhet: ott a gomb stílus a biztosabb.
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.
Háttérvideónál a rövidség előny. Olyan részletet válassz, amely néhány másodperc alatt érthető, és természetesen ismétlődhet. Ne a teljes bemutatkozó filmedet tedd a hero mögé.
Nem minden látványos nyitásnak kell mozognia.
Ha egyetlen erős fotó már önmagában megteremti a hangulatot, egyszerűbb, gyorsabb és nyugodtabb választás.
Ha a terméket, embert vagy eredményt külön képként szeretnéd megmutatni a szöveg mellett.
Ha a fő üzenet a legerősebb eszközöd, és a mozgás csak elvonná róla a figyelmet.
A mozgás legyen eszköz, ne dísz
Tartsd röviden, némítva és ismételhetően, adj erős poszterképet, és hagyj vizuális csendet a főcímnek.
