# Tartalmi elemek

> A WPBakery elemeinek áttekintése, a gyakori elemek használata: kép, galéria, rács, fülek, Google Maps, címsor, üres hely.

A tartalmi elemek az oldal építőkockái: a sorokba és oszlopokba helyezed őket, és az elrendezést ezekből állítod össze. Az **Elem hozzáadása** ablakban több mint 40 elem található. A legtöbb elem beállításait a ceruza ikonra kattintva éred el, a módosításokat a mentés gombbal véglegesítheted.

![Az Elem hozzáadása ablak](./kepek/elem-hozzaadasa.webp)

*Az Elem hozzáadása ablak* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit&wpb-backend-editor)

A képen az elemek ikonjai láthatók. A felület feliratai részben angolul maradtak (például **Text block**, **Single image**), ezért a leírásban az elemek nevét a helyi felületen látható formában adjuk meg.

## Szerkezeti elemek

| Elem | Mit csinál |
|---|---|
| **Sor** | Az oldal fő építőeleme: oszlopokra osztható logikai blokk. A sorok száma nem korlátozott. A sor áthelyezéséhez fogd meg a bal felső sarkában lévő fogót, és húzd függőlegesen. Belső sort is beilleszthetsz, de belső soron belül nem lehet újabb belső sor. |
| **Oszlop** | A sor része, ebben vannak a tartalmi elemek. Az oszlopokat vízszintesen húzva átrendezheted. A **Width & Responsiveness** fülön a szélességet, az eltolást és az eszközönkénti láthatóságot állíthatod. |
| **Szakasz** | Gyökérszintű konténer, amely több sort fog össze. Csak az oldal gyökerébe illeszthető, és csak sor lehet benne. Beállítható teljes magasságúra, videó- vagy parallaxháttérre, kikapcsolható („Disable section”), és azonosítót is kaphat. |
| **Empty space** | Üres hely két elem között, megadott magassággal. |
| **Elválasztó**, **Separator with text**, **Zigzag separator** | Elválasztó vonal. A feliratos változatban a szöveg középen, bal oldalon vagy jobb oldalon lehet; a cikkcakk vonal SVG-grafika. Beállítható a színe, a stílusa (folytonos, pontozott, szaggatott, árnyékos), a szélessége és az igazítása. |

## Szöveg és kiemelés

| Elem | Mit csinál |
|---|---|
| **Text block** | Bekezdésszöveg a vizuális szerkesztővel (TinyMCE). Képet és videót is beszúrhatsz bele. Harmadik féltől származó shortcode-ot is beírhatsz ide. |
| **Custom heading** | Egyedi címsor Google Fonts betűkészlettel és stílusbeállításokkal. Ha nem latin karaktereket használsz, kapcsold be a megfelelő részhalmazt az **Általános beállítások** oldalon. |
| **Message box** | Feltűnő üzenet (siker, hiba, figyelmeztetés stb.). |
| **GYIK** | Lenyitható (toggle) elem. |
| **Gomb** | Gomb sokféle színnel és stílussal. |
| **Call to action** | Cselekvésre ösztönző blokk címmel, szöveggel és gombbal. |
| **Hover box** | Interaktív doboz képpel és szöveggel, rámutatáskor változó állapottal. |
| **Pricing table** | Díjcsomagokat bemutató táblázat. |
| **Copyright** | Szerzői jogi sor automatikusan frissülő évszámmal. |
| **Ikon** | Ikon több ikonkönyvtárból: Font Awesome, Open icons, Typicons, Entypo, Linecons, Mono Social, Material. Állítható a színe, a mérete, a háttérformája és az igazítása, hivatkozást is rendelhetsz hozzá. |

## Képek és média

| Elem | Mit csinál |
|---|---|
| **Single image** | Egyetlen kép, stílusbeállításokkal, CSS-animációval és Design Options beállításokkal. |
| **Image gallery** | Reszponzív galéria: Flex Slider, Nivo Slider vagy képrács. |
| **Image carousel** | Rögzített méretű, animált képkarusszel. |
| **Video player** | Videó beszúrása a WordPress által elfogadott formátumokban. |
| **Google maps** | Térkép beszúrása. |
| **Flickr widget** | A Flickr-képfolyam megjelenítése (a Flickr-azonosítódra szükség van). |

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

1. Nyisd meg az oldalt a szerkesztőben, kattints a plusz ikonra, és keress rá a **Single image** elemre.
2. Válaszd ki az elemet az oldalhoz adáshoz.
3. Válaszd ki a kép forrását: **Media Library** (már feltöltött vagy új kép), **External link** (külső URL) vagy **Featured image** (az aktuális bejegyzés vagy oldal kiemelt képe).
4. Az **On click action** beállítással dönthetsz a kattintás hatásáról: nincs művelet, a teljes vagy nagy méretű kép megnyitása, lightbox, egyedi hivatkozás, vagy nagyítás.
5. A Média könyvtárból választott képnél megjelenítheted a képaláírást (alapértelmezés szerint ki van kapcsolva).
6. Állítsd be a méretet: szabványos WordPress-méret (thumbnail, medium, large), az eredeti méret, vagy egyéni méret, például `600x500`.
7. Válassz képstílust és igazítást. További CSS-stílushoz az **Extra class name** mezőbe írj osztálynevet.
8. A **Design Options** fülön a margót, a kitöltést, a szegélyt és a hátteret állíthatod, valamint animációt is választhatsz.
9. Mentsd a módosításokat, és frissítsd az oldalt.

### Képszűrők

A képszűrőkről az [Eszközök](https://hub.hellowp.io/hu/plugins/js_composer/eszkozok/#képszűrők) fejezet szól.

### Google Maps

A **Google maps** elemnél a térképet úgy illesztheted be, hogy a **Location** mezőbe beírod a címet vagy a hely nevét (például „London Eye, London, United Kingdom”), a bővítmény pedig automatikusan megjeleníti a térképet. Megadhatod a magasságot képpontban (például 400px), a nagyítást (1 és 20 között, az alapérték 10), és kiválaszthatsz egy térképstílust (például **Default**, **Satellite**, **Hybrid**).

A régebbi, beágyazókódos módszernél a Google Maps oldalán a **Share or embed map** menüpont **Embed map** lapjáról másolt kódot az elem **Map embed iframe** mezőjébe kell illeszteni.

## Összetett tartalomelemek

| Elem | Mit csinál |
|---|---|
| **Fülek** (Tabs) | Fülekkel tagolt tartalom. Belső szakaszai a sorhoz és oszlophoz hasonlóan épülnek, bármennyi szakaszt hozzáadhatsz, és bármilyen tartalmat tehetsz beléjük. |
| **Körbevezetés** (Tours) | Fülekkel tagolt tartalom a fülekhez hasonló felépítéssel. |
| **Harmonika** (Accordion) | Lenyitható szakaszokból álló elem. |
| **Pageable container** | Lapozható tartalomtároló. Belső szakaszai külön oldalakat alkotnak. |
| **Toggle container** | Lapozható tartalomtároló. |

Minden ilyen elemhez tartozik egy szakaszelem is (például Tabs Section), amely egy adott fület vagy szakaszt vezérel. Kis képernyőn a fülek és a körbevezetések harmonikává alakulhatnak.

## Rácsok és csúszkák

| Elem | Mit csinál |
|---|---|
| **Post grid** | A webhely bejegyzéseit rácsban jeleníti meg. Kiválaszthatod a tartalomtípust, megadhatsz saját lekérdezést, és megszabhatod, milyen adatok jelenjenek meg. Oldalakat és egyedi bejegyzéstípusokat is megjeleníthet (például WooCommerce termékeket). |
| **Post masonry grid** | Ugyanez „masonry” (falazott) rácsban. |
| **Media grid** | A Média könyvtár elemeit jeleníti meg rácsban. |
| **Masonry media grid** | Ugyanez falazott rácsban. |
| **Posts slider** | Csúszka a bejegyzésekből, oldalakból vagy egyedi tartalmakból, kiemelt képekkel. |

A rácselemek kinézetét a **Rácsépítő** sablonjaival szabhatod testre, lásd az [Eszközök](https://hub.hellowp.io/hu/plugins/js_composer/eszkozok/#rácsépítő) fejezetet.

## Egyéb elemek

| Elem | Mit csinál |
|---|---|
| **Nyers HTML**, **Nyers JS** | Saját HTML- és JavaScript-kód beillesztése. A WPBakery AI segít a kód előállításában. |
| **Progress bar** | Folyamatjelző sáv egyedi értékekkel. |
| **Pie chart**, **Round chart**, **Line chart** | Kördiagram, kör alakú és vonaldiagram egyedi értékekkel és stílusbeállításokkal. |
| **Widgetised sidebar** | Előzőleg létrehozott widgetterület beillesztése. |
| **Pinterest**, **X button** | Közösségimédia-gombok. |
| Alapértelmezett WordPress-widgetek | Az összes alapértelmezett WP-widget megjelenik az elemlistában. |
| Gutenberg elem | Gutenberg-szerkesztő beillesztése az elrendezésbe. Ugyanazon az oldalon bármennyi Gutenberg-példányt használhatsz. |
| WooCommerce elemek | Ha a WooCommerce is telepítve van, az összes WooCommerce shortcode automatikusan elemként elérhető az **Elem hozzáadása** ablakban. |

## Gyakori műveletek

### Elemek húzása, klónozása, minimalizálása

- Elem áthelyezéséhez fogd meg, és húzd az új helyére. Az oszlopokat vízszintesen, a sorokat függőlegesen húzhatod.
- Az elem klónozása a klónozás ikonnal, egy kattintással történik.
- A backend szerkesztőben a sor összecsukható, így hosszú elrendezéseknél kevesebbet kell görgetned.

### Rács hozzáadása

A rácselemek (**Post grid**, **Post masonry grid**, **Media grid**, **Masonry media grid**) az **Elem hozzáadása** ablakban érhetők el.

### Ugrás az oldal adott sorához

A sor **Elem ID** mezőjébe egyedi azonosítót írva a sorra horgonyhivatkozással is mutathatsz.

### Az elemek vezérlése különböző eszközökön

Az oszlopok **Width & Responsiveness** fülén eszközönként állíthatod a szélességet és a láthatóságot. A frontend szerkesztő eszközválasztójával megnézheted, hogyan néz ki az oldal különböző eszközökön.