# Az űrlapok testreszabása

> Az Amelia → Testreszabás oldal: mely űrlapokat állíthatod, és hogyan szabhatod testre a lépésenkénti foglalási űrlap színeit, gombjait, feliratait és mezőit.

A **Testreszabás** oldalon minden előlapi űrlapnak és felületnek külön megjelenést adhatsz: a színeket, a betűtípusokat, a gombokat, a feliratokat és a mezők sorrendjét az oldal témájához és a márkádhoz igazíthatod, egyéni CSS nélkül. Minden űrlapnak saját beállításai vannak, így például a fő foglalási űrlap lehet élénk színű, a vásárlói felület pedig visszafogottabb, anélkül, hogy egymást befolyásolnák.

## Hol találod?

Nyisd meg az **Amelia → Testreszabás** oldalt. Az oldal kártyákon mutatja az összes űrlapot, a **Folytatás** gombra kattintva pedig megnyílik az adott űrlap szerkesztője.

![A Testreszabás oldal az űrlaptípusokkal](./kepek/lista-testreszabas.webp)

*A Testreszabás oldal az űrlaptípusokkal* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

A kártyák: **Lépésről lépésre**, **Katalógus**, **Eseménynaptár**, **Eseménylista**, **Vásárlói felület** és **Munkatársi felület**.

| Űrlap | Mire való |
| --- | --- |
| **Lépésről lépésre** | A fő foglalási űrlap. A színrendszer és az elrendezés alapja a többi űrlapnak is. |
| **Katalógus** | Kártyás böngészés a kategóriák, szolgáltatások és csomagok között. |
| **Eseménynaptár** | Az események naptárnézete. |
| **Eseménylista** | Az események függőleges listája. |
| **Vásárlói felület** | A felület, ahol a vásárlók kezelik a foglalásaikat, csomagjaikat és adataikat. |
| **Munkatársi felület** | A munkavállalók felülete az időpontjaik és eseményeik kezeléséhez. |

A szerkesztő bal oldalán vannak a beállítások, jobb oldalán élő előnézet látszik, így a módosítás azonnal látható. Az előnézetben demóadat szerepel (például „Category 1”, „Event 1”), ez nem a saját tartalmad. A jobb felső sarokban nyelvet választhatsz (itt a **Hungarian** a kiválasztott), mert a feliratok nyelvenként külön módosíthatók. Az **X** gomb visszavisz az űrlapok listájához.

Két gomb van a szerkesztő alján:

- **Közzététel**: elmenti és élesíti a módosításaidat. A mentés után érdemes kiüríteni a weboldal gyorsítótárát (cache), hogy az új stílusok az előlapon is megjelenjenek.
- **Alaphelyzetbe állítás**: visszaállítja az űrlap gyári megjelenését.

Az Amelia kezelőfelületének világos vagy sötét módja nem hat az előlapi űrlapokra, mert azoknak saját beállításuk van a **Testreszabás** oldalon.

## Mire figyelj testreszabáskor?

- Használj nagy kontrasztú színeket, hogy a feliratok és a gombok különböző háttéren is olvashatók maradjanak.
- Próbáld ki az űrlapot mobilon és tableten is, mert a térközök és a gombok kisebb képernyőn máshogy jelenhetnek meg.
- A módosítások nem öröklődnek űrlapról űrlapra: minden űrlapot külön kell végignézni, és ha ugyanazt a megjelenést szeretnéd, kézzel meg kell ismételned.
- Csak akkor írj egyéni CSS-t, ha a **Testreszabás** beállításai nem fedik le az igényedet.
- Nagyobb módosítás után nézd át az előnézetet, hogy a szövegek, ikonok és lépések továbbra is rendezettek és jól olvashatók-e.

## A lépésenkénti űrlap testreszabása

A **Lépésről lépésre** űrlap a fő foglalási felület, és a többi űrlap is ugyanazt a tervezési rendszert használja. Itt érdemes először megismerni a színek és az elrendezés működését. A jobb oldali előnézetben látszik az oldalsáv a lépésekkel, a tartalom és a **Folytatás** gomb.

A szerkesztő bal oldalán két fül van: **Alap** és **Haladó**. A **Lépések** legördülő menüvel válthatsz az űrlap lépései között. A lista: **Oldalsáv területe**, **Szolgáltatások**, **„Hozol magaddal valakit?” felugró ablak**, **Csomagok felugró ablaka**, **Extrák**, **Dátum és idő**, **Ismétlődő időpontok**, **Ismétlődés összefoglalója**, **Ismétlődő felugró ablak**, **Csomagok**, **Csomaginformáció**, **Csomag időpontjai**, **Csomag áttekintése**, **Vásárlói adatok**, **Fizetési összegzés** és **Gratulálunk**.

### Az Alap fül

Az **Alap** fül a teljes űrlapra érvényes, globális beállításokat tartalmazza, bármelyik lépés van is kiválasztva. Ami itt változik, az minden lépésen megjelenik, így az egész folyamat egységes marad.

![Az Alap fül a lépésenkénti űrlapon](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-alap.webp)

*Az Alap fül a lépésenkénti űrlapon* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

Az **Alap** fülön nyithatod le a három csoportot:

| Csoport | Mit állíthatsz |
| --- | --- |
| **Színek** | A globális színek: **Kiemelőszín**, **Másodlagos**, **Kiemelő szöveg** és **Másodlagos szöveg**. |
| **Gombok** | A gombok megjelenése. |
| **Betűtípusok** | Az űrlap betűtípusa. |

![A Színek csoport lenyitva](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-alap-szinek.webp)

*A Színek csoport lenyitva* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

Az **Elrendezés** ikonpárjával a lista és a rács elrendezés között váltasz, az **Oldalsáv területe** kapcsolóval pedig megjelenítheted vagy elrejtheted az oldalsávot, attól függően, hogy mennyire sűrű megjelenést szeretnél. Először mindig az **Alap** fülön alakítsd ki az űrlap általános megjelenését, és csak utána finomíts lépésenként.

### A Haladó fül

A **Haladó** fül a lépések egyenkénti beállítására való. Míg az **Alap** a közös megjelenést adja, itt azt állíthatod, hogy egy adott lépés hogyan viselkedjen és nézzen ki. Minden lépéshez három csoport tartozik: **Beállítások**, **Feliratok** és **Színek**. A csoportra kattintva belépsz a részletekhez, a nyíl gombbal pedig visszalépsz.

![A Haladó fül a lépésenkénti űrlapon](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-halado.webp)

*A Haladó fül a lépésenkénti űrlapon* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

#### Beállítások

A **Beállítások** a lépés mezőinek működését szabályozzák. A **Szolgáltatások** lépésen például:

- a **Mezők sorrendje** ikonnal átrendezheted a mezőket;
- minden mező sorában ikonok mutatják, hogy a mező kereshető-e, kötelező-e, illetve látható-e, és ezeket egyenként kapcsolhatod: a **Szolgáltatás kiválasztása**, az **Áfa-információk**, a **Több ár**, a **Helyszín kiválasztása** és a **Munkatárs kiválasztása** sorokban;
- a **„folytatás” gomb stílusa** kiválasztásával lépésenként más hangsúlyt adhatsz a gombnak: **Kitöltött**, **Egyszerű** vagy **Szöveg**.

![A lépés beállításai a Haladó fülön](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-halado-beallitasok.webp)

*A lépés beállításai a Haladó fülön* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

#### Feliratok

A **Feliratok** csoportban átírhatod a lépésen megjelenő szövegeket: a címeket, a mezők és a legördülő menük feliratait, a gombok szövegét és a tájékoztató üzeneteket. A **Szolgáltatások** lépésen a csoportok: **Címszakasz**, **Beviteli mezők**, **Legördülő menük**, **Láblécgombok** és **Alkalmazotti leírás felugró ablaka**. Így a folyamat hangnemét a közönségedhez igazíthatod. A felugró ablakok szövegei külön módosíthatók, ez nem érinti a többi lépést.

![A lépés feliratai a Haladó fülön](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-halado-feliratok.webp)

*A lépés feliratai a Haladó fülön* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

#### Színek

A **Színek** az **Alap** fül globális színeit finomítják az adott lépésen. A **Szolgáltatások** lépésen a csoportok: **Elsődleges és állapotszínek**, **Oldalsáv területe**, **Tartalomterület**, **Beviteli mezők**, **Legördülő menük**, **Naptár** és **Gombok**. Így kiemelhetsz fontos lépéseket, vagy javíthatod a használhatóságot sok interaktív elemet tartalmazó lépésnél.

![A lépés színei a Haladó fülön](./kepek/foglalasi-urlapok-testreszabas-lepesenkenti-halado-szinek.webp)

*A lépés színei a Haladó fülön* (https://minta-bolt.hu/wp-admin/admin.php?page=wpamelia-customize)

A naptárt tartalmazó lépéseknél külön színbeállítások vannak, ezeket érdemes külön átnézni.

### Tippek a lépésenkénti űrlaphoz

- Kisebb böngészőablakban nézd meg a mobil és tablet nézetet is, mert a gombok mérete és a térközök eltérhetnek.
- A **Haladó** fület akkor használd, ha egy lépés mezőinek működését vagy szövegeit kell pontosan szabályoznod.
- A mezők ikonjai megmutatják, hogy a mező kereshető, kötelező vagy látható-e.
- A mentés után ürítsd a gyorsítótárat, hogy az új megjelenés minden oldalon betöltődjön.