# Kártyás blokk – 4 oszlopos előnyblokk, bővíthető carousel

> Kártyás blokk választható változat.

- **Eredeti HTML oldal:** [https://weboldal-berles.hu/tudasbazis/oldalepito/usp-blokk-negy-oszlopos-carousel](https://weboldal-berles.hu/tudasbazis/oldalepito/usp-blokk-negy-oszlopos-carousel)

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

## Kártyás blokk – 4 oszlopos előnyblokk, bővíthető carousel

Bővíthető carousel témaszínű gradiens csempékkel, amely a képernyőmérethez igazodó számú elemet mutat. Elemenként választható ikonos vagy képes kártya, opcionális szöveges kártyalink; képes módban Borító vagy Teljes kép illesztés, valamint „Nincs link” vagy teljes csempehivatkozás állítható.

### Mire érdemes használni?

Négy vagy több előny bemutatására, amikor desktopon több elem látszódjon, mobilon pedig lapozható maradjon.

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

- Címek, leírások, ikonok és ismételhető kártyák kezelése.
- Kártyánként opcionális szöveges link jobbra nyíllal; a link célja meglévő blokkot tartalmazó listából, horgonyból vagy egyedi URL mezőből választható.
- Három- és négyoszlopos, carousel, kártyás és számozott változat.
- Az elemek sorrendje módosítható, új elem hozzáadható vagy törölhető.
- Ismételhető carousel elemek.
- Ikon vagy kártyakép, cím és leírás.
- Opcionális szöveges kártyalink jobbra nyíllal.
- Borító vagy automatikus magasságú Teljes kép illesztés.
- Képes csempénél a teljes képes csempe linkelése megmarad: Nincs link vagy teljes kártyára kattintható URL.
- Lapozható, reszponzív megjelenés és blokk alatti CTA-gomb.

Gombok megjelenése

#### Gombok megjelenése

A gombok láthatósága, színei és megjelenési módja.
- **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 elsődleges gombszíne marad.
- **Gomb feliratszí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.

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**Többsoros szövegmező.

Gomb

#### Gomb

A kiemelt műveleti gomb felirata és hivatkozása.
- **Blokk alatti gomb hivatkozása**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. A gomb csak akkor jelenik meg, ha a felirat is ki van töltve.
- **Blokk alatti gomb felirata**Rövid szöveg vagy felirat. Üresen hagyva a blokk alatti középre rendezett gomb nem jelenik meg.

Ikonok

#### Ikonok

A blokkban megjelenő ikonok kiválasztása és beállítása.
- **Ikon class**Bootstrap ikon választása az ikonválasztóból vagy class megadásával. Bootstrap Icons class, például: bi bi-star-fill Bootstrap Icons class kézzel is megadható, vagy kiválasztható az ikonválasztóból.

2 hasonló mező

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

#### Carousel elemek

Desktopon négy elem látszik, az ötödik elemtől a blokk automatikusan lapozható. Elemenként ikonos vagy képes kártya választható; minden elemhez opcionális szöveges hivatkozás adható meg jobbra nyíllal, képes módban pedig a meglévő teljes csempehivatkozás is megmarad.

minimum 1 elem, maximum 30 elem.

##### Egy „Előny” szerkeszthető adatai

- **Megjelenés típusa**Előre meghatározott lehetőségek közül választható beállítás. Ikonos módban a kártya ikonja jelenik meg. Képes módban a kártya tetején teljes szélességű kép látszik.
- **Ikon**Bootstrap ikon választása az ikonválasztóból vagy class megadásával.
- **Kártyakép**Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít.
- **Kép alt szövege**Rövid szöveg vagy felirat.
- **Kép megjelenése**Előre meghatározott lehetőségek közül választható beállítás. Borító módban a kép kitölti a képterületet, szükség esetén vágással. Teljes kép módban a teljes kép látszik, automatikus magassággal.
- **Teljes képes csempe URL / slug**Belső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. A „Nincs link” választásnál a csempe nem kattintható. Más célpont választásakor a teljes képes csempe linkként működik. Ez a meglévő képes csempe-linkelés megmarad; az új szöveges kártyalinktől külön működik, és a kártya alján külön szöveges link is megadható.
- **Cím**Rövid szöveg vagy felirat.
- **Leírás**Többsoros szövegmező.
- **Kártyalink szövege**Rövid szöveg vagy felirat. Opcionális szöveges link a kártya alján, például: Megnézem, Miért más? vagy Hogyan segítünk?
- **Hivatkozás**Belső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. Válassz meglévő blokkot a listából, vagy adj meg egyedi URL-t, horgonyt, e-mailt vagy telefonszámot. A szöveges link csak akkor jelenik meg, ha a link szövege és a hivatkozás is ki van töltve.
- **Külső link új ablakban nyíljon**Be- és kikapcsolható funkció. Csak külső http(s) hivatkozásoknál érvényes. Belső blokkhorgonyoknál és belső oldalaknál nincs hatása.
- **Cím színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Leírás 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

- Az elemek szöveghossza legyen hasonló, hogy a carousel ne ugráljon.
- Képes carouselben azonos képarányú képek adják a legegységesebb megjelenést.
- Egy elem egyetlen, jól érthető előnyt vagy lépést mutasson be.
- A kártyák szöveghossza legyen közel azonos.

## Kulcsszavak

- Kártyás blokk
- 4 oszlopos előnyblokk, bővíthető carousel
- usp-blokk
- negy-oszlopos-carousel
- blokk változat