# Közösségi ikon widget: közösségi hivatkozások sora

> Közösségi hálózatok ikonjai saját hivatkozással: stílusok, címek, igazítás, függőleges elrendezés és gyakori hibák.

A **Közösségi ikon** widget közösségi hivatkozások sorát rakja az oldalra, például a láblécbe, egy szerzői bemutatkozás mellé vagy az oldalsávba. Kész hálózatlistából választasz (39 hálózat és egy egyéni lehetőség), 15 beépített stílus közül, és minden ikonhoz külön hivatkozást, színt és feliratot adhatsz. A widget az ingyenes bővítményben is megvan. A Pro bővítmény csak három ikononkénti extrát ad hozzá: a **Mágikus görgetést**, az **Eszköztippet** és az egérmozgásra reagáló parallax hatást (**Mouse Move Parallax**).

## Bekapcsolás és hozzáadás

1. Nyisd meg: **The Plus Addons → Widgets**.
2. Keress rá a **Social Icon** névre, és kapcsold be.
3. Az Elementor szerkesztőben a widgetet **Közösségi ikon** néven találod.
4. Készítsd elő a profiljaid címét, hogy be tudd másolni.

![A Közösségi ikon widget tartalom panelje négy hálózattal](./kepek/kozosseg-funkciok-1-ikonok-panel.webp)

*A Közösségi ikon widget tartalom panelje négy hálózattal* (https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor)

A képen a **Tartalom** szakasz látszik: a **Stílus** legördülő, a hálózatok sorai (a sorokban a hálózat azonosítója látszik), az **Elem hozzáadása** gomb, az **Igazítás** és a **Függőleges elrendezés** kapcsoló.

## Ikonok felvétele

1. Húzd a **Közösségi ikon** widgetet az oldalra.
2. A **Tartalom** szakasz **Stílus** mezőjében válassz: **Stílus 1** és **Stílus 15** között, vagy **Egyéni**.
3. Nyisd ki az első sort a **Közösségi hálózat kiválasztása** listában, és válaszd ki a hálózatot a legördülőből.
4. A **Link** mezőbe másold be a profil címét.
5. Ha az ikon mellé feliratot szeretnél, írd be a **Cím** mezőbe.
6. Minden hálózathoz vegyél fel egy sort az **Elem hozzáadása** gombbal.
7. Állítsd be az **Igazítás** értékét (balra, középre vagy jobbra, eszközönként külön), és ha oszlopot szeretnél sor helyett, kapcsold be a **Függőleges elrendezés** kapcsolót.

![Négy hálózat címkével a nyilvános oldalon](./kepek/kozosseg-funkciok-1-ikonok.webp)

*Négy hálózat címkével a nyilvános oldalon* (https://minta-bolt.hu/tp-kozossegi-ikonok/)

A képen az első stílus látszik négy hálózattal: Facebook, Twitter, Instagram és YouTube. Az ikonok itt nem látszanak, mert az oldalon semmi nem tölti be a Font Awesome ikonbetűt. A feliratok és a hivatkozások működnek (lásd lent a korlátoknál).

## Beállítások

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Stílus** | **Stílus 1**-től **Stílus 15**-ig, vagy **Egyéni** | **Stílus 1** |
| **Rámutatás stílusának kiválasztása** | A rámutatás hatása (**Stílus 1** vagy **Stílus 2**). Csak a **Stílus 14** és **Stílus 15** esetén látszik. | **Stílus 1** |
| **Link** | A cím, amelyet az ikon megnyit | # |
| **Cím** | Felirat az ikon mellett, azokban a stílusokban, amelyek kirajzolják | üres |
| **Igazítás** | Balra, középre vagy jobbra, eszközönként külön | középre |
| **Függőleges elrendezés** | Az ikonokat oszlopba rendezi | ki |

A **Cím** csak a **Stílus 1**, **2**, **4**, **10**, **12**, **14**, **15** és az **Egyéni** stílusnál jelenik meg. A többi stílus akkor sem rajzolja ki, ha kitöltötted.

Függőleges elrendezéskor a négy ikon egymás alá kerül. A kapcsoló az **Egyéni** stílusnál el van rejtve.

![Négy hálózat függőleges elrendezésben](./kepek/kozosseg-funkciok-1-ikonok-fuggoleges.webp)

*Négy hálózat függőleges elrendezésben* (https://minta-bolt.hu/tp-kozossegi-ikonok-fuggoleges/)

A képen a **Függőleges elrendezés** látszik bekapcsolva: a négy felirat egymás alatt áll.

## Egyéni ikon és ikononkénti színek

- Ha egy sorban a hálózat **Egyéni**, az **Ikonopciók** mezőben választhatsz **Betűalapú ikon** és **SVG ikon** között, és a saját ikonodat adhatod meg.
- Minden sornak saját **Ikon színe**, **Háttérszín** és **Szegélyszín** mezője van, külön **… rámutatáskor** értékekkel. Így egy ikon eltérhet a többitől.

![Egy hálózati sor kibontva](./kepek/kozosseg-funkciok-1-ikonok-sor.webp)

*Egy hálózati sor kibontva* (https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor)

A képen a Facebook sora látszik kibontva: **Közösségi hálózat kiválasztása**, **Link**, **Cím**, a színek, majd a **Mágikus görgetés** és az **Eszköztipp** kapcsolók.
- A **Stílus** fülön a térközt, a méretet, a szegélyt és az árnyékot állíthatod.

## Korlátok

- A widget nem hoz magával ikonbetűt. Ha az oldalon más sem tölti be a Font Awesome-ot, az ikonok üresen maradnak. Ha a sablonod vagy egy másik widget betölti, ezt nem veszed észre.
- A legördülő néhány neve szokatlan: **Google +**, **LinkedIN**, **Wordpress**, **Tiktok**, és két Odnoklassniki tétel van (**Odnoklassniki** és **Odnoklassniki 1**).
- A lista néhány hálózata már nem létezik a régi formájában, de még kiválasztható: Google+, Digg, LastFM, Foursquare, Slideshare.
- A **Mágikus görgetés**, az **Eszköztipp** és a **Mouse Move Parallax** a Pro bővítményhez tartozik.

## Hibaelhárítás

### Az ikonok láthatatlanok, de a hivatkozások működnek

Az oldalon semmi nem tölti be a Font Awesome-ot. Tegyél az oldalra olyan elemet, amely betölti, vagy használd az **Egyéni** hálózatot SVG ikonnal.

### A címek nem látszanak

Válts **Stílus 1**, **2**, **4**, **10**, **12**, **14**, **15** vagy **Egyéni** stílusra. A többi nem rajzolja ki a **Cím** mezőt.

### Nincs **Rámutatás stílusának kiválasztása** legördülő

Csak a **Stílus 14** és **Stílus 15** esetén jelenik meg.

### Az ikonok sorban maradnak

Kapcsold be a **Függőleges elrendezés** kapcsolót. Az **Egyéni** stílusnál ez a kapcsoló rejtve van.