# Közösségi ikonok widget

> Közösségi hálózatok profiljaira mutató ikonok: elemek, forma, oszlopok, színek, méret és hover-hatás.

A **Közösségi ikonok** widget egyszerűvé teszi, hogy az oldalon a közösségi profiljaidra mutató linkeket helyezz el. Az ikonok népszerű platformokat, például Facebookot, X-et (Twitter) vagy Instagramot jelenítenek meg, hogy a látogatók követni tudjanak.

Tipikus példa: egy marketingblog szerzője a cikkek aljára közösségi ikonokat tesz, megadja a profiljaihoz vezető linkeket, és az ikonok színét és méretét a blog arculatához igazítja. Hasznos még cégoldalon (LinkedIn, X, YouTube), portfólióoldalon (Behance, Dribbble, Instagram) vagy rendezvényoldalon, ahol az esemény közösségi oldalaira mutatnak az ikonok.

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints a **Közösségi ikonok** widgetre, vagy húzd a vászonra. A részleteket lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

## Közösségi ikonok lépésről lépésre

1. Add a vászonhoz a **Közösségi ikonok** widgetet.
2. A **Tartalom** fülön a **Közösségi ikonok** alatt kattints az **Elem hozzáadása** gombra új ikon felvételéhez. A meglévő elemekre (alapból Facebook, X Twitter, Youtube) kattintva szerkesztheted őket. Egy elem beállításai:
   - **Ikon**: válassz az ikonkönyvtárból, vagy tölts fel SVG-t.
   - **Link**: add meg a profilod URL-jét. Dinamikus tartalommal is megadhatod a linket.
   - **Szín**: a hivatalos színt (a platform ismert színe) vagy egyéni színt használsz. Egyéni szín esetén elsődleges és másodlagos színt is választhatsz.
3. A **Forma** mezőben válaszd ki az ikonok alakját: lekerekített, négyzet vagy kör.
4. Az **Oszlopok** mezőben add meg az oszlopok számát (Automatikus, vagy 1-től 6-ig).
5. Az **Igazítás** mezőben állítsd be, hogy az ikonok balra, középre vagy jobbra kerüljenek.

![A Közösségi ikonok widget Tartalom füle: az ikonelemek, a forma, az oszlopok és az igazítás](./kepek/widgetek-kozossegi-ikonok-tartalom.webp)

*A Közösségi ikonok widget Tartalom füle: az ikonelemek, a forma, az oszlopok és az igazítás* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen az alapból felvett három elem, az **Elem hozzáadása** gomb, valamint a **Forma**, az **Oszlopok** és az **Igazítás** beállítás látszik.

![Az Értékelés, a Csillagos értékelés, a Közösségi ikonok widget és az SVG elem az oldalon](./kepek/widgetek-ertekeles-es-ikonok-elol.webp)

*Az Értékelés, a Csillagos értékelés, a Közösségi ikonok widget és az SVG elem az oldalon* (https://minta-bolt.hu/widget-demo-5/)

Az oldalon a közösségi ikonok a hivatalos színükkel, középre igazítva jelennek meg.

## Stílus fül

![A Közösségi ikonok widget Stílus füle: szín, méret, padding, térközök, sorok közötti rés, szegély és sarkok lekerekítése](./kepek/widgetek-kozossegi-ikonok-stilus.webp)

*A Közösségi ikonok widget Stílus füle: szín, méret, padding, térközök, sorok közötti rés, szegély és sarkok lekerekítése* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

Az **Ikon** szekció beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Szín** | Hivatalos szín, vagy egyéni szín. Egyéninél elsődleges és másodlagos színt adhatsz meg az összes ikonnak |
| **Méret** | Az ikon mérete |
| **Padding** | Az ikon belső térköze |
| **Térközök** | Az ikonok közti távolság |
| **Sorok közötti rés** | A sorok közti távolság |
| **Szegély típusa** | A szegély típusa, vastagsága és színe |
| **Sarkok lekerekítése** | A szegély sarkainak lekerekítése, ha adtál meg szegélyt |

Az **Ikon rámutatáskor** szekcióban azt állíthatod be, milyen legyen az ikon, amikor az egérmutató fölé ér: az elsődleges és a másodlagos szín, valamint egy hover-animáció.

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, mint a többi widgetnél.