# Képes tartalmi kártyák – Képes tartalmi kártyák

> Több kép + szöveg kártya váltott desktop elrendezéssel és mobilbarát egymás alatti megjelenéssel.

- **Eredeti HTML oldal:** [https://weboldal-berles.hu/tudasbazis/oldalepito/kepes-tartalmi-kartyak-blokk-alap](https://weboldal-berles.hu/tudasbazis/oldalepito/kepes-tartalmi-kartyak-blokk-alap)

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

## Képes tartalmi kártyák – Képes tartalmi kártyák

A kártyák desktopon két oszlopban, választható vagy automatikusan váltott képpozícióval jelennek meg. Mobilon a kép a szöveg fölé kerül, a kártyák alatt pedig opcionális szerkeszthető információs blokk is használható.

### Mire érdemes használni?

Képpel támogatott, egymásra épülő tartalmi részekhez.

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

- Ismételhető kép + szöveg kártyák címmel, leírással és opcionális gombbal.
- Desktop képpozíció: bal, jobb vagy automatikus váltás.
- Mobilon automatikus egymás alatti elrendezés kézi sortörések nélkül.
- Cover vagy contain képmegjelenítés és egységes képarány.
- Ismételhető kártyák üresen maradt törölt elem kiszűrésével.
- Kép, ALT, felső címke, cím, formázott leírás és opcionális gomb.
- Cover/contain képmód és 16:9, 4:3 vagy 1:1 képarány.
- Opcionális alsó TipTap tartalom fontos megjegyzésekhez vagy feltételekhez.
- Mobilbarát automatikus sorrend.

Megjelenés

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

A blokk elrendezése, igazítása és vizuális működése.
- **Megjelenés**Előre meghatározott lehetőségek közül választható beállítás. A kártyák vizuális hangsúlyát állítja.
- **Kártyák közötti térköz**Előre meghatározott lehetőségek közül választható beállítás.
- **Képarány**Előre meghatározott lehetőségek közül választható beállítás. Egységes képarányt ad a kártyák képeinek.

Blokk fejléc

#### Blokk fejléc

A szakasz főcíme, alcíme és bevezető szövege.
- **Felső kis címke**Rövid szöveg vagy felirat.
- **Blokk címe**Rövid szöveg vagy felirat. Rövid, konkrét cím, amely összefogja az alatta lévő képes kártyákat.
- **Rövid bevezető**Formázott, Tiptap-alapú tartalom. Opcionális bevezető. Üresen hagyva nem jelenik meg.

Alsó tartalom

#### Alsó tartalom

A blokk ehhez a tartalmi csoporthoz tartozó beállításai.
- **Alsó szerkeszthető tartalom megjelenítése**Be- és kikapcsolható funkció. Bekapcsolva a kártyák alatt egy külön, TipTap editorral szerkeszthető információs tartalom jelenik meg.
- **Alsó tartalom**Formázott, Tiptap-alapú tartalom. Opcionális megjegyzés vagy kiegészítő szöveg a kártyák alatt. Csak akkor jelenik meg, ha az alsó tartalom kapcsoló aktív.

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

#### Képes tartalmi kártyák

Kép + szöveg párokhoz. Desktopon a kép balra vagy jobbra kerülhet, mobilon minden kártya rendezett egymás alatti elrendezésre vált.

maximum 12 elem.

##### Egy „Kártya” szerkeszthető adatai

- **Ké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.
- **Kép helye desktopon**Előre meghatározott lehetőségek közül választható beállítás. Mobilon a kép mindig a szöveg fölé kerül.
- **Felső kis címke**Rövid szöveg vagy felirat.
- **Cím**Rövid szöveg vagy felirat.
- **Leírás**Formázott, Tiptap-alapú tartalom.
- **Gomb felirata**Rövid szöveg vagy felirat.
- **Gomb hivatkozása**Belső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás.
- **Felső kis címke színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Cím színe**Egyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- **Gomb felirata 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

- Több, képpel illusztrált magyarázó szakaszhoz ezt használd a kézi sortörések helyett.
- A kártyák alatti alsó tartalmat csak rövid, tisztázó megjegyzéshez használd, ne fő üzenetként.
- Olyan tartalomhoz használd, ahol a Tartalomszerkesztőben már túl sok kézi sortörésre lenne szükség.
- A kártyák szöveghossza legyen közel azonos, hogy desktopon kiegyensúlyozott maradjon a ritmus.

## Kulcsszavak

- Képes tartalmi kártyák
- Képes tartalmi kártyák
- kepes-tartalmi-kartyak-blokk
- alap
- blokk változat