# Divi 5 modulok: körös információs modul

> A Supreme Circle Info modul: elemek egy gyűrűn, a közepén az aktív elem részletei.

A **Supreme Circle Info** egy gyűrűnyi elemet tesz egy középső tartalompanel köré. A látogató kattintással vagy hoverrel kiválaszt egy elemet a gyűrűn, a közép pedig az elem részleteit mutatja: címet, leírást, képet vagy ikont, gombot, sőt shortcode-os elrendezést is. Akkor jó, ha összetartozó pontokat egy vizuális egységként akarsz megjeleníteni lista, harmonika vagy kártyasor helyett. A modul a **Divi Supreme** kategóriában van, és előbb be kell kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

## Mire használható

| Felhasználás | Hogyan |
|---|---|
| Csapatbemutató | Minden személy a gyűrűn (fotó vagy monogram), a közepén a bemutatkozás, a szerepkör és egy kapcsolati gomb. |
| Szolgáltatások, funkciók | A gyűrűn a név ikonnal, a közepén rövid leírás és „Tudj meg többet” gomb. |
| Folyamat, lépések | A lépések sorrendben a gyűrűn, a közepén az aktív lépés magyarázata. Automatikus lejátszással végig lehet vezetni a látogatót. |
| Termékjellemzők | Jellemzők a gyűrűn, a közepén részlet, kép és felhívás. |
| Márkaértékek | Pillérek (például Minőség, Gondoskodás, Újítás) a gyűrűn, a közepén az adott érték története. |
| Portfólió, kategóriák | Kategóriák vagy iparágak a gyűrűn, a közepén összefoglaló és link. Néhány csoporthoz való, nem sok tucat projekthez. |
| Mérföldkövek | Néhány mérföldkő (Indulás, Növekedés, Skálázás) a gyűrűn. Hosszú, dátumos idővonalhoz a Content Timeline való. |

Mikor ne használd: hosszú szövegekhez (inkább szöveg vagy harmonika), 10 elem fölött (a címkék ütköznek, inkább fül, karusszel vagy szűrhető galéria), ha a sorrend és a dátum fontosabb a kör motívumnál (Content Timeline), ha minden elemnek egyszerre kell látszania (kártyarács), vagy ha csak egy kép és szöveg kell (Card, Blurb vagy Text). Ideális mennyiség 3-8 rövid elem.

## Hozzáadás és első lépések

A modul szülő, a gyűrű elemei gyermek modulok (**Supreme Circle Info Child**). A gyermeket a szülő **Content** fülén veszed fel, önállóan nem teheted az oldalra.

1. Add hozzá a **Supreme Circle Info** modult.
2. A **Content** fülön az **Add New Item** gombbal vegyél fel 3-6 elemet.
3. Elemenként add meg a **Title** (a gyűrű gombjának felirata) értékét, kapcsold be a **Use Icon** beállítást és válassz ikont, vagy hagyd kikapcsolva és tölts fel **Image** képet.
4. A tartalomnál hagyd a **Content Type** értékét **Custom Content** állapotban, és töltsd ki a címet, a szöveget, valamint opcionálisan a **Button Text** és **Button Link URL** mezőt.
5. Pontosan egy elemen kapcsold be az **Active Item By Default** beállítást, hogy betöltéskor legyen mit mutatnia a középső panelnek.
6. A szülőn állítsd be a **Circle Size** értéket (vagy kapcsold be az **Auto Circle Size** beállítást), hogy a gyűrű beférjen az oszlopba.
7. Mentsd el, és nézd meg a nyilvános oldalon. A kör elrendezése ott pontos, a builder előnézete kis töréspontokon kissé eltérhet.

## Hogyan működik

### A gyűrű elemei

Minden gyermek egy gomb a gyűrűn, az elemek automatikusan, egyenletesen oszlanak el, szöget nem kell megadnod. A sorrendet a szülő elemlistájában húzással módosíthatod. A gyermek **Title** értéke a gomb felirata (ikonnal vagy képpel). A gyermek tartalmi mezői (cím, szöveg, média, gomb vagy shortcode) a középső panelen jelennek meg, ha az elem aktív. Az **Active Item By Default** csak egy elemen legyen bekapcsolva, különben az aktív állapotok ütközhetnek (szerkesztéskor a modul figyelmeztet).

### Működtetés: kattintás, hover, automatikus lejátszás

| Beállítás | Szerepe |
|---|---|
| **Trigger** | Az elem váltásának módja: **Click** (alapérték, érintőképernyőn és akadálymentességnél a legjobb) vagy **Hover** (asztali gépre való). |
| **Enable Autoplay** | Automatikusan végigmegy az elemeken. |
| **Speed** | Az elemek közti átmenet időtartama másodpercben (0,1-10 mp, alapból 1 mp). |
| **Delay** | Mennyi ideig marad aktív egy elem a továbblépésig, ezredmásodpercben (100-10000, alapból 3000). |

Az automatikus lejátszás közben a látogató továbbra is válthat kattintással vagy hoverrel. Mobilra inkább a kattintást használd, mert a hover érintőképernyőn másképp működik. Az olvashatósághoz 3000-5000 ms késleltetés jó.

### A kör mérete

| Beállítás | Szerepe |
|---|---|
| **Auto Circle Size** | A kör mérete a modul vagy az oszlop szélességéből adódik. Elrejti a fix méretet. |
| **Circle Size** | Fix átmérő pixelben (alapból 500px, 100-1200 px), eszközönként állítható. |
| **Design → Circle items → Circle Size** | A gyűrű egy gombjának átmérője (alapból 80px), nem a teljes köré. |

Kis képernyőn csökkentsd a **Circle Size** értékét (vagy használd az automatikus méretet), és kicsit az elemek méretét is, hogy a feliratok ne fedjék egymást. Rövid gombfeliratot használj.

### Tartalom animációja és shortcode

A szülő **Content Animation** beállítása adja meg, hogyan jelenjen meg a középső panel az aktív elem váltásakor (alapból **Fade In**). Van beúszás, pattogás, nagyítás, forgatás és más. A **None** azonnali cserét jelent.

Bonyolultabb elrendezéshez a gyermeknél állítsd a **Content Type** értékét **Shortcode** állapotra, és illessz be egy shortcode-ot (például Divi könyvtári elrendezését) a szöveges mezők helyett.

## Szülő: Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Enable Autoplay** | Automatikus váltás. Bekapcsolva megjelenik a **Speed** és a **Delay**. | ki |
| **Speed** | Az átmenet időtartama (0,1-10 mp). | 1s |
| **Delay** | Az aktív elem tartózkodási ideje (100-10000 ms). | 3000 |
| **Trigger** | Click vagy Hover. | click |
| **Auto Circle Size** | A méret a modul szélességéből adódik. | ki |
| **Circle Size** | A teljes kör fix átmérője. Auto méretnél rejtve. | 500px |
| **Content Animation** | A középső panel animációja váltáskor. | fadeIn |

## Szülő: Design

A Design fül kis kapcsolópaneleket használ (ikon vagy kép, normál vagy aktív állapot, burkoló, cím vagy leírás). Ezek csak azt döntik el, melyik mezők látszanak a builderben, a nyilvános oldalra nincs hatásuk.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Kör tároló szegélye és árnyéka | A fő kör alakú tároló szegélye és árnyéka. | |
| **Icon Size** (gyűrű) | A gyűrű ikonjainak mérete. | 16px |
| **Background Color**, **Color** (gyűrű ikon) | Az inaktív elemek ikonjának háttere és színe. | |
| **Active Background Color**, **Active Color** (gyűrű ikon) | Az aktív elem ikonjának háttere és színe. | |
| **Image Width** (gyűrű) | A gyűrű gombjaiban lévő képek legnagyobb szélessége (% vagy px). | 30% |
| **Circle Size** (elem) | Egy gyűrűgomb átmérője. | 80px |
| **Background Color**, **Text Color** (elem, normál) | Az inaktív gombok háttere és szövegszíne. | #444444, #ffffff |
| **Background Color**, **Text Color** (elem, aktív) | Az aktív gomb háttere és szövegszíne. | |
| Gyűrűgomb címének betűtípusa | A gyűrű feliratainak tipográfiája. | 14px, középre igazított |
| **Content padding** | A középső panel belső térköze. | 10px 20px |
| Tartalomcím betűtípusa | A középső panel címe (címsorszint választható). | h4 |
| Tartalomleírás betűtípusa | A középső panel szövege. | 14px, középre igazított |
| **Icon Size** (tartalom) | A középső panel ikonjának mérete. | 16px |
| **Background Color**, **Color** (tartalom ikon) | A középső ikon háttere és színe. | |
| **Image Width** (tartalom) | A középső panel képének szélessége. | 30% |
| **Button** | A középső panel gombjának Divi gombstílusa. | egyedi stílus ki |
| **Button Alignment** | A gomb vízszintes igazítása, ha az egyedi gombstílus ki van kapcsolva. | |

A gyűrű és a középső média külön beállítást kap, a két **Image Width** nem azonos. Az aktív és normál színek között legyen jól látható különbség, hogy a látogató lássa, melyik elem van kiválasztva. A szokásos Divi csoportok (háttér, méretezés, térköz, szegély, árnyék, szűrők, átalakítás, animáció) a modul burkolóján is elérhetők.

## Gyermek elem (Circle Info Child): Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Title** | A gyűrű gombjának felirata. | Title |
| **Use Icon** | Be: ikon a gyűrűn. Ki: feltöltött kép. | ki |
| **Icon** | A gyűrű gombjának ikonja. | |
| **Image** | A gyűrű gombjának képe. | |
| **Active Item By Default** | Az elem betöltéskor aktív. Csak egy elemen kapcsold be. | ki |
| **Content Type** | **Custom Content** (cím, szöveg, média, gomb) vagy **Shortcode**. | content |
| **Shortcode** | A középső panel shortcode-ja, ha a típus **Shortcode**. | |
| **Title** (tartalom) | A középső panel címe. | Your Title Goes Here |
| **Content** | A középső panel szövege. | |
| **Use Icon** (tartalom), **Icon** | Ikon a középső panelen. | ki |
| **Image** (tartalom) | Kép a középső panelen, ha az ikon ki van kapcsolva. | |
| **Button Text** | A középső gomb felirata. Üresen nincs gomb. | |
| **Button Link URL** | A gomb linkje. | |
| **Button Link Target** | Ugyanabban az ablakban vagy új lapon nyílik. | |

A gyermek **Design** fülén ugyanazok a mezők felülírják a szülő értékeit, csak az adott elemre: gyűrűgomb színei, ikon- és képméret, a középső média és a gomb igazítása. Közös stílushoz a szülő Design fülét használd.

## Példák

**Funkciók bemutatása.** Négy gyermek: „Gyors”, „Biztonságos”, „Rugalmas”, „Támogatott”. Ikonok a gyűrűn, a közepén rövid cím, bekezdés és „Tudj meg többet” gomb. A **Trigger** legyen **Click**, az automatikus lejátszás ki (főoldali hősképnél be, 4000 ms késleltetéssel). Az aktív elemnek legyen márkaszíne, a többi legyen semleges szürke.

**Lépések.** Három-öt elem „1”, „2”, „3” (vagy rövid lépésnév) címmel. A közepén a lépés leírása, opcionálisan gomb a kapcsolat- vagy regisztrációs oldalra. Az **Active Item By Default** csak az 1. lépésen legyen bekapcsolva.

**Reszponzív beállítás.** A **Circle Size** mezőnél kapcsold be az eszközönkénti szerkesztést, és telefonra adj kisebb értéket (vagy használd az **Auto Circle Size** beállítást). Rövidítsd a gyűrű feliratait mobilra, és mindig a nyilvános oldalon ellenőrizd.