# Theme Builder

> A Theme Builder két nézete, az oldalsablonok létrehozása, a sablonrészek hozzáadása és a Theme Templates lista.

Az oldalsablonokat a **Crocoblock → Theme Builder** oldalon kezeled. Egy oldalsablon három részből áll: fejléc, törzs és lábléc. Mindhárom elhagyható, például csak törzset is megadhatsz.

Ha a webhelyen régi (legacy) feltételű sablonok vannak, a lap tetején figyelmeztetés kínálja a **Convert Now** gombot. Erre kattintva a sablonok átrendeződnek az új sablonhierarchiába. A „CPT Single”, „CPT Archive” és „CPT Taxonomy” feltételek régi típusúak.

## Fanézet (Tree view)

Ez az alapértelmezett nézet. A fa a webhely szerkezetét mutatja: a feltételcsomópontok mellett látható szám megmondja, hány sablon tartozik hozzá.

![A Theme Builder fanézete](./kepek/theme-builder-fa.webp)

*A Theme Builder fanézete* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

- A szám megnyomásával megnézheted az adott feltételhez tartozó sablonokat. Itt szerkesztheted a meglévőket, vagy újat is létrehozhatsz. A **Node preview** gomb a csomópont előnézetét mutatja, a **Back to Tree view** gomb visszavisz a fához.
- A **Filter by tree levels** legördülő listával a fa szintjeit szűrheted.
- A **View size** gombokkal (**Large**, **Medium**, **Small**) az elemek méretét állíthatod.
- Az elemek melletti **+** gombbal új sablont hozhatsz létre úgy, hogy a hozzá tartozó feltétel már ki van töltve (például a **404-es oldal** melletti **+** a „felvétel, egyedi, 404-es oldal” feltételt állítja be).
- A fa szintjeit a pontokra kattintva összecsukhatod és kinyithatod.

## Rácsnézet (Grid view)

A **Grid view** gombbal váltasz rácsnézetre. Itt az oldalsablonok kártyákon jelennek meg.

![A Theme Builder rácsnézete](./kepek/theme-builder-racs.webp)

*A Theme Builder rácsnézete* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

A felső sáv elemei:

| Elem | Mit csinál |
| --- | --- |
| **Import page template** | Megnyitja az importálóablakot, ahol a gépedről kiválasztott JSON-sablont töltheted be. |
| **Search by name** | Név szerint keres a sablonok között. |
| **Filter by type** | Típus szerint szűr. |
| **Create new page template** | Új oldalsablont hoz létre. |

A feltételek megadása után a sablon típusa automatikusan eldől. Három típus van: **Oldal** (Page), **Egyedi** (Single) és **Archívum** (Archive).

## Oldalsablon létrehozása

1. A rácsnézetben kattints a **Create new page template** gombra.
2. A **Create page template** ablakban a **Add Condition** gombbal vegyél fel egy vagy több feltételt (lásd a [Feltételek](../feltetelek/) fejezetet). A feltételt kihagyhatod is, később is beállíthatod.
3. Kattints a **Create** gombra.

![Az oldalsablon feltételeinek megadása](./kepek/feltetel-hozzaadasa.webp)

*Az oldalsablon feltételeinek megadása* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

Az új sablon kártyája a feltételek összefoglalóját a kártya alján mutatja, például **Entire - Teljes webhely**. A kártya neve a rákattintással átírható, a beírt szöveg magától mentődik.

![Egy oldalsablon kártyája fejléc, törzs és lábléc hellyel](./kepek/oldalsablon-kartya.webp)

*Egy oldalsablon kártyája fejléc, törzs és lábléc hellyel* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

Amíg nincs feltétel, a kártyán **unassigned** jelzés áll.

## Fejléc, törzs és lábléc hozzáadása

A kártyán három gomb van: **Override theme header**, **Override theme body** és **Override theme footer**. Bármelyikre kattintva két lehetőséget kapsz:

- **Create template:** új sablont hozol létre.
- **Add from library:** a korábban elkészített sablonok közül választasz.

![A fejléc hozzáadásának két lehetősége](./kepek/fejlec-felulirasa.webp)

*A fejléc hozzáadásának két lehetősége* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

### Create template

Megnyílik a **Create a template** ablak két mezővel:

| Mező | Mit csinál |
| --- | --- |
| **Template content type** | A szerkesztő: **Elementor** vagy **Block Editor**. |
| **Template name** | A sablon neve. Nem kötelező, üresen hagyva automatikus nevet kap. |

![A sablon létrehozásának ablaka](./kepek/sablon-letrehozasa-ablak.webp)

*A sablon létrehozásának ablaka* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

A **Create** gomb után a **Template created** ablak két lehetőséget ad:

- **Go to editor:** megnyílik a kiválasztott szerkesztő, ahol elkészítheted a sablont. Mentés után (Elementorban **Publish** vagy **Update**, a blokkszerkesztőben **Save**) térj vissza a Theme Builderhez.
- **Edit later:** visszatérsz a Theme Builderhez, és később szerkeszted.

![A sablon elkészült](./kepek/sablon-elkeszult.webp)

*A sablon elkészült* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

### Add from library

A **Template Library** ablak az eddig elkészített sablonokat sorolja fel. Mindegyiknél két gomb van:

- **Edit:** megnyitja a szerkesztőt.
- **Use:** hozzárendeli a sablont az oldalsablonhoz.

A könyvtárban a sablonok akkor is megmaradnak, ha eltávolítod őket az oldalsablonból. Az ikonok a Properties alatt azt mutatják, melyik bővítménnyel készült a sablon (az ikonra állva a bővítmény neve látszik).

### Hozzáadott sablonrész kezelése

Ha egy sablonrész hozzá van adva a kártyához, így kezelheted:

- A szem alakú gombbal elrejtheted a megjelenítését.
- A ceruza gombbal szerkesztheted.
- A kuka gombbal (**Remove**) eltávolíthatod az oldalsablonból. Ez nem törli magát a sablont. Törléséhez a **Crocoblock → Theme Templates** oldalon vidd fölé az egeret, és kattints a **Trash** gombra.

![Theme Builder elkészült sablonokkal](./kepek/theme-builder-sablonokkal.webp)

*Theme Builder elkészült sablonokkal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-theme-builder)

## A kártya három pontos menüje

A kártya jobb felső sarkában lévő három pont menüjében ezek találhatók:

| Menüpont | Mit csinál |
| --- | --- |
| **Edit conditions** | A korábban megadott feltételek szerkesztése. |
| **Duplicate** | A sablon másolása. |
| **Export** | A sablon exportálása JSON-fájlba. |
| **Delete** | A sablon törlése. |

## Theme Templates

A **Crocoblock → Theme Templates** oldal (a lap címe: **Sablonrészek**) az összes elkészült sablonrészt mutatja. A lapok (**Mind**, **Oldal**, **Fejléc**, **Lábléc**, **Szakasz**, **Archívum**, **Egyedi**) típus szerint szűrnek. Az oldalon új sablonrészt is felvehetsz (**Add New**), vagy importálhatsz (**Import**).

![A Theme Templates lista](./kepek/sablonok-lista.webp)

*A Theme Templates lista* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-theme-core)

A táblázat oszlopai:

| Oszlop | Tartalom |
| --- | --- |
| **Cím** | A sablon neve. |
| **Típus** | Elementor- vagy blokkszerkesztő-ikon és a sablon típusa. |
| **Page Templates** | Melyik oldalsablonhoz tartozik. |
| **Display Conditions** | A feltételek. A pipa jelzi, hogy be vannak állítva. A **Edit Conditions** gombbal szerkesztheted őket. |

Az oszlopfejléc melletti info ikon rövid tanácsot ad a feltételek beállításához, és a **Go to JetThemeBuilder** gombbal átvisz a Theme Builderbe. A Theme Templates oldalon beállított feltételek másképp működnek, mint a Theme Builderben megadottak: a Theme Builder több kontrollt ad, ezért érdemes inkább ott dolgozni.