# Tartalom + kép blokk – Tartalom és kép blokk

> Tartalom + kép blokk választható változat.

- **Eredeti HTML oldal:** [https://weboldal-berles.hu/tudasbazis/oldalepito/tartalm-kep-blokk-kep-bal-tartalom-jobb](https://weboldal-berles.hu/tudasbazis/oldalepito/tartalm-kep-blokk-kep-bal-tartalom-jobb)

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

## Tartalom + kép blokk – Tartalom és kép blokk

A kép és tartalom sorrendje változtatható, a kép cover vagy contain módban jelenhet meg, és formázott második leírás is használható.

### Mire érdemes használni?

Szöveges magyarázat és kapcsolódó kép egyensúlyos bemutatására.

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

- Kép, ALT-szöveg, cím, leírások és két gomb kezelése.
- Kép bal/jobb oldali elhelyezése, cover/contain mód és cover képpozíció.
- Tiptap-alapú formázott második leírás képekkel, linkekkel és egyéb tartalommal.
- Kép, ALT és képpozíció.
- Cím, normál és formázott leírás.
- Két CTA-gomb.
- Kép/tartalom oldalcseréje.

Megjelenés

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

A blokk elrendezése, igazítása és vizuális működése.
- **Kép elhelyezése**Előre meghatározott lehetőségek közül választható beállítás. A kép és a szöveges tartalom sorrendjét állítja a blokkban.
- **Szöveg igazítása**Előre meghatározott lehetőségek közül választható beállítás. A cím, leírás és gombok igazítása a tartalmi oldalon.
- **Kép megjelenítése**Előre meghatározott lehetőségek közül választható beállítás. Cover esetén a kép kitölti a rendelkezésre álló területet, contain esetén a teljes kép látszik.
- **Kép pozíciója (cover)**Előre meghatározott lehetőségek közül választható beállítás. Csak a Kitöltés / vágás (cover) képmegjelenítésnél érvényes; contain esetén a teljes kép látszik.

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.
- **Leírás**Formázott, Tiptap-alapú tartalom. Alap formázott szövegszerkesztő: címsorok, félkövér/dőlt/aláhúzott szöveg, listák, idézet és igazítás.
- **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ő

Képek

#### Képek

Képfeltöltések, képleírások és megjelenési beállítások.
- **Kép**Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Képfeltöltéssel vagy útvonal megadásával módosítható. 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.
- **Kép alt szöveg**Rövid szöveg vagy felirat. Akadálymentesítési és SEO célú képleírás.

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ő

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

- A formázott második leírást csak akkor használd, ha valóban szükség van listára, linkre vagy összetettebb tördelésre.
- A kép közvetlenül támassza alá a mellette lévő szöveget.
- Contain módnál számolj a kép körüli üres térrel; cover módnál állítsd be a fontos képrész pozícióját.

## Kulcsszavak

- Tartalom + kép blokk
- Tartalom és kép blokk
- tartalm-kep-blokk
- kep-bal-tartalom-jobb
- blokk változat