Rácsépítő: rácssablonok készítése

A Rácsépítővel a Post grid, Post masonry grid, Media grid és Masonry media grid elemek rácselem-sablonjait készítheted el és módosíthatod. A Rácsépítő a vezérlőpulton a WPBakery Page Builder → Rácsépítő menüpontban érhető el. Új sablont a Rácssablon hozzáadása gombbal vehetsz fel. A lista és a gombok bemutatása az Eszközök fejezetben van, itt a szerkesztő részleteit találod.

https://minta-bolt.hu/wp-admin/post-new.php?post_type=vc_grid_item&wpb-backend-editor

A képen a kék felső menüsáv, alatta a Normál zóna három sorral, körülötte pedig a két további zóna helye látszik.

A felső menüsáv

A Rácsépítő a megszokott WPBakery-felületet használja, a tetején főmenüsávval:

• Rácssablon blokk (rétegek ikon): előre elkészített rácssablonok közül választhatsz kiindulópontnak. A sablon kiválasztása felülírja a már elkészített elrendezést.
• Rácselem beállításai (fogaskerék ikon): a szokásos Design Options modul, amely az egész rácselemre hat.
• Animációs előbeállítások (legördülő lista): alapértéke Egy blokk (nincs animáció), vagyis a rácselemnek nincs rámutatási („Hover”) állapota. Másik előbeállítás választása egy Hover fület ad a Normál fül mellé.
• Előnézet és mentés (Közzététel).

Zónák

• Normál zóna: a fő szerkeszthető rész. Három sorból áll, ezek oszlopokra oszthatók.
• Hover zóna: a rámutatási állapot elrendezése, felépítése a Normál zónáéhoz hasonló. Csak akkor látható, ha az animációs előbeállítás nem az egyblokkos. A kiválasztott animációtól függően a Hover zóna a Normál zóna fölé kerülhet, teljesen vagy részben helyettesítheti azt.
• További zóna: a Normál és a Hover zóna körül található hely. Ez nem animálható az előbeállításokkal, és egyszerre csak egy további zóna adható hozzá.

Beállítások

A stílusbeállítások négy szinten érhetők el: a rácselemnél, a Normál és Hover zónánál, az oszlopoknál és a tartalmi elemeknél.

Rácselem

Beállítás	Mit csinál
Design Options	Szegély, háttér és más stílusbeállítások az egész rácselemre.

Normál és Hover zóna

Beállítás	Mit csinál
Height mode	A magasság és a szélesség aránya. Az „Original” a képet vágás nélkül méretezi (például falazott rácsnál).
Add link	Hivatkozás típusa: bejegyzés hivatkozása, nagy kép, nagy kép (prettyPhoto), egyedi. Aktív WooCommerce mellett az „Add to Cart” is választható.
Use featured image on background?	A kiemelt kép felülírja a Design Options háttérképét és színét.
Image size	Képméret: thumbnail, medium, large, full vagy a sablon által megadott méret. Képpontban is megadhatod, például 200×100 (szélesség × magasság).
Extra class name	Egyedi CSS-osztály, amellyel a stíluslapodban hivatkozhatsz az elemre.
Design Options	Szegély, háttér és más stílusbeállítások.

Oszlop

Az oszlopnál a Width (az oszlop szélessége) állítható, a többi beállítás megegyezik a zónáéval: Use featured image on background?, Image size, Extra class name és Design Options.

Elemek a rácssablonban

A sablon felépítéséhez saját tartalmi elemek állnak rendelkezésre. Mindegyiknél megtalálod az Extra class name és a Design Options beállítást; ezt a táblázatok már nem ismétlik. A CSS Animation a böngésző látómezejébe érkező elem animálására való (csak modern böngészőkben működik). Ahol az Add link szerepel, ott aktív WooCommerce mellett a „Woo Commerce Add to Cart” is választható.

Text Block

Bekezdésnyi szöveg, WYSIWYG szerkesztővel formázható. Képet és videót is beilleszthetsz.

Beállítás	Mit csinál
Text	A tartalom szerkesztője.
CSS Animation	Belépési animáció.

Separator

Elválasztó vonal.

Beállítás	Mit csinál
Color	Az elválasztó színe.
Separator alignment	Igazítás.
Style	Az elválasztó stílusa.
Border width	Vonalvastagság képpontban.
Element width	Az elem szélessége százalékban.

Separator with Text

Elválasztó vonal szöveggel, amely a vonal közepén, bal vagy jobb oldalán állhat. A Separator beállításai mellett:

Beállítás	Mit csinál
Title	Az elválasztó felirata.
Title position	A felirat helye.

Icon

Ikon a következő könyvtárakból: Font Awesome, Open icons, Typicons, Entypo, Linecons, Mono Social, Material.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Icon library	Az ikonkönyvtár.
Icon	Az ikon a könyvtárból.
Color	Az ikon színe.
Background shape	Háttérforma az ikonhoz.
Background color	A háttérforma színe (egyedi szín választásakor színválasztó jelenik meg).
Size	Az ikon mérete.
Icon alignment	Igazítás.
URL (Link)	Az ikon hivatkozása.
CSS Animation	Belépési animáció.

Single Image

Egyszerű kép, CSS-animációval vagy Design Options-szal.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Widget title	Cím; hagyd üresen, ha nem kell.
Image source	A kép forrása: Média könyvtár (alapértelmezett) vagy külső hivatkozás.
Image	Kép a Média könyvtárból.
External link	A kép külső címe (csak külső forrásnál).
CSS Animation	Belépési animáció.
Image size	Képméret névvel vagy képpontban (200×100). Üresen a „thumbnail” méretet használja.
Image alignment	Igazítás.
Image style	A megjelenítés stílusa.

Button

Gomb sokféle szín- és stílusbeállítással.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Text	A gomb felirata.
Style	A gomb stílusa.
Shape	A gomb alakja.
Color	A gomb színe (ha a stílus nem „Custom”).
Background color	Háttérszín színválasztóval (ha a stílus „Custom”).
Text color	Szövegszín színválasztóval (ha a stílus „Custom”).
Size	A gomb mérete.
Alignment	Igazítás.
Set full width button?	Teljes oszlopszélesség (ha az igazítás nem „Inline”).
Add icon?	Ikon a gombon, az ikon helye állítható.
CSS Animation	Belépési animáció.

Custom Heading

Egyedi címsor Google Fonts betűkészlettel vagy a sablon betűkészletével. Nem latin karakterek használatához kapcsold be azokat a WPBakery Page Builder → Általános beállítások oldalon.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Text	A címsor szövege.
Element tag	A HTML-címke.
Text align	Szövegigazítás.
Font size	Betűméret.
Line height	Sormagasság.
Text color	Szövegszín.
Use theme default font family	A sablon betűkészletének használata.
Font Family	Betűkészlet.
Font style	Betűstílus.

Empty Space

Üres hely az elemek között, megadott magassággal. Egyetlen saját beállítása a Height.

Post Title, Post Excerpt, Post Date és Post Author

Négy hasonló elem: a bejegyzés, oldal vagy egyedi tartalomtípus címét, kivonatát, dátumát és szerzőjét jeleníti meg. Médiarácsnál a Post Title a média címét, a Post Excerpt a média leírását adja.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Element tag	A HTML-címke.
Text align	Szövegigazítás.
Use custom fonts?	Google Fonts engedélyezése; megjeleníti az egyedi betűkészletek fület.

Post Categories

A bejegyzés kategóriáit adja a sablonhoz.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Style	A kategóriák megjelenése: például vesszős lista vagy lekerekített.
Color	A stílus színe (ha a stílus nem „None” és nem vesszős).
Category size	A kategóriák mérete.

Post Image

A kiemelt képet adja, vagy helyet jelöl ki a bejegyzés, az egyedi tartalomtípus vagy a Média könyvtár képének.

Beállítás	Mit csinál
Add link	Hivatkozás típusa.
Image size	Képméret névvel vagy képpontban.
Text align	Igazítás.

Custom Fields

A bejegyzés vagy egyedi tartalomtípus meta értékeiből olvas ki adatot. Nincs Design Options beállítása.

Beállítás	Mit csinál
Field key name	A lekérdezett egyedi mező neve.
Label	Felirat az érték előtt.
Align	Igazítás.
Extra class name	Egyedi CSS-osztály.

Woo elemek és Advanced Custom Fields

Ha a WooCommerce telepítve van, a WooCommerce-elemek is megjelennek a rácssablon elemei között, és a hivatkozható elemeknél az „Add to Cart” hivatkozás is választható. Ha az Advanced Custom Fields telepítve van, az ACF elem is használható: vele egy konkrét egyedi mezőre hivatkozhatsz.