# Ninja Forms - Layout & Styles

> A Ninja Forms űrlapok oszlopos elrendezése és vizuális stílusozása kód nélkül: húzással kialakított oszlopok, webhelyszintű és űrlaponkénti stílusok.

A Layout & Styles a Ninja Forms bővítménye. Két dolgot ad az űrlapkészítőhöz:

- **Oszlopos elrendezést**: a mezőket egérrel húzva egymás mellé teheted, az oszlopok szélességét és a sorok sorrendjét is te állítod.
- **Stílusokat**: színeket, méreteket, térközöket és szegélyeket állíthatsz be az űrlap elemeihez CSS írása nélkül. A stílus érvényes lehet az egész webhely űrlapjaira, egy adott űrlapra vagy egy adott mezőre.

## Követelmények

- Telepített és aktív **Ninja Forms** bővítmény.

## Telepítés

1. Telepítsd és aktiváld a Ninja Forms bővítményt.
2. Telepítsd és aktiváld a Layout & Styles bővítményt a **Bővítmények** menüben.
3. Az aktiválás után az űrlapszerkesztőben megjelennek az oszlopok húzásához szükséges jelölők, a **Haladó** fülön és a mezők beállításai között pedig a **Stílusok** csoport. A **Ninja Forms** menüben új **Styling** menüpont jelenik meg, ez a webhelyszintű stílusok oldala.

## Áttekintés

A bővítmény használata előtt így néz ki egy űrlap az oldalon, a téma alapstílusaival:

![A Kapcsolatfelvétel űrlap az oldalon, stílusok nélkül](./kepek/frontend-alap.webp)

*A Kapcsolatfelvétel űrlap az oldalon, stílusok nélkül* (https://minta-bolt.hu/kapcsolat/)

A képen a mezők már két oszlopban állnak, de színek, keret és térközök nélkül jelennek meg.

A bővítmény beállításai után ugyanaz az űrlap:

![Ugyanaz az űrlap kék szegéllyel, sávos sorokkal és stílusozott Küldés gombbal](./kepek/frontend-stilusos.webp)

*Ugyanaz az űrlap kék szegéllyel, sávos sorokkal és stílusozott Küldés gombbal* (https://minta-bolt.hu/kapcsolat/)

A képen látszik a keretes, színes hátterű konténer, a váltakozó hátterű sorok és a kék Küldés gomb.