# Gyorstippek a szerkesztéshez

> Rövid válaszok gyakori kérdésekre: reszponzivitás ellenőrzése, klónozás, húzás, függőleges igazítás, üres hely, fejléc és lábléc, cím szerkesztése, Google Maps, rácselem, CSS, sor összecsukása, azonos oszlopmagasság, sorközök, mobil fülek, rácselem módosítása, címsor és fülek.

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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztok/#reszponzív-beállítások) 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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztok/#másolás-és-beilleszté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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-szoveg-elvalasztok-uzenetek/#empty-space) 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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-kepek-es-media/#google-maps).

## 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ő](https://hub.hellowp.io/hu/plugins/js_composer/funkciok-racsepito/) 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.

```php
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](https://hub.hellowp.io/hu/plugins/js_composer/beallitasok/) 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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-sor-oszlop-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:

```text
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ő](https://hub.hellowp.io/hu/plugins/js_composer/funkciok-racsepito/) 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](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-szoveg-elvalasztok-uzenetek/#custom-heading) 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ó](https://hub.hellowp.io/hu/plugins/js_composer/szerkesztes-fulek-harmonika-lapozhato/) fejezetben vannak.