# Divi 5 modulok: halmozódó kártya és lépéssor

> A Supreme Stacking Card (gyermek elemekkel) és a Supreme Step Flow modul beállításai a Divi 5 Visual Builderben.

Két kártyás modul a **Divi Supreme** kategóriából. Mindkettőt a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod. A beállítások feliratai a builderben angolul maradnak.

## Halmozódó kártya (Supreme Stacking Card)

Kártyák, amelyek görgetéskor egymásra rakódnak. Szülő és gyermek elemekből áll: a szülő a **Supreme Stacking Card**, a kártyák a gyermek elemek. A gyermeket külön nem teheted az oldalra.

1. Add hozzá a **Supreme Stacking Card** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön állítsd be a **Card Direction**, az **Offset** és a **Disable Stacking Offset** mezőt.
3. Vedd fel a kártyákat (gyermek elemek).
4. A **Design** fülön finomítsd a színeket, a betűket és a térközöket.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Szülő: Content

| Beállítás | Mit csinál |
|---|---|
| **Card Direction** | A kártyák halmozódásának iránya. |
| **Offset** | A halmozás kezdő eltolása (függőleges). |
| **Offset** (vízszintes) | A kezdő vízszintes eltolás. |
| **Disable Stacking Offset** | Kikapcsolja a halmozási eltolást. |
| **Animation Type** | A kártyák animációja. |

### Szülő: Design

| Beállítás | Mit csinál |
|---|---|
| **Layout** | A kártya elrendezése. |
| **Order Alignment** | A tartalom sorrendje. |
| **Horizontal Content Alignment** | A tartalom vízszintes igazítása. |
| **Image Width** | A kép szélessége. |
| **Icon Color** | Az ikon színe. |
| **Icon Bg Color** | Az ikon háttérszíne. |
| **Icon Font Size** | Az ikon mérete. |
| **Icon Alignment** | Az ikon igazítása. |
| **Button Alignment** | A gomb igazítása. |

### Gyermek: egy kártya

| Beállítás | Mit csinál |
|---|---|
| **Image** | A kártya képe. |
| **Title** | A kártya címe. |
| **Content** | A kártya szövege. |
| **Use Icon** | Bekapcsolva ikont használsz. |
| **Icon** | A kiválasztott ikon. |
| **Button Text** | A gomb felirata. Üresen nincs gomb. |
| **Button URL** | A gomb címe. |
| **Url Opens** | Azonos vagy új ablakban nyíljon a link. |

A gyermek **Design** fülén: **Image Width**, **Background**, **Icon Color**, **Icon Bg Color**, **Icon Font Size**, **Icon Alignment**, **Button Alignment**. Ezek csak az adott kártyára vonatkoznak.

## Lépéssor (Supreme Step Flow)

Lépéssort (folyamatábrát) készíthetsz kártyákból. A lépések egyszerűen hozzáadhatók, törölhetők és átrendezhetők, és kész sablonokból is indulhatsz.

1. Add hozzá a **Supreme Step Flow** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön töltsd ki a **Title**, **Badge**, **Content** mezőt.
3. Szükség esetén kapcsold be a gombot és az irányjelző nyilat.
4. A **Design** fülön állítsd be az ikon, a jelvény és a gomb megjelenését.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Title** | A lépés címe. | |
| **Badge** | A kártya tetején megjelenő jelvény szövege. | |
| **Use Description** | Megjeleníti vagy elrejti a leírást. | be |
| **Content** | A leírás szövege. | |
| **Button Text** | A gomb felirata. | |
| **Button Link URL** | A gomb címe. | |
| **Button Link Target** | Azonos vagy új fülön nyíljon a link. | ki |
| **Show Direction** | Irányjelző nyilat mutat. | ki |
| **Type** | A nyíl típusa: az alapértelmezett nyíl stílusa a **Design** fülön állítható, de ikont is választhatsz a Divi ikonkönyvtárából, vagy saját képet tölthetsz fel. | default |
| **Icon** (nyíl) | A nyílhoz választott ikon. | |
| **Image** (nyíl) | A nyílhoz feltöltött kép. | |
| **Use Icon** | Kép helyett ikont használsz a kártyán. | ki |
| **Icon** | A kártya ikonja. | |
| **Image** | A kártya képe. | |

### Design

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Icon Color** | Az ikon színe. | |
| **Background Color** | Az ikon vagy kép háttérszíne. | |
| **Font Size** | Az ikon mérete. | 96px |
| **Alignment** | Az ikon vagy kép igazítása. | center |
| **Width** | A kép szélessége. | 50% |
| **Width** (nyílkép) | A nyílhoz használt kép szélessége. | 100% |
| **Font Size** (nyíl) | A nyíl ikon mérete. | 56px |
| **Color** (nyíl) | A nyíl színe. | #dddddd |
| **Style** | A nyíl vonalstílusa. | solid |
| **Width** (nyíl) | A nyíl szélessége. | 100px |
| **Offset Top** / **Offset Left** | A nyíl eltolása. | |
| **Position** | A jelvény helye. | top_right |
| **Use Custom Position** | Egyedi jelvényhelyzetet engedélyez. | ki |
| **Left Position** / **Top Position** | Az egyedi jelvényhelyzet értékei. | 0% |
| **Background Color** (jelvény) | A jelvény háttérszíne. | |
| **Button Alignment** | A gomb igazítása. | |

## Tippek

- Először a **Content** fület töltsd ki, utána a **Design** fület.
- A méreteknél használd a tablet és telefon nézet külön értékeit.
- A halmozódó kártya gyermek elemeit mindig a szülőből add hozzá.