# Komponens készítése és újrahasznosítása Elementorban

> Két teljes példa: szolgáltatáskártya komponens vezérlőkkel az oldalakra, és könyvkártya komponens egyedi bejegyzéstípus metamezőihez a Listing Gridben.

Ez a fejezet két példán mutatja meg, hogyan készítesz komponenst Elementorban (az ingyenes változat elég), és hogyan használod fel újra. A vezérlők beállításainak teljes leírása a [Komponensek](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-komponensek/) fejezetben van.

## Példa 1: szolgáltatáskártya több oldalra

A komponens négy elemből áll: egy képből, egy címsorból, egy leírásból és egy gombból, amely a szolgáltatás oldalára vezet.

### A komponens felépítése

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új komponens hozzáadása** gombra.
2. Add meg a komponens nevét, a **Komponens nézete** értéke legyen **Elementor**, majd kattints a **Komponens létrehozása** gombra.
3. Húzd be a widgeteket: **Image** (a szolgáltatás képe), **Heading** (a címe), **Text Editor** (a leírása) és **Button** (a gomb a bővebb oldalhoz).
4. A bal alsó sarokban kattints a fogaskerék ikonra, és nyisd meg a **Component Content Controls** fület.
5. A fül alapértelmezett szövegvezérlőjét töröld a kereszt ikonnal, majd az **Add Item** gombbal vedd fel a saját vezérlőket:

| Control Label | Control Name | Control Type | Default Value |
|---|---|---|---|
| Szolgáltatás képe | `service_image` | **Egyetlen média** | egy kép a médiatárból |
| Szolgáltatás címe | `service_title` | **Szöveg** | Szolgáltatás címe |
| Szolgáltatás leírása | `service_description` | **Szövegmező** | |
| Szolgáltatás linkje | `service_link` | **Szöveg** | |
| Szolgáltatás gombja | `service_button` | **Szöveg** | Tovább |

6. Nyisd meg a **Component Style Controls** fület, és az **Add Item** gombbal vegyél fel egy színvezérlőt: **Control Label** „Háttérszín”, **Control Name** `background_color`, a **Default Value** egy tetszőleges szín. Jelenleg csak színvezérlőt vehetsz fel.

### A vezérlők hozzárendelése

1. Nyisd meg a tároló (container) **Stílus** fülét, a **Háttér** részben kattints a színválasztó mellett lévő dinamikus címkék ikonra, és válaszd a **Component Control Color** címkét. A **Control Name** értéke `background_color`.
2. Az **Image** widgetnél kattints a dinamikus címkék ikonra, és válaszd a **Component Control Image** címkét. A **Control Name** a `service_image` (az a vezérlő, amelynek típusa **Egyetlen média**).
3. A **Heading** widget **Cím** mezőjénél válaszd a **Component Control Value** címkét, és add meg a `service_title` nevet.
4. A **Text Editor** widgetnél ugyanezt tedd, a `service_description` névvel.
5. A **Button** widgetnél a **Szöveg** mezőnél a `service_button`, a **Link** mezőnél a `service_link` nevet add meg a **Component Control Value** címkével.
6. Alakítsd a komponens megjelenését, és kattints a **Frissítés** gombra.

### A komponens oldalra helyezése

1. Nyisd meg Elementorban azt az oldalt, ahová a komponens kerül.
2. Keresd meg a komponenst a nevével a widgetek között, és húzd az oldalra.
3. A **Tartalom** fülön elöl látod a **Component Context** értékét (alapból **Default Object**), alatta a létrehozott vezérlőket. Töltsd ki őket az adott szolgáltatás adataival.
4. A **Stílus** fülön szükség esetén megváltoztathatod a **Háttérszín** vezérlőt.
5. Tegyél az oldalra még két komponenst más adatokkal, majd kattints a **Közzététel** (vagy **Frissítés**) gombra.

A nyilvános oldalon a kártyák megjelennek, a gombok a megadott oldalra visznek.

## Példa 2: könyvkártya egyedi bejegyzéstípus metamezőihez

Ez a példa egy „Könyvek” egyedi bejegyzéstípust és három metamezőt feltételez: **Szerző**, **Borító** és **Leírás**. A komponensben ugyanúgy lehetnek statikus és dinamikus widgetek.

### A komponens és a vezérlők

1. Hozz létre egy komponenst „Könyv komponens” névvel, **Elementor** nézettel.
2. A **Component Content Controls** fülön vegyél fel négy vezérlőt:

| Control Label | Control Name | Control Type | Default Value |
|---|---|---|---|
| Cím | `title` | **Szöveg** | Cím |
| Könyv szerzője | `book_author` | **Szöveg** | Szerző |
| Könyv borítója | `book_cover` | **Egyetlen média** | |
| Könyv leírása | `book_description` | **Szövegmező** | Leírás |

3. Kattints a **Frissítés** gombra.

### A widgetek

1. Oszd két oszlopra a tartalmat. A bal oszlopba húzz egy **Dynamic Field** widgetet a bejegyzés címének megjelenítéséhez. A **Forrás** listában válaszd a **Component Control Value** értéket, és az **Object field / Meta field / Repeater key / Component prop** mezőbe írd be a vezérlő nevét (`title`).
2. Tegyél a szerzőhöz és a leíráshoz további **Dynamic Field** widgeteket, a borítóhoz egy **Dynamic Image** widgetet. Mindegyiknél a **Component Control Value** forrást válaszd, és a megfelelő vezérlő nevét add meg.
3. Kattints a **Frissítés** gombra.

### Színvezérlő

1. A komponens beállításainál a **Component Style Controls** résznél vegyél fel egy vezérlőt `text_color` névvel, és válassz alapértelmezett színt. Kattints a **Frissítés** gombra.
2. Nyisd meg a **Dynamic Field** widgetet, amely a címet jeleníti meg, és a **Stílus → Field** részben a **Szín** mezőnél kattints a dinamikus címkék ikonra. Válaszd a **Component Control Value** értéket, és add meg a `text_color` nevet.
3. Frissítsd a komponenst.

### A listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra, és készíts listázási sablont a „Könyvek” bejegyzéstípushoz (lásd: [Listázási sablon bejegyzéstípushoz Elementorban](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-sablon-bejegyzestipushoz/)).
2. Keresd meg a komponenst a nevével, és húzd a sablonra.
3. A **Tartalom** fülön a **Component Context** alapértéke a **Default Object**. Alatta a vezérlők láthatók.
4. Minden vezérlőnél kattints a dinamikus címkék ikonra, és válaszd a **Custom Field** vagy a **Current Object Field** értéket. Így a cím vezérlőhöz a **Current Object Field** → **Title**, a szerzőhöz a **Custom Field** → **Szerző** metamező, a borítóhoz a borító metamezője tartozik.
5. Kattints a **Frissítés** gombra.

### A lista az oldalon

1. Nyiss meg vagy hozz létre egy oldalt, és húzz rá egy **Listing Grid** widgetet.
2. A **Listing** listában válaszd ki a listázási sablont. A könyvek a komponens kinézetével jelennek meg, a metamezők adataival. Ha kell, a Listing Grid beállításait az [áttekintő fejezetben](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-listing-grid/) találod.

A komponens felhasználókat listázó sablonban is működik, ekkor azonban a sablon forrása legyen **Felhasználók** (lásd: [Listázási sablon felhasználókhoz](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-felhasznalok-sablon/)).