Gyakorlati útmutatók

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.

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

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