Űrlap sablonok használata és készítése

Az űrlap sablonok olyan előre elkészített sablonok, amelyek előre meghatározzák a SalesAutopilot-tal létrehozott űrlap megjelenését. A szoftverben vannak előre létrehozott ízléses megjelenésű sablonok, de Ön is készíthet / készíttethet saját, a weboldalához és céges arculatához illeszkedő űrlap sablonokat. Így amikor egy új űrlapot hoz létre a SalesAutopilot, azonnal olyan űrlapot kap eredményül amely tökéletesen illeszkedik a weboldalába.

Csak akkor kezdjen hozzá űrlap sablon készítéshez, ha Ön a HTML és CSS technológiához jól értő szakember. Ellenkező esetben mindenképpen bízza rá ezt a feladatot ilyen szakemberre.

Sablonok használata

Az űrlap varázsló 2. lépésében jelenik meg az űrlap sablon választás lehetősége.

Az űrlap sablon definiálja az űrlap színvilágát és elrendezését. Ha meg akarja nézni hogyan fog megjelenni az űrlap valamely sablon alapján, akkor kattintson az oldal alján az "Űrlap előnézetének megtekintése" gombra.

Sablon létrehozása

A bal oldali menü Beállítások / Sablonok / Űrlap sablonok menüpontjára kattintva megjelennek a beépített űrlap sablonok illetve az Ön saját űrlap sablonjai, ha korábban már létrehozott ilyet.

A Modern és a Hagyományos űrlap sablonok azonos technikai háttérrel rendelkeznek, a Több zónás sablonok valamelyest összetettebbek, ezért ezeket külön fogjuk bemutatni.

Sablont létrehozhat valamely már beépített sablon használatával, de felépítheti saját sablonját a nulláról is. Javasoljuk, hogy saját sablon létrehozásakor legalább az első néhány alkalommal egy már meglévő SalesAutopilot sablonból induljon ki, mivel azok tartalmaznak olyan speciális kódokat, amelyek szükségesek az űrlap megfelelő működéséhez és a SalesAutopilottal történő kommunikációjához.

Modern és Hagyományos űrlap sablon létrehozása

Első lépésként az Űrlap sablonok képernyőn kattintson a kiválasztott sablon alatt található "Másolás" gombra. A megjelenő képernyőn az adott űrlap forráskódját látja.

Adjon sablonjának egy jól megkülönböztethető nevet, majd ismerkedjen meg magával a forráskóddal.

Egy űrlapsablon három fő részből áll: HTML forrás, CSS definíciók, és az űrlap köszönőoldal HTML tartalma.

A HTML forráskódban vannak speciális szögletes zárójelek között lévő mezőkódok. Az űrlap létrehozásakor a SalesAutopilot ezeket különböző, az űrlap működéséhez szükséges tartalmakra cseréli le. Az Ön által létrehozott űrlap sablonnak is tartalmaznia kell ezeket a kódokat. A mezőkódok az alábbi tartalmakat generálják a végleges űrlapba:

• css-file: az űrlap CSS fájljának hivatkozása. A szerkesztés képernyőn lévő CSS forrásban megadott CSS definíciókat fogja itt automatikusan belinkelni a szoftver.
• form-javascript: az űrlap működéséhez és hibaellenőrzéséhez szükséges Javascript kód.
• form-action-header: a form HTML nyitó tag és a szükséges rejtett mezők.
• form-title: az űrlap neve, amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.
• form-desc: az űrlaphoz tartozó rövid bevezető szöveg amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.
• form-content: az űrlap mezői. Ezek megjelenését csak CSS-el tudja módosítani.
• submit-text: az űrlap elküldés gombjának felirata, amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.

FONTOS megjegyzések:

• ha az űrlap sablonban használ Javascriptet, akkor azt tegye a {literal} {/literal} tag-ek közé.
• a beépített űrlap sablonok nem tartalmazzák az egész HTML weboldal forráskódját, csak és kizárólag magát az űrlap kódot. Amennyiben olyan beillesztési módot választ majd, amelynél szükséges, hogy az űrlap forráskódja körül az egész HTML oldal forráskódja is szerepeljen, a rendszer ezt automatikusan fogja szolgáltatatni.

Az űrlap sablon CSS-ének átalakításához javasoljuk, hogy hozzon létre egy űrlapot az eredeti sablonnal, majd azon próbálja ki a saját CSS definícióit.

Több zónás űrlap sablon alapok

A több zónás űrlap sablon valójában egy mini landing page szerkesztő szerű alkalmazás, amellyel könnyedén alakíthat ki teljes megrendelési oldalakat, varázsló oldalakat, stb. A több zónás űrlap sablonok használatának az alábbi fő előnyei vannak:

• Az űrlap maga ugyanazzal a pár lépéses varázslóval alakítható ki, mint amit már megszokott az űrlap varázslónál.
• Az oldal űrlapon kívüli része WYSIWYG editorral szerkeszthető, így HTML tudás nélkül bárki tudja szerkeszteni az ilyen oldalakat.
• Majdnem teljesen tetszőleges oldal és űrlap elrendezés alakítható ki a több zónás űrlap sablonnal.

A több zónás űrlap sablon készítésének kezdeti lépései megegyeznek a Modern és a Hagyományos űrlap sablon készítésének lépéseivel.

Az űrlap sablonban látható szögletes zárójelben szereplő mezőkódok is azonosak ([css-file], [form-javascript], stb.).

Az igazi különbség megértéséhez első lépésként hadd mutassunk meg egy beépített több zónás sablonnal készített űrlapot...

…majd hadd mutassuk meg, hogy milyen lépésekben készült el ez az űrlap.

Az első és második lépés ugyanaz, mint a hagyományos űrlap varázslóban.

Az igazi különbség a harmadik lépés, ahol az űrlap körüli elemeket lehet személyre szabni a szerkeszteni kívánt elemre kattinva megjelenő WYSIWYG editorral.

Íme a varázsló 3. lépése:

…mely így néz ki szerkesztés közben bezárt bal menüvel.

Több zónás űrlap sablon létrehozása

A több zónás űrlap sablon működésének lelkét, a varázsló harmadik oldalán látható WYSIWYG szerkesztővel való szerkeszthetőséget a sablon forrásban a megfelelő tag-ek elhelyezésével tudja elérni.

A szerkeszthető zónákat ehhez hasonló div-ekkel kell körbefogni:

<div mm_editable="mmsection3" mm_copy mm_delete>

A div a következő attribútumokkal rendelkezhet:

• mmsection3: a szerkeszthető zóna egyedi azonosítója, az adott sablonon belül egyedinek kell lennie. Kötelező megadni.
• mm_copy: ha a div rendelkezik ezzel az attribútummal, akkor a zóna másolható lesz. Opcionális.
• mm_delete: ha a div rendelkezik ezzel az attribútummal, akkor a zóna törölhető lesz. Opcionális.

Fontos, hogy a zónák jelenleg nem egymásba ágyazhatók.

Zónák rendezhetővé tétele

Az egymás után következő zónák drag&drop módszerrel rendezhetővé tehetők. Ehhez a zónát definiáló div-et befoglaló div elemnek (a zóna szülő div-je) kell adni egy mmsortable-x class paramétert, ahol az x rendezési blokkonnként egyedi kell legyen. Tehát ha van egy jobb oldali része az űrlapnak, ahol több zóna vagy legalább egy másolható zóna található, illetve van egy lábléce, ahol több zóna vagy legalább egy másolható zóna található, akkor mindkét esetben a befoglaló div-nek kell adni eg-egy mmsortable-x class attribútumot, az elsőnek pl. mmsortable-1, a másodiknak mmsortable-2.

Annak érdekében, hogy teljesen megértse a fenti szabályokat, javasoljuk, hogy készítsen egy másolatot valamelyik beépített több zónás űrlapot, majd tanulmányozza át annak forrását.

Köszönőoldal HTML forrásának elkészítése

A köszönőoldal html forrásának elkészítésekor egyetlen "kötöttsége" van: Valid HTML kódot kell készítenie, különben előfordulhat, hogy szerkesztéskor a WYSIWYG szerkesztő elrontja a köszönőoldal tartalmát.

Nézőkép feltöltése vagy generálása

A sablonhoz töltsön fel előnézeti képet vagy automatikusan generáltassa. Ez a kép fog megjelenni a felhasználónak amikor űrlapot hoz létre, így segít beazonosítani Önnek a sablont.

Automatikus nézőkép generáláshoz kattintson az Nézőkép generálása gombra, majd várja meg míg elkészül (körülbelül 10 másodperc).

Miután elkészült a nézőkép, azonnal megjelenik. Ha a sablon csak egy részletét szeretné megjeleníteni a nézőképen, kattintson az Nézőkép kivágása gombra.

A nagy képen jelölje ki a területet, amelyet a nézőképen szeretne látni, majd kattintson felül a Kivágás gombra. A nézőkép lecserélésre kerül a kivágott részletre.

Ha saját előnézeti képet szeretne feltölteni, akkor kattintson a Tallózás...gombra. A SalesAutopilot automatikusan átméretezi a képet, hogy maximum 180x130px méretben jelenjen meg.