Utforma ditt digitala innehåll

Dynamics 365 Marketing innehåller ett avancerat designerverktyg som du använder för att skapa, formatera och förhandsgranska olika typer av digitalt innehåll som du kan skapa och hantera med systemet, bland annat:

• Marknadsföringsmeddelanden och mallar
  Mer information: Ställ in prenumerationslistor och prenumerationscentraler
• Marknadsföringssidor och mallar
  Mer information: Skapa och distribuera marknadsföringssidor
• Marknadsföringsformulär och mallar
  Mer information: Skapa, visa och hantera marknadsföringsformulär

Designerverktyget har ett gränssnitt som bygger på dra-och-släpp där du skapar och arbetar med din design, plus en valfri HTML-redigerare där du kan arbeta direkt med koden samt ett förhandsgranskningsverktyg som visar hur designen ser ut med olika formfaktorer och orienteringar.

Designerverktyget anpassar sig efter det aktuella sammanhanget (e-post, landningssida och så vidare) och visar bara de designelement och inställningar som gäller där, men de grundläggande funktionerna är desamma. Här finns även ett läge för externt innehåll som aktiveras om du klistrar in HTML från tredjepartsprogram direkt i HTML-kodredigeraren. I det här fallet vet designerverktyget inte vilken typ av innehåll du skapar och därför döljs sammanhangsberoende funktioner och ett mer allmänt designgränssnitt visas.

I det här avsnittet beskrivs hur du arbetar med designerverktyget i allmänhet, i alla sammanhang. Mer information om hur designerverktyget anpassas efter olika specifika sammanhang, och information som är specifik för just det sammanhanget, finns i avsnitten som det finns länkar till i början av den här introduktionen.

Börja med att välja en mall

De flesta entiteter som inte är mallar och där innehållsdesignern finns, stöder även mallar. Så när du först skapar ett marknadsföringsmeddelande, en marknadsföringssida eller ett marknadsföringsformulär, ombeds du att välja en mall.

I mallväljaren finns många olika kontroller som du använder för att söka efter, sortera och filtrera mallarna. Med dessa kontroller kan du hitta de mallar som uppfyller dina krav och sedan välja en mall för att visa en förhandsgranskning av den och mer information om den i området Förhandsgranska. När du har hittat rätt mall använder du den för din nya design genom att välja Välj.

Mallen du väljer fastställer följande i din design:

• Kolumnlayout och ursprungligt innehåll: Anger den grundläggande layouten (till exempel en kolumn eller två kolumner) och innehåller ursprungligt innehåll (t.ex. bilder, obligatoriska länkar, standardtext med mera).
• Sid- eller formulärtyp: Om du skapar en marknadsföringssida eller ett marknadsföringsformulär anger detta om sidan är en prenumerationscentral, ett formulär av typen vidarebefordra till en vän eller en landningssida och fastställer de grundläggande funktionerna för den sidan eller formuläret.
• Exempel på design och innehåll: En del mallar innehåller redan grundläggande designelement, till exempel logotyper, typografi, färgpalett, exempelinnehåll och mycket annat. Andra mallar är en tom sida som bara innehåller sidtyp och kolumnlayout. Du kan fritt ändra exempeldesign och -innehåll när du redigerar och utformar sidan.

När du har valt en mall visar designerverktyget det valda mallinnehållet och du kan börja redigera. Ditt nya e-postmeddelande, sida eller formulär skapas som en enkel kopia av mallen så inga lokala ändringar du gör påverkar mallen, och eventuella framtida ändringar av en mall påverkar inte något som skapats utifrån den.

Skapa din grundläggande layout

Använd avsnittselement för att skapa den grundläggande layouten för e-post, marknadsföringssidor och marknadsföringsformulär. Varje avsnittselement skapar en rad med kolumner där du kan dra flera andra designelement, såsom textrutor, bilder, knappar, avdelare med mera. Det finns fem olika avsnittselement, som var och en skapar en rad med ett av fem olika layoutalternativ (en kolumn, två kolumner (1:1), två kolumner (1:2), två kolumner (2:1) eller tre kolumner). Du kan stapla flera avsnittselement efter behov för att skapa komplexa konstruktioner med olika kolumnlayouter i varje rad.

Lägga till avsnittselement för att skapa din design

När du designar ett e-postmeddelande, en sida eller ett formulär som börjar med den tomma mallen (eller en anpassad mall som är baserad på den tomma mallen) måste alla designelement (utöver avsnittselement) placeras i ett avsnittselement. Avsnittselement finns i panelen Verktygslåda under rubriken Layout.

De tomma mallarna tillhandahåller ett enkolumnsavsnitt som standard, men du kan redigera dess kolumnlayout och/eller tillföra fler avsnittselement efter behov.

Om du vill lägga till ett avsnittselement öppnar du panelen Verktygslåda, väljer det avsnittselement som innehåller den kolumnlayout som du vill börja med och drar den till rätt position ovanför eller under ett befintligt avsnittselement i designen.

Redigera och konfigurera ett avsnittselement

När du lägger till ett nytt avsnittselement väljer du en av fem ursprungliga kolumnlayouter. När elementet väl har placerats kan du emellertid ändra kolumnlayouten och/eller designalternativen.

För att redigera och konfigurera ett avsnittselement:

1. Markera avsnittselementet i arbetsytan. Nu visas en blå kantlinje och flikar som visar elementtypen och knapparna för att ta bort eller flytta elementet.

2. Panelen Egenskaper öppnas för att visa inställningarna för det valda avsnittet.

   

3. Utför inställningar i följande avsnitt efter behov:

   • Avsnittslayout: Välj en knapp här för att ändra kolumnlayouten till den som indikeras av grafiken på respektive knapp. Om du tar bort en kolumn flyttas allt innehåll till en av de återstående kolumnerna. Om du lägger till en kolumn kommer den nya kolumnen inledningsvis att vara tom.
   • Avsnitt för kantlinjeformat: Använd de här inställningarna om du vill ange formatmallen (ingen, fast, prickad, streckad eller dubbel), linjebredd, linjefärg och hörnradie för den kantlinje som går runt hela avsnittet (men inte mellan kolumnerna).
   • Avsnittsutfyllnad: Ange hur mycket utfyllnad (i pixlar) som du vill placera mellan kolumnerna och den färglagda kanten. Du kan ange separata värden för överkant, nederkant, vänster och höger.
   • Avsnittsmarginal: Ange hur mycket marginal (i pixlar) som du vill placera mellan den färglagda kanten och den yttre kanten för avsnittselementet. Du kan ange separata värden för överkant, nederkant, vänster och höger.

Lägga till, konfigurera och redigera designelement för att skapa innehåll för layouten

Avsnittselement skapar en struktur på vilken du kan dra andra typer av designelement i syfte att skapa ditt innehåll. Om du använder avsnittselement måste alla designelement placeras i en avsnittselementkolumn.

• Om du vill lägga till ett designelement drar du elementet som krävs från verktygslådan till lämplig avsnittselementkolumn. När du släpper de flesta typer av element öppnas panelen Egenskaper panelen, eller också (för textelement) öppnas formateringsverktygsfältet och du kan börja skriva text.
• Om du vill konfigurera ett befintligt elements egenskaper eller börja skriva in text i ett textelement, markerar du först det innehållande avsnittselementet för att aktivera det och väljer sedan målelementet för att börja redigera det. För icke-textelement öppnas panelen Egenskaper för det markerade elementet. För textelement öppnas det flytande textformateringsverktygsfältet.
• Om du vill ta bort ett designelement markerar du det och markerar sedan knappen längst upp till höger på elementet.
• Om du vill flytta ett designelement markerar du det och klickar sedan på knappen längst upp till höger i elementet och dra elementet till dess nya plats.

Arbeta med designerverktyget

När du skapar ett marknadsföringsmeddelande, en marknadsföringssida eller ett marknadsföringsformulär arbetar du mestadels i designerverktyget eller HTML-redigeraren för att lägga till innehåll, konfigurera designelement, läsa in bilder, tillämpa format och annat.

Designerverktyget innehåller ett verktygsfält och ett innehållsområde. Verktygsfältet innehåller några grundläggande kommandon och tre flikar för navigering (Design, HTML och Förhandsgranska) som styr vad du kan visa och göra i innehållsområdet.

Använda det grafiska designerverktyget

Välj Designer i verktygsfältet för att öppna de grafiska designerverktyget. Här kan du montera och utforma innehållet utan att använda någon kod. I de flesta fall behöver du aldrig gå till vyn HTML, såvida du inte vill det.

Det grafiska designerverktyget innehåller en redigerbar förhandsgranskning (arbetsyta) där du kan markera, redigera eller ta bort innehåll, samt en uppsättning flikar för att lägga till designelement och arbeta med designen:

• Verktygslåda: Om du vill lägga till ett nytt designelement i designen drar du ett element härifrån till en lämplig plats i arbetsytan eller väljer ett element här (utan att dra) för att markera respektive position på arbetsytan där du kan placera elementet. Välj sedan den markerade positionen där du vill placera den. Varje designelement representerar en viss typ av innehåll, till exempel ett textelement, en bild eller ett indataformulär. Inställningarna och funktionerna för respektive designelement varierar beroende på typ.
• Egenskaper: De flesta designelement måste konfigureras för att fungera. En bild måste till exempel peka på en bildfil, ett formulär måste peka på en marknadsföringsformulärpost och en knapp behöver text och ett mål. När du lägger till ett nytt designelement markeras elementet automatiskt och fliken Egenskaper öppnas så att du kan konfigurera det. Om du vill konfigurera (eller konfigurera om) ett designelement som redan finns i designen, markerar du det först och öppnar sedan fliken Egenskaper.
• Format: Använd dessa inställningar om du vill tillämpa färg, avstånd och andra grafiska alternativ i designen.

Mer information: Designelement – referens

Arbeta direkt i HTML

Om du föredrar att arbeta direkt med HTML-kod öppnar du fliken HTML i designerverktyget. Detta kan du göra om du vill fixa till några egenskaper som du inte kommer åt via den grafiska redigeraren, eller så kan du klistra in HTML-kod som du har skapat i något annat program. Du kan också lägga till avancerade skript och format för att skapa nya funktioner. Om du till exempel utformar en marknadsföringssida kanske du vill skriva skript som implementerar följande funktioner:

• Ändra egenskaperna för ett fält (eller formulär) utifrån värdena i ett annat fält, till exempel:
  • Göra fältet Kundnr synligt bara om Befintlig kund är sant.
  • Göra fältet Kundnr obligatoriskt om Befintlig kund är sant.
  • Avmarkera adressfältet Region om fältet Land ändras.
  • Ändra listan med värden för Region baserat på det land du valt.
  • Ändra format för fälten så att de visas, blir obligatoriska och så vidare.
• Lägga till anpassade verifieringar av fältvärden (antingen när formuläret skickas eller fältvärdet ändras), till exempel kräva att Kundnr bara får ha sex siffror.
• Utföra åtgärder när formuläret läses in eller skickas, till exempel:
  • Dölja vissa fält som standard
  • Inaktivera knappen Skicka tills alla obligatoriska fält har fyllts i
  • Ange fältvärden utifrån de värden som skickades i den anropande URL:en

Var försiktig när du arbetar här eftersom den grafiska redigeraren förväntar en särskild typ av markering för att dra och släpp-element ska kunna implementeras. Utan den här markeringen kan du inte längre redigera designelementen och kan till och med förstöra dem. Mer information: Använda anpassade attribut för att aktivera designerfunktioner i e-postmeddelanden, sidor och formulär.

HTML-redigeraren innehåller några praktiska kodredigeringsfunktioner, t.ex. syntaxfärger och radnummer. Du kan också använda formatering för att lägga till radbrytningar och indrag för att göra koden lättare att läsa. Det gör du genom att högerklicka var som helst i editorn och välja Formatera dokument på snabbmenyn.

Förhandsgranska din design

Även om det finns en redigerbar förhandsgranskning i dra-och-släpp-redigeraren är denna bara ungefärlig. Presentationen inbegriper en del kompromisser vad gäller redigeringsfunktioner. Om du vill få en bättre bild av hur designen ser ut går du till fliken Förhandsgranska i designerverktyget.

Använd knapparna i den vänstra kolumnen på fliken Förhandsgranska om du vill visa hur designen ser ut med olika skärmstorlekar och orienteringar, som stationär dator, liggande läge på surfplatta eller stående läge på mobiltelefon. Förhandsgranskningen återspeglar också funktionerna för responsiv design som är inbyggda i många mallar. Förhandsgranskningen kör emellertid inte några anpassade skript som du kan ha lagt till (till exempel verifiering av formulärindata).

Se även

Hjälpmedel och kortkommandon
Designelement – referens
Marknadsföringsöversikt för e-post
Arbeta med mallar för e-post, sidor och formulär
Skapa och distribuera marknadsföringssidor
Hjälpmedel och kortkommandon
Publicera med publicerbara entiteter och spåra deras status