# Szerkesztők és elrendezés

> A backend és a frontend szerkesztő, sorok és oszlopok, reszponzív beállítások, másolás, billentyűparancsok és az egyedi kód.

## Tartalomtípusok kiválasztása

A bővítmény alapértelmezés szerint csak az oldalakon érhető el. Hogy a **WPBakery Page Builder** mely tartalmakon működjön, a **WPBakery Page Builder → Szerepkezelő** oldalon, szerepkörönként állíthatod be: a **Bejegyzéstípusok** mezőben az oldalak, a bejegyzések, vagy az egyedi bejegyzéstípusok közül választhatsz. A beállítást adminisztrátorként tudod módosítani.

Ha egy bejegyzésen vagy egyedi tartalomtípuson nem látod a szerkesztőt, ellenőrizd ezt a beállítást.

## A szerkesztők

Egy oldal szerkesztőoldalán a WordPress blokkszerkesztőjében a **WPBakery Page Builder** gombbal válthatsz át a bővítmény módjára. Utána három lehetőség közül választhatsz: **Klasszikus mód**, **Frontend szerkesztő** és **Gutenberg-szerkesztő**.

### Backend szerkesztő

![A backend szerkesztő egy oldalon](./kepek/szerkeszto-oldal.webp)

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

A backend szerkesztő a WordPress szerkesztőoldalán, a címe alatt jelenik meg. A kék eszköztáron találod az **Elem hozzáadása**, a sablonok, a visszavonás és ismétlés, a **SEO**, az egyedi kód és a **Beállítások** gombját. A gombokat a **Előnézet**, **Frissítés** és **Frontend** gombok egészítik ki. A kép azt az oldalt mutatja, amelyen egy sor két oszlopra van osztva, az elemek pedig az oszlopokban sorakoznak.

Hosszú elrendezéseknél a backend szerkesztőben egy sort összecsukhatsz (minimalizálhatsz), így kevesebbet kell görgetned.

### Frontend szerkesztő

![A frontend szerkesztő](./kepek/frontend-szerkeszto.webp)

*A frontend szerkesztő* (https://minta-bolt.hu/wp-admin/post.php?vc_action=vc_inline&post_id=6&post_type=page)

A frontend szerkesztőben az oldalt úgy szerkesztheted, ahogy a látogatók is látni fogják. A felső eszköztáron az elemek hozzáadása, a rétegek, a visszavonás és ismétlés, a SEO, az eszközválasztó (reszponzivitás-ellenőrzés), az egyedi kód és a beállítások gombjai vannak, mellettük a **Frissítés** gombbal. A szerkesztőt a **Frontend szerkesztő** gombbal, vagy a backend szerkesztő **Frontend** gombjával nyithatod meg.

### Elem hozzáadása

![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)

Az eszköztár plusz ikonjával (vagy a `Shift+A` billentyűparanccsal) nyitható meg az **Elem hozzáadása** ablak. Fülek szerint szűrhetsz: **Mind**, **Tartalom**, **Közösségi**, **Szerkezet**, **WordPress widgetek**; a keresőmezővel név szerint is kereshetsz. Az elemek leírását a [Tartalmi elemek](https://hub.hellowp.io/hu/plugins/js_composer/tartalmi-elemek/) fejezet adja.

### Oldalbeállítások

![Az oldalbeállítások ablak](./kepek/oldalbeallitasok.webp)

*Az oldalbeállítások ablak* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=edit&wpb-backend-editor=&vc_page_settings=true)

Az eszköztár fogaskerék ikonja az oldal beállításait nyitja meg (`Shift+S`). Itt választhatod ki az oldal elrendezését (**Layout**) a két lehetőség közül:

- **WordPress theme**: a sablon alapértelmezett elrendezése, fejléccel, lábléccel és oldalsávval.
- **Blank page canvas**: üres vászon, amelyen nincs sablonfejléc, lábléc vagy oldalsáv.

Egy új oldalnál, mielőtt tartalmat adnál hozzá, a szerkesztő is felkínálja ezt a két választást. A beállítóablakból az oldalra vonatkozó egyedi CSS és JS is elérhető.

## Sorok és oszlopok

Az oldal tartalmát sorok és oszlopok rendezik. Egy sor egy vagy több oszlopot tartalmaz, az oszlopokba kerülnek a tartalmi elemek: szöveg, kép, ikon, gomb.

### Sor hozzáadása

1. A frontend szerkesztőben kattints az **Elem hozzáadása** gombra, vagy a navigációs sáv plusz ikonjára.
2. Válaszd a **Sor** elemet.
3. Az új sor egy, a sor teljes szélességét kitöltő oszlopot tartalmaz.

### Oszlopok hozzáadása

1. Kattints a sor **Elrendezés módosítása** ikonjára.
2. Válassz az előre megadott oszlopelrendezések közül, vagy hozz létre egyéni sorelrendezést.

Egy kétoszlopos elrendezés például két egyenlő oszlopra osztja a sort, és az elrendezésjelző ezt 1/2 + 1/2 formában mutatja. Háromoszlopos és négyoszlopos elrendezések is választhatók. Az oszlopokat kézzel is hozzáadhatod ugyanabba a sorba. Ha az oszlopok már kitöltik a rendelkezésre álló szélességet, az újabb oszlop a következő sorba kerül, de a sor ugyanaz marad. Így összetettebb felépítést is létrehozhatsz anélkül, hogy minden sornak külön sor elemet kellene felvenned.

Ha az oszlopokat kiválasztottad, tegyél tartalmi elemeket mindegyikbe: például szöveget az egyikbe, képet a másikba. A bővítmény reszponzív rácsot használ, az oszlopszélességeket és a viselkedést eszközönként finomíthatod (lásd lent).

### Belső sor

A belső sor új oszlopelrendezést ad egy meglévő oszlopon belül, így összetett szakaszokat építhetsz a fő sor módosítása nélkül. Például egy nagyobb hős szakaszon belül két oszlopot.

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. Adj elemeket az oszlopokba.

A fő sor oszlopaiba beilleszthetsz belső sort, de belső sor nem tartalmazhat másik belső sort.

### A sor beállításai

![A sor szerkesztőablaka](./kepek/sor-beallitasai.webp)

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

A sor szerkesztőablaka két fület tartalmaz: **Általános** és **Design options**. Az **Általános** fül beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Sor nyújtása** | A sor kiterjesztése vízszintesen. Az alapérték a **Nincs**: a sor és tartalma a sablon által meghatározott szélességben marad. A további lehetőségek a sort teljes szélességűre nyújtják: csak a sort (a tartalom az eredeti szélességben marad), a sort és a tartalmat is (15 képpontos oldalsó kitöltéssel), vagy a sort és a tartalmat kitöltés nélkül. |
| **Column gap** | Az oszlopok közti távolság a sorban (alapérték: 0). Mobilon az egymás alá rendeződő oszlopok között is megjelenik. |
| **Min height** | A sor legkisebb magassága. |
| **Tartalom pozíciója** | A tartalom függőleges helye az oszlopokban (négy ikon közül választhatsz: alapértelmezett, felül, középen, alul). |
| **Full height** | A sor a böngészőablak teljes magasságáig terjed ki. Ha a tartalom nagyobb a képernyőnél, a sor is nagyobb lesz nála. |
| **Azonos magasság** | A sor összes oszlopa egyenlő magas lesz, a leghosszabb oszlophoz igazodva. |
| **RTL columns** | Az RTL (jobbról balra) oszlopirány kapcsolója. |
| **Video background**, **Parallax** | A sor háttere: YouTube-videó, illetve parallax hatás. |
| **YouTube URL**, **Kép**, **Speed** | A videó hivatkozása, a parallax képe és a parallax sebessége. |
| **Elem ID** | A sor azonosítója. |
| **Extra osztálynév** | Egyedi CSS-osztály a sorhoz. |
| **Row title**, **Hide row** | A sor címe a szerkesztőben, és a sor elrejtése. |

Megjegyzések a teljes szélességű és a teljes magasságú sorhoz:

- A teljes szélességű sor nem feltétlenül működik megfelelően, ha a sablon egy szülőelemre `overflow: hidden` szabályt alkalmaz.
- Ha a teljes magasságú sor az oldal betöltésekor látható, a bővítmény figyelembe veszi a felette lévő tartalmat és fejlécet: a sor a megmaradó látható területet tölti ki. Lejjebb lévő teljes magasságú sor a böngészőablak teljes magasságát használja.

### Sor háttere: parallax és videó

A **Video background** beállítással YouTube-videót tehetsz a sor hátterébe: a videó hivatkozását a **YouTube URL** mezőbe másold. A **Parallax** beállításnál két hatás közül választhatsz: az egyszerű és a halványuló. Ha nincs külön parallaxkép, a bővítmény a **Design options** fül háttérképét használja. A parallax sebességének alapértéke 1,5, a hagyományos parallax hatáshoz legalább 1,0 kell. A videóháttérre is alkalmazhatsz parallaxot, a YouTube-videó pedig felülírja a háttérképeket. PNG formátumú parallaxképet és a **Design options** háttérképét kombinálva összetettebb hatásokat is készíthetsz.

### Horgony a sorhoz

A sor **Elem ID** mezőjébe írt azonosítót horgonyként használhatod hivatkozásokhoz, illetve JavaScript-megoldásokhoz. Az azonosító legyen egyedi és érvényes.

## Reszponzív beállítások

Az oszlopok szerkesztőablakában a **Width & Responsiveness** fülön az oszlopok szélességét és eltolását külön beállíthatod az alapértelmezett és más eszközméretekre. Az oszlopot el is rejtheted bizonyos eszköztípusokon, például mobilon. A belső oszlopoknál is használhatók ezek a beállítások.

Az eszközök közti váltással a frontend szerkesztő eszköztárán ellenőrizheted az oldal kinézetét. A tartalmi elemek 768 px alatti képernyőn alapesetben egymás alá rendeződnek (a töréspontot a **Design options** oldalon módosíthatod). A **Tabs**, **Tours** és **Accordion** elemek kis képernyőn harmonikaként viselkedhetnek.

## Elem tervezési beállítások (Design Options)

A **Sor**, az **Oszlop**, a **Text block**, a **Single image** és a **Video player** elem szerkesztőablakának **Design Options** fülén szabályozhatod:

- a margót, a kitöltést és a szegélyt az egész elemre, vagy csak a bal, jobb, felső vagy alsó oldalra;
- a szegély stílusát, színét és lekerekítését;
- a háttérszínt;
- a háttérkép és annak pozícióstílusát.

## Másolás és beillesztés

Az elemek és sorok másolhatók ugyanazon az oldalon belül, ugyanazon webhely más oldalai között, sőt más webhelyek oldalai között is. A funkció a backend és a frontend szerkesztőben is működik.

### Ugyanazon a webhelyen

1. Kattints az elem vagy sor másolás ikonjára (a klónozás ikon mellett).
2. Ha sort másoltál, beillesztheted a `Ctrl+V` (Macen `Cmd+V`) billentyűparanccsal, vagy a sorban a másolás ikon melletti beillesztés ikonnal.
3. Ha tartalmi elemet másoltál, az oszlop szerkesztési beállításaiban lévő beillesztés ikonnal illesztheted be az oszlopba.

### Más webhelyre

- Mindkét webhelyen ugyanannak a verziójú WPBakery Page Builder bővítménynek és kiegészítőinek kell futnia.
- Sor másolásánál a másolás után a másik webhelyen a `Ctrl+V` (`Cmd+V`) paranccsal illeszd be. A sor a meglévő tartalom aljára kerül.
- Egyedi elem másolásához a sort kell lemásolnod, amelyik az elemet tartalmazza.
- Média (képek, videók) nem vándorol automatikusan: újra fel kell töltened a cél webhelyre.

## Billentyűparancsok

| Funkció | Parancs |
|---|---|
| Visszavonás | `Cmd/Ctrl+Z` |
| Ismétlés | `Cmd/Ctrl+Shift+Z` |
| Az **Elem hozzáadása** ablak megnyitása | `Shift+A` |
| A sablonok ablak megnyitása | `Shift+T` |
| Beállítások megnyitása | `Shift+S` |
| Egyedi kód megnyitása | `Shift+C` |
| SEO/Insights megnyitása | `Shift+I` |
| A legutóbb megnyitott panel bezárása (egyenként) | `Esc` |
| Az aktuális ablak mentése (ha nincs automatikus mentés) | `Cmd/Ctrl+Shift+S` |
| Oldal vagy bejegyzés mentése/közzététele (csak ha nincs megnyitott panel) | `Cmd/Ctrl+Shift+S` |
| Oldal vagy bejegyzés előnézete | `Cmd/Ctrl+Shift+P` |
| Oldal vagy bejegyzés megtekintése | `Cmd/Ctrl+Shift+V` |
| Váltás a fülek között (az elemablakban vagy a szerkesztőablakban) | `Shift+Tab` |

A billentyűparancsokat az **Általános beállítások** oldal **Disable Keyboard Shortcuts** kapcsolójával tilthatod le.

## Egyedi CSS és JS

A CSS-hez a bővítmény több lehetőséget ad:

1. **Design options**: a **WPBakery Page Builder → Design options** oldalon az elemek alapértelmezett színét és margóit módosíthatod.
2. **Egyedi CSS**: a **WPBakery Page Builder → Egyedi CSS** oldalon saját CSS-szabályokat adhatsz meg az egész webhelyre.
3. **Oldalra vagy bejegyzésre szóló CSS**: az oldal vagy bejegyzés szerkesztőjében a bővítmény felett lévő egyedi kód gombbal (`Shift+C`) az adott oldalra érvényes CSS-szabályokat adhatod meg.
4. **Extra class name**: egy elem szerkesztőablakában az **Extra class name** mezőbe csak osztálynevet írhatsz, CSS-kódot nem. A kódot a sablon CSS-fájljaiba, vagy az egyedi CSS mezőbe tedd.
5. A WPBakery elemeire alkalmazott osztálynevek felülírásához a WordPress `vc_shortcodes_css_class` szűrőjét használd.

A CSS-kódot a WPBakery AI is elő tudja állítani az egyedi CSS-ben.

JS-kód az egész webhelyre a **WPBakery Page Builder → Egyéni JS** oldalon, egy adott oldalra a szerkesztő eszköztárának egyedi kód ablakában adható meg. Ezt a kódot is generálhatja a WPBakery AI.

## Szakaszok és fejléc, lábléc

A **Szakasz** elem gyökérszintű konténer, amely több sort fog össze. Csak az oldal gyökerébe illeszthető, más elembe (sorba sem), és csak sor lehet benne.

A WPBakery az oldal tartalmi területén dolgozik. A fejléc és a lábléc szerkesztése általában a sablonon keresztül történik, a lehetőségek a használt sablontól függnek. Ha szeretnéd megtudni, hogyan szerkeszd őket, nézd meg a sablonod leírását, vagy kérdezd a sablon készítőjét.