# Oszlopok és sorátfedés az űrlapszerkesztőben

> Hogyan hozz létre oszlopokat húzással, méretezd át őket, és hogyan fusson egy mező több sor magasságában.

Az űrlapszerkesztőben a sorokat és oszlopokat a mezők húzásával alakítod ki, külön CSS nélkül. Ez a modern (2.5-ös kiadás óta használt) jelölést használó űrlapokon működik.

![Az űrlapszerkesztő a mezőkkel és a jobb oldali mezőválasztóval](./kepek/hogyan-8-oszlopok-szerkeszto.webp)

*Az űrlapszerkesztő a mezőkkel és a jobb oldali mezőválasztóval* (https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=1)

A képen a jobb oldali mezőválasztóból húzhatsz mezőt az űrlapra, a bal oldalon lévő mezők között pedig a mezők mozgathatók.

## Húzás és elengedési zónák

Amikor egy mezőt az űrlapra húzol, az a hely számít, ahol elengeded. Ezt a területet **elengedési zónának** hívjuk.

- **Oszlopzóna:** egy meglévő mező bal vagy jobb oldalán. Ide húzva a mező a meglévő mellé kerül, és a szerkesztő magától új oszlopot hoz létre, a meglévő mezők szélességét pedig átméretezi.
- **Sorzóna:** egy meglévő mezősor fölött vagy alatt. Ide húzva a mező új sorba kerül.

### Oszlop létrehozása

1. Jelöld ki a mezőt az űrlapszerkesztőben.
2. Fogd meg a mező fogantyúját.
3. Húzd a mezőt egy másik mező bal vagy jobb oldalán lévő oszlopzónára.
4. Engedd el: az oszlopok magától igazodnak.

### Oszlopok átméretezése

1. Jelöld ki a mezőt.
2. Fogd meg a mező jobb oldalán megjelenő oszlopfogantyút (az aktív oszlopfogantyút).
3. Húzd balra az oszlop keskenyítéséhez, jobbra a szélesítéséhez.

## Korlátok

- Legfeljebb 4 átméretezhető oszlopod lehet, ötödiket nem hozhatsz létre.
- Az oszlopok nem működnek, ha az űrlapon be van kapcsolva a régi jelölés. Ha a húzás nem működik, kapcsold ki az **űrlap beállításai** között a régi jelölés használatát.
- Az **Oldal**, a **Szakasz** és a **Rejtett** mező nem tehető oszlopba.

## Egy mező több sor magasságában

Néha azt szeretnéd, hogy az egyik oszlop egyetlen mezője (például az üzenet) ugyanolyan magas legyen, mint a szomszéd oszlop több mezője együtt. Ezt egy egyéni CSS-osztállyal és egy rövid CSS-szabállyal éred el. A példában a bal oldalon három mező van (név, e-mail-cím, telefonszám), a jobb oldalon pedig egy üzenetmező, amely mindhárom sor magasságát kitölti.

1. Húzz egymás mellé egy **Név** és egy **Bekezdés szövege** mezőt. Mindkettő fél szélességű lesz.
2. Alattuk húzz egymás mellé egy **E-mail-cím** és egy **Telefon** mezőt. Ezek is fél szélességűek lesznek, és a CSS később a bal oszlopba igazítja őket.
3. Jelöld ki a **Bekezdés szövege** mezőt, és a **Mező beállításai** között a **Megjelenés** szakasz **Egyéni CSS-osztály** mezőjébe írj egy osztálynevet, például `gform-field-row--span-three`. Bármilyen nevet választhatsz, csak jegyezd meg.
4. Mentsd az űrlapot, és add hozzá az oldaladhoz.
5. Add a téma CSS-éhez (például a **Megjelenés → Testreszabás → További CSS** részen) a következő szabályt:

```css
.gform-field-row--span-three {
    grid-row: span 3;
}
```

A szabály a `grid-row` CSS Grid tulajdonsággal azt mondja, hogy az adott osztályú elem három rácssoron át nyúljon. Ha más számú sort szeretnél, írd át a `3`-at.

Ha a téma saját stílusa miatt a mezők közötti távolság egyenetlen lenne, a témához igazítva egy kiegészítő szabállyal (például egységes alsó margóval a `.gfield` elemeken) javíthatod. Ez témánként különbözik.

Az osztály beállítása helyett az oldal elemzésével kikeresheted a mező azonosítóját is, és arra célozhatsz a CSS-sel.