Következő lépések

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.