# Beágyazás blokkszerkesztőbe, Elementorba, Oxygenbe és widgetként

> Az űrlap elhelyezése a Gutenberg blokkszerkesztőben, Elementorban, Oxygen Builderben, valamint az oldalsávban vagy a láblécben.

Az űrlapot a rövidkódon kívül több módon is elhelyezheted az oldalon, kód nélkül. Az űrlapnak előbb léteznie kell: ha még nincs, hozz létre egyet (lásd az [Űrlap létrehozása: áttekintés](https://hub.hellowp.io/hu/plugins/fluentform-signature/urlap-keszitese-attekintes/) fejezetet).

## Blokkszerkesztő (Gutenberg)

1. Nyisd meg az oldalt vagy bejegyzést a szerkesztőben.
2. Kattints a plusz (+) ikonra új blokk hozzáadásához, keress rá a **Fluent Forms** névre, és kattints a blokkra.
3. A blokk legördülő menüjéből válaszd ki a mentett űrlapot. Az űrlap rögtön megjelenik a szerkesztő előnézetében.
4. Kattints a **Frissítés** vagy **Közzététel** gombra.

Az űrlapot a rövidkóddal is beteheted: illeszd a rövidkódot a **Rövidkód** vagy az **Egyéni HTML** blokkba (a rövidkódokról a [Rövidkódok és SmartCode-ok](https://hub.hellowp.io/hu/plugins/fluentform-signature/logika-dinamikus-rovidkodok/) fejezetben olvashatsz).

### A blokk stílusbeállításai

Ha kijelölöd a Fluent Forms blokkot, a jobb oldali blokkbeállító oldalsávban három fül jelenik meg: **General**, **Misc** és **Advanced**. Itt az űrlap kinézetét közvetlenül a blokkban állíthatod.

**General (általános)** fül: az egyes mezők és elemek stílusa.

- **Form Style Template**: kész sablon (Modern, Classic, Bootstrap style, Inherit style, vagy Custom a részletes testreszabáshoz).
- **Label Styles**: a címkék színe és tipográfiája.
- **Input & Textarea**: szövegszín, háttérszín, tipográfia, térközök és szegélyek, külön a normál és a fókuszban lévő (kattintott) állapotra.
- **Placeholder Styles**: a helykitöltő szöveg színe.
- **Radio & Checkbox Styles**: a rádiógombok és jelölőnégyzetek mérete és színe.
- **Button Styles**: a küldés gomb igazítása és szélessége, valamint normál és hover állapotban a szövegszín, háttérszín, tipográfia, padding és margó, dobozárnyék és szegély.

**Misc** fül: az űrlap konténere.

- **Background Type**: klasszikus (egyszínű vagy háttérkép) vagy színátmenetes háttér az egész űrlapnak.
- **Padding & Margin**: belső és külső térköz.
- **Box Shadow**: árnyék az űrlap körül.
- **Form Border Settings**: keret az űrlap körül.

## Elementor

1. Nyisd meg az oldalt az Elementor szerkesztőben.
2. A kereső mezőbe írd be: **Fluent Forms**, és húzd az oldalra a Fluent Forms widgetet.
3. A widget legördülő menüjéből válaszd ki az űrlapot.

A **Style** (stílus) fülön az alábbiakat állíthatod:

| Szakasz | Beállítások |
| --- | --- |
| **Form Container** | Háttér típusa (egyszínű vagy kép), szín (globális szín vagy színválasztó), háttérkép, hivatkozások színe, legnagyobb szélesség, igazítás (balra, középre, jobbra), külső és belső térköz, szegély típusa (egyszerű, dupla, szaggatott, pontozott, barázdált és mások), szegély lekerekítése, dobozárnyék (vízszintes és függőleges eltolás, elmosás, kiterjedés). |
| **Input & Textarea** | Háttérszín, szövegszín, szegély típusa (egyszerű, szaggatott, pontozott vagy nincs) és lekerekítése. Ezen kívül a szöveg behúzása, a mezők és a szövegterület szélessége és magassága, a térközök. |
| **Submit Button** | A gomb szöveg- és háttérszíne, belső térköz, tipográfia. |

## Oxygen Builder

1. Telepítsd és aktiváld az Oxygen Builder bővítményt.
2. Hozz létre egy új oldalt, és kattints az **Edit with Oxygen** gombra.
3. A bal felső sarokban kattints a plusz (+) ikonra, keress rá a **Fluent Form** névre, és add hozzá a blokkot.
4. Válaszd ki az űrlapot a legördülő menüből.

A **Primary** szakasz beállításai:

- **Form Container**: háttérszín, legnagyobb szélesség, térközök, szegély színe, vastagsága és stílusa (egyszerű, szaggatott, pontozott vagy nincs), lekerekítés.
- **Labels**: a címke és a csillag színe, valamint a betűcsalád, méret, vastagság, igazítás, betűköz, sormagasság, dekoráció és stílus.
- **Input & Textarea**: címkeszín, háttér, szélesség, magasság, térközök, szöveg behúzása, szegély tulajdonságai és lekerekítése.
- **File Upload Field**: a fájlfeltöltő gomb színe, alakja, tipográfiája és szegélye.
- **Multi-step Forms**: a többlépéses űrlap szakaszelválasztójának és folyamatjelzőjének stílusa.
- **Box Shadow**: árnyék színe, iránya, elmosása és kiterjedése.
- **Submit Button**: a küldés gomb színe, szélessége, margója, paddingje és más tulajdonságai.

Az **Advanced** szakaszban egyszerű effektek állíthatók: animációk, szövegárnyék, átmenetek, az űrlap és a küldés gomb átlátszósága, szűrők és átalakítások.

A tervezés végén kattints az **Apply Params**, majd a **Save** gombra. Ezután közzéteheted az oldalt, vagy megoszthatod a hivatkozását.

## Widget az oldalsávban vagy a láblécben

1. Hozd létre az űrlapot, amit kitennél.
2. A WordPress felületén nyisd meg a **Megjelenés → Widgetek** oldalt. (Blokk-témánál ez a menüpont nincs: ott az oldalsáv és a lábléc a **Megjelenés → Szerkesztő** oldalon szerkeszthető, a Fluent Forms blokkot ugyanúgy hozzáadhatod.)
3. Válaszd ki a területet, ahová az űrlapot szeretnéd tenni: az oldalsávot vagy a láblécet.
4. Kattints a plusz (+) ikonra, a keresőbe írd be: **Fluent Forms**, és kattints a Fluent Forms widgetre.
5. Add meg a widget címét, és a legördülő menüből válaszd ki az űrlapot.
6. Mentsd a változtatást (**Frissítés**).

Nyisd meg a weboldalt: az űrlap megjelenik az oldalsávban vagy a láblécben.