# Hero blokk – Videó és tartalom

> Hero blokk osztott videóval, poster képpel és opcionális laptop-keretes megjelenéssel.

- **Eredeti HTML oldal:** [https://weboldal-berles.hu/tudasbazis/oldalepito/hero-blokk-video-tartalom](https://weboldal-berles.hu/tudasbazis/oldalepito/hero-blokk-video-tartalom)

Blokk-változat részletes súgó

## 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ódja**Elő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ézet**Be- é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íne**Egyedi 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íne**Egyedi 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íne**Egyedi 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íne**Egyedi 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ím**Rövid szöveg vagy felirat.
- **Leírás**Formá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 linkfelirat**Rö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 felirat**Rövid szöveg vagy felirat. Opcionális: ha nincs kitöltve, nem jelenik meg.
- **Rövid leírás**Rö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öveg**Rö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ása**Be- é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ése**Elő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ója**Elő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 URL**Belső 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ése**Be- é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ő sor**Rö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ílusa**Elő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 keretgrafika**Ké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íne**Egyedi 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 mobilon**Be- é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öveg**Rö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ása**Be- é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ése**Elő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ója**Elő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.

## Kulcsszavak

- Hero blokk
- Videó és tartalom
- hero-blokk
- video-tartalom
- blokk változat