A sablonok HTML és/vagy CSS kódjának módosítása, szerkesztése esetén az űrlapok esetleges működési sajátosságaival kapcsolatban nem tudunk támogatást nyújtani és ügyfélszolgálatunk nem tud segíteni az egyedi kódok használatából eredő problémák megoldásában. Azt javasoljuk, hogy elakadásoddal kapcsolatban fordulj webmesteredhez vagy css-ben jártas szakemberhez.
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 Te is készíthetsz / készíttethetsz saját, a weboldaladhoz és céges arculatodhoz illeszkedő űrlap sablonokat. Így amikor egy új űrlapot hoz létre a SalesAutopilot, azonnal olyan űrlapot kapsz eredményül amely tökéletesen illeszkedik a weboldaladba.
Csak akkor kezdj hozzá űrlap sablon készítéshez, ha a HTML és CSS technológiához jól értő szakember vagy. Ellenkező esetben mindenképpen bízd rá ezt a feladatot ilyen szakemberre.
Sablonok használata
A Sablonválasztó eléréséhez kattints az egyik űrlapodra (1), majd a Szerkesztés ikon mellett lévő lenyíló menüből (2) válaszd ki a Mezők szerkesztése (3) opciót.
Ezután a megnyíló felület közepére görgetve megtekintheted a választható Sablonokat.
Az űrlap sablon definiálja az űrlap színvilágát és elrendezését. Ha meg szeretnéd nézni hogyan fog megjelenni az űrlap valamely sablon alapján, akkor kattints az oldal alján az "Űrlap előnézetének megtekintése" gombra.
Sablon létrehozása
A saját sablon létrehozásához kattints a bal oldali kék menüsávban látható fogaskerék ikonra (1) majd a Sablonok menüből (2) válaszd ki az Űrlap sablonok opciót (3). Itt megjelennek a beépített űrlap sablonok illetve a saját űrlap sablonjaid, ha korábban már létrehoztál 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étrehozhatsz valamely már beépített sablon használatával, de felépítheted saját sablonodat 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 indulj 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 kattints a kiválasztott sablon jobb felső sarkában látható fogaskerék ikonra (1), majd a megjelenő "Másolás" (2) gombra.
A megjelenő felületen elsőként nevezd el Sablonodat egy jól megkülönböztethető névvel, majd ismerkedj meg az Űrlap sablon szerkesztése funkciókkal.
1. Egyedi színvilág beállítása
Van lehetőséged az űrlap színvilágát testre szabni ezzel a funkcióval.
Háttér szín: Az űrlap mögött elhelyezkedő felület színét tudod vele állítani. A Gradiens jelölőnégyzet bepipálásával pedig színátmenetet tudsz beállítani egy másik szín kiválasztásával.
Űrlap háttérszíne: Az űrlap felületének színét tudod vele módosítani. Itt is van lehetőséged színátmenetet alkalmazni.
Szöveg színe: Az űrlapon elhelyezkedő minden szöveg, beleértve a mezők mellett elhelyezkedő elnevezések színét tudod vele változtatni.
Űrlap címének színe: Az űrlap címének színét tudod vele változtatni.
Gomb színe: Az űrlapon lévő gomb színét tudod vele megváltoztatni, itt is van lehetőséged színátmenetet beállítani.
Gomb aktív színe: Ez a szín akkor látszik az űrlap kitöltője számára, amikor a gombra vezérli az egeret.
Gomb szövegének színe: A gomb szövegének színét külön tudod módosítani az űrlapon elhelyezkedő többi szövegtől.
2. Sablon HTML és CSS szerkesztése
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 általad 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 kihagyhatod ha nincs rá szükséged.
form-desc: az űrlaphoz tartozó rövid bevezető szöveg amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatod ha nincs rá szükséged.
form-content: az űrlap mezői. Ezek megjelenését csak CSS-el tudod módosítani.
submit-text: az űrlap elküldés gombjának felirata, amelyet az űrlap varázslóban megadtál. Ezt a mezőkódot kihagyhatod ha nincs rá szükséged.
FONTOS megjegyzések:
ha az űrlap sablonban használsz Javascriptet, akkor azt tedd 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álasztasz 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áltatni.
Az űrlap sablon CSS-ének átalakításához javasoljuk, hogy hozz létre egy űrlapot az eredeti sablonnal, majd azon próbáld ki a saját CSS definícióidat.
3. Köszönőoldal sablon szerkesztése
A Köszönőoldalt hasonlóan feltöltheted HTML forráskóddal vagy feltölthetsz egy már kész köszönőoldalt.
4. Szövegelem Sablonok
5. Előnézet
Az előnézet gombra kattintva megtekintheti a módosított űrlap kinézetét.
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íthatsz 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 kattintva megjelenő WYSIWYG editorral.
Íme az űrlap szerkesztésének 3. lépése:
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 tudod 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értsd a fenti szabályokat, javasoljuk, hogy készíts egy másolatot valamelyik beépített több zónás űrlapról, majd tanulmányozd á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íteni, különben előfordulhat, hogy szerkesztéskor a WYSIWYG szerkesztő elrontja a köszönőoldal tartalmát.