De digitale inhoud ontwerpen

Dynamics 365 Marketing biedt een geavanceerde ontwerper voor digitale inhoud voor het maken, opmaken en bekijken van de verschillende typen digitale inhoud die u kunt maken en beheren met het systeem, waaronder:

• Marketing-e-mails en sjablonen
  Meer informatie: E-mailmarketingoverzicht
• Marketingpagina's en sjablonen
  Meer informatie: Webpagina's maken en implementeren
• Marketingformulieren en sjablonen
  Meer informatie: Marketingformulieren maken, weergeven en beheren

De ontwerper is voorzien van een interface waarin u het ontwerp kunt maken en bewerken door middel van slepen en neerzetten. Daarnaast kunt u gebruikmaken van een optionele HTML-editor waarmee u direct met code kunt werken en kunt u een voorbeeldfunctie gebruiken om te bekijken hoe uw ontwerp eruitziet met verschillende formulierfactoren en bij verschillende afdrukstanden.

De ontwerper past zich automatisch aan uw huidige context (e-mail, landingspagina, enzovoort) aan om alleen die ontwerpelementen en instellingen te bieden die van toepassing zijn. De basisfunctionaliteit verandert niet. Daarnaast is er een modus voor vreemde inhoud, die wordt geactiveerd wanneer u HTML rechtstreeks vanuit een toepassing van derden in de editor voor HTML-code plakt. In dat geval detecteert de ontwerper het type inhoud dat u ontwerpt en worden contextspecifieke functies verborgen en wordt een meer algemene ontwerpinterface weergegeven.

In dit onderwerp wordt beschreven hoe u met de ontwerpfunctie in het algemeen in alle contexten kunt werken. Zie de koppelingen naar andere onderwerpen aan het begin van deze inleiding voor meer informatie over hoe de ontwerper in de verschillende specifieke contexten past en voor meer contextspecifieke informatie.

Begin door een sjabloon te kiezen.

De meeste entiteiten waarvoor de inhoudsontwerper beschikbaar is, ondersteunen ook sjablonen. Daarom wordt u gevraagd om een sjabloon te selecteren wanneer u begint met het maken van een marketing-e-mail, -pagina of -formulier.

De sjabloonkiezer biedt tal van opties voor het doorzoeken, sorteren en filteren van de sjablonen. Gebruik deze opties om sjablonen te vinden die voldoen aan uw vereisten en selecteer vervolgens een sjabloon om een voorbeeld en meer informatie weer te geven in het gebied Voorbeeld. Als u de juiste sjabloon hebt gevonden, selecteert u Selecteren om deze toe te passen op uw nieuwe ontwerp.

Met de sjabloon die u kiest, bepaalt u het begin van uw ontwerp op de volgende punten:

• Kolomindeling en oorspronkelijke inhoud: hiermee stelt u de basisindeling in (zoals één of twee kolommen) en neemt u de oorspronkelijke inhoud (zoals afbeeldingen, vereiste koppelingen, standaardtekst en meer) op.
• Pagina- of formuliertype: als u een marketingpagina of -formulier maakt, wordt hier aangegeven of de pagina van het type Abonneecentrum, Doorsturen naar een vriend of Landingspagina is en worden de basismogelijkheden van de pagina of het formulier bepaald.
• Voorbeeldontwerp en -inhoud: sommige sjablonen bevatten al basisontwerpelementen, zoals logo's, typografie, kleurenpalet, voorbeeldinhoud en meer. Andere sjablonen bieden een lege pagina met alleen het paginatype en de kolomindeling. U kunt het voorbeeldontwerp en de voorbeeldinhoud naar wens aanpassen terwijl u de pagina bewerkt en ontwerpt.

Als u een sjabloon hebt gekozen, wordt uw geselecteerde sjablooninhoud weergegeven en kunt u deze gaan bewerken. Omdat uw nieuwe e-mail, pagina of formulier wordt gemaakt als een eenvoudige kopie van de sjabloon, hebben uw lokale wijzigingen geen invloed op de sjabloon en hebben toekomstige wijzigingen in een sjabloon geen enkele invloed op wat u hebt gemaakt op basis van die sjabloon.

Uw basisindeling instellen

Gebruik sectie-elementen om de basisindeling van uw e-mails, marketingpagina's en marketingformulieren vast te stellen. Elk sectie-element maakt een rij kolommen waarin u verschillende andere ontwerpelementen kunt slepen, zoals tekstvakken, afbeeldingen, knoppen, scheidingslijnen en meer. Er zijn vijf verschillende sectie-elementen, die elk een rij maken met een van de vijf verschillende indelingsopties (één kolom, twee kolommen (1:1), twee kolommen (1:2), twee kolommen (2:1) of drie kolommen). U kunt meerdere sectie-elementen zo nodig stapelen om complexe ontwerpen met verschillende kolomindelingen in elke rij te maken.

Sectie-elementen toevoegen aan de indeling van uw ontwerp

Wanneer u een e-mailbericht, pagina of formulier ontwerpt dat begint met de lege sjabloon (of een aangepaste sjabloon die is gebaseerd op de lege sjabloon), moeten alle ontwerpelementen (behalve sectie-elementen) in een sectie-element worden geplaatst. Sectie-elementen zijn beschikbaar in deelvenster Werkset, onder de kop Indeling.

De lege sjablonen bieden standaard een sectie met één kolom, maar u kunt zo nodig de kolomindeling ervan bewerken en/of sectie-elementen toevoegen.

Als u een sectie-element wilt toevoegen opent u het deelvenster Werkset, kiest u het sectie-element dat de kolomindeling biedt waarmee u wilt beginnen en sleept u het naar de positie boven of onder een bestaand sectie-element in uw ontwerp.

Een sectie-element bewerken en configureren

Wanneer u een nieuw sectie-element toevoegt, kiest u een van de vijf eerste kolomindelingen. Maar zodra uw element is geplaatst, kunt u de kolomindeling en/of ontwerpopties wijzigen.

Een sectie-element bewerken en configureren:

1. Selecteer het sectie-element op het canvas. Het toont nu een blauwe rand en tabs met het elementtype en knoppen voor het verwijderen of verplaatsen van het element.

2. Het deelvenster Eigenschappen wordt geopend om de instellingen voor de geselecteerde sectie weer te geven.

   

3. Kies in de volgende secties de benodigde instellingen:

   • Indeling van sectie: selecteer hier een knop om de kolomindeling te wijzigen in de indeling die wordt aangegeven door de afbeelding op elke knop. Als u een kolom verwijdert, wordt alle inhoud ervan verplaatst naar een van de resterende kolommen. Als u een kolom toevoegt, is de nieuwe kolom in eerste instantie leeg.
   • Randstijlen van sectie: gebruik deze instellingen om de stijl (geen, effen, gestippeld, onderbroken of dubbel), lijndikte, lijnkleur en randradius in te stellen voor de rand die doorloopt rond de gehele sectie (maar niet tussen kolommen).
   • Opvulling van sectie: geef op hoeveel opvulling (in pixels) u wilt plaatsen tussen de kolommen en de gekleurde rand. U kunt afzonderlijke waarden invoeren voor boven, onder, links en rechts.
   • Marge van sectie: geef op hoeveel marge (in pixels) u wilt plaatsen tussen de gekleurde rand en de buitenrand van het sectie-element. U kunt afzonderlijke waarden invoeren voor boven, onder, links en rechts.

Ontwerpelementen toevoegen, configureren en bewerken om inhoud voor uw indeling te maken

Sectie-elementen maken een structuur waarop u andere typen ontwerpelementen kunt slepen om uw inhoud te maken. Als u sectie-elementen gebruikt, moeten alle ontwerpelementen in een sectie-elementkolom worden geplaatst.

• Als u een ontwerpelement wilt toevoegen, sleept u het vereiste element uit de werkset naar de juiste sectie-elementkolom. Wanneer u de meeste typen elementen neerzet, wordt het deelvenster Eigenschappen of, voor tekstelementen, de opmaakwerkbalk geopend en kunt u tekst invoeren.
• Als u de eigenschappen van een bestaand element wilt configureren of wilt beginnen met het invoeren van tekst in een tekstelement, selecteert u eerst het omvattende sectie-element om het te activeren en selecteert u vervolgens het doelelement om het te bewerken. Voor niet-tekstelementen wordt het deelvenster Eigenschappen voor het geselecteerde element geopend. Voor tekstelementen wordt de werkbalk zwevende tekstopmaak geopend.
• Als u een ontwerpelement wilt verwijderen, selecteert u het en selecteert u vervolgens de in de rechterbovenhoek van het element.
• Als u een ontwerpelement wilt verplaatsen, selecteert u het en klikt u vervolgens op de in de rechterbovenhoek van het element en sleept u het naar de nieuwe locatie.

Werken met de ontwerper

Bij het maken van een marketing-e-mail, -pagina of -formulier gebruikt u de ontwerper of HTML-editor meestal om inhoud toe te voegen, ontwerpelementen te configureren, afbeeldingen te laden, stijlen toe te passen en meer.

De ontwerper omvat een werkbalk en een inhoudsgebied. De werkbalk bevat enkele standaardopdrachten en drie navigatietabbladen (Ontwerpen, HTML en Voorbeeld) waarmee u bepaalt wat u kunt zien en doen in het inhoudsgebied.

De grafische ontwerper gebruiken

Kies Ontwerper op de werkbalk van de ontwerper om de grafische ontwerper te openen. Hierin kunt u uw inhoud samenstellen en ontwerpen zonder dat u code hoeft te gebruiken. In de meeste gevallen hoeft u de weergave HTML niet te gebruiken, tenzij u dit zelf wilt.

De grafische ontwerper biedt een bewerkbaar voorbeeld (canvas), waarin u inhoud kunt selecteren, bewerken of verwijderen, en een verzameling tabbladen waarmee u ontwerpelementen kunt toevoegen en het ontwerp kunt bewerken:

• Werkset: als u een nieuw ontwerpelement aan uw ontwerp wilt toevoegen, sleept u een element van hieruit naar een geschikte plaats op het canvas. Of selecteer hier een element (zonder te slepen) om elke positie op het canvas te markeren waar u dat element zou kunnen plaatsen, en selecteer vervolgens de gemarkeerde positie waar u het wilt plaatsen. Elk ontwerpelement vertegenwoordigt een specifiek inhoudstype, bijvoorbeeld een tekstelement, een afbeelding of een invoerformulier. De instellingen en functies van elk ontwerpelement verschillen per type.
• Eigenschappen: de meeste ontwerpelementen moeten worden geconfigureerd om te werken. Een afbeelding moet bijvoorbeeld naar een afbeeldingsbestand verwijzen, een formulier moet naar een marketingformulierrecord verwijzen en een knop heeft tekst en een bestemming nodig. Als u een nieuw ontwerpelement toevoegt, wordt dat element automatisch geselecteerd en wordt het tabblad Eigenschappen geopend waarop u de instellingen voor dat blok kunt opgeven. Als u een ontwerpelement wilt configureren dat al in uw ontwerp bestaat, selecteert u dit blok en opent u het tabblad Eigenschappen.
• Stijlen: gebruik deze instellingen om kleur, afstand en andere grafische opties voor het algehele ontwerp toe te passen.

Meer informatie: Verwijzing naar ontwerpelementen

Rechtstreeks in HTML werken

Als u liever rechtstreeks met HTML-code werkt, opent u het tabblad HTML van de ontwerper. U kunt dit doen om een paar eigenschappen aan te passen die niet beschikbaar zijn met de grafische editor. U kunt ook HTML-code plakken die u met een ander programma hebt gemaakt. U kunt ook geavanceerde scripts en opmaak toevoegen om nieuwe functionaliteit te introduceren. Als u een marketingpagina ontwerpt, kunt u bijvoorbeeld scripts schrijven om de volgende functies te implementeren:

• Wijzig de eigenschappen van het ene veld (of formulier) op basis van de waarden van het andere veld, bijvoorbeeld:
  • Maak het veld Klantnr. alleen zichtbaar als Bestaande klant waar is.
  • Maak het veld Klantnr. vereist als Bestaande klant waar is.
  • Wis het adresveld Provincie als het veld Land wordt gewijzigd.
  • Wijzig de lijst met waarden voor Provincie op basis van het gekozen land.
  • Wijzig de stijlen van velden om deze zichtbaar, vereist, enzovoort te maken.
• Voeg validaties van aangepaste veldwaarden toe (wanneer het formulier wordt ingediend of de veldwaarde wordt gewijzigd), bijvoorbeeld om te vereisen dat de waarde bij Klantnr. uit slechts zes cijfers bestaat.
• Voer acties uit bij het laden of indienen van het formulier, zoals:
  • Bepaalde velden standaard verbergen
  • De knop Verzenden uitschakelen totdat alle verplichte velden zijn ingevuld
  • Veldwaarden instellen op basis van doorgegeven waarden in de aanroepende URL

Ga hierbij echter zorgvuldig te werk, aangezien de grafische editor bepaalde typen opmaak verwacht om de elementen voor slepen en neerzetten te implementeren. Zonder deze opmaak kunt u uw ontwerpelementen niet meer bewerken en kunnen ze zelfs beschadigd raken. Meer informatie: Aangepaste kenmerken gebruiken om ontwerpfuncties in te schakelen in e-mails, op pagina's en in formulieren

De HTML-editor biedt enkele gemakkelijke functies voor codebewerking, zoals syntaxiskleuring en regelnummers. U kunt ook opmaak toepassen om regeleinden en inspringingen toe te voegen om de code leesbaarder te maken. Dit doet u door met de rechtermuisknop ergens in de toepassing te klikken en Document opmaken te selecteren in het contextmenu.

Een voorbeeld van uw ontwerp bekijken

Hoewel deze editor met functionaliteit voor slepen en neerzetten een bewerkbaar voorbeeld biedt, is dit voorbeeld nog altijd maar een benadering en op het gebied van presentatie is een aantal offers gebracht om ook ruimte te kunnen bieden aan de bewerkingsfuncties. Ga naar het tabblad Voorbeeld om een beter idee te krijgen van hoe uw ontwerp eruitziet.

Gebruik de knoppen in de linkerkolom van het tabblad Voorbeeld om te zien hoe uw ontwerp eruitziet bij verschillende schermgrootten en afdrukstanden, zoals desktop, tablet liggend en mobiel staand. In het voorbeeld zijn ook de responsieve ontwerpfuncties te zien die in veel sjablonen zijn ingebouwd. In het voorbeeld worden echter geen aangepaste scripts uitgevoerd die u mogelijk hebt toegevoegd (bijvoorbeeld om formulierinvoer te valideren).

Zie ook

Toegankelijkheid en sneltoetsen
Verwijzing naar ontwerpelementen
E-mailmarketingoverzicht
Werken met e-mail-, pagina- en formuliersjablonen
Marketingpagina's maken en implementeren
Toegankelijkheid en sneltoetsen
Publiceerbare entiteiten in gebruik nemen en hun status bijhouden