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

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.