# Eszközök

> Sablonok, sablonkönyvtár, elem-előbeállítások, képszűrők, Rácsépítő, Shortcode Mapper, tipográfia, WPBakery AI és SEO.

## Sablonok

![A sablonok ablak](./kepek/sablonok.webp)

*A sablonok ablak* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit&wpb-backend-editor)

A sablonokkal előre összeállított elemegyütteseket menthetsz el, és később újra felhasználhatod őket. Ha több oldalad azonos szerkezetű, ez sok időt spórol. A sablonok ablakát az eszköztár sablon ikonjával vagy a `Shift+T` paranccsal nyithatod meg. Két fül van benne: **My templates** és **Sablonkönyvtár**.

### Az oldal mentése sablonként

1. Nyisd meg a sablonok ablakát.
2. A **Save layout as a template** mezőbe írd be a sablon nevét („Enter name of your template”).
3. Kattints a **Save template** gombra.

### Sablon betöltése és törlése

A **My templates** fülön a mentett sablonok listáját látod. Ha egy sablon nevére kattintasz, az hozzáadódik az aktuális oldalhoz. A sablon törléséhez kattints a neve melletti kuka ikonra.

### Sor vagy szakasz mentése sablonként

Sort vagy szakaszt külön is sablonként menthetsz az oldalból:

1. Nyisd meg a sor vagy a szakasz szerkesztőablakát.
2. Kattints a jobb felső sarokban lévő beállítások menüre.
3. Válaszd a **Save as template** menüpontot, és nevezd el az új sablont.

A sablon megjelenik a sablonok ablak **My templates** fülén.

## Sablonkönyvtár

A Sablonkönyvtár a gyártó által készített, előre elkészített sablonokat kínálja. A letöltött sablonok kitöltéséhez használt képek szabadon felhasználhatók a saját projektjeidben, kereskedelmi célra is. A könyvtár folyamatosan bővül. Hozzáféréshez aktivált közvetlen licenc és aktív támogatási idő kell.

1. Nyisd meg a sablonok ablakát.
2. Válaszd a **Sablonkönyvtár** fület.
3. Kattints az **Access Library** gombra, és várd meg, amíg a bővítmény kapcsolódik a sablontárhoz.
4. Böngészd és nézd meg előnézetben a sablonokat.
5. A sablon előnézetében kattints a **Download Template** gombra.
6. Kattints az **Exit Template Library** gombra.
7. A letöltött sablonok a sablonok ablak **Sablonkönyvtár** fülén jelennek meg.

## Elem-előbeállítások (My elements)

Bármelyik elemet elmentheted egyedi paraméterértékekkel saját elemként. Ezek az **Elem hozzáadása** ablak **My Element** fülén jelennek meg. Az előbeállítások vezérlői az elem szerkesztőablakának jobb felső sarkában, a fogaskerék ikon mögött vannak. Az alapértelmezett értékeket is így módosíthatod.

### Új előbeállítás létrehozása

1. Nyisd meg az elem szerkesztőablakát, és állítsd be a kívánt értékeket.
2. Nyisd meg az előbeállítások vezérlőit (fogaskerék ikon).
3. Válaszd a **Save as element** lehetőséget.
4. Add meg az elem nevét, és mentsd.

### Elem hozzáadása az oldalhoz

1. Nyisd meg az **Elem hozzáadása** ablakot.
2. Válaszd ki az elemet a listából.

### Előbeállítás törlése

1. Nyisd meg az **Elem hozzáadása** ablakot.
2. Lépj a **My Elements** fülre.
3. Kattints a **Manage elements** gombra.
4. Jelöld ki a törölni kívánt elemeket, és kattints a **Delete** ikonra.

## Képszűrők

A WPBakery Média könyvtárában, amely képet használó elemekből érhető el, több mint 20 képszűrő közül választhatsz. A szűrő nem írja felül az eredeti képet: lemásolja, és a másolatra alkalmazza a szűrőt.

1. Nyisd meg a Média könyvtárat egy olyan elemből, amelyben képet választhatsz.
2. Válassz ki egy meglévő képet, vagy tölts fel újat.
3. A kijelölt képnél a Média könyvtár **Attachment Details** részében válaszd ki a kívánt szűrőt.
4. Kattints a **Set Image** gombra a kép hozzáadásához.

Nagy képeknél eltarthat egy ideig a szűrő alkalmazása. Ha a hibaüzenetet kapod („Error while applying filter to the image. Check your server and memory settings.”), a kép túl nagy: csökkentsd a méretét feltöltés előtt, vagy növeld a szerver memóriakorlátját.

## Rácsépítő

![A Rácsépítő listája](./kepek/racsepito-lista.webp)

*A Rácsépítő listája* (https://minta-bolt.hu/wp-admin/edit.php?post_type=vc_grid_item)

A Rácsépítő (a vezérlőpulton **Rácsépítő**) a **Post grid**, **Post masonry grid**, **Media grid** és **Masonry media grid** elemek rácselem-sablonjait hozza létre és módosítja. Új sablont a **Rácssablon hozzáadása** gombbal vehetsz fel.

### A felület

A felső menüsáv a következőket tartalmazza:

- **Grid template block**: előre megadott rácssablon kiindulópontként. A sablon kiválasztása felülírja a már elkészített elrendezést.
- **Grid Element Settings, Design Options**: a szokásos Design Options modul, amely az egész rácselemre hat.
- **Animation presets** (legördülő lista): alapértéke a „Single block”, vagyis a rácselemnek nincs rámutatási („Hover”) állapota. Másik beállítás választása egy **Hover** fület ad a **Normal** fül mellé.
- Előnézet és mentés.

Az elrendezés zónái:

- **Normal** zóna: a fő szerkeszthető rész, három sorból áll, amelyek oszlopokra oszthatók.
- **Hover** zóna: a rámutatási állapot elrendezése. Csak akkor látható, ha az animációs előbeállítás nem a „Single block”. Az animációtól függően a Normal zóna fölé kerülhet, helyettesítheti, vagy részben cserélheti azt.
- **Additional** zóna: további zónák a Normal és a Hover körül. Ezek nem animálhatók, és egyszerre csak egy additional zóna adható hozzá.

### A zónák beállításai

| Beállítás | Mit csinál |
|---|---|
| **Height mode** | A magasság és a szélesség aránya. Az „Original” a képet vágás nélkül méretezi (például falazott rácsnál). |
| **Add link** | Hivatkozás típusa: bejegyzés hivatkozása, nagy kép, nagy kép (prettyPhoto), egyedi. WooCommerce mellett az „Add to Cart” is választható. |
| **Use featured image on background?** | A kiemelt kép felülírja a Design Options háttérképét és színét. |
| **Image size** | Képméret: például thumbnail, medium, large, full, vagy a sablon által meghatározott méret; vagy képpontban megadva (például 200×100). |
| **Extra class name** | Egyedi CSS-osztály az elemhez. |
| **Design Options** | Szegély, háttér és más stílusbeállítások. |

Az oszlopoknál a **Width** (az oszlop szélessége) is állítható, a többi beállítás megegyezik a fentiekkel.

### Elemek a rácssablonban

A rácssablon felépítéséhez ezek az elemek használhatók: **Text Block** (WYSIWYG szöveg, CSS-animáció, extra osztály, Design Options), **Separator** (szín, igazítás, stílus, szegély szélessége, elem szélessége), **Separator with Text** (ugyanez címmel és a cím pozíciójával), **Icon** (ikonkönyvtár, ikon, szín, háttérforma, méret, igazítás, hivatkozás, CSS-animáció), valamint további, a rácselemekhez tartozó tartalmi elemek. Az összes elem beállításait a [Rácsépítő: rácssablonok készítése](https://hub.hellowp.io/hu/plugins/js_composer/funkciok-racsepito/) fejezet írja le.

## Shortcode Mapper

![A Shortcode Mapper oldala](./kepek/shortcode-mapper.webp)

*A Shortcode Mapper oldala* (https://minta-bolt.hu/wp-admin/admin.php?page=vc-automapper)

A Shortcode Mapper segítségével saját vagy harmadik féltől származó shortcode-okat vehetsz fel az elemek listájába. Az oldal a **WPBakery Page Builder → Shortcode Mapper** menüpontban érhető el. A shortcode-nak telepítve kell lennie a webhelyen a leképezéshez.

### 1. A shortcode feldolgozása

1. Kattints a **Shortcode leképezése** gombra a feldolgozó ablak megnyitásához.
2. A beviteli mezőbe másold be a shortcode egy mintáját, például:

```text
[my_shortcode value="100" bgcolor="#8e8e8e" desc="Default values" cssanim="yes" size="50"]
```

3. Kattints a **Parse shortcode** gombra. A minta értékei nem számítanak: a paramétereket és az értékeket később átszerkesztheted.

### 2. A shortcode értékeinek módosítása

A feldolgozás után az alábbiakat szerkesztheted:

- Általános információk: a shortcode fő címkéje, a kategória (az elemmenüben itt jelenik meg a shortcode, alapértelmezés: „My Shortcodes”) és a leírás.
- Ha a shortcode tartalmi résszel is rendelkezik, jelöld be az **Include content param into shortcode** lehetőséget. Ezzel a tartalom paraméter automatikusan bekerül a paraméterek listájába.
- A shortcode paraméterei: hozzáadhatod, szerkesztheted, átrendezheted vagy törölheted őket, ha nem szeretnéd, hogy a felhasználók egy paramétert használjanak.

Minden paraméternek van neve (a szintaxis szerinti paraméternév), címsora (az elem ablakában ez a mező felirata), mezőtípusa (szövegmező, legördülő lista, szövegterület vagy rejtett), alapértelmezett értéke és leírása (a mező alatt jelenik meg). A rejtett mezőtípusú paraméter nem látszik az elem szerkesztőablakában, és az alapértelmezett értékét használja.

## Tipográfia

![A Tipográfia oldal](./kepek/tipografia.webp)

*A Tipográfia oldal* (https://minta-bolt.hu/wp-admin/admin.php?page=vc-typography)

A Typography oldalon külső betűkészleteket (Google Fonts, Adobe Fonts) szinkronizálhatsz, és a betűkészletet támogató elemeknél használhatod őket. A funkcióhoz aktív támogatási idő kell.

### Google Fonts

Ha egy Google Fonts-betűkészlet hiányzik a bővítményből, szinkronizálhatod a legfrissebb gyűjteményt.

1. Menj ide: **WPBakery Page Builder → Typography**.
2. A **Google Fonts** sorban kattints a **Synchronize** gombra. Ez frissíti a bővítmény betűkészlet-könyvtárát, és behozza az újonnan megjelent betűkészleteket.
3. A szinkronizálás után az új betűkészletek elérhetők az egyedi betűkészletet támogató elemeknél.

### Adobe Fonts

Ha van Adobe Fonts-beállításod egy webes projekthez, ezeket az Adobe Web Project ID segítségével adhatod hozzá.

1. Keresd meg az Adobe Web Project ID-t az Adobe Fonts **My Projects** oldalán.
2. Másold ki a beilleszteni kívánt betűkészlet-gyűjtemény Project ID-ját.
3. Menj ide: **WPBakery Page Builder → Typography**.
4. Illeszd be az azonosítót az **Adobe Web Project ID** mezőbe, és kattints a **Synchronize** gombra.
5. A projekt betűkészletei ezután elérhetők a bővítmény betűkészletet támogató elemeiben.

## WPBakery AI

![A WPBakery AI oldal](./kepek/wpbakery-ai.webp)

*A WPBakery AI oldal* (https://minta-bolt.hu/wp-admin/admin.php?page=vc-ai)

A WPBakery AI szöveget és egyedi kódot (HTML, CSS, JS) állít elő vagy javít. A funkcióhoz aktív támogatási idő szükséges. Ahol egy mező támogatja az AI-generálást, mellette egy AI ikon jelenik meg. Erre kattintva megnyílik a WPBakery AI ablaka.

### Tartalom generálása

A **Content generation** ablakban három típus közül választhatsz:

1. **New content**: új tartalmat állít elő a mezőbe.
2. **Improve existing**: a meglévő tartalmat javítja.
3. **Translate**: bármilyen nyelvre lefordítja.

A **Describe content** mezőbe írd be a kérést, minél részletesebben. Például: „Write an eye-catching headline for the sales page of the cake shop.” A **Tone of Voice**, **Length** és **Keywords** mezőkkel finomíthatod az eredményt. A **Generate** gomb után a szöveg az **Output** mezőben jelenik meg, az **Insert** gombbal teheted be a mezőbe. Más eredményhez módosítsd a mezőket, és kattints a **Regenerate** gombra. A hosszú cikkek generálása tovább tart, mint a címeké vagy a rövid leírásoké.

### Kód generálása

A kódgeneráló ablak az egyedi CSS, az egyedi JS, a nyers HTML és a nyers JS mezőkben érhető el, és egyetlen mezőt tartalmaz a kérés beírásához. A WPBakery AI kódot állíthat elő mindenhol, ahol a bővítmény CSS- vagy JS-kódot enged megadni: **WPBakery Page Builder → Egyedi CSS**, **Egyéni JS** (globális kód), valamint az oldalbeállítások egyedi CSS és egyedi JavaScript részében (helyi kód). Konkrétabb CSS-választóhoz az AI általános választót ad `wpbai` osztály- vagy azonosító-előtaggal. Ezt át kell írnod az elemnek megfelelő választóra.

### AI-kreditek

Az aktív támogatási idejű licenc licencenként havi 20 000 AI-kreditet ad. A kreditek az AI-generálás során fogynak, és minden hónapban automatikusan megújulnak. A felhasználásodat a **WPBakery Page Builder → WPBakery AI** oldalon láthatod (a képen: „Your monthly credit usage”). Ha a bővítményt a sablonnal együtt kaptad, a közvetlen licenc vásárlásával érheted el az AI funkciót. Ha a licenc támogatási ideje lejárt, a fiókod licencek részén megújíthatod.

## SEO

![A SEO ablak](./kepek/seo.webp)

*A SEO ablak* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit&wpb-backend-editor=)

A SEO funkcióval az oldal SEO-beállításait a szerkesztőből kezelheted: a meta leírást, a tartalom elemzését és a közösségi médiában megjelenő képet. Az eszköztár **SEO** gombjával (vagy a `Shift+I` paranccsal) a frontend és a backend szerkesztőből is megnyitható. Három fül van benne:

1. **Általános**: a cím, a meta leírás, az oldal slugja és a kulcsszavak megjelenítését szabályozza (a képen a **Focus keyphrase**, a **SEO title**, a **Slug** és a **Meta description** mező látszik, valamint az előnézet mobilon vagy asztali gépen). Ezek nagy része a WPBakery AI-val is előállítható.
2. **Content analysis**: elemzi a tartalmat, és javaslatokat ad a javításhoz.
3. **Közösségi**: azt szabályozza, hogyan jelenik meg a tartalom olyan platformokon, mint a Facebook és az X: a címet, a leírást és a képet adhatod meg. Ha az oldal hivatkozását megosztják, itt megadott kép jelenik meg a közösségi médiában.

## Module Manager

A Module Manager (lásd [Beállítások](https://hub.hellowp.io/hu/plugins/js_composer/beallitasok/#module-manager)) lehetővé teszi, hogy a nem használt funkciókat kikapcsold.