# Gyakorlati útmutatók

> Rövid, lépésenkénti útmutatók gyakori feladatokhoz: kép hozzáadása és szerkesztése, képszűrő, belső sor, oszlopköz, teljes magasságú sor, háttérvideó, parallax, rácsok, szövegblokk és galéria.

Ez a fejezet a leggyakoribb feladatokat veszi sorra. A beállítások teljes listáját a megfelelő elemfejezetek tartalmazzák, ide a gyakorlati menet kerül.

## Kép hozzáadása és szerkesztése

A **Single image** elem egyetlen képet jelenít meg az oldalon.

1. Nyisd meg az oldalt a WPBakery szerkesztőjében, kattints a plusz ikonra, keress rá a **Single image** elemre, és add hozzá.
2. Válaszd ki a **Kép forrását**: **Médiatár** (már feltöltött vagy itt feltöltött kép), külső hivatkozás (a kép URL-je), vagy a kiemelt kép (az aktuális bejegyzés vagy oldal kiemelt képe).
3. A **Kattintáskor végrehajtandó művelet** beállítással döntsd el, mi történjen kattintáskor: semmi, a nagy kép megnyitása, megnyitás lightboxban, egyedi hivatkozás vagy nagyítás.
4. Ha a médiatárból választottál képet, bekapcsolhatod az **Add caption** beállítást, így megjelenik a képhez mentett aláírás. Alapból ki van kapcsolva.
5. Állítsd be a **Képméretet**: WordPress-méret (például thumbnail, medium, large), a teljes méret, vagy egyéni méret, például `600x500`.
6. Válaszd ki a **Kép stílusát** és az **Igazítást**. Saját stílushoz írj CSS-osztályt az **Extra osztálynév** mezőbe.
7. A **Design options** fülön a kép margóját, belső margóját, szegélyét és hátterét módosíthatod, és animációt is választhatsz.
8. Mentsd a módosításokat, majd frissítsd az oldalt.

![Az egyetlen kép Design options füle](./kepek/oktatoanyagok-kep-design.webp)

*Az egyetlen kép Design options füle* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

A képen a **Design options** fül látszik: a margó, a szegély és a belső margó mezői, a háttérszín és háttérkép, valamint a **CSS animation**.

## Képszűrő használata

A képszűrők a médiatárból választott képek megjelenését változtatják meg. Használhatod őket egyedi képnél, galériaképnél és háttérképnél is.

**Szűrő egy képre:**

1. Adj hozzá vagy szerkessz egy **Single image** elemet.
2. Válassz egy képet a médiatárból.
3. Nyisd meg a kép beállításait, és válassz képszűrőt.
4. Alkalmazd a szűrőt, jelöld ki a képet, és mentsd az elemet.

A szűrőt új kép kiválasztása közben is alkalmazhatod.

**Szűrő háttérképre:**

1. Nyisd meg az elem beállításait, és lépj a **Design options** fülre.
2. Válaszd ki vagy szerkeszd a háttérképet.
3. Válassz szűrőt, és alkalmazd.
4. Mentsd a módosításokat.

Ha az összetartozó képeknek egységes megjelenést szeretnél, mindegyiken ugyanazt a szűrőt használd. A szűrők részletes leírása az [Eszközök](https://hub.hellowp.io/hu/plugins/js_composer/eszkozok/#képszűrők) fejezetben van.

## Belső sor hozzáadása

A belső sor új oszlopelrendezést ad egy meglévő oszlopon belül. Akkor hasznos, ha egy szakasz egyik részének más szerkezet kell, például két oszlop egy nagyobb szakaszon belül.

1. Nyisd meg az oldalt a Frontend szerkesztőben.
2. Adj hozzá egy **Sort**, vagy nyiss meg egy meglévőt.
3. Kattints a plusz ikonra abban az oszlopban, ahová a belső sort szánod.
4. Válaszd a **Sor** elemet.
5. A sorelrendezéssel oszd oszlopokra a belső sort.
6. Tegyél tartalmi elemeket az oszlopokba.

Például a bal oldali oszlopba tehetsz szöveget és képet, a jobb oldaliba egy másik szöveg-kép párost. A formázást az elemek beállításaival és a **Design options** füllel finomíthatod. A fő sor oszlopaiba beilleszthetsz belső sort, de belső soron belül nem lehet újabb belső sor.

## Oszlopköz módosítása

1. Nyisd meg a sor szerkesztőablakát.
2. Írd át a **Column gap** értékét.

Az oszlopköz a sor összes oszlopa között érvényes. Az alapérték 0. Mobilon, ha az oszlopok egymás alá rendeződnek, az oszlopköz az egymás alatti oszlopok között is megjelenik.

![A sor beállításai: oszlopköz, teljes magasság, háttérvideó és parallax](./kepek/oktatoanyagok-sor-hatter.webp)

*A sor beállításai: oszlopköz, teljes magasság, háttérvideó és parallax* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=8&post_type=page)

A képen a sor **Általános** fülén a **Column gap**, a **Full height**, a **Video background** és a **Parallax** beállítás látszik.

## Teljes magasságú sor és háttérvideó

Bármelyik sort teljes magasságúvá teheted: kapcsold be a sor szerkesztőablakában a **Full height** beállítást. A sor ilyenkor a böngészőablak magasságát tölti ki.

A sor hátterébe YouTube-videót is tehetsz: a **Video background** beállításnál add meg a videó hivatkozását. A háttérvideós sorra parallax hatást is alkalmazhatsz.

## Parallax hatás a sor hátterén

A sor szerkesztőablakában a **Parallax** beállítással kétféle hatás közül választhatsz: egyszerű (simple) vagy áttűnő (fade). Ha nem adsz meg külön parallaxképet, a bővítmény a sor **Design options** fülén beállított háttérképet használja.

Tipp: a parallaxképet (PNG formátumban) és a **Design options** háttérképét együtt is használhatod, így összetettebb, egymásra csúszó hatásokat érhetsz el.

## Bejegyzés- és médiarács hozzáadása

Négy rácselem áll rendelkezésre az elemmenüben:

- **Post Grid**
- **Post Masonry Grid**
- **Media Grid**
- **Masonry Media Grid**

A bejegyzésrács és a masonry bejegyzésrács bejegyzéseket, oldalakat és egyedi tartalomtípusokat (például WooCommerce-termékeket) jelenít meg rácsban. A beállításaik a [Rácsok, csúszkák és oldalsáv](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-racsok-es-csuszkak/) fejezetben vannak.

## Régi stílusú bejegyzésrács a Rácsépítővel

A Rácsépítővel saját rácssablont készíthetsz, például a régi stílusú bejegyzésrács mintájára. A mentett sablon megjelenik a rácselem **Item Design** beállításában, és a Rácsépítőben bármikor módosíthatod. A Rácsépítő használatát a [Rácsépítő](https://hub.hellowp.io/hu/plugins/js_composer/funkciok-racsepito/) fejezet írja le.

## Szövegblokk hozzáadása

1. Kattints a plusz ikonra.
2. Válaszd a szövegblokk elemet.
3. Írd meg a szöveget, és mentsd.

A szövegblokk beállításai a [Szöveg, elválasztók és üzenetek](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-szoveg-elvalasztok-uzenetek/) fejezetben vannak.

## Képgaléria hozzáadása

Galériát a médiatár képeiből készíthetsz az **Image gallery** elemmel: add hozzá az elemet, válaszd ki a képeket, és állítsd be a galéria típusát. A beállításokat a [Képek, galéria, videó és térkép](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-kepek-es-media/) fejezet sorolja fel.

## Saját szín hozzáadása egy legördülő listához

Fejlesztők a bővítmény belső API-jával egyetlen paraméter értékeit módosíthatják, így egy legördülő listát például színekkel is kiegészíthetnek. Ez kódot igényel, a szerkesztő felületén nem állítható.