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

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.

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:

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