Gyorstippek a szerkesztéshez

Ez a fejezet a rövid, gyakorlati kérdésekre ad választ. A részletes beállításokat a hivatkozott fejezetek tartalmazzák.

Reszponzivitás ellenőrzése

Az oldal kinézetét a frontend szerkesztő eszköztárán lévő eszközválasztóval ellenőrizheted: váltogass az asztali, táblagépes és mobil nézet között. Az elrendezés eszközönkénti finomhangolását az oszlop Reszponzivitás füle adja (szélesség, eltolás, elrejtés). Lásd a Szerkesztők és elrendezés fejezetet.

Elemek eltérő viselkedése különböző eszközökön

Az oszlopok szélességét, eltolását és láthatóságát eszközméretenként külön állíthatod, így például egy oszlopot elrejthetsz mobilon, vagy más szélességet adhatsz neki táblagépen. A beállítások az oszlop szerkesztőablakában vannak. Az egymás alá rendeződés töréspontját a Design options oldalon módosíthatod.

Elemek klónozása

Az elem vagy a sor szerkesztő-ikonjai között van a klónozás ikon. Egy kattintással az elem másolata közvetlenül az eredeti mellé kerül, minden beállításával együtt. Ha másik oldalra vagy webhelyre akarsz másolni, használd a másolás és beillesztés funkciót (lásd Szerkesztők és elrendezés).

Elemek húzása

Az elemeket, oszlopokat és sorokat fogd meg a fogójukkal, és húzd az új helyükre: az elem áthelyezhető másik oszlopba vagy másik sorba is. A sort a bal felső sarkában lévő fogóval húzhatod fel vagy le, az oszlopokat vízszintesen rendezheted át.

Tartalom és oszlopok függőleges igazítása

1. Nyisd meg a sor szerkesztőablakát.
2. A Tartalom pozíciója beállításnál válaszd ki a tartalom helyét: felül, középen vagy alul.

Az alapértelmezett érték azt jelenti, hogy a tartalom felül marad, hacsak a sablonod mást nem határoz meg. Az oszlopok függőleges igazítása csak teljes magasságú soroknál állítható: kapcsold be a sor Full height beállítását, és ekkor a sor szerkesztőablakában megjelennek az oszlopok pozícióját állító vezérlők.

Üres hely az elemek között

1. Add hozzá az Empty space elemet két elem közé.
2. Írd be a kívánt Magasság értéket.

A részleteket a Szöveg, elválasztók és üzenetek fejezet tartalmazza. Állandó távolsághoz használhatod az elemek Design options füllel beállítható margóját is.

Fejléc és lábléc szerkesztése

A WPBakery az oldal tartalmi részében dolgozik. A fejlécet és a láblécet a sablon (téma) kezeli, ezért a szerkesztésük lehetőségei a használt témától függnek. A Visual Composer Starter Theme esetén például a fejléc és a lábléc stílusa, színe, kitöltése és rögzítése a téma testreszabóján (Megjelenés → Testreszabás) állítható. Más témánál nézd meg a téma saját leírását, vagy kérdezd a téma készítőjét.

Az oldal vagy bejegyzés címének szerkesztése

Az oldal, a bejegyzés vagy az egyedi tartalomtípus címét a WPBakery-vel is szerkesztheted. A cím megjelenése a témától függ, a formázását a téma CSS-e adja. A Rácsépítőben a Post Title elem a bejegyzés címét jeleníti meg a rácselemben.

Google Maps beillesztése

A Google Maps elem a helyet a Location mezőbe írt cím vagy helynév alapján jeleníti meg.

1. Nyisd meg a szerkesztőt, kattints az Elem hozzáadása gombra, és válaszd a Google Maps elemet.
2. A Location mezőbe írd be a teljes címet vagy a hely nevét. A térkép magától megjelenik.
3. Ha kell, add meg a térkép magasságát képpontban (például 400px).
4. Állítsd be a nagyítást 1 és 20 között (minél nagyobb, annál közelebbi nézet; alapérték: 10).
5. Válaszd ki a térkép típusát (például alapértelmezett, műholdas vagy hibrid).
6. Mentsd az elemet.

Régebbi módszerrel a térkép beágyazókódját is használhatod: a Google Maps oldalán keresd meg a helyet, állítsd be a kívánt nagyítást, válaszd a megosztás vagy beágyazás lehetőséget, a Térkép beágyazása fülön másold ki a teljes kódot, és illeszd be a Map embed iframe mezőbe. A további beállítások ugyanúgy elérhetők, mint az új módszernél. Lásd még: Képek, galéria, videó és térkép.

Saját rácselem készítése

A Rácsépítővel (a Rácsépítő menüpont a WordPress adminban) saját sablont készíthetsz a Post Grid, Post Masonry Grid, Media Grid és Masonry Media Grid elemekhez. Új rácsot az elejétől is építhetsz, vagy kiindulhatsz egy alapértelmezett rácselemből.

A rácselemnek két zónája van:

• Normal/Hover zóna: ez a fő építőterület. Új rácsnál először csak a Normal zóna érhető el. A Hover zóna bekapcsolásához válassz animációs előbeállítást a szerkesztő jobb felső sarkában lévő legördülő listából.
• További zóna: a rácselem bal, jobb, felső vagy alsó oldalán adható hozzá, ha az üres blokkok egyikére kattintasz a Normal zóna körül. A zóna húzással áthelyezhető egyik oldalról a másikra. Egyszerre csak egy további zóna lehet.

A Normal és a Hover zóna szerkesztésénél (a zóna Szerkesztés lehetőségével) a zónához kiemelt képet adhatsz, és megadhatod az arányait a Height mode beállítással. Az Original érték azt jelenti, hogy a kiemelt képet nem vágja körbe a bővítmény. Ezt masonry rácsnál használd, ha eltérő magasságú képeket szeretnél. A Rácsépítő részletes leírása a Rácsépítő fejezetben van.

CSS kezelése

A bővítményben a CSS-t több helyen is módosíthatod:

1. WPBakery Page Builder → Design options: a tartalmi elemek alapértelmezett színei, margói és kitöltései.
2. WPBakery Page Builder → Egyedi CSS: saját CSS-szabályok az egész webhelyre.
3. Oldal vagy bejegyzés szintjén: a szerkesztő eszköztárán az egyedi CSS gombra kattintva az adott oldalra vagy bejegyzésre érvényes szabályokat írhatsz.
4. Elemenként: az elem szerkesztőablakának Extra osztálynév mezőjébe írj egy osztálynevet, és a stílust a témád CSS-ében vagy az egyedi CSS-mezőben add meg. Fontos: ebbe a mezőbe csak osztálynév kerülhet, CSS-kód nem.
5. Fejlesztőknek: a WPBakery elemekre kerülő osztálynevek a vc_shortcodes_css_class WordPress-szűrővel írhatók felül.

add_filter( 'vc_shortcodes_css_class', function ( $class_string, $tag ) {
  if ( 'vc_row' === $tag ) {
    $class_string .= ' sajat-sor';
  }
  return $class_string;
}, 10, 2 );

A beállítási oldalak leírása a Beállítások fejezetben van.

Sor összecsukása

A backend szerkesztőben a sort összecsukhatod (minimalizálhatod): hosszú elrendezéseknél így kevesebbet kell görgetned. Ez csak a szerkesztő nézetét érinti, a megjelenő oldalt nem.

Oszlopok azonos magassága

Ha egy sor oszlopait egyenlő magasra szeretnéd, nyisd meg a sor szerkesztőablakát, és kapcsold be az Azonos magasság beállítást. A sor összes oszlopa ugyanolyan magas lesz, a leghosszabb oszlophoz igazodva. A sor többi beállítását a Sor, oszlop és szakasz fejezetben találod.

Függőleges hely csökkentése a sorok között

A sorok, oszlopok, képek és szövegek margóját, szegélyét és belső kitöltését a beépített Design options fül állítja. Nyisd meg a sor (vagy az elem) szerkesztőablakát, váltsz a Design options fülre, és csökkentsd a felső és alsó margót vagy kitöltést. Állandó távolsághoz vagy a kettő közti rés kitöltéséhez az Empty space elem is használható (lásd fent).

Fülek és körbevezetés a mobilon

Mobilon a WPBakery a jobb használhatóságért a fülek és a körbevezetés elemeket automatikusan harmonikává alakítja. Ha ezt nem szeretnéd, add a fület vagy körbevezetést tartalmazó sor vagy oszlop Extra osztálynév mezőjéhez a következő osztályt:

vc_tta-o-non-responsive

Figyelem: az osztály a sorban vagy oszlopban lévő összes fület és körbevezetést nem reszponzívvá teszi, nem csak egyet.

Előre elkészített rácselem módosítása

Az alapértelmezett rácselemeket is átalakíthatod. A rács elem szerkesztőablakában, az Item design fülön jelöld ki a módosítandó rácselemet, majd a Grid element template legördülő listában válaszd a Modify selected lehetőséget. Ez megnyitja a Rácsépítőt. Az eredeti rácselem nem íródik felül: a bővítmény másolatot készít belőle, ezért adj címet az új rácselemnek. Mentés után az új elem megjelenik a Grid element template listában. A Rácsépítőről bővebben a Rácsépítő fejezet szól.

Egyedi címsor Google Fonts betűkészlettel

A Custom heading elemmel szép címsort készíthetsz Google Fonts betűkészlettel: add hozzá az elemet, írd be a szöveget, a betűkészlet-beállításnál válassz a listából, és állítsd be a méretet, színt és igazítást. Az elem beállításait a Szöveg, elválasztók és üzenetek fejezet tartalmazza.

Fülek, körbevezetés és harmonika

Az összetett elemeket, a Fülek, a Körbevezetés és a Harmonika elemet az Elem hozzáadása ablakból veheted fel, majd szakaszonként adod meg a címet és a tartalmat. A részletes beállítások a Fülek, körbevezetés, harmonika és lapozható tároló fejezetben vannak.