# Rácsépítő: rácssablonok készítése

> A Rácsépítő felülete, zónái, beállításai és a rácssablonban használható elemek részletesen.

A Rácsépítővel a **Post grid**, **Post masonry grid**, **Media grid** és **Masonry media grid** elemek rácselem-sablonjait készítheted el és módosíthatod. A Rácsépítő a vezérlőpulton a **WPBakery Page Builder → Rácsépítő** menüpontban érhető el. Új sablont a **Rácssablon hozzáadása** gombbal vehetsz fel. A lista és a gombok bemutatása az [Eszközök](https://hub.hellowp.io/hu/plugins/js_composer/eszkozok/#rácsépítő) fejezetben van, itt a szerkesztő részleteit találod.

![A Rácssablon hozzáadása oldal a Rácsépítő szerkesztőjével](./kepek/funkciok-racsepito-szerkeszto.webp)

*A Rácssablon hozzáadása oldal a Rácsépítő szerkesztőjével* (https://minta-bolt.hu/wp-admin/post-new.php?post_type=vc_grid_item&wpb-backend-editor)

A képen a kék felső menüsáv, alatta a **Normál** zóna három sorral, körülötte pedig a két további zóna helye látszik.

## A felső menüsáv

A Rácsépítő a megszokott WPBakery-felületet használja, a tetején főmenüsávval:

- **Rácssablon blokk** (rétegek ikon): előre elkészített rácssablonok közül választhatsz kiindulópontnak. A sablon kiválasztása felülírja a már elkészített elrendezést.
- **Rácselem beállításai** (fogaskerék ikon): a szokásos Design Options modul, amely az egész rácselemre hat.
- **Animációs előbeállítások** (legördülő lista): alapértéke **Egy blokk (nincs animáció)**, vagyis a rácselemnek nincs rámutatási („Hover”) állapota. Másik előbeállítás választása egy **Hover** fület ad a **Normál** fül mellé.
- **Előnézet** és mentés (**Közzététel**).

## Zónák

- **Normál** zóna: a fő szerkeszthető rész. Három sorból áll, ezek oszlopokra oszthatók.
- **Hover** zóna: a rámutatási állapot elrendezése, felépítése a Normál zónáéhoz hasonló. Csak akkor látható, ha az animációs előbeállítás nem az egyblokkos. A kiválasztott animációtól függően a Hover zóna a Normál zóna fölé kerülhet, teljesen vagy részben helyettesítheti azt.
- **További** zóna: a Normál és a Hover zóna körül található hely. Ez nem animálható az előbeállításokkal, és egyszerre csak egy további zóna adható hozzá.

## Beállítások

A stílusbeállítások négy szinten érhetők el: a rácselemnél, a Normál és Hover zónánál, az oszlopoknál és a tartalmi elemeknél.

### Rácselem

| Beállítás | Mit csinál |
|---|---|
| **Design Options** | Szegély, háttér és más stílusbeállítások az egész rácselemre. |

### Normál és Hover zóna

| 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. Aktív 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: thumbnail, medium, large, full vagy a sablon által megadott méret. Képpontban is megadhatod, például 200×100 (szélesség × magasság). |
| **Extra class name** | Egyedi CSS-osztály, amellyel a stíluslapodban hivatkozhatsz az elemre. |
| **Design Options** | Szegély, háttér és más stílusbeállítások. |

### Oszlop

Az oszlopnál a **Width** (az oszlop szélessége) állítható, a többi beállítás megegyezik a zónáéval: **Use featured image on background?**, **Image size**, **Extra class name** és **Design Options**.

## Elemek a rácssablonban

A sablon felépítéséhez saját tartalmi elemek állnak rendelkezésre. Mindegyiknél megtalálod az **Extra class name** és a **Design Options** beállítást; ezt a táblázatok már nem ismétlik. A **CSS Animation** a böngésző látómezejébe érkező elem animálására való (csak modern böngészőkben működik). Ahol az **Add link** szerepel, ott aktív WooCommerce mellett a „Woo Commerce Add to Cart” is választható.

### Text Block

Bekezdésnyi szöveg, WYSIWYG szerkesztővel formázható. Képet és videót is beilleszthetsz.

| Beállítás | Mit csinál |
|---|---|
| **Text** | A tartalom szerkesztője. |
| **CSS Animation** | Belépési animáció. |

### Separator

Elválasztó vonal.

| Beállítás | Mit csinál |
|---|---|
| **Color** | Az elválasztó színe. |
| **Separator alignment** | Igazítás. |
| **Style** | Az elválasztó stílusa. |
| **Border width** | Vonalvastagság képpontban. |
| **Element width** | Az elem szélessége százalékban. |

### Separator with Text

Elválasztó vonal szöveggel, amely a vonal közepén, bal vagy jobb oldalán állhat. A **Separator** beállításai mellett:

| Beállítás | Mit csinál |
|---|---|
| **Title** | Az elválasztó felirata. |
| **Title position** | A felirat helye. |

### Icon

Ikon a következő könyvtárakból: Font Awesome, Open icons, Typicons, Entypo, Linecons, Mono Social, Material.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Icon library** | Az ikonkönyvtár. |
| **Icon** | Az ikon a könyvtárból. |
| **Color** | Az ikon színe. |
| **Background shape** | Háttérforma az ikonhoz. |
| **Background color** | A háttérforma színe (egyedi szín választásakor színválasztó jelenik meg). |
| **Size** | Az ikon mérete. |
| **Icon alignment** | Igazítás. |
| **URL (Link)** | Az ikon hivatkozása. |
| **CSS Animation** | Belépési animáció. |

### Single Image

Egyszerű kép, CSS-animációval vagy Design Options-szal.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Widget title** | Cím; hagyd üresen, ha nem kell. |
| **Image source** | A kép forrása: Média könyvtár (alapértelmezett) vagy külső hivatkozás. |
| **Image** | Kép a Média könyvtárból. |
| **External link** | A kép külső címe (csak külső forrásnál). |
| **CSS Animation** | Belépési animáció. |
| **Image size** | Képméret névvel vagy képpontban (200×100). Üresen a „thumbnail” méretet használja. |
| **Image alignment** | Igazítás. |
| **Image style** | A megjelenítés stílusa. |

### Button

Gomb sokféle szín- és stílusbeállítással.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Text** | A gomb felirata. |
| **Style** | A gomb stílusa. |
| **Shape** | A gomb alakja. |
| **Color** | A gomb színe (ha a stílus nem „Custom”). |
| **Background color** | Háttérszín színválasztóval (ha a stílus „Custom”). |
| **Text color** | Szövegszín színválasztóval (ha a stílus „Custom”). |
| **Size** | A gomb mérete. |
| **Alignment** | Igazítás. |
| **Set full width button?** | Teljes oszlopszélesség (ha az igazítás nem „Inline”). |
| **Add icon?** | Ikon a gombon, az ikon helye állítható. |
| **CSS Animation** | Belépési animáció. |

### Custom Heading

Egyedi címsor Google Fonts betűkészlettel vagy a sablon betűkészletével. Nem latin karakterek használatához kapcsold be azokat a **WPBakery Page Builder → Általános beállítások** oldalon.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Text** | A címsor szövege. |
| **Element tag** | A HTML-címke. |
| **Text align** | Szövegigazítás. |
| **Font size** | Betűméret. |
| **Line height** | Sormagasság. |
| **Text color** | Szövegszín. |
| **Use theme default font family** | A sablon betűkészletének használata. |
| **Font Family** | Betűkészlet. |
| **Font style** | Betűstílus. |

### Empty Space

Üres hely az elemek között, megadott magassággal. Egyetlen saját beállítása a **Height**.

### Post Title, Post Excerpt, Post Date és Post Author

Négy hasonló elem: a bejegyzés, oldal vagy egyedi tartalomtípus címét, kivonatát, dátumát és szerzőjét jeleníti meg. Médiarácsnál a Post Title a média címét, a Post Excerpt a média leírását adja.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Element tag** | A HTML-címke. |
| **Text align** | Szövegigazítás. |
| **Use custom fonts?** | Google Fonts engedélyezése; megjeleníti az egyedi betűkészletek fület. |

### Post Categories

A bejegyzés kategóriáit adja a sablonhoz.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Style** | A kategóriák megjelenése: például vesszős lista vagy lekerekített. |
| **Color** | A stílus színe (ha a stílus nem „None” és nem vesszős). |
| **Category size** | A kategóriák mérete. |

### Post Image

A kiemelt képet adja, vagy helyet jelöl ki a bejegyzés, az egyedi tartalomtípus vagy a Média könyvtár képének.

| Beállítás | Mit csinál |
|---|---|
| **Add link** | Hivatkozás típusa. |
| **Image size** | Képméret névvel vagy képpontban. |
| **Text align** | Igazítás. |

### Custom Fields

A bejegyzés vagy egyedi tartalomtípus meta értékeiből olvas ki adatot. Nincs **Design Options** beállítása.

| Beállítás | Mit csinál |
|---|---|
| **Field key name** | A lekérdezett egyedi mező neve. |
| **Label** | Felirat az érték előtt. |
| **Align** | Igazítás. |
| **Extra class name** | Egyedi CSS-osztály. |

### Woo elemek és Advanced Custom Fields

Ha a WooCommerce telepítve van, a WooCommerce-elemek is megjelennek a rácssablon elemei között, és a hivatkozható elemeknél az „Add to Cart” hivatkozás is választható. Ha az Advanced Custom Fields telepítve van, az ACF elem is használható: vele egy konkrét egyedi mezőre hivatkozhatsz.