# Hero blokk – Teljes szélességű illusztratív referencia carousel

> Ügyfélspecifikus, teljes szélességű háttérképes referencia hero carousel bal és jobb oldali élő preview kártyákkal, slide/scroll váltással.

- **Eredeti HTML oldal:** [https://weboldal-berles.hu/tudasbazis/oldalepito/hero-blokk-teljes-szelesseg-illusztrativ-carousel](https://weboldal-berles.hu/tudasbazis/oldalepito/hero-blokk-teljes-szelesseg-illusztrativ-carousel)

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

## Hero blokk – Teljes szélességű illusztratív referencia carousel

A teljes hero hátterében slide/scroll váltású referencia carousel jelenik meg, bal oldali overlay panellel és bal/jobb oldali élő preview kártyákkal. A slide teljes felülete valódi hivatkozásként kattintható. Új, üres blokknál 3 minta referencia slide indul külön desktop és mobil képpel.

### Mire érdemes használni?

Ügyfélspecifikus, teljes szélességű referencia herohoz, amikor a nyitó szakasz hátterét valós referencia-képek adják.

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.
- Teljes szélességű háttérképes referencia slide-ok.
- Bal és jobb oldali, élő adatokból frissülő ghost preview kártya.
- Slide-onként külön desktop kép, opcionális mobil kép, ALT, weboldal cím, címke, cím, leírás, link, gombfelirat és tagek.
- Fade helyett Bootstrap slide/scroll jellegű váltás.
- Az első slide LCP-barát, a további slide-ok lazy betöltést kapnak.

Megjelenés

#### Elrendezés és megjelenés

A blokk elrendezése, igazítása és vizuális működése.
- **Szöveg igazítása**Előre meghatározott lehetőségek közül választható beállítás. A teljes szélességű referencia hero overlay tartalmának vízszintes igazítása.

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 slide overlay szövege alatt egy rövid, szerkeszthető bizalmi sor jelenik meg.
- **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.

Bővíthető elemek

### Ismételhető tartalmi elemek

Az elemek hozzáadhatók, törölhetők és a fogantyúval átrendezhetők. A sorrend a nyilvános oldalon is érvényesül.

Ismételhető elem

#### Teljes szélességű referencia slide-ok

Teljes szélességű, háttérképes, kattintható referencia hero carousel. Minden slide-hoz külön desktop és mobil kép, title bar felirat, címke, cím, leírás, link és tagek adhatók meg; a váltás slide/scroll jellegű, nem fade. Ha nincs külön mobil kép, a rendszer a desktop képre esik vissza. Új, üres blokknál 3 minta referencia slide jelenik meg, hogy a változat azonnal látható tartalommal induljon.

maximum 20 elem.

##### Egy „Referencia” szerkeszthető adatai

- **Desktop háttérkép / referencia kép (16:9)**Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Javasolt méret: 1920×1080 px vagy legalább 1600×900 px. Teljes szélességű hero esetén ez adja a desktop LCP-képet; a feltöltött képet a rendszer ehhez a blokkhoz külön kezeli.
- **Mobil háttérkép / referencia kép (9:16)**Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Javasolt méret: 1080×1920 px vagy legalább 900×1600 px. Mobilon ezt szolgálja ki a <picture> elem; a feltöltött mobilképet a rendszer szintén ehhez a blokkhoz külön kezeli.
- **Régi / közös fallback kép**Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Kompatibilitási mező régi adatokhoz. Új slide-oknál a Desktop/Mobil képet használd.
- **Kép alt szövege**Rövid szöveg vagy felirat.
- **Weboldal címe a felső sávban**Rövid szöveg vagy felirat.
- **Címke**Rövid szöveg vagy felirat.
- **Slide címe**Rövid szöveg vagy felirat.
- **Rövid leírás**Többsoros szövegmező.
- **Weboldal linkje**Belső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás.
- **Gomb / link felirata**Rövid szöveg vagy felirat.
- **Tagek (soronként vagy vesszővel)**Többsoros szövegmező.
- **Új ablakban nyíljon**Be- és kikapcsolható funkció.
- **Weboldal címe a felső sávban színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Címke színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Slide címe színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Rövid leírás színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Gomb / link felirata színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Tagek (soronként vagy vesszővel) színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.

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 16:9-es, 1920×1080 px körüli képet használj; mobilra külön 9:16-os, 1080×1920 px körüli képet adj meg, hogy ne kelljen rosszul vágni. A feltöltött képeket a rendszer ehhez a blokkhoz külön kezeli és optimalizálja.
- A slide leírása maradjon rövid, mert a teljes képen overlay panelként jelenik meg.
- 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
- Teljes szélességű illusztratív referencia carousel
- hero-blokk
- teljes-szelesseg-illusztrativ-carousel
- blokk változat