Dizajniranje digitalnog sadržaja

Dynamics 365 Marketing omogućuje napredni alat za dizajniranje digitalnog sadržaja za izradu, stilsko oblikovanje i pretpregled različitih vrsta digitalnog sadržaja koje je s pomoću sustava moguće izraditi i njima upravljati, uključujući:

• Marketinške poruke e-pošte i predlošci
  Dodatne informacije: Pretpregled marketinških poruka e-pošte
• Marketinške stranice i predlošci
  Dodatne informacije: Stvaranje i implementiranje marketinških stranica
• Marketinški obrasci i predlošci
  Dodatne informacije: Stvaranje, pregled i upravljanje marketinškim obrascima

Dizajner sadrži sučelje za povlačenje i ispuštanje za izradu i rad s dizajnom te neobvezni uređivač HTML-a za izravan rad s kodom i alatom za pretpregled koji pokazuje izgled vašeg dizajna na različitim formatima hardvera i usmjerenja.

Dizajner se prilagođava trenutnom kontekstu (e-pošti, odredišnoj stranici itd.) kako bi pružio samo one elemente dizajna i postavke koje su primijenjive, no njegova osnovna funkcionalnost ostaje ista. Također pruža „način rada sa stranim sadržajem” koji se aktivira lijepljenjem HTML-a iz aplikacija trećih strana izravno u uređivač HTML koda; u ovom slučaju dizajner 0 zna koju vrstu sadržaja dizajnirate te stoga skriva značajke koje ovise o kontekstu i pruža više generičko sučelje dizajna.

Ova tema opisuje općenit rad s dizajnerom u svim kontekstima. Za više informacija o uklapanju dizajnera u razne specifične kontekste te za pojedinosti samo jednog konteksta, pogledajte povezane teme na popisu s početka ovog uvoda.

Započnite odabirom predloška

Većina entiteta bez predloška koje pružaju dizajner sadržaja također podržavaju predloške, stoga će se od vas pri prvoj izradi marketinške poruke e-pošte, stranice ili obrasca zatražiti odabir predloška.

Birač predložaka pruža brojne mogućnosti za kontrolu pretraživanja, razvrstavanja i filtriranja predložaka. Te kontrole upotrijebite za pronalaženje predložaka koji bi mogli odgovarati vašim preduvjetima, zatim odaberite predložak za prikaz pretpregleda i više pojedinosti o njemu u području Pretpregled. Kada pronađete pravi predložak, odaberite Odaberi kako biste ga primijenili vašem novom dizajnu.

Predložak koji odaberete pokrenut će vaš dizajn uspostavljanjem sljedećih elemenata:

• Izgled stupca i početni sadržaj: Postavlja osnovni izgled (kao što je jedan stupac ili dva stupca) i uključuje početni sadržaj (kao što su slike, potrebne veze, gotovi tekst i još mnogo toga).
• Vrsta stranice ili obrasca: ako izrađujete marketinšku stranicu ili obrazac, ovaj element pokazuje predstavlja li stranica pretplatnički centar, mogućnost prosljeđivanja prijatelju ili odredišnu stranicu te uspostavlja osnovne mogućnosti stranice ili obrasca.
• Ogledni dizajn i sadržaj: neki predlošci već uključuju osnovne elemente dizajna, poput logotipa, tiska, palete boja, oglednog sadržaja i ostalog. Drugi predlošci pružaju praznu stranicu koja sadrži samo vrstu stranice i izgled stupaca. Ogledni dizajn i sadržaj moguće je slobodno mijenjati tijekom uređivanja i dizajniranja stranice.

Nakon odabira predloška, dizajner prikazuje vaš odabrani sadržaj predloška koji možete početi uređivati. Vaša nova e-pošta, stranica ili obrazac izrađuju se u obliku jednostavne kopije predloška, stoga na predložak neće utjecati nikakve napravljene lokalne promjene, te nikakve buduće promjene nastale na temelju predloška neće utjecati na predložak.

Formiranje osnovnog izgleda

Upotrijebite elemente odjeljka kako biste formirali osnovni izgled vaših poruka e-pošte, marketinških stranica i marketinških obrazaca. Svaki element odjeljka stvara niz stupaca u koje možete povući razne druge elemente dizajna, poput tekstualnih okvira, slika, gumba, razdjelnika i još mnogo toga. Postoji pet različitih elemenata odjeljka, od kojih svaki stvara redak s jednom od pet različitih mogućnosti rasporeda (jedan stupac, dva stupca (1:1), dva stupca (1:2), dva stupca (2:1) ili tri stupca). Ako je potrebno stvoriti složeni dizajn s različitim rasporedom stupaca u svakom retku, možete složiti nekoliko elemenata odjeljka.

Dodavanje elemenata odjeljka u izgled dizajna

Kada dizajnirate poruku e-pošte, stranicu ili obrazac koji započinju s praznim predloškom (ili prilagođenim predloškom na temelju praznog predloška), svi elementi dizajna (osim elemenata odjeljka) moraju biti stavljeni u element odjeljka. Elementi odjeljka dostupni su na ploči Alatni okvir ispod naslova Raspored.

Prazni predložak nudi zadani raspored odjeljka s jednim stupcem, ali prema potrebi možete urediti raspored njegova stupaca i/ili dodati više elemenata odjeljka.

Kako biste dodali element odjeljka, otvorite ploču Alatni okvir, odaberite element odjeljka koji pruža raspored stupca s kojim želite početi i povucite ga na položaj iznad ili ispod postojećeg elementa odjeljka u dizajnu.

Uređivanje i konfiguriranje elementa odjeljka

Kada dodajete novi element odjeljka, odabrat ćete jedan od pet rasporeda početnih stupaca. No, nakon što je vaš element postavljen, možete promijeniti raspored stupaca i/ili mogućnosti dizajna.

Za uređivanje i konfiguriranje elementa odjeljka učinite sljedeće:

1. Odaberite element odjeljka na radnom području. Ono sada prikazuje plavi obrub i kartice koje prikazuju vrstu elementa i gumbe za brisanje ili premještanje elementa.

2. Otvara se ploča Svojstva kako bi se prikazale postavke za odabrani odjeljak.

   

3. Prema potrebi postavite postavke u sljedećim odjeljcima:

   • Raspored odjeljka: Ovdje odaberite gumb kako biste promijenili izgled stupca na onaj koji je grafički označen na svakom gumbu. Ako uklonite stupac, sav njegov sadržaj premjestit će se u jedan od preostalih stupaca. Ako dodate stupac, novi će stupac u početku biti prazan.
   • Stilovi obruba odjeljka: Ove postavke upotrebljavajte za postavljanje stila (nema, čvrsti, točkast, crtkani ili dvostruki), širine crte, boje crte i zaobljenosti kuta za obrub koji ide oko cijelog odjeljka (ali ne između stupaca).
   • Ispuna odjeljka: Navedite koliko ispune (u pikselima) biste željeli postaviti između stupaca i obruba u boji. Možete unijeti odvojene vrijednosti za gornji, donji, lijevi i desni.
   • Margina odjeljka: Odredite koliko margina (u pikselima) biste željeli postaviti između obruba u boji i vanjskog ruba elementa odjeljka. Možete unijeti odvojene vrijednosti za gornji, donji, lijevi i desni.

Dodavanje, konfiguriranje i uređivanje elemenata dizajna za stvaranje sadržaja izgleda

Elementi odjeljka stvaraju strukturu na koju možete povući druge vrste elemenata dizajna kako biste stvorili svoj sadržaj. Ako upotrebljavate elemente odjeljka, onda svi vaši elementi dizajna moraju biti postavljeni u stupac elementa odjeljka.

• Kako biste dodali element dizajna, povucite potrebni element iz Alatnog okvira na odgovarajući stupac elementa odjeljka. Kada odbacite većinu vrsta elemenata, otvorit će se ploča Svojstava ili, za tekstne elemente, alatna traka za oblikovanje te ćete moći započeti unositi tekst.
• Kako biste konfigurirali svojstva postojećeg elementa ili počeli unositi tekst u tekstni element, najprije odaberite element odjeljka koji on sadrži kako biste ga aktivirali, a zatim odaberite ciljni element za početak uređivanja. Za elemente koji nisu tekstni, za odabrani će se element otvoriti ploča Svojstva. Za tekstne će elemente ovo otvoriti pomičnu alatnu traku za oblikovanje teksta.
• Da biste uklonili element dizajna, odaberite ga, a zatim gumb za brisanje koji se nalazi u gornjem desnom kutu elementa.
• Da biste premjestili element dizajna, odaberite ga, a zatim kliknite gumb za premještanje koji se nalazi u gornjem desnom kutu elementa i povucite element na novo mjesto.

Rad s dizajnerom

Većinu ćete vremena koje provedete izrađujući marketinšku poruku e-pošte, stranicu ili obrazac koristiti dizajner ili uređivač HTML-a kako biste dodali sadržaj, konfigurirali elemente dizajna, učitali slike, primijenili stilove i drugo.

Dizajner sadrži područje s alatnom trakom i sadržajem. Alatna traka pruža nekoliko osnovnih naredbi i tri navigacijske kartice (Dizajn, HTML i Pretpregled), kojima se upravlja onime što možete vidjeti i napraviti u području sadržaja.

Upotreba grafičkog dizajnera

Da biste otvorili grafički dizajner, odaberite Dizajner u alatnoj traci dizajnera. Dizajner vam omogućuje sastavljanje i dizajniranje sadržaja bez upotrebe ikakvog koda. Većinom nikada nećete morati prijeći na HTML prikaz ako to ne želite.

Grafički dizajner pruža izmjenjivi pretpregled (radno područje) u kojem možete birati, uređivati ili uklanjati sadržaj te skup kartica za dodavanje elemenata dizajna i rad s dizajnom:

• Alatni okvir: Kako biste dodali novi element u svoj dizajn, povucite element odavde do odgovarajućeg mjesta na radnom području ili ovdje odaberite element (bez povlačenja) kako biste istakli sve položaje na radnom području gdje biste mogli smjestiti taj element, a zatim odaberite istaknuti položaj na koji ga želite postaviti. Svaki element dizajna predstavlja određenu vrstu sadržaja, poput tekstnog elementa, slike ili unosnog obrasca. Postavke i značajke svakog elementa dizajna razlikuju se ovisno o vrsti.
• Svojstva: da bi radili, većinu je elemenata dizajna potrebno konfigurirati. Primjerice, slika mora pokazivati slikovnu datoteku, obrazac mora pokazivati zapis marketinškog obrasca, a gumbu je potreban tekst i odredište. Prilikom dodavanja novog elementa dizajna, isti se automatski odabire i otvara se njegova kartica Svojstva kako biste ga postavili. Da biste konfigurirali (ili ponovno konfigurirali) bilo koji element dizajna u vašem dizajnu, najprije ga odaberite i zatim otvorite karticu Svojstva.
• Stil: Ove postavke upotrijebite kako biste cijelom dizajnu dodali boje, razmak i ostale grafičke mogućnosti.

Više informacija: Reference elemenata dizajna

Izravan rad u HTML-u

Želite li raditi izravno s HTML kodom, otvorite karticu HTML u dizajneru. Ovo možete napraviti kako biste postavili neka svojstva kojima ne možete pristupiti pomoću grafičkog dizajnera, ili možete zalijepiti HTML kod koji ste izradili pomoću nekog drugog programa. Možete dodati i napredne skripte i stilove kako biste uveli novu funkcionalnost. Primjerice, dizajnirate li marketinšku stranicu, mogli biste pisati skripte kako biste implementirali sljedeće značajke:

• Promijenili svojstva jednog polja (ili obrasca) na temelju vrijednosti drugog polja, primjerice:
  • neka polje Br. klijenta bude vidljivo samo ako polje Postojeći klijent ima status „true“.
  • neka polje Br. klijenta potrebno ako polje Postojeći klijent ima status „true“.
  • Ispraznili polje adrese Savezna država ako se promijeni polje Država.
  • Promijenili popis vrijednosti polja Savezna država na temelju odabrane države.
  • Promijeniti stilove polja kako biste ih učinili vidljivima, obaveznim itd.
• Dodali prilagođene provjere valjanosti polja (pri slanju obrasca ili promjeni vrijednosti polja), poput zahtjeva da polje Br. klijenta sadrži samo šest znamenki.
• Izvršili radnje tijekom učitavanja ili slanja obrasca, poput:
  • zadanog skrivanja određenih polja
  • onemogućavanja gumba za slanje dok se ne popune sva obvezna polja
  • postavljanja vrijednosti polja na temelju vrijednosti prenesenih u pozivajući URL

Pripazite tijekom rada, budući da grafički uređivač očekuje određene vrste obilježja za implementaciju elemenata povlačenja i ispuštanja. Bez ovog obilježja više nećete moći uređivati elemente dizajna i mogli biste ih čak i razbiti. Dodatne informacije: Upotreba prilagođenih atributa za omogućivanje značajke alata za dizajniranje u e-pošti, stranicama i obrascima

HTML uređivač pruža nekoliko praktičnih značajki za uređivanje koda, poput boja sintakse i brojeva redaka. Također možete primijeniti oblikovanje kako biste dodali prijelome redaka i uvlake kako biste kod učinili čitljivijim. Kako biste to učinili, desnom tipkom miša kliknite bilo gdje u uređivaču i u kontekstnom izborniku odaberite opciju Oblikovanje dokumenta.

Pretpregled dizajna

Iako uređivač povlačenja i ispuštanja pruža izmjenjivi pretpregled, on je i dalje samo približan i njegova prezentacija uključuje nekoliko kompromisa za omogućavanje značajki uređivanja. Da biste bolje razumjeli kako će izgledati vaš dizajn, idite na karticu dizajnera Pretpregled.

Upotrijebite gumbe u lijevom stupcu kartice Pretpregled da biste vidjeli kako će dizajn izgledati na različitim veličinama zaslona i usmjerenjima, poput radne površine, vodoravnog prikaza na tabletu ili okomitog prikaza na mobilnom telefonu. Pretpregled odražava i značajke responzivnog dizajna koje su ugrađene u brojne predloške. No pretpregled ne izvršava prilagođene skripte koje ste možda dodali (poput onih za provjeru valjanosti unosa obrasca).

Pogledajte također

Pristupačnost i tipkovni prečaci
Reference elemenata dizajna
Pregled marketinških poruka e-pošte
Rad s predlošcima e-pošte, stranica i obrazaca
Stvaranje i implementiranje marketinških stranica
Pristupačnost i tipkovni prečaci
Aktiviranje entiteta koji se mogu objaviti i praćenje njihova statusa