## Hogyan szerkeszd az űrlapod külsejét az űrlapvarázslóban lépésről-lépésre? Ez az útmutató végigvezet az adatmezők létrehozásán és beállításain – mind az új, mind a régi varázslóban. #### Új űrlapvarázsló - béta teszt Az új varázslóban a megjelenési beállítások a **bal oldali Tartalom panelen** találhatók, több fülön: **Elrendezés**, **Gomb stílusok, Cím stílusok, Leírás stílusok, Lábjegyzet stílusok, Mező stílusok.** Ha az előnézeten egy adott elemre kattintasz (pl. a gombra vagy a címre), a Tartalom panel automatikusan annak beállításaira ugrik. ### **Elrendezés fül** ![Listamester - Kézikönyv - Űrlapok - Elrendezés](/sites/default/files/inline-images/42.png)**Elrendezés** - **Függőleges / Egymás alatt** (alapértelmezett): az adatmezők egymás alatt helyezkednek el. - **Vízszintes / Egymás mellett**: az adatmezők egymás mellett jelennek meg - egyszerűbb formoknál, pl. csak e-mail mezőnél érdemes használni. Ilyenkor a feliratokat érdemes kikapcsolni. **Szélesség** - **Automatikus**: a böngésző határozza meg – ez az alapértelmezett reszponzív beállítás. Mobilon és asztalon egyaránt jól néz ki. - **Konkrét érték** (pl. 624 px): fix szélességű megjelenítés. - **Százalék** (pl. 100%): mindig kitölti a befogadó elemet. - További érték egységek is kiválaszthatók: px, em, ex, %, vh, pt, rem, vw *Minden új varázsló-űrlap alapból reszponzív. Ha mégis konkrét szélességet adsz meg, az is alkalmazkodik a kisebb képernyőkhöz.* **Kísérő kép** Az űrlaphoz opcionálisan képet is adhatsz: ez megjelenhet az adatmezők bal oldalán, jobb oldalán, felette vagy alatta. Alapértelmezetten nincs kép, de ha szeretnéd vizuálisan gazdagabbá tenni az űrlapodat (pl. egy termékfotóval, borítóképpel vagy brandelt illusztrációval), válaszd ki a kívánt elrendezést, és add meg a kép URL-jét. A kép szélességét is tudod állítani. *Mire jó? Főleg akkor hasznos, ha az űrlapot önálló oldalon vagy pop-upban jeleníted meg – a kép segít kontextust adni, bizalmat építeni, vagy vizuálisan összehangolni a feliratkozási felületet a márkával.* ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/43b.png)**Vízszintes igazítás** Az űrlapot balra, középre vagy jobbra igazíthatod a befogadó oldalon belül. Alapértelmezetten középre van állítva. ### **Megjelenés fül** **Befogadó oldal háttere** Csak előnézeti célra: beállíthatod, milyen színű háttéren szeretnéd látni az űrlapot szerkesztés közben. Ez nem része az éles megjelenítésnek. ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/44.png)**Űrlap háttere** Az űrlap tényleges háttérszíne. Beállítható az átlátszóság is – így az oldal háttere részben áttűnik. **Keret** - Szegély: - Vonaltípus (folyamatos, szaggatott, pontozott, dupla, árok, domború, beékeltkezdet) típusát, színét, szélességét és sugarát állíthatod be. - Belső margó: Beállíthatod, hogy minden oldalon egyforma legyen, vagy ha kiszeded az itt található pipát, külön-külön állíthatsz minden oldalt. - Külső margó: ua. mint belső margó - Árnyék: beállíthatod az X és Y tengelyen futó eltolását, az elmosódás sugarát, a kiterjedését és színét. Akár belső árnyékot is felvehetsz. ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/45.png)![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/46.png)**Szövegstílusok** - Betűtípus - Betűméret - Stílus (normal, dőlt, ferde) - Súly (félkövér, világosabb, merészebb, 100-900 vastagság) - Szín Az egész űrlapra vonatkozó alap betűtípus és szövegszín – ezek felülírhatók az egyes elemeknél. ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/47.png)**Saját CSS szabályok** Ez már igazán haladó beállítás, vállalkozószelleműeknek :) **Cím stílusok, Leírás stílusok, Lábjegyzet stílusok** **Cím stílusok:** Az űrlap neve – ez az első dolog, amit a látogató megpillant. Beállítható a tartalmon túl a betűtípus, méret, stílus és szín. Be- és kikapcsolható, ha nem szeretnél külön címet megjeleníteni. **Leírás stílusok:** Az alcím – a cím alatt megjelenő rövid bevezető szöveg, ahol kontextust adhatsz az űrlapnak (pl. "Iratkozz fel és elsőként értesülsz az új kurzusokról"). Ugyanúgy igazítható a stílus, és link is illeszthető bele. **Lábjegyzet stílusok:** A gomb alatti kis szöveg – tipikusan GDPR-tájékoztató hivatkozásra, adatvédelmi megjegyzésre vagy egyéb kiegészítő info elhelyezésére használják. Szintén szerkeszthető a stílusa. ### **Stílus sablon alkalmazása** Egy kattintással alkalmazható, előre elkészített dizájnsablonok, amit a Megjelenés fül legalján találsz. Alkalmazás után az összes beállítást tovább finomhangolhatod. Elérhető témák között találsz különböző színkombinációkat, sötét témát és erős kontrasztú verziót is (pl. gyengénlátóknak). ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/48.png)Például, ha a kék professzionálra kattintunk, az így fog kinézni a már megszerkesztett adatmezőkkel együtt: ![Listamester - Kézikönyv - Űrlapok - Megjelenés](/sites/default/files/inline-images/49.png)#### Korábbi űrlapvarázsló Az űrlap külső megjelenése terén nagyon sok beállítás áll a rendelkezésedre. Ebben az útmutató részben pár példával fogjuk ezeket a módosításokat szemléltetni. ![Listamester - Kézikönyv - Űrlapok - Külső fül](/sites/default/files/inline-images/Urlapvarazslo-kulso-0.png) - A bal oldalon a **Külső** fül lenyitása után a **Stílus** részben az adatmezők kinézetét tudjuk változatni. Az adatmező kinézete lehet *kerekített*, *szögletes* és *material*.![Listamester - Kézikönyv - Űrlapok - Külső - Stílusok](/sites/default/files/inline-images/Urlapvarazslo-kulso-1.png) - A **Függőleges térköznél** megadhatod, hogy az egyes mezők közt mekkora legyen a térköz. - A **Mezők** résznél kiválaszthatod, hogy az adatmezőid *egymás alatt*, vagy *mellett* helyezkedjenek el. - Változtathatod, hogy a **Mezőfelirat** a mező *alatt*, vagy *felett* helyezkedjen el, esetleg ki is kapcsolhatod a feliratot. - A **Szövegigazításnál** eldöntheted, hogy *balra*, *jobbra*, illetve *középre* illeszkedjenek a szövegek. Ehhez nem csak a megjegyzés mező, hanem a cím, az alcím és a lábjegyzet is illeszkedni fog. - A **Színsablon** kiválasztásával egy kattintással csodás színeket adhatsz az űrlapodnak. Figyelj az *áttetsző* sablonokra! Ekkor ugyanis az oldal háttere, ahova az űrlapod beilleszted kis mértékben látható lesz. A következő példa jól szemlélteti a két típusú sablon közti különbséget. Az első képen a *zöld* színsablont, míg a második képen az *áttetsző világos* sablont használtuk. ![Űrlapok - Űrlapvarázsló - Külső - Színsablon](/sites/default/files/inline-images/Urlapvarazslo-kulso-5.png) - Megadhatod az **Űrlap szélességét** is. A legoptimálisabb beállítás a **100%**, mivel ekkor reszponzív lesz az űrlap, azaz asztali gépen, illetve mobilon is igazodni fog a képernyő szélességéhez. - Az **Alaphelyzetbe való állítással** bármikor visszatérhetsz az alap beállításokhoz, ha úgy érzed valamilyen beállítást elronthattál. - Természetesen ne felejtsd el **menteni** az űrlapod! Egy pár példa: ![Listamester - Kézikönyv - Űrlapok - Külső - Példa űrlaphoz - 1](/sites/default/files/inline-images/Urlapvarazslo-kulso-2_0.png) ![Listamester - Kézikönyv - Űrlapok - Külső - Példa űrlaphoz - 2](/sites/default/files/inline-images/Urlapvarazslo-kulso-4.png) ![Listamester - Kézikönyv - Űrlapok - Külső - Példa űrlaphoz - 3](/sites/default/files/inline-images/Urlapvarazslo-kulso-3_1.png)