Tartalmi elemek

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.

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