Hero blokk – Videó és tartalom
Hero blokk osztott videóval, poster képpel és opcionális laptop-keretes megjelenéssel.
Hero blokk – Videó és tartalom
A szöveg és CTA-k mellett videókártya jelenik meg. Alapból egy videót használ, de a Desktop és mobil nézet kapcsolóval desktopon külön fekvő/laptopos videó, mobilon pedig külön álló, mobilkeretes videó adható meg.
Mire érdemes használni?
Videós bemutatkozáshoz, amikor a fő üzenet mellé saját videó, laptopos desktop bemutató vagy mobilkeretes álló videó kerül.
Blokk működése
Blokk beállításai
Ezek a beállítások minden blokk szerkezeti és navigációs működését egységesen vezérlik.
- Megjelenési változat: meghatározza a blokk elrendezését és az elérhető tartalmi mezőket. Változatváltás után ellenőrizd az előnézetet.
- Aktív blokk: kikapcsolva a blokk nem jelenik meg a nyilvános oldalon, de a beállításai megmaradnak és később visszakapcsolható.
- Megjelenés a menüben: bekapcsolva a blokk a főmenüben is megjelenik, és kattintásra az adott szakaszhoz görget.
- Menünév és mobil menüikon: a menüben látható felirat és a mobilnézetben használható ikon. A menünév legyen rövid és egyértelmű.
- Kiemelt menüpont: ahol elérhető, külön vizuális hangsúlyt ad a főmenüben az adott blokk linkjének.
- Főmenü és almenük: a menüben lévő aktív blokkokból opcionálisan főmenü/almenü kapcsolat építhető. Ha nincs ilyen kapcsolat, a régi egyszerű, egyszintű menü változatlan marad.
- Mobilos menütérkép: mobilon a főmenük és almenük egy közös hierarchikus nézetben láthatók. A Főmenüvé és Almenüvé műveletek külön gombot kaptak; almenü csak a főmenü kiválasztása után menthető, sorrendje fel/le gombbal módosítható, és másik főmenü alá is áthelyezhető.
- Sorrend: az Elhelyezett blokkok listában látható szám mutatja a tényleges oldalbeli pozíciót. Bezárt állapotban a fogantyúval átrendezhető; az új sorrend automatikusan mentődik.
- Menüsorrend: ha több blokk megjelenik a menüben, azok menüpozícióját is az oldalon beállított blokksorrend határozza meg. A Menüstruktúra panel bal oldali „Menüben lévő blokkok” listája a tényleges menü- és oldalsorrendet mutatja: ha itt sorrendezel, a menüpont helye és a blokk oldalbeli pozíciója is változik. Ugyanez fordítva is igaz: az Elhelyezett blokkoknál rendezett menüben lévő blokk a főmenü/almenü panelen is frissül. Normál menüpont innen húzható főmenünek vagy egy meglévő főmenü alá almenünek. A középső Főmenük oszlopban a főmenük kiválaszthatók, de a főmenük sorrendjét a bal oldali Menüben lévő blokkok lista és az Elhelyezett blokkok tényleges oldalsorrendje határozza meg. Már főmenü/almenü szerepű elemet előbb vissza kell állítani az X ikonnal; az almenük csak a lenyílóban jelennek meg.
- Duplikálás és törlés: a blokk másolható, ha a változat darabszámkorlátja engedi; törléskor a blokk és a hozzá tartozó mentett tartalom eltávolításra kerül.
Tartalmi mezők
Tartalom szerkesztése
Az alábbi funkciók a kiválasztott változat tényleges, jelenlegi mezősémájából származnak.
A változat fő funkciói
- Fő üzenet, rövid leírás és legfontosabb cselekvési gombok megjelenítése.
- Kapcsolható, szerkeszthető bizalmi sor a CTA-k alatt.
- Kép, képsorozat, teljes szélességű háttérkép vagy háttérvideó használata.
- Kép-ALT, igazítás, parallax, magasság és videóviselkedés kezelése a választott változattól függően.
- FFmpeg elérhetőség esetén a feltöltött Hero videókból – külön desktop és mobil videóág esetén mindkét videóból – automatikusan 360p/480p/720p/1080p MP4 és WebM lépcsők, hangos/némított kimenetek és poster kép készülnek; az admin mutatja az eredeti és generált fájlok méretét, a csere/törlés után pedig a nem használt videógenerátumok is takaríthatók.
- Alap videókártya, laptopkeret vagy mobilkeret.
- Külön mobil videó és mobil poster a Desktop és mobil nézet kapcsolóval.
- Desktop és mobil ágon külön loop, némítás, cover/contain illesztés és videópozíció, plusz keretstílus, keretszín és opcionális meta kártya.
- FFmpeg esetén mindkét videó optimalizált MP4/WebM lépcsőket és saját postert kaphat.
Megjelenés
Elrendezés és megjelenés
A blokk elrendezése, igazítása és vizuális működése.
- Videó megjelenési módjaElőre meghatározott lehetőségek közül választható beállítás. Az alap mód a téma stílusához illeszkedő videókártyát mutat. A laptop módnál a videó egy laptop képernyőjébe, a mobil módnál pedig egy álló mobilkeret kijelzőjébe kerül. Desktop és mobil nézet bekapcsolásakor ez a beállítás a desktop ágra vonatkozik, mobilon külön mobilkeretes ág jelenik meg.
- Desktop és mobil nézetBe- és kikapcsolható funkció. Bekapcsolva külön desktop és mobil videóág használható: a meglévő Videó mező a desktop nézeté, mobilon pedig a külön Mobil videó jelenik meg mobilkeretben. Kikapcsolva a blokk a korábbi egyvideós működést használja.
Gombok megjelenése
Gombok megjelenése
A gombok láthatósága, színei és megjelenési módja.
- Elsődleges gomb egyedi háttérszíneEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma gombháttérszíne marad. Egyedi háttérszínnél a gomb ehhez igazított színátmenetet kap. A Default visszaállítása gomb visszaállítja az alap színeket.
- Elsődleges gomb feliratának színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma gombfelirat-színe marad. Egyedi színnél a gomb szövege és ikonja ezt a színt kapja. A Default visszaállítása gomb visszaállítja az alap színeket.
- Másodlagos gomb egyedi háttérszíneEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma gombháttérszíne marad. Egyedi háttérszínnél a gomb ehhez igazított színátmenetet kap. A Default visszaállítása gomb visszaállítja az alap színeket.
- Másodlagos gomb feliratának színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma gombfelirat-színe marad. Egyedi színnél a gomb szövege és ikonja ezt a színt kapja. A Default visszaállítása gomb visszaállítja az alap színeket.
Szövegek
Szövegek és leírások
Címek, leírások, feliratok és egyéb szöveges tartalmak.
- CímRövid szöveg vagy felirat.
- LeírásFormázott, Tiptap-alapú tartalom. Kompakt formázott leírás: félkövér, dőlt, aláhúzás, felsorolás, számozott lista és link meglévő blokkhoz vagy egyedi URL-hez.
- Gomb- vagy linkfeliratRövid szöveg vagy felirat. Opcionális: ha a feliratot üresen hagyod, a teljes gomb vagy CTA nem jelenik meg a frontoldalon.2 hasonló mező
- Kiemelt feliratRövid szöveg vagy felirat. Opcionális: ha nincs kitöltve, nem jelenik meg.
- Rövid leírásRövid szöveg vagy felirat. Opcionális: ha nincs kitöltve, nem jelenik meg.
Videó
Videó
Videófájlok és a videó megjelenítéséhez tartozó beállítások.
- Videó borítóképe (poster)Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. A videó betöltéséig ez a kép látható. Mobilon különösen fontos, mert a videó késleltetve indul. A kép törölhető, új képpel lecserélhető, vagy visszaállítható az alapképre. Feltöltéskor a rendszer automatikusan reszponzív WEBP és – szervertámogatás esetén – AVIF változatokat készít.
- Poster alt szövegRövid szöveg vagy felirat. Akadálymentesítési és SEO célú leírás a videó borítóképéhez.
- VideóVideófájl feltöltése vagy cseréje. MP4, WEBM vagy OGV videó tölthető fel. FFmpeg esetén a rendszer némított és hangos optimalizált MP4 és WebM lépcsőket is készít, így a Videó némítása kapcsoló később újrafeldolgozás nélkül válthat kimenetet. A videó törölhető vagy új videófájllal lecserélhető.
- Videó folyamatos ismétlése (loop)Be- és kikapcsolható funkció. Bekapcsolva a videó a végére érve automatikusan újraindul.
- Videó némításaBe- és kikapcsolható funkció. Alapértelmezetten bekapcsolt, mert az automatikus lejátszás böngészőkben csak némított videónál megbízható. Bekapcsolva a kisebb, hang nélküli optimalizált fájl töltődik be; kikapcsolva a hangos optimalizált fájl jelenik meg vezérlőkkel, automatikus indulás nélkül.
- Videó illesztéseElőre meghatározott lehetőségek közül választható beállítás. Cover módban a videó kitölti a helyet, contain módban a teljes videó látszik, akár üres peremekkel.
- Videó pozíciójaElőre meghatározott lehetőségek közül választható beállítás. A videó fontos részének pozicionálása. Cover módban különösen hasznos.
Hivatkozások
Gombok és hivatkozások
Belső és külső linkek, gombcélok és kapcsolódó feliratok.
- Hivatkozás URLBelső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. Használható #blokk-azonosító, /belső-url, https://, mailto: vagy tel: érték.2 hasonló mező
CTA és bizalom
CTA és bizalom
A blokk ehhez a tartalmi csoporthoz tartozó beállításai.
- Kockázatcsökkentő sor megjelenítéseBe- és kikapcsolható funkció. Bekapcsolva a CTA-gombok alatt egy rövid, szerkeszthető bizalmi sor jelenik meg. A teljes képes carouselben a slide szövege alatt látható.
- Kockázatcsökkentő sorRövid szöveg vagy felirat. Rövid, egy soros bizalmi üzenet. Kikapcsolt megjelenítésnél nem kerül ki a publikus oldalra.
Eszközmegjelenés
Eszközmegjelenés
A blokk ehhez a tartalmi csoporthoz tartozó beállításai.
- Keret stílusaElőre meghatározott lehetőségek közül választható beállítás. Laptop és mobil keretes megjelenésnél három beépített keret közül választhatsz: Modern, Elegáns vagy Technikai.
- Egyedi keretgrafikaKép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Normál esetben a Keret stílusa mezőt használd. Laptop módban a modern laptopkeret, mobil módban a modern mobilkeret az alapértelmezett. Ide csak akkor tölts fel képet, ha a három beépített kerettől eltérő, egyedi SVG/PNG keretet szeretnél laptophoz vagy mobilhoz. A kép törölhető, új képpel lecserélhető, vagy visszaállítható az alapképre. Feltöltéskor a rendszer automatikusan reszponzív WEBP és – szervertámogatás esetén – AVIF változatokat készít.
- Keret színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. A Modern, Elegáns és Technikai beépített laptop- és mobilkeretnél érvényes. Default állapotban nincs egyedi szín, ilyenkor a kiválasztott gyári keretgrafika jelenik meg.
- Kiemelt felirat elrejtése mobilonBe- és kikapcsolható funkció. Alapértelmezetten a kiemelt felirat és rövid leírás mobilon is megjelenik a videón. Bekapcsolva a teljes kis szöveges box mobilon elrejtésre kerül, desktopon továbbra is látható marad.
Mobil videó
Mobil videó
A blokk ehhez a tartalmi csoporthoz tartozó beállításai.
- Mobil videó borítóképe (poster)Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. A külön mobil videó borítóképe. Ha üres, a rendszer a normál videó poster képét használja. Álló mobil videóhoz álló, mobil képarányú borítót érdemes feltölteni. A kép törölhető, új képpel lecserélhető, vagy visszaállítható az alapképre. Feltöltéskor a rendszer automatikusan reszponzív WEBP és – szervertámogatás esetén – AVIF változatokat készít.
- Mobil poster alt szövegRövid szöveg vagy felirat. Akadálymentesítési és SEO célú leírás a mobil videó borítóképéhez.
- Mobil videóVideófájl feltöltése vagy cseréje. Bekapcsolt Desktop és mobil nézet esetén ez jelenik meg mobilon, mobilkeretben. Ide álló vagy mobil képarányú MP4, WEBM vagy OGV videót érdemes feltölteni. Ha üres, mobilon is a desktop videó kerül használatra mobilkeretben. A videó törölhető vagy új videófájllal lecserélhető.
- Mobil videó folyamatos ismétlése (loop)Be- és kikapcsolható funkció. A külön mobil videó saját loop beállítása. Bekapcsolva a mobil videó a végére érve automatikusan újraindul.
- Mobil videó némításaBe- és kikapcsolható funkció. A külön mobil videó saját némítási beállítása. Bekapcsolva automatikusan, hang nélkül indulhat; kikapcsolva vezérlőkkel jelenik meg és nem indul automatikusan.
- Mobil videó illesztéseElőre meghatározott lehetőségek közül választható beállítás. Cover módban a mobil videó kitölti a mobilkeret kijelzőjét, contain módban a teljes mobil videó látszik, akár üres peremekkel.
- Mobil videó pozíciójaElőre meghatározott lehetőségek közül választható beállítás. A mobil videó fontos részének külön pozicionálása. Cover módban különösen hasznos álló videóknál.
Mozgás és megjelenés
Animáció
A blokk belépési animációja külön kapcsolható. Az első két aktív helyen választható LCP-védelem csak a frontend futást függeszti fel, az adminban elmentett animációt, effektet és sebességet nem törli. A blokk harmadik vagy későbbi helyre mozgatva automatikusan újra animálódik. A rendszer kompozit tulajdonságokra épülő effektet használ, és tiszteletben tartja a csökkentett mozgás beállítást.
- Kapcsold be vagy ki az animációt az adott blokknál. A fejléc badge-e már összecsukott állapotban is mutatja az animáció állapotát.
- Válaszd ki az effektet, a sebességet, a késleltetést és – ahol elérhető – az elemek lépcsőzetes sorrendjét.
- Az első két aktív blokknál az LCP-védelem az ajánlott állapot. Sorrendváltáskor a rendszer Igen / Nem kérdéssel felajánlja, de az első két blokk Animáció részében később manuálisan is be- vagy kikapcsolható. Az animáció adminbeállítása minden esetben megmarad; harmadik vagy későbbi helyen automatikusan újra működik, és az „Animáció aktív” badge jelenik meg.
- Az animáció nem változtatja meg a blokk tartalmát vagy sorrendjét, csak a megjelenés módját.
Használati javaslatok
- Desktopra fekvő, laptopkerethez igazított videót, mobilra álló videót használj; így a látogató mindig a képernyőméretéhez illeszkedő bemutatót látja.
- A főcím legyen konkrét, a leírás pedig legfeljebb néhány rövid mondat.
- A nyitóképet optimalizáld webre, mert ez gyakran az oldal LCP-eleme.
- Az elsődleges gomb a legfontosabb üzleti célra vezessen.