# Sablonok létrehozása és hozzárendelése

> Hogyan hozol létre JetWooBuilder-sablont, milyen típusai vannak, hogyan szerkeszted Elementorban, és hogyan rendeled hozzá a WooCommerce oldalaihoz.

Minden JetWooBuilder-oldal ugyanazt a menetet követi: widgetek bekapcsolása, sablon létrehozása, szerkesztés Elementorban, hozzárendelés az oldalhoz. Ez a fejezet az általános lépéseket írja le, a típusonkénti részletek a következő fejezetekben vannak.

## A sablonok listája

A sablonokat a **Crocoblock → Woo Page Builder** oldalon találod.

![A JetWooBuilder sablonjainak listája](./kepek/sablonlista.webp)

*A JetWooBuilder sablonjainak listája* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-woo-builder)

A lista oszlopai: **Cím**, **Típus**, **Aktív feltételek** és **Dátum**. A lap tetején fülek szűrik a sablonokat típus szerint: **Mind**, **Egyedi**, **Archívumtétel**, **Kategóriaelem**, **Bolt**, **Kosár**, **Pénztár**, **Köszönjük**, **Fiókom**. A lapon az **Új sablonminta létrehozása** és a **Sablonminta importálása** gomb is megtalálható. Egy sablon címére kattintva szerkesztheted, a sorból törölheted is.

## A sablontípusok

| Típus | Mire való | Részletek |
|---|---|---|
| **Egyedi** | Egy termék oldala (termékoldal). | [Termékoldal](https://hub.hellowp.io/hu/plugins/jet-woo-builder/termekoldal/) |
| **Archívumtétel** | Egyetlen termékkártya, amely a listákban, rácsokban ismétlődik. | [Bolt, archívum és kategóriák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bolt-es-archivum/) |
| **Kategóriaelem** | Egyetlen kategóriakártya a kategórialistában. | [Bolt, archívum és kategóriák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bolt-es-archivum/) |
| **Bolt** | A boltoldal és a kategóriaoldalak váza. | [Bolt, archívum és kategóriák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bolt-es-archivum/) |
| **Kosár** | A kosár oldal (teli és üres kosár). | [Kosár, pénztár és köszönőoldal](https://hub.hellowp.io/hu/plugins/jet-woo-builder/kosar-penztar/) |
| **Pénztár** | A pénztár oldal. | [Kosár, pénztár és köszönőoldal](https://hub.hellowp.io/hu/plugins/jet-woo-builder/kosar-penztar/) |
| **Köszönjük** | A rendelés leadása utáni oldal. | [Kosár, pénztár és köszönőoldal](https://hub.hellowp.io/hu/plugins/jet-woo-builder/kosar-penztar/) |
| **Fiókom** | A Fiókom oldal és a végpontjai. | [Fiókom oldal](https://hub.hellowp.io/hu/plugins/jet-woo-builder/fiokom/) |

## Lépések: sablon létrehozása

1. Kapcsold be a sablonhoz szükséges widgeteket a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldalon (lásd [Beállítások](https://hub.hellowp.io/hu/plugins/jet-woo-builder/beallitasok/)). Alapból mind be van kapcsolva, és csak a használtakat érdemes bekapcsolva hagyni.
2. Nyisd meg a **Crocoblock → Woo Page Builder** oldalt, és kattints az **Új sablonminta létrehozása** gombra.
3. A **Sablonminta létrehozása** ablakban válaszd ki a típust az **Ez a sablonminta ehhez** listából.
4. Írd be a nevet a **Sablonminta neve** mezőbe.
5. Ha a típushoz tartoznak előre elkészített elrendezések, az **Elrendezés-előbeállítás kiválasztása** résznél kiválaszthatsz egyet, és a kész elrendezésből indulhatsz. Elrendezés nélkül üres lappal indul a szerkesztés.
6. Kattints a **Sablonminta létrehozása** gombra. Megnyílik az Elementor szerkesztője.

![A Sablonminta létrehozása ablak](./kepek/sablon-letrehozas.webp)

*A Sablonminta létrehozása ablak* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-woo-builder)

A képen a Bolt típus van kiválasztva. A boltsablon előre elkészített elrendezései alatt egy megjegyzés áll: a boltsablon használatához a JetWooBuilder beállításaiban össze kell vonnod az üzletsablont és az archívumsablont, vagyis ki kell jelölnöd mindkettőt.

## A szerkesztő

A szerkesztőben a bővítmény widgetjei az **Elemek** panel **JetWooBuilder** csoportjában vannak. A sablon típusától függően a csoport más-más widgeteket mutat: a **Globális widgetek** minden sablonban ott vannak, a többi csak a megfelelő típusban.

![A Bolt sablon az Elementor szerkesztőjében](./kepek/szerkeszto-bolt.webp)

*A Bolt sablon az Elementor szerkesztőjében* (https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor)

A bal oldali panelen a JetWooBuilder widgetjei, jobbra az előnézet. Egyes widgetek (például a találatszám és a rendezés) a szerkesztőben szürke helyőrzőként jelennek meg, a tényleges tartalmat a weboldalon látod.

Mentéshez és közzétételhez használd a **Közzététel** gombot. Utólag ugyanezzel a gombbal mented a módosításokat.

### Sablonbeállítások

A szerkesztő felső sávjában a lap ikonja a sablon beállításait nyitja meg. A felirata a típustól függ, például **Jet Woo archívsablon Beállítások**.

![Az archívumtétel sablonjának beállításai](./kepek/szerkeszto-archiv-beallitasok.webp)

*Az archívumtétel sablonjának beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

Az **Általános beállítások** alatt a sablon **Cím**e és **Állapot**a (például **Közzétéve**) állítható. A **Sablonminta beállításai** szakasz az archívumtétel és a kategóriaelem sablonoknál a listában való elrendezést szabályozza:

| Beállítás | Mit csinál |
|---|---|
| **Egyéni oszlopszám bekapcsolása** | Ha be van kapcsolva, a sablon saját oszlopszámot használ. |
| **Egyenlő oszlopmagasság bekapcsolása** | Az azonos sorban lévő kártyák magassága egyenlő lesz. |
| **Sablon oszlopai** | Az oszlopok száma. Eszközönként (számítógép, táblagép, mobil) külön megadható, így például számítógépen három, mobilon egy oszlop lehet. |
| **Sablon oszlopainak vízszintes hézaga (px)** | Az oszlopok közötti távolság. |
| **Sablon oszlopainak függőleges hézaga (px)** | A sorok közötti távolság. |
| **Az archívumtétel kattinthatóvá tétele** | A teljes kártya kattintható lesz. |
| **Open in New Window** | A kártya hivatkozását új ablakban nyitja meg. |

A termékoldal (Egyedi) sablonnál a beállítások között megtalálod a **Cím elrejtése** kapcsolót is: ezzel a sablon címe nem jelenik meg a weboldalon, csak a tartalma.

## Lépések: sablon hozzárendelése

A kész sablon addig nem látszik a weboldalon, amíg nem rendeled hozzá a megfelelő oldaltípushoz.

1. Nyisd meg a **WooCommerce → Beállítások → JetWooBuilder** fület.
2. Keresd meg az oldaltípus szakaszát (például **Boltoldal**).
3. Jelöld be az egyéni sablon bekapcsolására szolgáló jelölőnégyzetet (például **Egyéni boltoldal**).
4. Válaszd ki a sablont a legördülő listából (például **Boltoldalsablon**).
5. Kattints a **Módosítások mentése** gombra.
6. Nyisd meg az oldalt a weboldalon, és ellenőrizd az eredményt.

![A hozzárendelt sablonok a WooCommerce beállításaiban](./kepek/woo-beallitasok-bolt.webp)

*A hozzárendelt sablonok a WooCommerce beállításaiban* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=jet-woo-builder-settings)

A képen minden típushoz ki van választva egy sablon, az egyéni sablonok jelölőnégyzetei be vannak kapcsolva.

A kosár, a pénztár és a Fiókom oldal tartalmának tartalmaznia kell a megfelelő shortcode-ot (**[woocommerce_cart]**, **[woocommerce_checkout]**, **[woocommerce_my_account]**), egy shortcode-blokkon belül. Ha az oldalon WooCommerce-blokkok vannak (a blokkos kosár és pénztár), a sablon nem érvényesül: cseréld le őket a shortcode-ra.

## Oldalsablonok JetThemeCore-ral: fejléc, tartalom, lábléc

A JetWooBuilder önmagában a sablon tartalmi részét adja. Ha egy oldalnak saját fejléce és lábléce is legyen, a JetThemeCore bővítmény oldalsablonja kell. Ebben a tartalmi részt a JetWooBuilder sablonja adja.

1. Nyisd meg a **Crocoblock → Theme Builder** oldalt, és kattints az oldalsablon létrehozására szolgáló gombra.
2. A megjelenő ablakban kattints a feltétel hozzáadására, és válaszd ki a feltételt. Az oldaltípustól függően ezek a lehetőségek: **Include**, **WooCommerce**, majd az oldal típusa (lásd lent).
3. Hozd létre a sablont. Az új oldalsablonban kattints a törzs (body) hozzáadására, és válassz a **Sablon létrehozása** (új tartalom) és a **Hozzáadás könyvtárból** között. Ha már elkészítetted a sablont a JetWooBuilderrel, a könyvtárból add hozzá.
4. Adj hozzá fejlécet és láblécet is, a könyvtárból vagy újonnan létrehozva.

Fontos különbség a két módszer között: a JetThemeCore oldalsablonjánál a feltételt maga az oldalsablon tartalmazza, ezért a **WooCommerce → Beállítások → JetWooBuilder** fülön **nem** szabad ugyanahhoz az oldaltípushoz sablont hozzárendelni. Hagyd kikapcsolva az adott oldal egyéni sablonját (például az **Egyéni kosár** jelölőnégyzetet), különben a két beállítás ütközik.

A Blokkszerkesztővel (Gutenberg) készített sablon nem kompatibilis a JetWooBuilder widgeteivel: ha a JetThemeCore-ban új tartalmat hozol létre, és JetWooBuilder widgeteket szeretnél benne használni, az **Elementor** tartalomtípust válaszd.

### Az oldalsablon feltételei

A Theme Builder felülete angol nyelvű, ezért az alábbi feliratokat angolul adjuk meg. A feltételnél először az **Include** (a sablon ezeken az oldalakon látszik) vagy az **Exclude** (ezeken nem) közül választasz, utána a **WooCommerce** csoportot, végül az oldal típusát. Több feltételt is felvehetsz egymás után. A JetWooBuilder oldalaihoz ezek a feltételek tartoznak:

| Oldal | A harmadik lista értéke |
|---|---|
| Termékoldal | Single Product (az összes termék, vagy kiválasztott termékek) |
| Boltoldal | Shop Page |
| Termékkategória oldala | Product Categories (egy vagy több kategória) |
| Keresési találatok | Search Results |
| Kosár | Product Cart |
| Pénztár | Products Checkout (egyes felületeken Product Checkout) |
| Köszönőoldal | Thank You Page |
| Fiókom | Account Page |

A feltételekkel eszköz, felhasználói szerep vagy kérés szerint is külön sablont adhatsz meg. A feltételekről bővebben a JetThemeCore fejezetei szólnak.

### A törzs, a fejléc és a lábléc hozzáadása

1. Az új oldalsablonban kattints az **Add body** gombra. Két lehetőséged van: a **Create template** új tartalmat nyit, az **Add from library** egy már meglévő sablont tesz be.
2. Könyvtárból válaszd ki a kész sablont, és kattints a **Use** gombjára. A JetWooBuilder és a JetThemeCore sablonjai is bekerülhetnek. A sablon tulajdonságainál az első ikon színe mutatja, melyik bővítménnyel készült.
3. Új tartalomnál válaszd ki a sablon tartalomtípusát (a JetWooBuilder widgetjeihez az **Elementor** kell), add meg a nevet, és kattints a **Create** gombra. A megjelenő üzenetben az **Edit later** gombbal a Theme Builderben maradsz, a **Go to editor** gombbal az Elementor szerkesztőjébe lépsz.
4. Az **Add header** gombbal vegyél fel fejlécet, a lábléchez ugyanígy járj el: mindkettőt létrehozhatod újonnan, vagy kiválaszthatod a könyvtárból.

Ha a törzset a JetThemeCore-ral hozod létre, a kész sablon a **Crocoblock → Theme Templates** oldalon is megjelenik, az oldalsablon feltételének megfelelő típussal (például termékarchívumként). Ugyanezen az oldalon az **Add New** gombbal közvetlenül is készíthetsz sablonrészt: add meg a **Template Type**-ot (például egyedi termék vagy pénztár), a **Template Content Type**-ot és a nevet, majd a sablon létrehozása után állítsd be a feltételeit, ahogy fent leírtuk.

A JetThemeCore minden oldalsablont a feltétele alapján rendel hozzá az oldalhoz, ezért a **WooCommerce → Beállítások → JetWooBuilder** fülön ne válassz ki hozzá sablont.