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

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.

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
Archívumtétel	Egyetlen termékkártya, amely a listákban, rácsokban ismétlődik.	Bolt, archívum és kategóriák
Kategóriaelem	Egyetlen kategóriakártya a kategórialistában.	Bolt, archívum és kategóriák
Bolt	A boltoldal és a kategóriaoldalak váza.	Bolt, archívum és kategóriák
Kosár	A kosár oldal (teli és üres kosár).	Kosár, pénztár és köszönőoldal
Pénztár	A pénztár oldal.	Kosár, pénztár és köszönőoldal
Köszönjük	A rendelés leadása utáni oldal.	Kosár, pénztár és köszönőoldal
Fiókom	A Fiókom oldal és a végpontjai.	Fiókom oldal

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

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.

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.

https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor

Az Általános beállítások alatt a sablon Címe és Állapota (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.

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.