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

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 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).
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 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).