Ugrás a fő tartalomhoz

Ninja Forms - Layout & Styles

Mi ez és milyen problémát old meg?​

A Layout & Styles a Ninja Forms prémium kiegészítője, amellyel a WordPress adminban, az űrlap‑szerkesztőn belül állíthatod az űrlapok elrendezését és megjelenését. Ha eddig CSS‑t kellett írnod oszlopokhoz, margókhoz, színekhez, vagy a téma stílusai felülírták az elképzelésedet, ezzel a bővítménnyel mindezt vizuálisan, kódolás nélkül rendezheted. Célja, hogy gyorsan, kiszámíthatóan és egységesen nézzenek ki az űrlapjaid – a márkaarculatodnak megfelelően.

Fő funkciók, érthetően​

Elrendezés (Layout)​

  • Drag‑and‑drop oszlopok és sorok: Mezőket húzva azonnal létrehozhatsz két‑ vagy többoszlopos sorokat. Ideális például név–e‑mail egysoros elhelyezéséhez.
  • Oszlopméretezés “fogd‑és‑vidd” módon: Az oszlopok szélességét vizuálisan állíthatod, így könnyű az arányokat finomítani.
  • Sorok és oszlopok rendezése: Fogd meg a sort, és vidd át feljebb vagy lejjebb. Üres oszlopszakaszokat is felvehetsz vagy törölhetsz, hogy tiszta legyen a rácsszerkezet.
  • Reszponzív alapok: A többoszlopos elrendezés mobilon oszlopösszeomlással működik. Ha a téma is jól kezeli, a sorok logikusan egymás alá rendeződnek kisebb kijelzőn.

Stílusok a szerkesztőben (Styles)​

  • Globális űrlapstílusok: Határozd meg egyszer a háttérszínt, kereteket, betűszíneket, távolságokat, gombstílusokat és az üzenetek (siker/hiba) megjelenését. Ezek minden űrlapra érvényesek.
  • Űrlapszintű testreszabás: Ha egy adott űrlapot külön akarsz formázni, űrlapszinten felülírhatod a globális beállításokat.
  • Mezőszintű finomhangolás: Egyes mezőknél külön állíthatsz szélességet, magasságot, szöveg‑ és keretszínt, margókat/paddinget. Így a kritikus mezők kiemelhetők.
  • Átlátható stílus‑hierarchia: A kezelőfelületen külön lapfüleken találsz beállításokat, mint a Form Styles, Default Field Styles, Field Types Styles és Error Styles. A hierarchia világos: a globális stílusok az alap, amit űrlapszinten és mezőszinten felülírhatsz.
  • Kódmentes használat + egyedi CSS lehetőség: A legtöbb esetben nincs szükség CSS‑re, de haladó esetekhez adhatsz meg saját szabályokat.

Kompatibilitás és együttműködés​

  • Téma‑öröklés kezelése: Ha a téma erős stílusai felülírnak, kikapcsolhatod a Ninja Forms “Opinionated Styles” opcióját (állítsd “None”-ra), így a Layout & Styles beállításai érvényesülnek.
  • Kiegészítő támogatás: A Layout & Styles figyel a népszerű mezőtípusokra és más Ninja Forms kiegészítőkre (pl. többlépcsős űrlapok), folyamatos hibajavításokkal.

Gyakorlati példák​

  • Két oszlopos kapcsolatfelvételi űrlap: Az első sorban balra “Név”, jobbra “E‑mail”. A második sor teljes szélességen “Üzenet”. A gomb a második sor jobb oldalára húzva, egysoros elhelyezéssel.
  • Egysoros feliratkozó sáv: Balra “Keresztnév”, középen “E‑mail”, jobbra “Feliratkozom” gomb. A három oszlop szélességét arányra állítod (pl. 1/3–1/3–1/3), kisebb képernyőn automatikus egymás alá rendeződéssel.
  • Regisztráció márkázott stílussal: Globális stílusokban beállítod a márkaszíneket és betűtípus‑méreteket, űrlapszinten kicsit nagyobb gombot és kontrasztosabb hibaszíneket adsz, a “Jelszó” mezőt pedig külön margóval emeled ki.

Telepítés és hol találod​

  1. Telepítsd és aktiváld a Ninja Forms alapbővítményt.
  2. Vásárlás után töltsd fel a Layout & Styles kiegészítőt (Bővítmények > Új hozzáadása > ZIP feltöltése), majd aktiváld.
  3. Globális stílusok: Ninja Forms menüben a Styling almenü.
  4. Űrlapon belül: az űrlap‑szerkesztőben éred el a Layout (sorok/oszlopok) és Styles (űrlap/mező) beállításokat.

Tippek és korlátok​

  • Ha a beállított stílusok nem látszanak, kapcsold az “Opinionated Styles” opciót “None”-ra a Ninja Forms beállításoknál.
  • A mobil‑reszponzivitás a témától is függ. Olyan témát használj, amelyik jól kezeli a többoszlopos rács mobilos összeomlását.
  • Haladó finomhangolásnál használj egyedi CSS‑t:
/* Példa: űrlap gombjának finomhangolása */
.nf-form-content .nf-field .ninja-forms-field[type="submit"] {
  border-radius: 6px;
  letter-spacing: 0.4px;
}

Előnyök és értékajánlat​

  • Időmegtakarítás: percek alatt kialakítható elrendezés és dizájn, kódolás nélkül.
  • Költséghatékonyság: kevesebb fejlesztői munka, gyorsabb iteráció.
  • Egységes arculat: globális stílusokkal minden űrlap azonos vizuális nyelvet használ.
  • Kezelhetőség: átlátható stílus‑hierarchia, amit bárki megért és vissza tud állítani.

Célközönség​

  • Webhelytulajdonosok és marketingesek: gyors, kódmentes űrlap‑csinosításra.
  • Ügynökségek és webfejlesztők: standardizált, skálázható űrlap‑stíluskezelés, kevesebb egyedi CSS‑sel.
  • Tartalomkezelők: biztonságos, vizuális szerkesztés, minimális hibalehetőséggel.

Rendszerkövetelmények, licenc, fejlesztő​

  • Függőség: a kiegészítő a Ninja Forms alapszoftverrel működik; aktiválás után jelennek meg a funkciók az űrlap‑szerkesztőben.
  • Licencelés: külön megvásárolható, vagy tagsági csomag része. Az előfizetés automatikusan megújul; lemondás után a bővítményt tovább használhatod, de frissítés és támogatás nélkül. Elérhető pénzvisszatérítési garancia.
  • Fejlesztő: Saturday Drive.

Összegzés​

A Layout & Styles a Ninja Forms vizuális elrendezés‑ és stíluseszköze: villámgyorsan hozhatsz létre professzionális, többoszlopos, reszponzív és márkához illő űrlapokat. Kódmentes, mégis rugalmas – amikor kell, egyedi CSS‑sel tovább finomíthatod. Ha pontos kontrollt szeretnél az űrlapjaid kinézete felett, ez a kiegészítő neked készült.