# Divi 5 modulok: ikonos elválasztó és ikonlista

> A Divi 5 Visual Builder ikonos elválasztó (Icon Divider) és ikonlista (Icon List) moduljának beállításai, a lista elemeivel együtt.

Ebben a fejezetben két ikonos modult találsz. Mindkettő a **Divi Supreme** kategóriában van a modulválasztóban, és a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod őket. A beállítások feliratai a builderben angolul maradnak. A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) ott érhetők el, ahol a modul támogatja őket.

## Ikonos elválasztó (Supreme Icon Divider)

Elválasztó vonal, amelynek közepére ikont vagy képet tehetsz. Sok vonalstílus közül választhatsz, és az ikont igazíthatod is.

1. Add hozzá a **Supreme Icon Divider** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön döntsd el, ikont vagy képet használsz.
3. A **Design** fülön állítsd be az ikon és a vonal megjelenését.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Use Icon** | Bekapcsolva az alatta kiválasztott ikont használja, kikapcsolva a képet. |
| **Image** | A vonal mellett megjelenő kép. |
| **Icon** | A megjelenő ikon. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Icon Color** | Az ikon színe. |
| **Circle Icon** | Az ikon körben jelenik meg. |
| **Circle Color** | A kör színe. |
| **Show Circle Border** | A kör szegélyének megjelenítése. |
| **Circle Border Color** | A kör szegélyének színe. |
| **Use Icon Font Size** | Bekapcsolva külön ikonméretet adhatsz meg. |
| **Icon Font Size** | Az ikon mérete. |
| **Alignment** | Az ikon igazítása. |
| **Color** | Az elválasztó vonal színe. |
| **Divider Style** | A vonal stílusa. |
| **Divider Position** | A vonal helye az ikonhoz képest. |
| **Image Width** | A kép szélessége. |
| **Divider Weight** | A vonal vastagsága. |
| **Icon Gap** | A rés az ikon és a vonal között. |

## Ikonlista (Supreme Icon List)

A Divi Blurb modulhoz hasonló, de rendezettebb lista, amelynek minden elemén ikon vagy kép látszik. A modul szülő és gyermek elemekből áll: a szülő a **Supreme Icon List**, a lista sorai a gyermek elemek. A sorokat mindig a szülő **Content** füléről add hozzá, gyermek elemet külön nem tehetsz az oldalra. Kezdj 3 és 6 elem között, és a közös stílust a szülőn finomítsd.

1. Add hozzá a **Supreme Icon List** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön vedd fel az első elemet, és töltsd ki a mezőit.
3. A **Design** fülön állítsd be a színeket, az ikonméretet és az elrendezést.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Szülő: Design

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Text Indent** | Térköz az ikonok és a szöveg között. | 5px |
| **Icon Color** | Az ikonok színe. | |
| **Icon Background Color** | Az ikonok háttérszíne. | |
| **Icon Gap Width** | Az ikon körüli rés szélessége. | |
| **Icon Padding** | Az ikon belső térköze. | |
| **Icon Font Size** | Az ikonok mérete. | 14px |
| **Image Background Color** | A képek háttérszíne. | |
| **Image Padding** | A képek belső térköze. | |
| **Image Width** | A képek szélessége. | 24px |
| **Layout** | A lista függőleges vagy vízszintes. | vertical |
| **Alignment** | A lista igazítása a modulon belül. | flex-start |
| **Vertical Alignment** | A lista függőleges igazítása. | center |
| **Direction** | Az irány: balról jobbra vagy jobbról balra. | ltr |
| **Space Between** | Az elemek közti távolság. | 0px |
| **Background Color** | A listaelemek háttérszíne. | |

### Gyermek elem: Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Text** | Az elem szövege. | Icon List Item |
| **Use Icon** | Ikon használata az alatta kiválasztott ikonnal. | be |
| **Icon** | A szöveg mellett megjelenő ikon. | |
| **Icon Color** | Az ikon színe. | |
| **Icon Background Color** | Az ikon háttérszíne. | |
| **Image** | Kép az ikon helyett. | |
| **Use Tooltip** | Buborék (tooltip) az elemhez. | ki |
| **Content** | A buborék szövege. | |

### Gyermek elem: Design

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Icon Color**, **Icon Background Color** | Csak erre az elemre érvényes ikonszín és háttér. | |
| **Icon Padding** | Az ikon belső térköze. | |
| **Icon Font Size** | Az ikon mérete. | 14px |
| **Image Background Color**, **Image Padding** | A kép háttere és belső térköze. | |
| **Image Width** | A kép szélessége. | 24px |
| **Placement** | A buborék helye az elemhez képest. | right |
| **Background Color** | A buborék háttérszíne. | |
| **Tooltip Max Width** | A buborék legnagyobb szélessége. | |

A gyermek elem **Design** beállításai felülírják a szülő közös beállításait, ha egy elemnek más megjelenés kell.