# Űrlapstílus-szerkesztő (Styler)

> Az űrlap színeinek, betűinek, mezőinek és gombjainak vizuális beállítása CSS írása nélkül.

Az űrlapstílus-szerkesztővel kódolás nélkül igazíthatod az űrlapot az oldalad arculatához. Ha ennél finomabb beállítás kell, használhatsz saját CSS-t is ([Egyéni CSS és JavaScript](https://hub.hellowp.io/hu/plugins/fluentformpro/stilus-egyeni-css/)). A szerkesztő a Pro bővítmény része.

## A szerkesztő megnyitása

1. Nyisd meg vagy hozd létre az űrlapot, és mentsd el.
2. Kattints a jobb felső **Előnézet és tervezés** gombra.
3. Az előnézet jobb oldalán megjelenik a stílus panelje, bal oldalon az űrlap élő képe. A tetején az eszköz ikonjaival asztali, tablet és mobil nézetet is választhatsz.

A panel három fülre oszlik: **Általános**, **Egyéb** és **Importálás**. A módosításokat a **Beállítások mentése** gombbal mented.

## Általános fül

Az **Űrlapstílus-sablon** legördülő menüben egy kész stílust választasz:

![Az űrlapstílus-sablonok listája](./kepek/stilus-styler-sablonok.webp)

*Az űrlapstílus-sablonok listája* (https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1)

A képen a választható sablonok látszanak: **Alapértelmezett**, **Modern (félkövér)**, **Modern (világos)**, **Klasszikus**, **Bootstrap-stílus**, **Sablonstílus átvétele** (az űrlap a téma saját stílusát veszi át) és **Egyéni (Speciális testreszabás)**.

Ha az **A kiválasztott előre beállított stílus testreszabása** négyzetet bekapcsolod, a kiválasztott sablon részeit külön is átállíthatod:

![A testreszabható részek listája az Általános fülön](./kepek/stilus-styler-testreszabas.webp)

*A testreszabható részek listája az Általános fülön* (https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1)

A képen a lenyitható blokkok látszanak. Mindegyik a saját elemcsoportját stílusozza:

| Blokk | Mit állíthatsz |
| --- | --- |
| **Címke stílusai** | A mezőcímkék **Szín**e és **Tipográfia**ja: betűméret, vastagság, szövegdísz, sormagasság, betűköz. |
| **Beviteli mező és szövegterület** | Háttér- és szövegszín, tipográfia, a mezők árnyéka. A **Fókuszban** állapotra külön stílust adhatsz, ugyanazokkal a lehetőségekkel. |
| **Helykitöltő** | A helykitöltő szöveg színe és tipográfiája. |
| **Rádiógomb és jelölőnégyzet stílusa** | Az intelligens felület (Smart UI) bekapcsolásakor három stílusbeállítást kapsz: a bejelölt elem szegélyének, elemének és hátterének színét. Az egyéni szegélystílust külön kapcsolóval engedélyezheted. |
| **Képfeltöltő vagy fájlgomb stílusa** | A feltöltőgomb háttér- és szövegszíne, tipográfiája, szegélye és árnyéka, külön **Normál** és **Lebegő** (egérrel fölé mutatáskor) állapotra. |
| **Küldés gomb stílusa** | A beküldő gomb színei, tipográfiája, szegélye és árnyéka, szintén **Normál** és **Lebegő** állapotra. Az alapértelmezett gomb élénk kék. Ugyanezek a beállítások érvényesek a többlépéses űrlap **Következő** és **Előző** gombjára is. |

## Egyéb fül

Itt az űrlap egészét és az üzeneteit formázod:

![Az Egyéb fül blokkjai](./kepek/stilus-styler-egyeb.webp)

*Az Egyéb fül blokkjai* (https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1)

| Blokk | Mit állíthatsz |
| --- | --- |
| **Konténer stílusai** | Az űrlap burkolójának háttere, szegélye, belső és külső térköze (padding, margin), árnyéka. Itt kapcsolhatod be az űrlap szegélyét is: típus, szín, vastagság és lekerekítés. |
| **Csillag stílusai** | A kötelező mezők csillagjának színe. |
| **Soron belüli hibaüzenet stílusai** | A mezők alatti hibaüzenetek színe és tipográfiája. |
| **Beküldés utáni sikerüzenet stílusai** | A sikerüzenet háttere, szövegszíne, tipográfiája, árnyéka és egyéni szegélye. A kinézetet úgy a legkönnyebb ellenőrizni, ha az előnézetben kitöltöd és elküldöd az űrlapot. |
| **Beküldés utáni hibaüzenet stílusai** | A beküldés utáni hibaüzenet ugyanazokkal a beállításokkal, mint a sikerüzenet. |

## Importálás fül

Az **Importálás** fülön meglévő stílust vehetsz át:

![Az Importálás fül](./kepek/stilus-styler-importalas.webp)

*Az Importálás fül* (https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1)

- **Stílusok Importálása Egy Másik Űrlapról:** válassz egy meglévő űrlapot, és annak stílusát átveszi az aktuális űrlap.
- **Fluent Form-stílus importálása:** tölts fel egy korábban exportált stílusfájlt, majd kattints az **Importálás** gombra.

## Tippek

- Az elrendezés alapbeállításait (címke helye, üzenetek helye, csillag) nem itt, hanem az [űrlapelrendezésnél](https://hub.hellowp.io/hu/plugins/fluentformpro/stilus-urlapelrendezes/) adod meg.
- Ne felejtsd el menteni a változtatásokat, mielőtt elhagyod az előnézetet.