Szerkesztők és elrendezés

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ő

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ő

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

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 fejezet adja.

Oldalbeállítások

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

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.