Embed Size (px)
Citation preview
NAVODILA ZA
DRAG & DROP
UREJEVALNIK PREDLOG
© 2016 SqualoMail | www.squalomail.com | [email protected]
VSEBINA
1. Postavitev predloge ................................................................................................................................. 4
1.1 Polna vrstica ...................................................................................................................................... 5
1.2 Stolpec ............................................................................................................................................... 6
1.3 Zaboj .................................................................................................................................................. 7
Primer 1: 1 Stolpec ........................................................................................................................................ 8
Primer 2: 2 Stolpca s sliko in tekstom ............................................................................................................. 9
Primer 3a: 2 stolpca - slika in tekst ............................................................................................................... 11
Primer 3b: 2 stolpca - tekst in slika ............................................................................................................... 11
Primer 4: 3 Stolpci ........................................................................................................................................ 14
2. Vsebina predloge .................................................................................................................................... 15
2.1 Naslov .............................................................................................................................................. 16
2.2 Tekst ................................................................................................................................................. 17
Avtomatske povezave in Subtagi .......................................................................................................... 17
Poljubna povezava ................................................................................................................................. 18
2.3 Slika .................................................................................................................................................. 21
2.4 Gumb ................................................................................................................................................ 23
2.5 Ločnik............................................................................................................................................... 26
Primer 1: 1 Stolpec ...................................................................................................................................... 27
Primer 2: 2 Stolpca s sliko in tekstom ........................................................................................................... 29
Primer 3a: 2 stolpca - slika in tekst ............................................................................................................... 31
Primer 3b: 2 stolpca - tekst in slika ............................................................................................................... 33
Primer 4: 3 Stolpci ........................................................................................................................................ 33
Primer 5: Noga predloge z gumbi za socialna omrežja ................................................................................. 34
3. Posebni vsebinski elementi ................................................................................................................... 38
3.1 Slika + Tekst .................................................................................................................................... 38
3.2 Tekst + Slika .................................................................................................................................... 38
3.3 Skupina slik ..................................................................................................................................... 39
3.4 Sledenje na socialnih omrežjih....................................................................................................... 39
3.5 Deljenje na socialnih omrežjih........................................................................................................ 40
3.6 Priljubljene ....................................................................................................................................... 41
4. Ozadje ..................................................................................................................................................... 42
Urejevalnik ima na vrhu vrstico s hierarhijo
elementov. Element, v katerem se trenutno
nahajate je označen z modro barvo. Po
hierarhiji elementov se lahko premikate s
klikom na element v zgornji vrstici ali s
klikom na element v predlogi.
Vrstica s hierarhijo ima na desni strani
gumb za Razveljavitev oziroma korak
nazaj in korak naprej. Elemente lahko
podvojite s klikom na Podvoji ali pa jih
izbrišete s klikom na Izbriši.
Urejevalnik je sestavljen iz treh področij in sicer Elementi, Vsebina in Ozadje.
Pod Elemente spadajo vsi elementi, ki jih vstavljate v predlogo. To so postavitveni, vsebinski in posebni
vsebinski elementi.
Pod Vsebino urejate elemente, ki ste jih dodali v predlogo.
Pod zavihkom Ozadje nastavite barvo/sliko generalnega oziroma celotnega ozadja predloge.
1. Postavitev predloge
Newsletter gradite tako, da hierarhično dodajate elemente. Vedno začnete z najbolj osnovnimi elementi
oziroma postavitvenimi elementi, s katerimi zgradite ogrodje vaše predloge. Ti elementi so Polna vrstica,
Stolpec in Zaboj.
Zasnovo predloge najprej razdelite na več segmentov.
Na primer:
1) Naslovna slika in besedilo,
2) Krajši tekst s sliko levo
3) Krajši tekst s sliko desno
4) Trije stolpci s sliko, tekstom in gumbom
5) Noga
Vsak segment nato zgradite v svoji Polni vrstici in v svojem Zaboju. To je pomembno predvsem iz
vidika lažjega skupnega oblikovanja elementov, razvrščanja elementov po predlogi, boljše
prilagodljivosti in odzivnosti na mobilnih napravah ter shranjevanja elementov za uporabo v prihodnjih
predlogah.
Segmente lahko tudi podvojite, prilagodite in postavite na več mest v isti predlogi.
1.1 Polna vrstica
● Element Polna vrstica omogoča dodajanje
elementa, katerega širina je 100% prostora, ki ga
vidi prejemnik na svojem odjemalcu
● Element lahko razdelite na dve celici in jima tudi
določite razporeditev (fluidnost) na mobilnih
napravah (iz leve proti desni - lev stolpec gre nad
desnega ali iz desne proti levi - desni stolpec gre
nad levega)
● Nastavite primarno in sekundarno barvo ozadja.
Primarno ozadje obarva celotno širino vrstice,
sekundarno ozadje pa samo desno polovico vrstice
● Če nastavite primarno in sekundarno ozadje kot
transparentno, bo barva ozadja takšna kot ste jo
nastavili pod zavihkom Ozadje
● Element lahko nastavite tudi tako, da se na mobilnih
napravah ne prikaže
● Polna vrstica je primaren element in ne more imeti
nadrejenih elementov
1.2 Stolpec
● Z uporabo Večstolpičnega elementa lahko s klikom
na Dodaj stolpec razdelite vrstico na 2 ali več
(največ 5) stolpcev, ki jim lahko spreminjate širino ali
jih izenačite s klikom na Izenači stolpce
● V urejevalniku lahko stolpec s klikom povlečete na
drugo mesto
● Posamezni stolpec lahko tudi skrijete na mobilnih
napravah, ali mu zaklenete širino
● Z možnostjo Prerazporedi stolpce na mobilnih
napravah lahko omogočite, da se stolpci razporedijo,
torej se prikažejo v enem stolpcu (en pod drugim), ali
pa to možnost izključite in vsi stolpci ostanejo tudi na
mobilnih napravah v eni vrstici
● Celoten večstolpični element lahko tudi shranite med
Priljubljene elemente in ga uporabite v drugih
predlogah
● V stolpec lahko povlečete in spustite poljuben
element, razen elementa Polne širine
1.3 Zaboj
● Zaboj postavite v Polno vrstico in vanj dodajajte
vsebinske elemente.
● Element Zaboj je namenjen torej grupiranju in
skupnem stiliziranju drugih elementov
● Zaboju lahko dodate notranji odmik, kar pomeni, da
odmaknete elemente, ki so v zaboju, od notranjega
roba zaboja
● Zaboju lahko dodate tudi zunanji odmik, kar pomeni,
da celoten zaboj odmaknete od elementov, ki so
zunaj njega
● Zaboju lahko nastavite obrobo, ki ji spreminjate stil,
širino in barvo. Obrobljena je lahko ena stranica, dve,
tri ali vse. Eno stranico označite tako, da kliknete
nanjo. Če želite, da zaboj nima obrobe, nastavite
širino nič px
● Nastavite lahko tudi barvo/sliko ozadja zaboja. Če
pustite barvo transparentno, bo vidna barva, ki ste jo
nastavili za generalno ozadje oziroma za ozadje
polne vrstice. Opozorilo: Če nastavite za ozadje
zaboja sliko, se le-ta v odjemalcu Outlook (verzije
2007-2016) ne bo prikazala
● Zaboj lahko nastavite tako, da je skrit na mobilnih
napravah oziroma na nemobilnih napravah (namizni
in prenosni računalniki)
● Zaboj lahko shranite med Priljubljene elemente in ga
uporabite tudi v drugih predlogah
Poglejmo si nekaj osnovnih primerov grajenja predlog:
Primer 1: 1 Stolpec
V predlogo dodate Polno vrstico.
V polno vrstico nato dodate Zaboj.
V Zaboj nato dodate sliko.
V isti Zaboj dodate pod sliko še Naslov. Pazite, da je Naslov del Zaboja.
Pravilno >>>
Narobe >>>
Nato dodate še tekst na enak način, kot ste dodali Naslov in z dvoklikom na elemente uredite
vsebino. Slika, ki jo vstavljate mora biti široka najmanj 600px.
Podrobneje urejanje vsebinskih elementov si bomo pogledali v drugem poglavju.
Primer 2: 2 Stolpca s sliko in tekstom
V predlogo dodate Polno vrstico.
V polno vrstico nato dodate Zaboj.
V Zaboj nato povlečete Večstolpični element.
V stolpec dodate še en zaboj, v katerega nato dodajate vsebinske elemente.
Slika, ki jo vstavljate mora biti široka najmanj 300px. Ko končate z urejanjem slike,
naslova in besedila, določite še notranji odmik vsebinskih elementov od roba zaboja in tako
ustvarite sam stolpec bolj zračen in pregleden.
Zaboj nato označite in ga s klikom na gumb podvoji (zgoraj desno) podvojite in prenesite v
desni stolpec. Uredite še sliko, naslov in besedilo desnega stolpca.
Primer 3a: 2 stolpca - slika in tekst
V predlogo dodate Polno vrstico.
V polno vrstico nato dodate Zaboj.
V Zaboj nato povlečete Večstolpični element.
V levi in desni stolpec vstavite Zaboj. V levega dodajte sliko, ki mora biti široka najmanj
300px, v desnega tekst in ju uredite. Vsakemu Zaboju nastavite še notranji odmik 10px.
Primer 3b: 2 stolpca - tekst in slika
Pogosta praksa pri grajenju predlog je, da stolpec s sliko in tekstom, ki sta vzporedno en zraven drugega,
podvojite in v drugem delu predloge zamenjate razporeditev. Torej, da je tekst na levi in slika na desni strani.
Zato ni potrebno še enkrat zgraditi tega Zaboja, ampak ga le podvojite. Preden ga prestavite na željeno mesto,
pa morate narediti nekoliko drugačno postavitev Polne vrstice, da se elementa prikazujeta pravilno tudi na
mobilnih napravah, torej da je slika vedno nad tekstom.
V predlogo dodate Polno vrstico.
Nato v urejevalniku na desni strani nastavite število celic na dve in razporeditev elementov na
mobilnih napravah iz desne proti levi.
Označite zaboj s sliko, ki ste ga naredili v prejšnjem primeru in ga podvojite. Prestavite ga v
desno polovico polne vrstice.
Nato označite še zaboj, v katerem je tekst in ga podvojite ter prestavite v levo polovico polne
vrstice. Zamenjajte sliko, ki mora biti široka najmanj 300px in spremenite besedilo.
Postavitev preverite tudi na
predogledu ali pa si pošljite
testno sporočilo in prikaz
preverite na mobilni napravi.
Primer 4: 3 Stolpci
V predlogo dodate Polno vrstico.
V polno vrstico nato dodate Zaboj
V Zaboj nato povlečete Večstolpični element.
Ker želimo ustvariti 3 stolpični element, v urejevalniku na desni strani dodajte še en stolpec s
klikom na Dodaj stolpec. Stolpce izenačite s klikom na Izenači stolpce. Na ta način lahko dodate
do 5 stolpcev.
V stolpec dodate še zaboj, v katerega nato dodajate vsebinske elemente.
Ko končate z urejanjem slike, naslova in besedila, določite še notranji odmik vsebinskih
elementov od roba zaboja in tako ustvarite stolpce bolj zračne in pregledne. Slika, ki jo
vstavljate mora biti široka najmanj 200px.
Zaboj nato označite in ga s klikom na gumb podvoji (zgoraj desno) dvakrat podvojite in
prenesite v sredinski in desni stolpec. Uredite še sliko, naslov in besedilo ostalih dveh stolpcev.
2. Vsebina predloge
Ko ste določili okvirno postavitev vaše predloge oziroma jo razdelili na segmente, začnite z dodajanjem in
urejanjem vsebinskih elementov. Vsebinski elementi, ki jih dodajate v Zaboje, so Naslov, Tekst, Slika, Gumb in
Ločnik. Vsak element lahko tako kot Zaboj in Stolpec
podvojite in prenesete v katerikoli del predloge, ali pa ga
shranite za kasnejšo uporabo.
Za pravilno prikazovanje na mobilnih napravah je pomembno, da pravilno vstavite postavitvene elemente, z
oblikovanjem vsebinskih elementov pa predlogo naredite bolj berljivo in spodbudite bralca h kliku k akciji (klik
na gumb/sliko/povezavo).
2.1 Naslov
↑
Ob dvokliku na element Naslov se prikaže preprost
urejevalnik (predogled zgoraj).
V prvi vrstici so na voljo možnosti oblikovanja teksta:
- Krepko (B), Poševno (I), Podčrtano (U), Prečrtano
- Poravnava (levo, sredinsko, desno, obojestransko)
- Stil naslova (Naslov 1, Naslov 2, Naslov 3)
- Vrsta, velikost in barva pisave ter barva ozadja
- Lahko vstavite povezavo, jo prekinete ali vstavite
zaznamek
V drugi vrstici so na izbiro različne avtomatske
povezave: ogled na spletu, subtagi in odjavne
povezave. Več o teh povezavah v točki 2.2
V nastavitvah tipografije lahko nastavite lastnosti
celotnega bloka teksta (predogled desno)
Če ste v preprostem urejevalniku nastavili Naslov 1,
potem v tem urejevalniku urejate H1, če ste nastavili
Naslov 2, potem urejate H2, itd.
V urejevalniku lahko torej urejate:
- vrsto pisave
- velikost pisave
- višino vrstice besedila
- podčrtanost in barvo povezave
- notranji odmik besedila od roba elementa
2.2 Tekst
Ob dvokliku na element Tekst se prikaže preprost urejevalnik. Funkcionalnost urejevalnika velja tako za
Naslov kot za Tekst in je razložena pod točko 2.1.
Podrobneje bomo razložili povezave, ki jih lahko dodajate v Tekst in Naslov:
Avtomatske povezave in Subtagi
Vstavite jih v označeno besedo ali besedno zvezo. Na izbiro imate tri sklope povezav, ki se navezujejo na
Ogled na spletu, Prejemnika in Odjavo. V besedilo lahko vstavite:
Avtomatsko povezavo Ogled na spletu. Ta povezava se najpogosteje vstavi v glavo predloge
in omogoča ogled predloge na spletu.
Subtage Prejemnikov email, Prejemnikovo ime, Prvi del imena ali Drugi del imena.
Prejemnikov email se ponavadi uporabi v nogi predloge (npr. To sporočilo je bilo poslano na
e-naslov {subtag:email}) ostale povezave pa kot nagovor v Zadevi sporočila ali v samem
sporočilu (npr. Pozdravljeni, {subtag:name})
Avtomatsko povezavo Odjava, Prilagoditev odjave ali Potrditev prijave. Povezava za odjavo
je obvezni del vsake predloge. Ponavadi jo postavimo v nogo predloge (npr. Da se odjavite
od prejemanja naših novic kliknite na {unsubscribe}Odjavo{/unsubscribe}). V nogo prav tako
postavimo povezavo za prilagoditev prijave, potrditev prijave pa je največkrat del glavne vsebine.
Poljubna povezava
Povezave lahko urejate tudi s klikom na gumb za povezavo v preprostem urejevalniku.
Odpre se dodatni urejevalnik za povezave:
Najprej izberete vrsto povezave. To je
lahko URL, zaznamek ali elektronski
naslov.
Če izberete URL, imate na voljo izbiro protokola: http, https, ftp, news ali drug.
Uporaba protokola <drug>:
Primer 1: Unsubscribe
V Tekstu označite besedilo, ki bo vodilo
na odjavo in kliknite na znak za
povezavo. Izberite protokol <drug> in v
polje za URL naslov vstavite
{unsubscribe}{/unsubscribe}. S takim
načinom vstavljanja povezave lahko sami
določite barvo in podčrtanost povezave.
To pa določite v urejevalniku Tipografije.
Primer 2: Telefonska številka
Lahko vstavite povezavo v telefonsko
številko in s tem omogočite, da
uporabnik neposredno s klikom na
številko vspostavi klic. V Tekstu
označite telefonsko številko in kliknite
na znak za povezavo. Izberite protokol
<drug> in v polje za URL naslov
vstavite tel:051222333.
Če izberete ZAZNAMEK kot vrsto
povezave lahko urejate zaznamke
znotraj predloge. Najprej označite
besedilo, ki bo vaš zaznamek, torej cilj,
kamor hočete priti s klikom na neko
drugo besedilo. Ko označite to besedilo
kliknite na zastavico v enostavnem
urejevalniku besedila. Določite ime
zaznamka.
Nato označite neko drugo besedilo
znotraj vaše predloge, ki bo s klikom
nanj vodilo do zaznamka. Ko ste
označili besedilo, kliknite v enostavnem
urejevalniku na ikono za povezavo in
izberite kot vrsto povezave Zaznamek
na tej strani. Izberite ime, ki ste ga
določili Zaznamku v prejšnjem koraku
in kliknite V redu.
Kot tretjo vrsto povezave lahko izberete
ELEKTRONSKI NASLOV.
Vpišite email naslov, na katerega želite
prejemati elektronska sporočila, lahko
določite tudi Predmet (“subject”) in
Vsebino sporočila. Kliknite V redu.
Ta povezava se ponavadi vstavi v nogo
predloge.
Poleg vsebine tekstovnega bloka, lahko uredite tudi obliko. V nastavitvah tipografije lahko nastavite oblikovne
lastnosti celotnega bloka teksta. Urejevalnik je enak tako za Naslov, kot za Tekst.
V urejevalniku lahko urejate:
vrsto pisave
velikost pisave
barvo pisave
višino vrstice teksta
podčrtanost in barvo povezave
notranji odmik teksta od roba elementa
2.3 Slika
Sliko, ki jo dodate v predlogo morate najprej naložiti in jo nato vstaviti. Ko povlečete element Slika v predlogo,
nanj dvokliknete in prikaže se vam Brskalnik slik. Do Brskalnika slik lahko dostopate tudi v desnem
urejevalniku s klikom Pojdi na galerijo.
V brskalniku slik lahko izbirate med različnimi mapami in slikami, ki ste jih ustvarili že prej, ali pa ustvarite novo
mapo in vanjo naložite nove slike. Slike lahko naložite iz računalnika ali pa vstavite le URL slike. V tem primeru
bo slika naložena na nekem drugem serverju.
Z vsemi datotekami, ki ste jih naložili, lahko upravljate tudi v Upravljalcu datotek. Do upravljalca dostopate v
glavnem meniju aplikacije SqualoMail s klikom na .
Ko ste vstavili sliko lahko urejate njene značilnosti v urejevalniku desno:
Pod sliko lahko s klikom na Pojdi na galerijo
trenutno sliko zamenjate, ali pa jo s klikom na
Odstrani, odstranite
Pod Opis slike lahko dodate opis, kaj slika prikazuje.
Ta opis ali ALT text se prikaže, ko slika v email
odjemalcu ni na voljo
Zelo priporočljivo je, da v sliko dodate povezavo. Ta
je lahko URL povezava ali email
Širina predloge je 600px, zato vam svetujemo,
da ne vstavljate slik z večjo širino kot to.
Sliki lahko nastavite poravnavo znotraj bloka. Če je
slika polne velikosti zaboja, v katerem se nahaja,
potem poravnava znotraj bloka ne bo vplivala na
njeno pozicijo.
Če je originalna velikost slike večja kot 240px,
vendar ji zmanjšate velikost pod 240px, se odpre
možnost Tekoče na mobilnih napravah. To pomeni,
da se bo slika kljub manjši velikosti razpotegnila čez
celotno širino mobilnega ekrana. Če to možnost
izključite, bo slika ostala tudi na mobilnih ekranih
procentualno enake širine kot na namizju.
Nastavitve odmikov, obrob in ozadja so enake kot pri oblikovanju Zaboja:
Sliki lahko nastavite tudi notranji ali zunanji odmik.
Če sliki nastavite notranji odmik, ji lahko dodate tudi
barvo ozadja, ali pa ga nastavite kot transparentno.
Primer: Notranji odmik s sivim ozadjem in zunanji
odmik zgoraj in spodaj 15px
Sliki lahko dodate tudi Obrobe.
2.4 Gumb
Z dvoklikom na Gumb se odpre preprost urejevalnik, kjer lahko urejate obliko pisave v gumbu (predogled
zgoraj):
- Krepko (B)
- Poševno (I)
- Podčrtano (U)
- Poravnavo pisave (levo, sredinsko, desno, obojestransko)
- Obliko pisave (navaden tekst)
- Vrsto, velikost in barvo pisave ter barvo ozadja pisave
V meniju desno (predogled spodaj) lahko urejate oblikovne značilnosti gumba, kjer določite:
Polmer robov gumba oziroma zaobljenost robov:
0 px
7 px
Vrsto povezave: navadno povezavo ali email naslov.
Če ste izbrali navadno povezavo lahko določite tudi
protokol povezave: http, https, ftp, ali drugo in v
okencu nižje vpišete URL.
Primer:
Povezava do PDF datoteke za direktni prenos
PDF datoteko naložite v Upravljalca datotek. Nanjo
kliknete z desnim klikom in izberete »Kopiraj URL«.
Ta URL prilepite na mesto za URL (glej zgoraj).
*To povezavo lahko prilepite tudi na sliko ali tekst.
Lahko izberete tudi protokol drugo in v gumb
vstavite povezavo za odjavo.
Primer:
* Odjava: {unsubscribe}{/unsubscribe}
* Prilagoditev prijave na seznam: {modify}{/modify}
* Potrditev prijave: {confirm}{/confirm}
Vrsto pisave, barvo pisave in višino vrstice teksta
Poravnavo znotraj bloka: levo, center in desno
Velikost gumba: velikost se lahko avtomatsko prilagaja tekstu v gumbu ali pa sami določite njegovo
velikost z drsnikom. Določite lahko tudi ali se bo velikost gumba na mobilnih napravah prilagajala širini
zaslona, ali bo ostala fiksna
Notranji odmik, ki določi razmik med tekstom in
notranjim robom gumba
Primer:
10 px
25 px
Zunanji odmik, ki določi razmik med zunanjim robom
in ostalimi elementi okoli gumba
Obrobe: najprej s klikom na sredinsko kljukico ali na
posamezni rob izberemo, ali želimo urejati vse
obrobe naenkrat ali le nekatere. Lahko nastavimo
tudi vsako obrobo posebej. Nato določimo stil
obrobe, ki je lahko polna črta, črtkana, pikčasta ali je
nič. Določimo njeno širino oziroma debelino in
izberemo barvo obrobe
Barva oziroma ozadje gumba: Izberemo barvo
ozadja gumba ali za ozadje nastavimo sliko
Primer:
2.5 Ločnik
Element Ločnik omogoča, da v predlogo dodate vodoravno črto ali jo uporabite kot razmik (prazen prostor).
V desnem urejevalniku lahko nastavite:
stil črte: polna, črtkasta, pikčasta, nič
širino črte v pikslih
barvo črte
odmik od notranjega roba elementa
barvo oziroma sliko ozadja
Primer ločnika:
Sedaj, ko smo pregledali postavitev predloge in oblikovanje vsebinskih
elementov, lahko primere iz prve točke nadgradite še oblikovno:
Primer 1: 1 Stolpec
Ko ste dodali sliko, naslov in tekst, oblikujete še izgled. Končna verzija:
Kako oblikujete tak element:
● Celotnemu Zaboju nastavite v urejevalniku desno notranji odmik 20px: kliknite na “NOTRANJI ODMIK”
in vpišite številko. Tako urejate vse štiri odmike naenkrat. Dodajte tudi zunanji spodnji in zgornji odmik,
da odmaknete trenutni zaboj od zabojev, ki jih boste še dodajali v predlogo. Kliknite torej na številko, ki
označuje spodnji zunanji odmik in vpišite 20. Enako storite še za zunanji zgornji odmik. Dodajte še
obrobo, zato da zaboj vizualno lažje ločite od ozadja: Širina 1px, Stil Polna in Barva #656565. Barva
ozadja zaboja naj bo bela (#ffffff).
● Naslovu uredite odmike: levo in desno nastavite 10px, zgoraj 30px in spodaj 20px, zato da naslov
odmaknete od slike in spodnjega teksta.
● V urejevalniku desno mu nastavite velikost (32px), barvo (#000000), višino vrstice (36px), podčrtanost
povezave (ne) in barvo povezave (#000000).
● Z dvoklikom na naslov se vam odpre enostavni urejevalnik, kjer uredite še poravnavo - sredinska in
vstavite željeno povezavo.
● Tekstu uredite odmike: levo, desno in spodaj nastavite na 10px, zgoraj pa ni potrebno, saj ste odmik
nastavili že v naslovu.
● V urejevalniku desno tekstu nastavite velikost (16px), barvo (#444444), višino vrstice (22px),
podčrtanost povezave (da) in barvo povezave (#d00000).
● Z dvoklikom na tekst uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Sliki dodate URL naslov.
● Nastavitve v urejevalniku Naslova in Teksta izgledajo tako:
NASLOV TEKST
Primer 2: 2 Stolpca s sliko in tekstom
Najprej oblikujete levi stolpec in ko ste z oblikovanjem končali, ga podvojite in prenesite v desni stolpec. Nato
še spremenite besedilo in sliko v desnem stolpcu. Končna verzija:
Kako oblikujete tak element:
● Celotnemu Zaboju, kjer sta oba stolpca, nastavite v desnem urejevalniku notranji odmik 10px: kliknite
na “NOTRANJI ODMIK” in vpišite številko 10px. Dodajte tudi zunanji spodnji odmik, da odmaknete
trenutni zaboj od zabojev, ki jih boste še dodajali v predlogo. Kliknite torej na številko, ki označuje
spodnji zunanji odmik in vpišite 20px. Dodajte še obrobo, zato da zaboj vizualno lažje ločite od ozadja:
Širina 1px, Stil Polna in Barva #656565. Barva ozadja zaboja naj bo bela (#ffffff).
● Nato nastavite notranji odmik 10px še zaboju z vsebinskimi elementi.
● Naslovu uredite odmike: levo, desno in spodaj nastavite na 10px, zgoraj 20px, zato, da naslov
odmaknete od slike in spodnjega teksta.
● V urejevalniku desno Naslovu nastavite velikost (26px), barvo (#000000), višino vrstice (28px),
podčrtanost povezave (ne) in barvo povezave (#000000).
● Z dvoklikom na naslov uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Tekstu uredite odmike: levo, desno in spodaj nastavite 10px, zgoraj pa ni potrebno, saj ste odmik
nastavili že v Naslovu.
● V urejevalniku desno Tekstu nastavite velikost (14px), barvo (#444444), višino vrstice (18px),
podčrtanost povezave (da) in barvo povezave (#d00000).
● Z dvoklikom na text uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Sliki dodajte URL naslov.
● Levi stolpec podvojite in ga prenesite v desni stolpec. Spremenite sliko, naslov, tekst in povezave.
Oblikovne nastavitve ostanejo enake.
● Nastavitve v urejevalniku Naslova in Teksta izgledajo tako:
NASLOV TEKST
Primer 3a: 2 stolpca - slika in tekst
Ko ste dodali in oblikovali željeno sliko in tekst, dodajte tudi gumb. Nato ga še oblikujete. Končna verzija:
Kako oblikujete tak element:
● Celotnemu Zaboju, kjer sta oba stolpca, nastavite v desnem urejevalniku notranji odmik 10px: kliknite
na “NOTRANJI ODMIK” in vpišite številko 10px. Dodajte tudi zunanji spodnji odmik, da odmaknete
trenutni zaboj od zabojev, ki jih boste še dodajali v predlogo. Kliknite torej na številko, ki označuje
spodnji zunanji odmik in vpišite 20px. Dodajte še obrobo, zato da zaboj vizualno lažje ločite od ozadja:
Širina 1px, Stil Polna in Barva #656565. Barva ozadja Zaboja naj bo bela (#ffffff).
● Nato nastavite notranji odmik 10px še obema notranjima zabojema. Torej 10px zaboju, kjer je slika in
10px zaboju, kjer je tekst.
● Tekstu uredite odmike: vse notranje odmike nastavite na 10px, zato da bo na mobilni verziji razmik
med sliko in tekstom tudi, ko bosta ena nad drugim.
● V urejevalniku desno Tekstu nastavite velikost (14px), barvo (#444444), višino vrstice (18px),
podčrtanost povezave (da) in barvo povezave (#d00000).
● Z dvoklikom na tekst uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Sliki dodajte URL naslov.
● Vstavite Gumb v desni stolpec, v isti Zaboj, kjer je Tekst. Vstavite ga pod element Tekst.
● Dodajte mu URL povezavo in nastavite polmer robov na 3px. Z dvoklikom na tekst v gumbu se odpre
enostavni urejevalnik, kjer spremenite vsebino in nastavite odebeljeno pisavo. V desnem urejevalniku
nastavite barvo teksta (#ffffff), velikost (14px) in višino vrstice teksta (16px). Poravnava gumba naj bo
center, velikost pa fiksirana in sicer jo spremenite z drsnikom na 167px. Notranje in zunje odmike
gumba nastavite na 10px. Obrobo gumba nastavite na 0px - gumb bo torej brez obrobe. Barva gumba
naj bo ista kot barva povezav v tekstu, torej rdeča #d00000.
TEKST ZUNANJI ZABOJ
Primer 3b: 2 stolpca - tekst in slika
Če želite ohraniti enak stil skozi celotno predlogo (obrobe zabojev in sredinska poravnava), lahko ta primer
naredite tako, da podvojite zaboj iz zgornjega primera (3a) in zrcalite vsebinske elemente. Končna verzija
izgleda tako:
Opomba: V tem primeru bo razporeditev na mobilnih napravah najprej tekst in nato slika. Če želite, da je razporeditev
obratna, torej najprej slika in nato tekst, morate zaboja z vsebinskimi elementi prenesti direktno v element Polna vrstica, ki
mu natavite dve celici in razporeditev iz desne proti levi. Tako bo razporeditev pravilna, vendar pa temu elementu ne
morate nastaviti obrobe, saj nima zunanjega Zaboja.
Primer 4: 3 Stolpci
Najprej oblikujete levi stolpec in ko ste z oblikovanjem končali, ga dvakrat podvojite in prenesete v sredinski in
desni stolpec. Nato spremenite Naslov, Tekst in Sliko v sredinskem in desnem stolpcu. Končna verzija:
Kako oblikujete tak element:
● Celotnemu Zaboju, kjer so vsi tri stolpci, nastavite v desnem urejevalniku notranji odmik 10px: kliknite
na “NOTRANJI ODMIK” in vpišite številko. Dodajte tudi zunanji spodnji odmik, da odmaknete trenutni
zaboj od zabojev, ki jih boste še dodajali v predlogo. Kliknite torej na številko, ki označuje spodnji
zunanji odmik in vpišite 20px. Dodajte še obrobo, zato da zaboj vizualno lažje ločite od ozadja: Širina
1px, Stil Polna in Barva #656565. Barva ozadja zaboja naj bo bela (#ffffff).
● Nato nastavite notranji odmik 10px še zaboju z vsebinskimi elementi.
● Naslovu uredite odmike: levo, desno in spodaj nastavite na 10px, zgoraj 20px, zato, da naslov
odmaknete od slike in spodnjega teksta.
● V urejevalniku desno Naslovu nastavite velikost (18px), barvo (#000000), višino vrstice (20px),
podčrtanost povezave (ne) in barvo povezave (#000000).
● Z dvoklikom na naslov uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Tekstu uredite odmike: levo in desno nastavite 10px, zgoraj in spodaj pa ni potrebno, saj ste odmik
nastavili že v Naslovu in v zunanjem Zaboju.
● V urejevalniku desno tekstu nastavite velikost (13px), barvo (#444444), višino vrstice (18px),
podčrtanost povezave (da) in barvo povezave (#d00000).
● Z dvoklikom na text uredite še poravnavo - sredinska in vstavite željeno povezavo.
● Sliki dodajte URL naslov.
● Levi stolpec dvakrat podvojite in ga prenesite v sredinski in desni stolpec. Spremenite slike, naslove,
tekste in povezave. Oblikovne nastavitve ostanejo enake.
Primer 5: Noga predloge z gumbi za socialna omrežja
Predlogo na koncu zaključimo z nogo (footer), kamor vstavimo določene povezave. Vsaka predloga mora imeti
po zakonskih določilih možnost odjave od prejemanja e-sporočil. To povezavo najpogosteje vstavimo ravno v
nogo predloge skupaj z gumbi za socialna omrežja in prejemnikovim e-mailom.
Končna verzija:
Kako oblikujete tak element:
● Najprej naredite vrstico z ikonami za socialna omrežja. Ker želite, da so ikone sive barve, to storite z
elementom Slika in ne z elementom Sledenje na socialnih omrežjih. Vstavite Polno vrstico in vanjo
povlecite Zaboj. Celotnemu Zaboju nastavite v desnem urejevalniku notranji spodnji in zgornji odmik
10px, notranji levi in desni odmik pa 30px. Dodajte tudi zunanji spodnji odmik 10px in zunanji zgornji
odmik 20px.
● V Zaboj vstavite element Stolpci in s klikom na Dodaj stolpec dodajte še dva stolpca, tako da so skupaj
4. Stolpcem izenačite širino (vsak je širok 25% celotne širine) in izklopite prerazporeditev na mobilnih
napravah.
● V vsak Stolpec vstavite element Slika. Z dvoklikom na sliko se odpre Brskalnik slik, kamor naložite
slike ikon za socialna omrežja. Nato v vsakega od štirih stolpcev vstavite sliko ikone (Instagram,
Facebook, LinkedIn, Youtube). Vsaki sliki dodajte URL povezavo.
● Pod Zabojem z ikonami vstavite nov Zaboj, ki naj bo v isti Polni vrstici. Zaboju nastavite v desnem
urejevalniku notranje odmike 10px in zunanji spodnji odmik 30px.
● V Zaboj vstavite vsebinski element Tekst. Nastavite 20px desnega in levega odmika, zgornji in spodnji
odmik pa nastavite na 0px.
● V urejevalniku desno Tekstu nastavite velikost (12px), barvo (#444444), višino vrstice (18px),
podčrtanost povezave (da) in barvo povezave (#d00000).
● Z dvoklikom na tekst uredite še poravnavo - sredinska in vstavite povezave za prejemnikov email
({subtag:email}) in odjavo (označite tekst, na katerem bo povezava za odjavo in kliknite na znak za
povezavo. Protokol povezave naj bo <drug>, URL pa {unsubscribe}{/unsubscribe}).
Več o povezavah si lahko preberete pod točko 2.2
NASTAVITVE STOLPCA Z IKONAMI ZA
SOCIALNA OMREŽJA
Ker ste nastavili barvo ozadja Zabojev belo
(#ffffff), lahko spremenite tudi barvo
generalnega ozadja. To storite pod
zavihkom Ozadje. Nastavite sivo barvo
ozadja (#e7e7e7).
Celotna predloga izgleda tako:
LEVO: predogled na namiznih napravah
DESNO: predogled na mobilnih napravah
3. Posebni vsebinski elementi
Ti elementi so narejeni za enostavno in hitro grajenje predlog.
3.1 Slika + Tekst
S tem elementom lahko na zelo enostaven način dodajate že oblikovan vsebinski element s sliko in tekstom. V
urejevalniku nato določite značilnosti slike in teksta, sama postavitev obeh elementov pa ostane enaka.
3.2 Tekst + Slika
Ta element je enak zgornjemu, le da sta poziciji slike in teksta zamenjani.
3.3 Skupina slik
S tem elementom lahko dodajate skupino slik, kjer spreminjate število slik in njihovo razporeditev. Dodate
lahko od dve do pet slik naenkrat. Z dvoklikom na sliko lahko dostopate do Galerije slik, ali pa sliko izberete s
klikom na “Pojdi na galerijo” v urejevalniku desno. Tukaj lahko določate tudi njihovo razporeditev.
Primer 1: Dve sliki
Primer 2: Pet slik
3.4 Sledenje na socialnih omrežjih
Z elementom Sledenje na socialnih omrežjih lahko na preprost način dodate povezave do vaših profilov na
socialnih omrežjih. V urejevalniku na desni strani imate na izbiro ikone za Facebook, Twitter, LinkedIn,
Google+ ali Email. Dodate lahko največ 5 ikon.
Če vam stil, barva in postavitev ikon niso všeč ali pa bi želeli imeti svoje ikone, lahko povezave do
socialnih omrežij vstavite tudi na drugačen način – s slikami in URL-ji. Navodila, kako to storite so na
voljo tukaj>>>.
Ko izberete določeno socialno omrežje, vstavite
URL do te strani. Poljubno lahko vstavite tudi
tekst, ki se bo prikazal pod ikono. Da se tekst
prikaže, obkljukajte zbiro Oznaka pod ikono.
Tekst lahko oblikujete v segmentu Tipografija.
Nato izberete stil ikon, ki je lahko okrogel,
zaobljen kvadrat ali kvadrat z ostrimi robovi.
Uredite lahko tudi poravnavo ikon in notranji ali
zunanji odmik
Primer: 5 ikon za povezavo do socialnih omrežij
3.5 Deljenje na socialnih omrežjih
Z elementom Deljenje na socialnih omrežjih lahko na preprost način dodate v svoja sporočila povezave, s
pomočjo katerih bodo prejemniki delili vašo vsebino na socialnih omrežjih.
V desnem urejevalniku najprej nastavite
Uporabljeni URL naslov, torej naslov, ki ga bo
uporabnik delil: to je lahko URL kampanije, ali
prilagojeni URL.
Primer prilagojenega URL naslova:
- Povezava: www.squalomail.com
- Kratek opis: Platforma za email marketing!
Nato dodate poljubna socialna omrežja, kjer želite,
da prejemnik deli vašo vsebino. Na voljo so
Facebook, Twitter, LinkedIn, Google+ in
posredovanje preko email naslova.
Ikone lahko tudi prerazporejate, tako da kliknete
nanjo v desnem urejevalniku in povlečete na
želeno mesto (gor/dol).
Nastavite lahko tudi postavitev in prikaz ikon
oziroma oznak (predogled desno).
Kot pri ikonah za Sledenje na socialnih omrežjih
lahko tudi tukaj nastavite stil, obrobe, poravnavo
in odmike znotraj bloka, tipografijo oznak ter
ozadje.
Primer: 5 ikon za deljenje na socialnih omrežjih
3.6 Priljubljene
Ta element je zelo uporaben, saj lahko v predlogo vstavite vaše že oblikovane elemente, ki jim nato samo
spremenite vsebino. S tem elementom torej dodajate v predlogo Priljubljene elemente, ki ste jih shranili iz
kateregakoli Zaboja ali Stolpca v tej predlogi ali v kateri od prejšnjih.
Ko kliknete na element Priljubljene in ga povlečete
v predlogo - v Polno vrstico, se vam odpre
Upravljalec priljubljenih elementov. Tukaj izberete
element, in kliknete Vstavi izbrano.
Če želite upravljati s priljubljenimi elementi,
torej jih izbrisati, lahko do Upravljalca priljubljenih
elementov dostopate v desnem urejevalniku
elementa Zaboj ali Večstolpični element.
4. Ozadje
Tukaj lahko nastavite glavno ozadje vaše predloge, ki bo vidno v celotni širini in višini vašega email odjemalca.
To je lahko barva ali slika.
Opozorilo pri nastavljanju slike za ozadje: Odjemalci
Outlook verzije od 2007 do 2016 podpirajo sliko ozadja
samo v primeru, ko je Ponovitev ozadja nastavljena na
"ponovi oboje".
