# Divi 5 modulok: gombok és kártyák

> A Divi 5 Visual Builder dupla gombos, kártya és kártyakarusszel moduljának beállításai.

Ebben a fejezetben a Divi 5-ös Visual Builder gomb, kártya és kártyakarusszel moduljait találod. A modulok a **Divi Supreme** kategóriában vannak a modulválasztóban, és előbb be kell őket kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek. A beállításokon kívül minden modulon elérhetők a szokásos Divi csoportok (háttér, méretezés, térköz, szegély, árnyék, animáció).

## Gomb (Supreme Button)

Két gombot tesz egymás mellé, köztük választható elválasztó szöveggel. Mindkét gombhoz tíz hover animáció közül választhatsz, megnyithatja egy kép vagy videó lightboxát (YouTube, Vimeo, Dailymotion), és sokféle linktípust támogat: weboldal, e-mail, telefon, SMS, Facebook Messenger, Skype, WhatsApp és Telegram. Fő felhívások (belépés, kapcsolat, termékoldal) és összetartozó gombcsoportok kialakítására való. Ha elég egy sima szöveges link vagy a téma gombja, nem kell ez a modul.

Hozzáadás: a Divi 5 Visual Builderben válaszd a **Supreme Button** modult a **Divi Supreme** kategóriából. Állítsd be a két gomb szövegét és a linktípust, majd a **Design** fülön a színeket, a betűtípust és a térközt, végül mentsd el és nézd meg az oldalt a nyilvános felületen.

### Content

A következő beállítások mindkét gombnál megvannak (a **Button #1** és **Button #2** csoportban).

| Beállítás | Mit csinál |
|---|---|
| **Button #1 Text**, **Button #2 Text** | A gomb felirata. |
| **Link Type for Button #1** / **#2** | A link típusa: weboldal, letölthető fájl, e-mail, telefon, SMS, Messenger, Skype, WhatsApp vagy Telegram. |
| **Download File** | Feltöltött fájl, amely a kattintásra letöltődik. |
| **Email**, **CC**, **BCC**, **Subject**, **Message** | E-mail linknél a címzett, a másolatot és a rejtett másolatot kapók, az alapértelmezett tárgy és üzenet. |
| **Phone Number** | Telefonhívásnál a hívandó szám (főleg mobilon működik). |
| **Phone Number**, **Body Text** | SMS-nél a szám és az előre kitöltött üzenet. |
| **username** | Messengernél a személy, oldal vagy bot felhasználóneve. |
| **Username**, **Action Type** | Skype-nál a felhasználónév és a művelet típusa. |
| **Number**, **Number** (üzenet) | WhatsAppnál a szám és az alapértelmezett üzenet. |
| **Telegram Username**, **Message** | Telegramnál a felhasználónév és az alapértelmezett üzenet. |
| **Button #1 URL**, **Button #2 URL** | Weboldal linknél a cél. |
| **Url Opens** | A link ugyanabban az ablakban vagy új ablakban nyílik. |
| **Use Tooltip** | Tooltipet (buborékot) mutat a gombon. |
| **Tooltip Content** | A tooltip szövege. |
| **Show Arrow** | Nyíl a tooltipen. |
| **Size**, **Placement**, **Animations** | A tooltip mérete, helye és animációja. |
| **Open as Image Lightbox** | A gomb egy képet nyit lightboxban. Bekapcsolva az URL-beállítások nem érvényesülnek. |
| **Image** | A lightboxban megjelenő kép (feltöltés vagy URL). |
| **Open as Video Lightbox** | Videót nyit lightboxban: a videó linkjét a gomb URL-mezőjébe kell beírni (YouTube, Vimeo, Dailymotion). |
| **Separator Text** | A két gomb közötti elválasztó szöveg. Üresen hagyva nincs elválasztó. |
| **Make Separator Text Fullwidth On Mobile** | Mobilon az elválasztó szöveg teljes szélességű lesz. |
| **Remove Separator Text On Mobile** | Mobilon eltűnik az elválasztó szöveg. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Button Group Alignment** | A gombcsoport igazítása. |
| **Button Group Gap** | A gombok és az elválasztó szöveg közti távolság. |
| **Stack Buttons** | A gombok egymás alá kerülnek az adott töréspontnál. |
| **Full Width on Mobile** | Egymás alá rendezéskor a gombok a tároló teljes szélességét kitöltik. |
| **Close Color**, **Max Width** (gombonként) | A lightbox bezárógombjának színe és legnagyobb szélessége. |
| **Text Separator Gap** | Az elválasztó szöveg körüli távolság. |
| **Background Color** (gombonként) | A tooltip háttérszíne. |
| **Button Hover #1 Animation**, **Button Hover #2 Animation** | A gomb hover animációja. |
| **Button Icon Hover #1 Animation**, **Button Icon Hover #2 Animation** | A gomb ikonjának hover animációja. |

## Kártya (Supreme Card)

Szöveg, link, jelvény és kép egyetlen, szépen elrendezett kártyában. A képen hover nagyítás-animáció állítható. Szolgáltatás- és termékoldalakon a lényeges tudnivalók gyors átadására jó. Ha egy alap Divi modul is elég, azt használd.

Hozzáadás: **Supreme Card** a **Divi Supreme** kategóriából.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Title** | A kártya címe. |
| **Sub Title** | Az alcím. |
| **Content** | A kártya szövege. |
| **Image** | A kártya tetején megjelenő kép. |
| **Use Image as Background** | A képet háttérként használja, saját magassággal. |
| **Image Height** | A kép magassága. |
| **Background Image Size**, **Position**, **Repeat** | A háttérkép mérete, pozíciója és ismétlése. |
| **Background Image Animation** | A háttérkép animációja (például nagyítás hoverre). |
| **Animation Speed (in ms)** | Az animáció sebessége ezredmásodpercben. |
| **Badge Text** | A jelvény szövege. |
| **Use Icon**, **Icon** | A jelvényen megjelenő ikon. |
| **Badge Link URL** | Ha a jelvény link legyen, ide kerül a cél. Üresen nincs link. |
| **Badge Link Target** | A jelvény linkje ugyanabban az ablakban vagy újban nyílik. |
| **Button Text** | A gomb felirata. Üresen nincs gomb. |
| **Button URL**, **Url Opens** | A gomb linkje és a nyitás módja. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Layout** | A kártya elrendezése (kép felül vagy a szöveg mellett). |
| **Use Equal Height** | Ha a sornál bekapcsoltad az egyenlő magasságot, ezzel a modul is követi. |
| **Image Height** | A kép magassága egyenlő magasságnál, egymásra rakott elrendezésben. |
| **Width**, **Order Alignment** | Oldalt elhelyezett kép szélessége és sorrendje. |
| **Horizontal Content Alignment** | A tartalom vízszintes igazítása. |
| **Image Width**, **Image Alignment** | A kép szélessége és igazítása. |
| **Stretch Image** | A kép kitölti a kártya képterületét. Csak akkor érvényes, ha a kép nem háttérként szerepel. |
| **Image Overlay**, **Overlay Color** | Fedőréteg és színe, ha az egeret a kép fölé viszed. |
| **Use Icon**, **Icon Font Size**, **Overlay Icon Color**, **Icon Picker** | A fedőrétegen megjelenő ikon beállításai. |
| **Show Overlay On Hover** | A fedőréteg csak hoverre látszik. |
| **Position**, **Use Custom Position**, **Left Position**, **Top Position** | A jelvény helye, vagy saját pozíció bal és felső értékkel. |
| **Background Color** | A jelvény háttérszíne. |
| **Icon Color**, **Use Icon Font Size**, **Icon Font Size** | A jelvény ikonjának színe és mérete. |
| **Circle Icon**, **Circle Color**, **Show Circle Border**, **Circle Border Color** | Kör alakú ikonháttér, színe és szegélye. |

## Kártyakarusszel (Supreme Card Carousel)

Kártyák csúsztatható karusszelben: szöveg, link, jelvény és kép, kép- és videólightboxszal. A karusszel szinte minden része testre szabható, és tetszőleges számú karusszelt építhetsz vele. Portfólióhoz, termékekhez, főoldali bemutatókhoz való. Egyszerű dekorképhez az alap Divi kép modul könnyebb, nagyon sok képhez inkább galéria bővítmény való.

A modul szülő, a kártyák gyermek elemek (**Card Item**). A **Supreme Card Carousel** modult add hozzá a **Divi Supreme** kategóriából, a kártyákat a szülő **Content** fülén vedd fel (**Add New Item**). A gyermek modult nem teheted egyedül az oldalra. Érdemes 3-6 kártyával kezdeni, a közös stílust a szülőn állítsd be. A **Centered Mode** és a jelvény **Position** értéke a tablet és telefon fülön külön megadható, és ez a nyilvános oldalon is érvényesül.

### Szülő: Content

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Carousel Orientation** | A karusszel iránya. | horizontal |
| **Height** | A karusszel magassága. | 500px |
| **Carousel Effect** | A váltás effektje. | default |
| **Show Shadow** | Árnyék az effektnél. | ki |
| **Coverflow Rotate**, **Coverflow Depth** | Coverflow effektnél a forgatás és a mélység. | 30, 0 |
| **Carousel Direction** | Az irány (balról jobbra vagy fordítva). | ltr |
| **Centered Mode** | Az aktív kártya középen áll. Eszközönként állítható. | ki |
| **Slides To Show** | Egyszerre látható kártyák száma. | 3 |
| **Slides To Scroll** | Egy lépésben görgetett kártyák száma. | 1 |
| **Use Multiple Row**, **Row Per Slide** | Több soros elrendezés és a sorok száma. | ki, 1 |
| **Slider Speed** | A váltás sebessége. | 300 |
| **Autoplay** | Automatikus lejátszás. | be |
| **Autoplay Change Interval** | A váltások közti idő. | 3000 |
| **Autoplay Only On Viewport** | Csak akkor megy az automatikus lejátszás, ha a modul ekkora része látszik. | 80% |
| **Pause on Hover** | Egérrel fölé érve megáll. | ki |
| **Use Mouse Wheel** | Egérgörgővel is léptethető. | ki |
| **Spacing** | A kártyák közti távolság. | 15 |
| **Infinite looping** | Végtelen ismétlés. | be |
| **Infinite Smooth Scrolling** | Folyamatos, simított görgetés. | ki |
| **Auto Height** | A magasság a tartalomhoz igazodik. | be |
| **Equalize Card Heights** | Egyenlő kártyamagasság. | ki |
| **Show Arrow** | Nyilak megjelenítése. | be |
| **Show Pagination** | Lapozópontok megjelenítése. | be |
| **Disable Touch/Dragging** | Kikapcsolja az érintéses húzást. | ki |
| **Use Grab Cursor** | Fogó kurzor a kártyák fölött. | be |

### Szülő: Design

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Layout** | A kártyák elrendezése. | stacked |
| **Width**, **Order Alignment** | Oldalt álló kép szélessége és sorrendje. | 50%, left |
| **Horizontal Image Alignment**, **Horizontal Content Alignment** | A kép és a tartalom vízszintes igazítása. | center |
| **Image Width**, **Image Alignment** | A kép szélessége és igazítása. | 100%, left |
| **Stretch Image** | A kép kitölti a kártya képterületét. | ki |
| **Position** | A jelvény helye (eszközönként állítható). | top_right |
| **Background Color** | A jelvény háttérszíne. | |
| **Show Badge On Hover** | A jelvény csak hoverre látszik. | ki |
| **Arrow Horizontal Position**, **Top Arrow Position**, **Bottom Arrow Position** | A nyilak helye. | 50% |
| **Arrow Position**, **Mobile Arrow Position** | A nyilak a karusszelen kívül vagy belül vannak, mobilon külön. | outside, inside |
| **Use Arrow Custom Position**, **Arrow Custom Position** | Saját nyílpozíció. | ki, -60px |
| **Use Custom Previous Arrow Icon**, **Previous Arrow Icon** | Egyedi ikon az előző nyílhoz. | ki |
| **Use Custom Next Arrow Icon**, **Next Arrow Icon** | Egyedi ikon a következő nyílhoz. | ki |
| **Arrow Size**, **Arrow Color**, **Arrow Background Color** | A nyilak mérete és színei. | 40px, #666666 |
| **Pagination Horizontal Placement**, **Pagination Vertical Placement** | A lapozópontok helye. | -30px, 50% |
| **Pagination Active Color**, **Pagination In-Active Color** | Az aktív és inaktív pont színe. | rgba(0,0,0,0.75), rgba(0,0,0,0.2) |
| **Pagination Placement** | A lapozópontok oldala. | right |

### Gyermek elem (Card Item): Content

| Beállítás | Mit csinál |
|---|---|
| **Title**, **Sub Title**, **Content** | A kártya címe, alcíme és szövege. |
| **Image** | A kártya képe. |
| **Use Image as Background**, **Image Height** | Háttérkép használata és magassága. |
| **Background Image Size**, **Position**, **Repeat**, **Animation**, **Animation Speed (in ms)** | A háttérkép mérete, pozíciója, ismétlése, animációja és sebessége. |
| **Open as Image Lightbox**, **Image Lightbox** | A kép kattintásra lightboxban nyílik, és külön képet is megadhatsz hozzá. |
| **Open as Video Lightbox**, **Video Popup URL** | A kép videós felugróként működik, a videó linkjével. |
| **Badge Text**, **Badge Url**, **Badge Link Target** | A jelvény szövege, linkje és nyitási módja. |
| **Button Text**, **Button Url**, **Url Open** | A gomb felirata, linkje és nyitási módja. |
| **Use Custom Button Icon** | Kikapcsolva a szülő gombikonja érvényes, bekapcsolva a **Design → Button** alatt megadott ikon, csak ennél a kártyánál. |
| **Open as Image Lightbox**, **Image**, **Open as Video Lightbox** (gomb) | A gomb is nyithat kép- vagy videólightboxot. |

### Gyermek elem: Design

| Beállítás | Mit csinál |
|---|---|
| **Image Width**, **Image Alignment** | A kép szélessége és igazítása. |
| **Stretch Image** | A kép kitölti a képterületet, ha a kép nem háttér. Ha a szülőn be van kapcsolva, az felülírja. |
| **Image Overlay**, **Overlay Color** | Fedőréteg a képen és színe. |
| **Use Icon**, **Icon Font Size**, **Overlay Icon Color**, **Icon Picker** | A fedőréteg ikonja (alapból be van kapcsolva). |
| **Show Overlay On Hover** | A fedőréteg csak hoverre látszik (alapból be). |
| **Position**, **Use Custom Position**, **Left Position**, **Top Position**, **Background Color** | A jelvény helye és háttérszíne. |

A gyermek elem Design fülén megadott érték csak azt a kártyát érinti. Ha minden kártyának ugyanúgy kell kinéznie, a szülőn állítsd be. A kártyák sorrendje a szülő listájában húzással módosítható.