# Divi 5 modulok: közösségi megosztógombok és csillagos értékelés

> A Supreme Social Share Buttons modul (gyermek elemekkel) és a Supreme Star Rating modul beállításai a Divi 5 Visual Builderben.

Két 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. 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.

## Közösségi megosztógombok (Supreme Social Share Buttons)

Közösségi megosztó ikonokat tesz az oldalra, és a megjelenésük szabadon alakítható. A modul szülő és gyermek elemekből áll: a szülő a **Supreme Social Share Buttons**, az egyes gombok a gyermek elemek. A gyermeket külön nem teheted az oldalra, a gombokat mindig a szülő **Content** füléről add hozzá.

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Add hozzá a **Supreme Social Share Buttons** modult a **Divi Supreme** kategóriából.
3. A **Content** fülön vedd fel az első gombot, és válaszd ki a hálózatot.
4. A **Design** fülön állítsd be a méretet, a színt és a réseket.
5. Mentsd az oldalt, és nézd meg a weboldalon.

Ha egy hálózathoz alkalmazásazonosító vagy fiókcím kell, azt előbb a bővítmény beállításaiban add meg. Kezdj 3 és 6 gomb között, és a közös stílust a szülőn finomítsd.

### Szülő: Content

| Beállítás | Mit csinál |
|---|---|
| **View** | A gombok megjelenítési módja. |
| **Label** | Be- vagy kikapcsolja a feliratot a gombokon. |
| **Skin** | A gombok kinézete. |
| **Shape** | A gombok alakja. |
| **Columns** | Hány oszlopban jelennek meg a gombok. |
| **Alignment** | A gombok igazítása. |
| **Target URL** | Azt választod ki, melyik címet osztja meg a gomb. |
| **Link URL** | Egyedi cím, ha nem az aktuális oldalt szeretnéd megosztani. |
| **Hover Animation** | A gombok animációja, ha ráviszed az egeret. |

### Szülő: Design

| Beállítás | Mit csinál |
|---|---|
| **Column Gap** | Az oszlopok közti rés. |
| **Rows Gap** | A sorok közti rés. |
| **Button Size** | A gombok mérete. |
| **Icon Size** | Az ikonok mérete. |
| **Button Height** | A gombok magassága. |
| **Color** | A színek forrása (hálózati vagy egyedi). |
| **Background Color** | Egyedi háttérszín. |
| **Color** (szín) | Egyedi ikon- és szövegszín. |

### Gyermek: egy megosztógomb

A gyermek mezői csak az adott gombra vonatkoznak. A sorrendet a szülő listájában változtathatod.

| Beállítás | Mit csinál |
|---|---|
| **Network** | A közösségi hálózat. |
| **Custom Image Icon** | Bekapcsolva saját képet használsz ikonként. |
| **Image** | A saját ikonkép. |
| **Custom Label** | Egyedi felirat a gombon. |
| **Color** | A szín forrása ennél a gombnál. |
| **Background Color** | Egyedi háttérszín ennél a gombnál. |
| **Color** (szín) | Egyedi ikon- és szövegszín ennél a gombnál. |

Ha egy gombnak más kinézet kell, mint a többinek, a gyermek **Design** fülén írd felül a szülő értékeit.

## Csillagos értékelés (Supreme Star Rating)

Csillagos értékelést jelenít meg, ami a látogatók bizalmát növeli. A modul a Google schema jelölést is figyelembe veszi, és teljesen testreszabható.

1. Add hozzá a **Supreme Star Rating** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön állítsd be a **Rating Scale**, **Rating** és **Title** mezőt, valamint a **Display Type** értékét.
3. A **Design** fülön igazítsd a csillagok színét, méretét és a réseket.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Rating Scale** | Az értékelési skála (hány csillagos). |
| **Rating** | Az értékelés értéke. |
| **Title** | Az értékelés címe. |
| **Display Type** | A csillagok megjelenítési módja. |
| **Title Stacked Position** | A cím helye, ha a csillagok fölött vagy alatt van. |
| **Title Inline Position** | A cím helye, ha a csillagokkal egy sorban van. |
| **Show Rating Number** | Megjeleníti az értékelés számát is. |
| **Enable Schema Support** | Bekapcsolja a Google schema jelölést. |
| **Author** | Schema: az értékelő neve. |
| **Product Item Name** | Schema: az értékelt termék vagy elem neve. |
| **Number of Rating** | Schema: az értékelések száma. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Stars Alignment** | A csillagok igazítása. |
| **Size** | A csillagok mérete. |
| **Gap** | A csillagok közti rés. |
| **Stars Color** | A csillagok színe. |
| **Gap** (cím) | A cím és a csillagok közti rés. |

## 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 schema jelölést csak valódi, általad gyűjtött értékeléshez kapcsold be.