Viestin luonti ja muokkaus (Template-editori)

  • Päivitetty

Template-editorissa uutiskirjeiden muokattavuus on monipuolista ja voit tehdä helposti erilaisia, näyttäviä uutiskirjeitä.

Uutiskirjepohjien kirjasto

Valmiista kirjastosta löytyy kymmeniä erilaisia valmiita uutiskirjepohjia, joita voit käyttää ja joiden pohjalta voit aloittaa uuden uutiskirjeen luomisen. 

Kirjasto aukeaa klikkaamalla Lisää uusi pohja -kohdasta viestit-sivun alaosasta.

lisa_a__uusi_pohja.png

 

Voit valita haluamasi uutiskirjepohjan. Uutiskirjepohjia on luokiteltu eri kategorioihin ja voit etsiä pohjia tietystä kategoriasta. Voit lisätä uutiskirjepohjan käyttöösi klikkaamalla haluamasi uutiskirjepohjan kuvaa kirjastossa.

uutiskirjepohja_kirjasto.png

 

Lisätietoa viestipohjan eri valinnoista viestipohjan lisäämisen jälkeen.

 

Viestin muokkaus ja ominaisuus-paneeli

muokkaus_ominaisuuspaneeli.png

 

Template-editori on jaettu kahteen alueeseen: viestin muokkausalue on vasemmalla puolella, ominaisuus-paneeli on näkyvillä oikealla puolella.

Voit lisätä uusia sisältöelementtejä uutiskirjeeseesi raahaamalla haluamasi elementin ominaisuus-paneelista muokkausalueelle haluamaasi kohtaan. Tämän jälkeen voit muokata kirjeeseen lisätyn sisältöelementin ominaisuuksia.  Sisältöelementti voi olla rakenteellinen elementti, esimerkiksi kokonainen yksipalstainen rivi tai sisältöblokki, esimerkiksi tekstiblokki.

Kuvia voi lisätä uutiskirjepohjaan suoraan työpöydältä raahaamalla kuvan kuvapaikkaan, lataamalla kuvan tietokoneelta tai LianaMailerin tiedostoista.

Ominaisuus-paneeli on jaettu kolmeen osioon:

  • Sisältö
    • Tässä osiossa valitset ja muokkaat sisältöelementtejä, jotka tekevät uutiskirjeen, esimerkiksi painikkeet, kuvat, tekstielementti jne.
  • Rivit
    • Voit valita erilaisista rakenteellisista elementeistä (esim. yksipalstainen vs. kolmepalstainen) ja järjestää sisältöä näiden avulla.
  • Asetukset
    • Asetuksissa määrität yleisiä asetuksia, jotka vaikuttavat koko viestiin. Voit esimerkiksi valita oletusfontin tai taustavärin.

 

Sisällön muokkaus

Sisältö-osiosta voit valita uuden sisältöelementin (esim. painike, kuva, tekstii, jakaja, välikappale jne.) ja lisätä sen uutiskirjeeseen. Voit raahata ja pudottaa elementin tiettyyn kohtaan viestin muokkausaluetta vasemmalle puolen.

sisa_lto__elementit.png

 

Sisältöelementtien ominaisuudet

Klikkaamalla sisältöelementtiä viestin sisällä saat oikealle ominaisuus-paneeliin näkyville sisältöelementin ominaisuudet. Saat muokattua kyseisen elementin asetuksia. Tekstin muokkausmahdollisuudet tulevat myös näkyville uutiskirjeeseen.

sisa_lto_elementti_ominaisuudet.png

 

Jos klikkaat sisältöelementin ulkopuolelta, tulee rivin (jossa sisältöelementti sijaitsee) ominaisuuksien muokkausmahdollisuudet näkyville oikealle. Tästä lisää Rivit-osiossa.

Sisältöelementtien ominaisuudet vaihtelevat riippuen valitusta sisältöelementistä. Jotkut ominaisuudet ovat valittavissa kaikissa sisältöelementeissä, jotkut ominaisuudet taas ovat näkyvillä vain, kun tietty elementti on valittuna. 

Kun esimerkiksi otsikko on valittuna, oikealle sisällön ominaisuuksiin tulee erilaisia valintoja näkyville. Voit määrittää mm. otsikkotyylin, fonttilajin ja fontin korostuksen.

otsikko_ominaisuudet.png

 

Valittaessa painikkeen, paneeli muuttuu Painikkeen ominaisuudet -osioksi. Esimerkissä on valittuna Read more -painike. Voit lisätä linkin tyypin ja osoitteen, johon painikkeesta halutaan ohjata. Halutessasi voit määrittää painikkeen leveyden itse klikkaamalla Autom.leveys -slideria. Painikkeen voi tasata vasemmalle, keskelle tai oikealle.

painike_sisa_lto_.png

 

Jos ominaisuus-paneeli on pitempi kuin näytön korkeus, tulee näkyville vierityspalkki, josta saat lisää vaihtoehtoja ominaisuuksien muokkaamiseen. Rajan säde -kohdasta saat pyöristettyä painikkeen reunoja ja voit lisätä tilaa ylös, pohjalle, oikealle tai vasemmalle. Jos jokin kohta ei oletuksena näy, Lisää vaihtoehtoja -kohdasta saa enemmän vaihtoehtoja näkyville.

painike_lisa_a__ominaisuuksia.png

 

Tekstin muokkaus

Jos klikkaat tekstiblokkia, tekstieditorin muokkausmahdollisuudet tulevat suoraan näkyville uutiskirjeen päälle. Voit muokata tekstiä monipuolisesti ja muuttaa esimerkiksi fonttia, fonttikokoa tai tekstin väriä, tai vaikka lisätä tekstiin emojin.

tekstieditori.png

 

Jos valitset fontiksi Global Font, käyttöön tulee fontti, joka on asetettu oletukseksi koko uutiskirjeelle Asetukset -kohdasta. Näin fonttia ei tarvitse asettaa jokaiselle elementille erikseen, vaan oletukseksi tulee uutiskirjeelle asetettu oletusfontti.

 

Kuvan lisääminen

Kuvan saa lisättyä uutiskirjeeseen lisäämällä Kuva-sisältöelementin. Voit lisätä kuvaelementin haluamaasi kohtaan uutiskirjeessä, esimerkiksi tiettyyn sarakkeeseen tietyllä rivillä tai käyttää koko uutiskirjeen levyistä kuvaa.

Voit lisätä kuvan kuvapaikkaan Selaa-painikkeesta tai klikkaamalla kuvaelementtiä oikealta kuvan asetuksista Vaihda kuva -painikkeesta. Kuvan voi raahata kuvapaikkaan, ladata kuvan tietokoneelta tai lisätä kuvan LianaMailerin tiedostoista.

kuvan_asetukset.png

 

Oikealta kuvan asetuksista voit muuttaa kuvan kokoa, kun poistat Automaattisen kuvakoon säätö -valinnan. Kuvan voi tasata vasemmalle, keskelle tai oikealle. Voit lisätä kuvalle vaihtoehtoisen tekstin ja lisätä kuvaan linkin. Kuvaan voi lisätä täyttöä ylös, pohjalle, oikealle tai vasemmalle.

 

Sisältöelementtien asetukset

Ominaisuudet-paneeli näyttää erilaisia asetuksia riippuen siitä, minkälainen sisältöelementti on valittuna. Alla esiteltynä käytetyimpiä ominaisuuksia.

 

Täyttö

Asetuksista voit täyttää tyhjää tilaa joka puolelle elementtiä.

ta_ytto_.png

 

Lisää vaihtoehtoja -kohdan kautta voit lisätä erikseen tyhjää tilaa ylös, pohjalle, vasemmalle tai oikealle.

ta_ytto__lisa_asetukset.png

 

Raja

Rajoja voi lisätä kaikille puolille elementtiä kerralla.

raja.png

 

Enemmän vaihtoehtoja -kohdan takaa rajoja voi lisätä erikseen ylös, alas, oikealle tai vasemmalle.

raja_lisa_a__vaihtoehtoja.png

 

Jakaja

Jakajien avulla voit erotella eri elementit toisistaan. Ne voivat olla läpinäkyviä.

jakaja_la_pina_kyva_.png

 

Kun läpinäkyvyys ei ole valittu, jakaja on viiva, joka erottaa elementit toisistaan. Jakajan väri on muokattavissa.

jakaja_ei-la_pina_kyva_.png

 

Värimuisti

Kun valitset taustaväriä, tekstin väriä, jne., editori muistaa aiemmat valitsemasi värit ja lisää ne pikavalintaan.

va_rit.png

 

Rivit

Oikealta ominaisuus-paneelista löydät Rivit-osion. Rivit-osiosta voit lisätä rakenteellisia elementtejä uutiskirjeeseen. Rivien avulla voit luoda erilaisia osioita, joihin voit lisätä erilaisia sisältöelementtejä.

rivit.png

 

Valittavissa on esimerkiksi:

  • Rivi, jossa on yksi sarake, johon lisäät hero-kuvan uutiskirjeeseen.
  • Rivi, jossa on kolme saraketta, johon lisäät verkkokaupan myydyimpiä tuotteita.

kolmepalstainen_rivi.png

 

Voit tarvita erilaisia rivejä, vaikka niillä on sama rakenne (esim.kaksipalstainen), jos haluat lisätä eri taustavärin sisältöelementtiin tai riviin.

Jos tarvitset lisää tai vähemmän sarakkeita riviin, voit muokata sarakkeita Räätälöi sarakkeet -kohdasta rivin ominaisuuksista oikealta.

sarake_muokkaus.png

 

Kun valitset rivin, tulee oikealle ominaisuus-paneeliin näkyville rivin ja sarakkeen ominaisuudet. Paneelista löytyy useita erilaisia asetuksia rivin ja sarakkeiden osalta. Voit kopioida rivin Roskakori-ikonin vierestä löytyvästä ikonista. Tämä kopioi rivin sisältöineen.

rivi_sarake_asetukset.png

 

Sarakkeiden hallinta rivillä

Kun valitset rivin, rivin ominaisuus -paneelissa on Räätälöi sarakkeet. Voit hallita sarakkeita rivillä ja alta löytyy lisäasetukset. Voit muun muassa lisätä uusia sarakkeita tai muuttaa sarakkeiden kokoa.

sarakkeiden_hallinta_rivilla_.png

 

Sarakkeen lisääminen

Voit lisätä uuden sarakkeen + Lisää uusi -kohdasta, tämä lisää uuden sarakkeen rivin sisälle. Uusi sarake lisätään aina oikealle ja oletuskoko on 2. Sarakkeen minimileveys on 2, rivillä voi olla maksimissaan 6 saraketta. Jos 6 saraketta on lisätty, + Lisää uusi -painike häviää.

 

Sarakkeen poistaminen

Sarakkeen voi poistaa riviltä klikkaamalla Poista-painiketta, tämä löytyy oikealta Räätälöi sarakkeet -kohdan alta. Kun sarake poistetaan, vasemmalla puolella olevaan sarakkeeseen lisätään poistetun sarakkeen leveys. Kun poistettu sarake on ensimmäinen vasemmalla, tämän sarakkeen oikealla puolella olevaan sarakkeeseen lisätään sen leveys. Jos on vain yksi sarake, Poista-painike ei ole näkyvillä ollenkaan.

 

Sarakkeiden kokojen muuttaminen

Sarakkeiden kokoa voi muuttaa Räätälöi sarakkeet -kohdassa raahaamalla jakaja-ikonia kahden sarakkeen välissä vasemmalle tai oikealle. Sarakkeiden koko muuttuu vasemmalla uutiskirjeen näkymässä samalla, kun raahaat jakaja-ikonia vasemmalle tai oikealle.

sarakkeiden_hallinta_rivilla_.png

 

Muut sarakkeiden asetukset

Lisäasetukset sarakkeen osalta rivillä mahdollistavat taustavärin vaihtamisen, täytön lisäämisen ja rajojen muokkaamisen.

sarake_lisa_asetukset.png

 

Rivien ja sisällön valitseminen

Kun viet hiiren uutiskirjeen päälle editorin vasemmalla puolen, tapahtuu seuraavaa:

1. Viet hiiren sisältöelementin päälle (alla olevassa kuvassa Painike-elementti): editori näyttää elementin nimen (Painike), oikealla olevasta ikonista voit raahata elementin toiseen osioon uutiskirjettä.

painike_hiiripa_a_lla_.png

 

2. Klikkaamalla sisältöelementtiä, editori näyttää seuraavat asiat:

  • Kaksi ikonia uutiskirjeen näkymässä, voit poistaa tai kopioida elementin.
  • Oikealla ominaisuus-paneelista voit muokata kyseisen sisältöelementin asetuksia.

klikattu_sisa_lto_.png

 

3. Kun viet hiiren päälle alueelle, jossa ei ole sisältöä eli sisältöalueen ulkopuolelle riville. Editori valitsee koko rivin ja voit vasemmalla löytyvästä ikonista raahata koko rivin toiseen kohtaan uutiskirjettä.

rivi_hiiripa_a_lla_.png

 

4. Klikkaamalla riviä, editori tekee seuraavat asiat:

  • Valitsee aktiiviseksi klikkaamasi rivin aiemmin valitsemasi sisällön sijaan.
  • Valitsee rivin, näyttää kaksi ikonia joiden avulla voit joko poistaa koko rivin tai kopioida koko rivin sisältöineen.
  • Muuttaa rivin ja rivin sisällä olevien sarakkeiden asetuksia oikealta ominaisuus-paneelista.

 

Asetukset

Asetukset-osion kautta voit muokata yleisiä asetuksia, jotka vaikuttavat koko uutiskirjeeseen:

  • Sisältöalueen leveys: voit muuttaa uutiskirjeen leveyttä. Yleensä uutiskirjeissä suositellaan käyttämään 600px tai kapeampaa leveyttä. Säädetty leveys on maksimileveys uutiskirjeelle, jota käytetään laitteilla, joilla maksimileveys uutiskirjeestä voidaan näyttää. Kun laitteen näyttö on kapeampi, uutiskirje automaattisesti sovittaa leveyden laitteelle sopivaksi.
  • Sisältöalueen asettelu: voit muuttaa uutiskirjeen asettelua keskelle (tämä on oletus) tai vasemmalle. Tämä ei muuta sisältöelementtien asettelua.
  • Taustaväri: uutiskirjeen taustaväri muokkaaminen. Tämä muuttaa rivien ja sarakkeiden väriä, joissa väriä ei ole erikseen valittu. Muussa tapauksessa sisältöelementtiin valittu väri pysyy sellaisenaan.
  • Sisältöalueen taustaväri: sisältöalueen taustavärin muokkaaminen. Tämä muuttaa vain niiden rivien ja sarakkeiden taustaväriä, joille ei ole erikseen valittu toista taustaväriä.
  • Oletusfontti: oletusfontti, jota käytetään, kun toista fonttia ei ole valittu. Oletusfonttia käytetään kaikissa teksteissä, joissa on valittu Global Font.
  • Linkin väri: oletusväri linkeille, tämä vaikuttaa kaikkiin linkkeihin, joita uutiskirjeeseen on lisätty.

asetukset.png

 

Mobiilioptimoinnin asetukset

Usein sisältö uutiskirjeissä on järjestelty useisiin sarakkeisiin. Kun uutiskirjettä luetaan mobiililaitteella, sarakkeet voivat mennä liian kapeiksi ja johtaa huonoon uutiskirjeen lukukokemukseen. Uutiskirjeen lukukokemuksen parannukseksi editori luo automaattisesti HTML-koodin, joka pinoaa sarakkeet vertikaalisesti. Tällä saadaan uutiskirjeestä luettavampi ja helpommin selailtava eikä sitä tarvitse zoomata.

Joskus voidaan haluta tehdä muutoksia mobiilioptimoinnin oletusasetuksiin, joita editori käyttää. Editori tarjoaa erilaisia mahdollisuuksia muuttaa asetuksia.

 

Älä pinoa mobiilissa

Joissain tapauksissa sarakkeiden vertikaalinen pinoaminen ei ole optimaalinen ratkaisu. 

Yleinen skenaario, jossa pinoaminen ei ole optimaalinen ratkaisu on esimerkiksi navikaatiopalkki, ikonit tai jokin muu horisontaalinen elementti. Voit käyttää Älä pinoa mobiilissa -toimintoa muuttaaksesi mobiilin näkymää. Toiminto on käytettävissä Rivin asetuksissa, se on oletuksena valittu.

a_la__pinoa_mobiilissa.png

 

Pinoa mobiilissa päinvastaisessa järjestyksessä

Voit käyttää Pinoa mobiilissa päinvastaisessa järjestyksessä -toimintoa, jolla mobiilissa sarakkeet pinotaan päinvastaisessa järjestyksessä. Alla esimerkki, jossa vasemman puoleisessa kuvassa on käytetty Pinoa mobiilissa päinvastaisessa järjestyksessä.

pa_invastainen_mobiili.pngoikeinpa_in_pa_invastainen_mobiili.png

 

Piilota sisältöä mobiili- tai työpöytänäkymässä

Voit piilottaa sisältöelementtejä Piilota-toiminnolla elementin asetuksista. Tällä voit luoda uutiskirjeeseen laitekohtaisia sisältöjä, riippuen millä laitteella vastaanottaja uutiskirjettä lukee. Rivin piilottaminen piilottaa kaiken rivillä olevan sisällön.

rivin_piilotus.png

 

Mobiili- ja työpöytänäkymä

Mobiilinäkymällä voit luoda ja suunnitella uutiskirjettä ilman, että esikatselua tarvitsee lähettää, ja tehdä muutokset sen pohjalta. Voit vaihtaa mobiili- ja työpöytänäkymää vasemmasta yläreunasta löytyvistä ikoneista.

mobiili_tyo_po_yta_.png

 

Työpöytänäkymä käyttää koko leveyttä, joka on saatavilla selaimen ikkunassa. Mobiilinäkymään vaihdettaessa vasemmalla oleva uutiskirjenäkymä muuttuu 320px leveydeksi. Voit jatkaa mobiilinäkymässä uutiskirjeen muokkaamista (uutiskirjeen leveyttä ei voi muokata mobiilinäkymässä) ja näet välittömästi, miltä muutokset näyttävät mobiililaitteella.

mobiili_na_kyma_.png

 

Huomioitavaa on, että vaikka uutiskirjettä tehdään mobiilinäkymässä, muutokset vaikuttavat myös työpöytänäkymän uutiskirjeeseen. Uutiskirje ja siinä olevat sisältöelementit ovat samat, ellei sisällössä ole laitekohtaisia sisältöelementtejä, joita ei toisessa näkymässä näytetä.

Kun Piilota-toiminto on käytössä, vasemmassa yläreunassa näkyy Näkyvyys päällä / pois -toiminto, josta voit valita näytetäänkö piilotetut elementit.

 

Näkyvyys päällä

  • Editori näyttää sisältöelementit, jotka on asetettu piilotetuiksi
  • Kyseiset elementit näkyvät blurrattuna, jotta ne erottaa näkyvillä olevista
  • Kyseisten elementtien kohdalle tulee näkyviin ikoni, joka näyttää piilotetun elementin, kun hiiren vie tämän päälle

 

Näkyvyys pois

  • Elementit, jotka ovat piilotettuja eivät näy uutiskirjeen näkymässä

 

Muut elementit

 

Ikonit

Voit lisätä uutiskirjeeseen ikoneja tai pieniä kuvia. Editorista löytyy omana sisältöelementtinä Ikonit ja myös Sosiaalinen. Voit hyödyntää Ikonit-elementtiä luodaksesi esimerkiksi visuaalisempia listauksia, luokituksia tai logogallerioita. Sosiaalinen-elementillä saat luotua sosiaalisen median ikonit. Voit lisätä, poistaa ja muokata sosiaalisen median ikoneita.

some_ikonit.png

 

some_ikonit_muokkaus.png

 

Ikonit-elementillä voit lisätä ikonin kuvan LianaMailerin tiedostoista tai ladata tietokoneelta. Voit lisätä uuden ikonin Lisää uusi kuvake -kohdasta. Lisää vaihtoehto -painikkeen takaa saat lisää vaihtoehtoja, voit esimerkiksi lisätä tekstin ikonin viereen. Ikonien järjestystä voi muuttaa.

ikonit.png

 

Sosiaalinen-elementissä on valmiiksi valittavissa ikoneita, joista voit valita sopivan käyttöön.

some_ikonit_vaihtoehdot.png

 

Video

Video-elementillä voit lisätä videon uutiskirjeeseen. Video pitää olla Youtubessa tai Vimeossa, jotta sitä voi käyttää. Videon URL-osoitteen voi kopioida ja lisätä sen video-elementin asetuksiin URL-osioon. 

Play-kuvakkeen tyyppiä, väriä ja kokoa voi muuttaa.

video_elementti.png

 

Huomioitavaa videosta uutiskirjeessä:

  • Video-elementti ei upota videota uutiskirjeeseen, se toimii linkkinä videoon paremmalla tavalla, kuin normaali linkki.
  • Syy miksi näin tehdään videosisällön kanssa on se, että videon upottaminen uutiskirjeeseen ei toimi aina luotettavasti eri sähköpostiohjelmissa.

 

HTML

Editorista voi lisätä HTML-elementin, johon voi lisätä oman HTML-koodin. 

Suositellaan käytettäväksi kokeneille tekijöille. Oman koodin käyttäminen voi vaikuttaa uutiskirjeen näkymiseen eri uutiskirjeohjelmissa tai uutiskirjeen responsiivistuuteen. Huomioithan tätä käyttäessä, että käytössä on uutiskirjeisiin sopiva ja responsiivinen koodi.

HTML.png

 

Sallitut HTML tagit:

HTML-elementti automaattisesti korjaa virheitä, kuten avoinna olevat tagit ja poistaa koodia, jota ei voi käyttää (esimerkiksi iFrame & skriptit). 

 

Lista sallituista tageista:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

 

Sallitut attribuutit:

  • general attributes: style, id, class, data-*, title
  • a: href, name, target
  • img: align, alt, border height, hspace, src, vspace, width, usemap
  • table: align, bgcolor, border, cellpadding, cellspacing, width
  • tbody: align, valign
  • td: align, bgcolor, colspan, height, rowspan, valign, width
  • tr: align, bgcolor, valign
  • tfoot: align, valign
  • th: align, bicolor, colspan, height, rowspan, valign, width
  • thead: align, valign
  • li: type
  • map: name
  • area: alt, coords, href, shape, target

 

Oliko tämä artikkeli hyödyllinen?

0/0 koki tästä olevan apua

Kommentit

0 kommenttia

Kommentointi on poistettu käytöstä.