# Következő lépések

> A Bricks haladó funkcióinak térképe, tanulási útvonal webhelytípusonként és billentyűparancsok.

Az alapokat elsajátítottad, és már építhetsz Bricks-szel WordPress-oldalakat. A Bricks ennél jóval többet tud. Ez a fejezet feltérképezi, mi jön még.

## Hogyan tanuld a Bricks-et?

Ne próbálj mindent megjegyezni. Helyette:

1. **Építs valódi projekteket:** saját oldalt, ügyfélmunkát, hobbi projektet.
2. **Találkozz problémákkal:** „20 oldalon egységes CTA kell…” vagy „ennek a harmonikának mindenhol működnie kell…”.
3. **Tanuld meg a megoldást:** „Ja, ezt a komponensek oldják meg!”
4. **Alkalmazd:** építsd meg, rontsd el, értsd meg.
5. **Ismételd:** minden projekt tanít valami újat.

A Bricks-et használva tanulod meg, nem olvasással.

## A haladó funkciók térképe

### Komponensek

Újrahasználható elemek, amelyek az egész webhelyen szinkronban maradnak. Egyszer elkészítesz egy kártyadizájnt, mindenhol használod; ha frissíted a komponenst, minden példánya frissül. Egységességet ad és gyorsítja a karbantartást: ha 50 kártyán kell gombszínt cserélni, egy komponenst szerkesztesz 50 kártya helyett.

Mikor kell:

- több oldalon használt kártyaelrendezéseknél,
- újrahasználható CTA-knál, véleményeknél, csapattag-kártyáknál,
- ha ugyanazt a dizájnt másolgatod.

Különbség a sablonoktól: a sablonok teljes oldalelrendezéseket szabályoznak, a komponensek egyes elemeket vagy kis elemcsoportokat. Az ismétlődő dizájnelemekhez komponenst, az oldalszerkezethez sablont használj.

### Stíluskezelő

A webhely tervezési rendszerének központja. Az eszköztár **Stílusok** ikonjával vagy a `Cmd/Ctrl + .` billentyűkkel nyitod. Egy felületen kezeli a sablonstílusokat, osztályokat, CSS-változókat, színeket, tipográfiai és térközskálákat és keretrendszer-beállításokat.

Nem kell különböző panelek között keresgélned: egy helyen megadhatsz színpalettát, beállíthatsz fluid tipográfiát, készíthetsz térközskálát és kezelheted az osztályokat.

Mikor kell:

- nagy webhelyek tervezési elemeinek (színek, térközök, tipográfia) kezelésére,
- ügyfélwebhelyeknél, ahol a márkaszínek változhatnak,
- ha a sablonstílusoknál nagyobb rugalmasság kell,
- ha az elejétől egységes tervezési rendszert építesz.

A sablonstílusokkal és a globális osztályokkal együtt működik: a Stíluskezelőben határozod meg a változókat, osztályokat és skálákat, és ezekre hivatkozol a terveidben.

### Elem-interakciók

Műveletek indítása (elemek megjelenítése/elrejtése, osztályok kapcsolása, animáció indítása) felhasználói események (kattintás, lebegtetés, görgetés, űrlap beküldése) alapján. JavaScript írása nélkül készíthetsz harmonikát, füleket, felugró ablakot és animált megjelenést.

Mikor kell:

- egyéni harmonikákhoz vagy fülekhez,
- megjelenítés/elrejtés funkcióhoz,
- görgetéssel indított animációhoz,
- gombkattintásra nyíló felugró ablakokhoz.

Példák:

- gombkattintás → rejtett div megjelenítése,
- kép fölé mozgás → felirat áttűnése,
- elemhez görgetés → animáció indítása,
- űrlap beküldése → sikerüzenet megjelenítése.

### Elemfeltételek

Elemek megjelenítése vagy elrejtése feltételek alapján (felhasználói szerepkör, egyéni mező értéke, lekérdezési karakterlánc, dátum stb.). Kontextushoz igazodó dinamikus elrendezéseket készíthetsz: adminisztrátoroknak szóló tartalom csak bejelentkezett adminoknak, akciós szalag csak a kampány idején, eltérő CTA az egyéni mezők értéke szerint.

Mikor kell:

- tagsági webhelyeknél (tartalom szerepkör szerint),
- feltételes árazásnál (különleges ajánlat adott felhasználóknak),
- dinamikus sablonoknál (más elrendezés a bejegyzés metaadatai szerint),
- A/B teszteléshez (más változat a lekérdezési paraméterek szerint).

Erős kombináció: elemfeltételek + dinamikus adat + lekérdezési ciklusok = nagyon rugalmas sablonok.

### Külső API-k és egyéni integrációk

Külső szolgáltatásokból (időjárás, tőzsdei árfolyamok, közösségi hírfolyamok, egyéni adatbázisok) származó adatokat jeleníthetsz meg a Bricks-ben. Bármilyen API-val rendelkező szolgáltatáshoz kapcsolódhatsz, valós idejű adatokat jeleníthetsz meg, harmadik féllel integrálhatsz, vagy egyéni irányítópultot építhetsz.

Mikor kell:

- élő adatok (időjárás, árfolyamok, részvényárak) megjelenítéséhez,
- CRM-ekkel vagy egyedi rendszerekkel való integrációhoz,
- összetett irányítópultokhoz.

Feltétele: némi PHP-tudás az API-adatok lekéréséhez és formázásához, majd dinamikus adattal jeleníted meg őket.

### Lekérdezési szűrők (haladó)

Valós idejű, AJAX-alapú szűrés lekérdezési ciklusokhoz. A felhasználók oldalújratöltés nélkül kereshetnek, szűrhetnek kategória szerint, állíthatnak árintervallumot és rendezhetik az eredményeket. Erős, interaktív keresési és szűrési élményt ad; webáruházaknál, címtáraknál és nagy tartalomtáraknál elengedhetetlen.

Mikor kell:

- WooCommerce-boltokban (termékek szűrése kategória, ár, tulajdonság szerint),
- címtárakban (csapattagok, helyszínek, szolgáltatások keresése és szűrése),
- nagy blogokban (bejegyzések szűrése kategória, címke, dátum szerint).

Elérhető szűrők:

- élő keresés,
- jelölőnégyzetek (kategóriák, címkék, egyéni taxonómiák),
- rádiógombok,
- legördülő listák,
- csúszkák (ár, dátum),
- dátumválasztók.

### WooCommerce építő

Dedikált elemek és sablonok egyedi WooCommerce-boltok építéséhez. Teljes irányítás a termékelrendezések, a bolti oldalak, a kosár, a pénztár és a fiókoldalak fölött. Az alapértelmezett WooCommerce-sablonok általánosak; Bricks-szel a vásárlási élményt a márkádhoz igazíthatod.

Mikor kell:

- webáruházak építéséhez,
- termékoldalak testreszabásához a témák kínálta lehetőségeken túl,
- egyedi bolti elrendezésekhez.

Tartalma:

- termékelemek (ár, kosárba gomb, képek, galériák, fülek),
- bolti sablonok (termékarchívumok, egyedi termékek, kosár, pénztár),
- WooCommerce dinamikus adatcímkék,
- lekérdezési szűrők termékekhez.

### Egyéni kód és horgok

A Bricks-et saját PHP-, CSS- és JavaScript-kóddal bővítheted. WordPress-horgokkal programozottan módosíthatod a Bricks működését. Ha a vizuális eszközök határához érsz, a kód végtelen rugalmasságot ad: egyéni funkciók, bővítményintegráció, egyedi funkciók.

Mikor kell:

- a Bricks grafikus felületén túli funkciókhoz,
- egyedi bővítményekkel vagy rendszerekkel való integrációhoz,
- erősen specializált sablonokhoz.

Feltétele: PHP-, JavaScript- és WordPress-fejlesztési ismeretek.

### Felugró ablakok

Egyedi modális ablakok és felugró elemek, amelyeket bármilyen eseményre megjeleníthetsz (kattintás, görgetés, kilépési szándék, időzítés stb.). Hírlevél-feliratkozás, akciós ajánlat, videós modális ablak, bejelentkezési űrlap vagy bármilyen átfedő tartalom teljes tervezési kontrollal.

Mikor kell:

- hírlevél-feliratkozó felugró ablakokhoz,
- videó fényképtárakhoz (lightbox),
- kilépési szándékra megjelenő ajánlatokhoz,
- felhasználási feltételek modális ablakaihoz,
- egyéni bejelentkezési és regisztrációs űrlapokhoz.

Az interakciókkal együtt szabályozhatod, mikor és hogyan jelennek meg.

### Betűtípuskezelő

Egyéni betűtípusok (saját tárhelyről vagy szolgáltatásból) feltöltése és kezelése közvetlenül a Bricks-ben. Betűcsaládokat, vastagságokat és stílusokat szervezhetsz. Bármilyen betűtípust használhatsz, nem csak a Google Fontsot; a saját tárhelyről szolgáltatott betűk jobb teljesítményt adnak, és teljes irányítást a tipográfia fölött.

Mikor kell:

- márkaspecifikus betűtípusokhoz,
- teljesítményoptimalizáláshoz saját tárhelyű betűkkel,
- a Google Fontsban nem elérhető betűtípusokhoz.

### Billentyűparancsok

A gyakori műveletek billentyűparancsokkal gyorsabbak, mint a menükben kattintgatás.

- `Cmd/Ctrl + K`: parancspaletta (elemek, műveletek keresése),
- `Cmd/Ctrl + D`: a kijelölt elem duplikálása,
- `Cmd/Ctrl + Z`: visszavonás,
- `Cmd/Ctrl + Shift + Z`: újra,
- `Cmd/Ctrl + B`: reszponzív töréspontok kapcsolása,
- `Delete`: a kijelölt elem törlése.

Minden projektnél jól jön; fokozatosan tanuld meg őket munka közben.

## Tanulási útvonal webhelytípus szerint

### Blog vagy tartalmi webhely

Elsődleges funkciók:

1. dinamikus adat és lekérdezési ciklusok (alapvető),
2. sablonok (egyedi bejegyzés, archívum),
3. sablonstílusok (egységes tipográfia),
4. keresés (lekérdezési szűrők).

Hasznos még: komponensek (újrahasználható bejegyzéskártyák), felugró ablakok (hírlevél-feliratkozás), interakciók (animált megjelenés).

### Webáruház

Elsődleges funkciók:

1. WooCommerce építő,
2. lekérdezési ciklusok (termékrácsok),
3. lekérdezési szűrők (termékszűrés),
4. sablonok (termékoldalak, bolti oldalak).

Hasznos még: komponensek (újrahasználható termékkártyák), interakciók (gyorsnézet modális ablakok), felugró ablakok (akciós bejelentések).

### Üzleti vagy portfólióoldal

Elsődleges funkciók:

1. sablonstílusok (márkaegység),
2. globális osztályok (újrahasználható stílusok),
3. komponensek (csapattagok, vélemények),
4. sablonok (szolgáltatásoldalak, esettanulmányok).

Hasznos még: interakciók (portfólió-galériák), elemfeltételek (szerepkör szerinti tartalom), felugró ablakok (kapcsolatfelvételi űrlapok).

### Tagsági vagy közösségi webhely

Elsődleges funkciók:

1. elemfeltételek (tartalom korlátozása szerepkör szerint),
2. sablonok (tagprofilok, címtárak),
3. dinamikus adat (felhasználóspecifikus tartalom),
4. lekérdezési ciklusok (taglisták).

Hasznos még: egyéni kód (haladó korlátozások), interakciók (tagi irányítópult-funkciók).

## A következő projekted

A tanultakat egy teljes webhely megépítésével szilárdíthatod meg. Legyen benne:

- kezdőlap (statikus dizájn),
- blog bejegyzésekkel (sablon + dinamikus adat + lekérdezési ciklus),
- rólunk oldal,
- kapcsolat oldal,
- fejléc és lábléc sablonok.

Ez minden eddig tanultat érinti, és felkészít az ügyfélmunkára.

Tippek:

- kezdd drótvázakkal vagy vázlatokkal,
- az elejétől használj sablonstílusokat,
- hozz létre globális osztályokat a gyakori mintákhoz,
- építés közben teszteld a reszponzív viselkedést,
- gyakran nézd meg valódi eszközökön.

## Hozzáállás

A mesteri tudás nem olvasásból jön, hanem építésből, rontásból, javításból és újraépítésből. Minden projekt újat tanít, és minden kihívás felfed egy funkciót, amelyről addig nem tudtad, hogy kell. Ne a tökéletességre törekedj: az első oldalaid nem lesznek remekművek, ez természetes. Maradj kíváncsi: ha látsz egy jó funkciót egy oldalon, kérdezd meg magadtól, hogyan építenéd meg Bricks-ben, és próbáld ki. Élvezd a folyamatot: vizuálisan építesz weboldalakat, azonnal látod a változást, és életre kelted az ötleteidet.