Ú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
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.
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.
Ű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.
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.
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).
Például, ha a kék professzionálra kattintunk, az így fog kinézni a már megszerkesztett adatmezőkkel együtt:
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.
- 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.
- 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.
- 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:
