Levélsablon létrehozása a SalesAutopilot beépített sablonjaiból (sablonszerkesztővel, "hétköznapi" felhasználók számára) (7:29 perc videó)

A sablonok segítségével könnyen készíthet saját eseti leveleit vagy hírlevél sorozatait. A SalesAutopilotban vannak előre beépített sablonok, amelyeket kiindulási alapnak használhat a saját sablonja elkészítésénél, de lehetősége van teljesen a cége arculatára szabott sablonok beépítésére.

Az alábbi videóban áttekintjük mind a TEXT, mind a HTML levél sablonok kezelését, majd az oldal további részeiben részletes leírást is talál a folyamatról.

FONTOS: Az alábbi oktatóanyagban bemutatott képernyő az anyag készítése óta megváltozott. Mivel az alapelvek és fő funkciók változatlanok, a levélsablonok használata a fenti oktatóanyagból megérthető és megtanulható

Sablon létrehozása

A levélsablonokat a bal oldali menü Beállítások alatt, a Sablonok (1), Levélsablonok kezelése (2) menüpontban találja.

Ha még nem hozott létre saját sablont, akkor először a SalesAutopilot beépített sablonjait látja az Alapsablonok és az EDMdesigner fülön. Ezeket használhatja kiindulási alapként saját levélsablon létrehozásához. Kattintson a levélsablon melletti fogaskerék ikonra (1) , majd a 'Másolat' (2) menüpontra, ekkor a a levélsablon létrejön és megnyílik a sablon szerkesztő felülete.

Sablon létrehozása beépített alapsablonból

A másolást követően a megnyílt szerkesztő felületen módosíthatja az alapsablont a saját igényeinek megfelelően. Két lehetősége van: vagy a sablon HTML forráskódját módosítja vagy a beépített grafikus szerkesztőt használja. Az utóbbit javasoljuk akkor ha nem ért a HTML szerkesztéshez és csak a sablon színeit és betűstílusait szeretné módosítani.

A grafikus HTML szerkesztő bekapcsolásához kattintson a HTML szerkesztő bekapcsolása linkre a HTML forráskód alatt.

A stílusszerkesztő használata

Ennek segítségével a sablon bizonyos stílus tulajdonságait tudja változtatni. Ezek sorban a következők:

• oldal tulajdonságai:
  • háttérszín: a sablon háttérszíne, a szöveges tartalmon kívüli háttér
  • Címsor 1,Címsor 2,Címsor 3: a Címsor 1 stílusú bekezdések formátuma. A betűszínt, betűtípust, betűstílust és a térközöket tudja módosítani.
• fejléc:
  • fejléc előtti háttérszín, szöveg, link stílusa: a fejléc feletti területen lévő tartalom (ha a sablonban definiálva van) háttérszínének, szövegének és linkjeinek stílusait tudja változtatni.
  • fejléc háttérszín, szöveg, link stílusa: a fejlécben található tartalom háttérszínének, szövegének és linkjeinek stílusait tudja változtatni.
  • fejléc utáni háttérszín, szöveg, link stílusa: a fejléc alatti területen lévő tartalom (ha a sablonban definiálva van) háttérszínének, szövegének és linkjeinek stílusait tudja változtatni.
• tartalom háttérszín, szöveg, link stílus: a fő tartalmi részben lévő szöveg mögötti háttérszín, szöveg stílus és a linkek színeit tudja itt módosítani.
• lábléc háttérszín, szöveg, link stílus: a lábléc részben lévő szöveg mögötti háttérszín, szöveg stílus és a linkek színeit tudja itt módosítani.

A stílus tulajdonság módosításakor a sablon előnézeti képén valós időben nyomon követheti a módosítás hatását, tehát pl. a háttérszín módosításakor látja hogy az aktuálisan kiválasztott színnel hogy jelenik meg a sablon.

Tartalom szerkesztése

A grafikus szerkesztőben a "Szerkesztés" ikonokra kattintva tudja szerkeszteni a sablon tartalmi részeit. A szerkeszthető területen kívül eső tartalmakat csak a HTML forráskódban tudja módosítani.

A szerkesztő ikonokra (1) kattintva jelenik meg az adott részhez tartozó tartalmi szerkesztő (2). A megjelenő szerkesztőben módosítsa a szöveget vagy illesszen be képet. Ha az adott tartalmi rész HTML forráskódját szeretné szerkeszteni, akkor kattintson a jobb alsó sarokban lévő HTML szerkesztő kikapcsolása linkre.

Ha végzett a szerkesztéssel kattintson a Mentés gombra.

Ha végzett a sablon módosításával kattintson a Módosítások elmentése gombra.

Sablon létrehozása HTML forráskódból

Ha Ön teljesen a cége arculatára szeretné szabni a sablont, akkor valószínű HTML szerkesztés tudásra lesz szüksége, a sablon létrehozásában kérheti webgrafikusa, webmestere segítségét vagy az általunk ajánlott partner segítségét. Ha a webmestere vagy webgrafikusa segítségével készít SalesAutopilot levélsablont, akkor a következőket vegye figyelembe.

A HTML kódolása legyen utf-8. Azokat a CSS stílusokat, amelyeket szeretné hogy a felhasználó a SalesAutopilot kezelőfelületén keresztül is tudjon módosítani (akár a sablonnál, akár egy adott levélnél) a levél head részében elhelyezett: <style type="text/css" mm-editable-style>, tag-en belülre tegye. Tehát a style tag tartalmazza a mm-editable-style attribútumot. A rendszer az ezen belül elhelyezett definíciókat veszi figyelembe a szerkeszthető CSS paramétereknél. Az alábbi CSS class-okat használja:

body, .preheader, .preheader a:link, .preheader a:visited, .preheader a:hover, .preheader a:active, .header, .header a:link, .header a:visited, .header a:hover, .header a:active, .postheader, .postheader a:link, .postheader a:visited, .postheader a:hover, .postheader a:active, .page, .content, .content a:link, .content a:visited, .content a:hover, .content a:active, .footer, .footer a:link, .footer a:visited, .footer a:hover, .footer a:active, .postfooter, .postfooter a:link, .postfooter a:visited, .postfooter a:hover, .postfooter a:active, h1, h2, h3

A fenti class-okon belül az alábbi CSS tulajdonságokat definiálhatja: background-color, font-size, font-family, color, font-weight ,line-height, letter-spacing, text-align, border, border-top, border-bottom, text-decoration, padding, padding-top, padding-bottom, padding, right, padding-left

Természetesen ezen kívül is definiálhat CSS stílusokat, de azok már nem lesznek a felhasználó által szerkeszthetők. A body-ban a div-eknél állítsa be a megfelelő class-okat. A megjelenítés a css alapján történik és nem az alapján, hogy pl. a .footer class hozzá van-e rendelve egy div-hez. A linkeknél arra kell figyelni, hogy minden állapotot külön kell definiálni (active,hover,link,visited).

Egy SalesAutopilot levélsablonban kétféle terület különböztethető meg: szerkeszthető és nem szerkeszthető. A szerkeszthető területen belül lévő tartalmat a felhasználó tudja módosítani levél létrehozáskor, az azon kívül lévő elemeket nem tudja. A szerkeszthető tartalmat magában foglaló div elemeket az mm_editable="tartalom_egyedi_azonosito" attribútummal kell ellátni. A tartalom_egyedi_azonosito, mint az elnevezése is mutatja, a szerkeszthető tartalom egyedi azonosítója kell legyen.

Lehetőség van arra is, hogy a szerkeszthető div-et a felhasználó levél létrehozásakor másolhassa, pl. a jobb oldali blokk-ban lévő reklámok. Ekkor az mm_editable attribútum mellett a div-nek adni kell egy mm_copy attribútumot. Tehát pl. így néz ki egy szerkeszthető, másolható tartalmat tartalmazó div nyitó tag-je: <div mm_editable="main_content_1" mm_copy>

További lehetőség, hogy egy tartalmi blokknál definiálhatja, hogy a felhasználó a sablon alapján történő levél létrehozásakor törölheti azt. Ebben az esetben a szerkeszthető részt definiáló div nyitó tagjába helyezze el a mm_delete attribútumot.

Figyeljen a következőkre:

• Ha táblázatos a sablon (márpedig a levelezőkliensek korlátozott CSS képességei miatt ez javasolt) akkor fontos, hogy jól határozza meg a szerkeszthető területeket, mivel a HTML szabvány szerint tr-t vagy td-t nem szabad kívülről körbefogni a szerkesztés div-el. Ilyenkor vagy az egész táblázatot kell szerkeszthetővé tenni vagy pedig csak a td-n belül lévő részt.
• Mivel a szerkeszthető területek a felhasználó által nem átrendezhetőek drag&drop-al, ezért az is fontos, hogy ha lehet ne használjon zebra mintás sablonokat, mert másolás után csak vastagodni fognak az egyforma színű területek és több csík jön létre. Az egybe tartozó tartalmakat sem ajánlatos felosztani két szerkeszthető részre, mert annak is hasonló lesz az eredménye. Pl. ha van egy termék kép és alatta a leírás akkor ez egyben legyen szerkeszthető.
• Inline CSS-eket használhat, de azokat a felhasználó csak a szerkeszthető részeken belüli tartalmak definiálásakor módosíthatja.

Az elkészült HTML kódot töltse fel a sablonok közé. A kattintson az Új levélsablon létrehozása gombra a levélsablonok képernyőn.

Az elkészült HTML forráskódot másolja be a forráskód szövegbeviteli mezőbe.

Az sablon létrehozása után, a saját sablonok fülön megjelenik a létrehozott sablon, mely az új email létrehozása során az alapsablonok és EDMdesigner sablonokhoz hasonlóan kiválasztható lesz.

Kapcsolódó bejegyzések

HTML e-mail és e-mail sablon készítés szabályai