Aangepaste kenmerken gebruiken om ontwerpfuncties in te schakelen in e-mails, op pagina's en in formulieren
De inhoudontwerpers bieden zowel een grafische editor als een editor voor HTML-code. De HTML die zij genereren is compatibel met elke HTML-weergavefunctie, maar zij ondersteunen tevens enkele aangepaste kenmerken die ondersteuning bieden voor het slepen en neerzetten van ontwerpelementen en algemene stijlinstellingen die door de grafische editor worden geleverd. De standaardberichtsjablonen en -paginasjablonen die worden geleverd met Dynamics 365 Customer Insights - Journeys maken gebruik van deze aangepaste kenmerken om het uitvoeren van specifieke aanpassingen te vergemakkelijken. U kunt deze aangepaste kenmerken ook gebruiken bij het ontwerpen van uw eigen sjablonen.
Tip
Microsoft biedt geen ondersteuning voor aangepaste HTML in e-mails.
Overzicht van codes en kenmerken
De volgende tabel bevat een beknopt overzicht van de aangepaste kenmerken en metacodes die in dit onderwerp worden beschreven.
| Aangepast kenmerk | Beschrijving |
|---|---|
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> |
Wanneer deze code aanwezig is in de <head> van uw document, biedt het tabblad Ontwerper functies voor slepen en neerzetten. Als deze code niet aanwezig is, levert het tabblad Ontwerper de vereenvoudigde editor voor volledige pagina. Meer informatie: De werkset weergeven en bewerken via slepen en neerzetten inschakelen |
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> |
Wanneer deze code aanwezig is in de <head> van uw document, worden de lettertypen die in de <lijst met lettertypen> (door puntkomma's gescheiden) worden weergegeven, toegevoegd aan het lettertypemenu in de opmaakwerkbalk voor tekstelementen. Meer informatie: Nieuwe lettertypen toevoegen aan de werkbalk voor tekstelementen |
<div data-container="true"> … </div> |
Hiermee wordt het begin en einde aangegeven van een container waarin gebruikers ontwerpelementen kunnen slepen en neerzetten. Meer informatie: Een container maken waarin gebruikers ontwerpelementen toevoegen |
<div data-editorblocktype="<element-type>"> … </div> |
Hiermee wordt het begin en einde van een ontwerpelement aangegeven. De waarde van het kenmerk bepaalt welk type element het is (tekst, afbeelding, knop enzovoort). Sommige ontwerpelementen ondersteunen hier aanvullende kenmerken. Meer informatie Ontwerpelementen identificeren en Elementen vergrendelen in de ontwerperweergave |
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> |
Deze code definieert een stijlinstelling voor het hele document die gebruikers kunnen bewerken via Ontwerper>tabblad Stijlen. Meer informatie: Instellingen toevoegen aan het tabblad Stijlen |
/* @<tag-name> */ … /* @<tag-name> */ |
Gebruik CSS-opmerkingen als deze rondom een CSS-waarde waarop een stijlinstelling moet worden toegepast, waarbij <tag-name> de waarde is van het kenmerk naam voor de metacode die de instelling heeft bepaald. Meer informatie: CSS-opmerkingen toevoegen om stijlinstellingen te implementeren in de koptekst |
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" |
Plaats dit kenmerk in een willekeurige HTML-code om een kenmerk op te nemen met een waarde die wordt bepaald door een stijlinstelling, waarbij <attr> de naam is van het te maken kenmerk en <tag-name> de waarde van het kenmerk name voor de metacode die de instelling heeft bepaald. Meer informatie: Kenmerken voor eigenschapsverwijzing toevoegen voor het implementeren van stijlinstellingen in de hoofdtekst |
Het restant van dit onderwerp biedt meer informatie over het gebruik van elk van de functies die worden beschreven in de tabel.
De werkset weergeven en bewerken via slepen en neerzetten inschakelen
U kunt HTML die in een willekeurig extern hulpprogramma is ontwikkeld rechtstreeks in het tabblad HTML van de ontwerpfunctie plakken om snel te kunnen beginnen met het bouwen van een ontwerp. Wanneer u dit doet, wordt het tabblad Ontwerper echter weergegeven als een enkele RTF-editor die een werkbalk voor tekstopmaak biedt en alle afbeeldingen, koppelingen en stijlen weergeeft die zijn opgenomen in uw HTML. De tabbladen Werkset, Eigenschappen of Stijlen zijn echter niet beschikbaar, terwijl ook functionaliteit voor slepen en neerzetten ontbreekt (deze vereenvoudigde weergave van Ontwerper ook wel de editor voor volledige pagina genoemd). U kunt echter functionaliteit voor slepen en neerzetten inschakelen voor elk geplakt ontwerp door de volgende metacode toe te voegen aan de sectie <head> van het document:
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
In de onderstaande afbeelding wordt hetzelfde ontwerp weergegeven in de modus van de editor voor volledige pagina (links) en in de modus voor slepen en neerzetten (rechts). Het enige verschil is dat het ontwerp aan de rechterkant de metacode bevat, dus is slepen en neerzetten ingeschakeld, terwijl ook het zijpaneel wordt weergegeven.
Opmerking
Bij gebruik van de editor voor volledige pagina kunt u nog steeds tekst selecteren, bewerken en van een stijl voorzien via de werkbalk voor tekstopmaak (weergegeven) en kunt u tevens dubbelklikken op afbeeldingen, koppelingen en andere elementen om hun eigenschappen in te stellen via een pop-upvenster. De werkbalk bevat ook de knop voor bewerkhulp
waarmee dynamische inhoud, zoals veldwaarden die zijn opgehaald vanuit de contactpersoonrecord van elke geadresseerde, kan worden toegevoegd.
Een container maken waarin gebruikers ontwerpelementen toevoegen
Op het tabblad Ontwerper kunnen gebruikers uitsluitend inhoud bewerken binnen een ontwerpelement en kunnen zij alleen nieuwe ontwerpelementen slepen naar de delen van het document die zijn ingesteld als gegevenscontainers. Daarom kunt u sjablonen maken waarin het bewerken van bepaalde gebieden (buiten containers) is geblokkeerd op het tabblad Ontwerp, terwijl andere gebieden (binnen ontgrendelde containers) wel kunnen worden bewerkt en gesleepte inhoud kunnen bevatten.
Gebruik codes <div> met het kenmerk data-container="true" om gegevenscontainers te maken, zoals:
<table aria-role="presentation">
<tbody><tr>
<td>
LOCKED
</td>
<td>
<div data-container="true">
<!-- DRAG HERE -->
</div>
</td>
</tr>
</tbody></table>
Alle tekst of HTML-codes die zijn genest binnen een stel div-codes van een gegevenscontainer en geen deel uitmaken van een ontwerpelement, maken een niet-sleepbaar, niet-bewerkbaar gebied tussen twee sleepbare gebieden. Bijvoorbeeld:
<div data-container="true">
<!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>
Opmerking
Wanneer de editor voor volledige pagina is ingeschakeld, zijn alle functies voor slepen en neerzetten uitgeschakeld en kunt u alle inhoud op het tabblad Ontwerper bewerken, met inbegrip van inhoud buiten div-codes voor een data-container (die geen effect hebben in de editor voor volledige pagina).
Een container vergrendelen in de ontwerperweergave
U kunt een container vergrendelen om de hele inhoud alleen-lezen te maken op het tabblad Ontwerper. Als een vergrendelde container ontwerpelementen bevat, dan blijven de hele inhoud en alle instellingen voor deze elementen vergrendeld en wordt het tabblad Eigenschappen nooit voor hen weergegeven, zelfs niet als u ze selecteert.
U kunt de functie voor het vergrendelen van containers gebruiken om een container te vergrendelen nadat u hiervoor ontwerponderdelen hebt toegevoegd en geconfigureerd.
U kunt een container vergrendelen door als volgt het kenmerk data-locked="hard" aan de containercode toe te voegen:
<div data-container="true" data-locked="hard">
<!-- All elements and content here are locked, with no properties shown -->
</div>
Opmerking
U kunt ook inhoud vergrendelen op het niveau van het ontwerpelement. Als inhoud is vergrendeld op het containerniveau, heeft die instelling voorrang boven de vergrendelde/ontgrendelde status van alle ontwerpelementen binnen in die container. Meer informatie: Elementen vergrendelen in de ontwerpweergave
Als u het vergrendelen van containers verder wilt afdwingen, kunt u de toegang tot het tabblad HTML beperken, waardoor wordt voorkomen dat geselecteerde gebruikers toegang kunnen krijgen tot de code (waar zij deze instelling anders zouden kunnen omzeilen). Meer informatie: Toegang tot ontwerpfuncties beheren
Ontwerpelementen identificeren
Telkens wanneer u een ontwerpelement toevoegt via het tabblad Ontwerper, voegt de editor een stel <div> codes in om het begin en einde van het element te markeren en maakt deze alle HTML die nodig is voor het weergeven van het blok zoals gespecificeerd in de instellingen voor het element op het tabblad Eigenschappen.
Ontwerpelementen worden gemarkeerd met codes <div> die een kenmerk van het formulier data-editorblocktype="<element-type>" bevatten, waarbij de waarde van dit kenmerk aangeeft wat voor type element het betreft. Zo wordt bijvoorbeeld met de volgende code <div> een tekstelement gemaakt:
<div data-editorblocktype="Text">
...
<!-- Don't edit the element content here -->
...
</div>
De volgende tabel bevat de beschikbare waarden voor het kenmerk data-editorblocktype.
| Naam van ontwerpelement | Elementtype | data-editorblocktype-kenmerkwaarde |
|---|---|---|
| Tekstelement | Algemeen ontwerpelement | Text |
| Afbeeldingselement | Algemeen ontwerpelement | Image |
| Scheidingselement | Algemeen ontwerpelement | Scheidingslijn |
| Knopelement | Algemeen ontwerpelement | Knop |
| Inhoudsblokelement | Algemeen ontwerpelement | Inhoud (Dit type ontwerpelement bevat tevens een kenmerk data-block-datatype="<block-type>", dat bepaalt om welk type inhoudsblok het gaat, waarbij <bloktype> een waarde text of image heeft.) |
| Marketingpagina-element | Marketingpagina | |
| Gebeurteniselement | Gebeurtenis | |
| Onderzoekelement | Onderzoek | |
| Formulierelement | Formulier | FormBlock |
| Veldelement | Formulierinhoud | Field-<field-name>, bijvoorbeeld: Field-email |
| Element van een abonnementslijst | Formulierinhoud | SubscriptionListBlock |
| Element voor doorsturen naar een vriend | Formulierinhoud | ForwardToFriendBlock |
| Element voor geen e-mail verzenden en element voor onthouden van mijn gegevens | Formulierinhoud | Veld-selectievakje (Deze elementen maken elk selectievakjes en worden van elkaar onderscheiden op basis van hun interne instellingen.) |
| Element voor knop Verzenden | Formulierinhoud | SubmitButtonBlock |
| Element voor knop Opnieuw instellen | Formulierinhoud | ResetButtonBlock |
| Captcha-element | Formulierinhoud | CaptchaBlock |
Voor meer informatie over elk van deze ontwerpelementen, raadpleegt u Verwijzing naar ontwerpelementen.
Belangrijk
Als u op het tabblad HTML werkt, mag u de inhoud tussen de codes <div> van uw ontwerpelementen niet bewerken omdat de resultaten hiervan onvoorspelbaar kunnen zijn en uw bewerkingen waarschijnlijk toch worden overschreven door de ontwerpfunctie. Gebruik in plaats daarvan het tabblad Ontwerper om de inhoud en eigenschappen van uw ontwerpelementen te beheren.
Elementen vergrendelen in ontwerperweergave
U kunt de inhoud en de eigenschappen van elk ontwerpelement vergrendelen door het volgende kenmerk toe te voegen aan de begincode <div>:
data-protected="true"
Bijvoorbeeld:
<div data-editorblocktype="Divider" data-protected="true">
…
<!-- Don't edit the element content here -->
…
</div>
Wanneer een ontwerpelement als beveiligd is gemarkeerd, kunnen gebruikers die op het tabblad Ontwerper werken voor een pagina of een e-mail niet de eigenschappen of inhoud van het element bewerken. Dit kenmerk is altijd opgenomen voor het element content-block, maar u kunt het toevoegen aan elk gewenst type ontwerpelement om het te beveiligen. Elk ontwerpelement dat dit kenmerk bevat wordt als gedeeld weergegeven op het tabblad HTML om aan te geven dat het beveiligd is, maar u kunt het daar desgewenst wel nog bewerken. Stel dit kenmerk in op 'onwaar' (of verwijder het simpelweg) om de beveiliging van een ontwerpelement te verwijderen.
Opmerking
U kunt ook inhoud vergrendelen op het containerniveau, waarmee de vergrendelde/ontgrendelde status van alle ontwerpelementen binnen in die container worden genegeerd. Meer informatie: Een container vergrendelen in de ontwerperweergave
Als u het vergrendelen van inhoud verder wilt afdwingen, kunt u de toegang tot het tabblad HTML beperken, waardoor wordt voorkomen dat geselecteerde gebruikers toegang kunnen krijgen tot de code (waar zij deze instelling anders zouden kunnen omzeilen). Meer informatie: Toegang tot ontwerpfuncties beheren
Extern gemaakte HTML importeren in de ontwerper
U kunt elk hulpprogramma dat u wilt gebruiken om de oorspronkelijke HTML-indeling en -inhoud van een marketing-e-mailbericht, -pagina of -formulier te maken. Wanneer uw HTML gereed is, plakt u deze in de desbetreffende ontwerper en voegt u alle Dynamics 365 Customer Insights - Journeys-functies toe die u nodig hebt, zoals beschreven in de volgende paragrafen.
Importeer uw HTML-code
Als u HTML extern wilt maken in de ontwerper, gaat u als volgt te werk:
- Maak een nieuwe marketing-e-mail, -pagina of -formulier in Dynamics 365 Customer Insights - Journeys.
- Ga naar het tabblad Design>HTML van de ontwerper.
- Wis alle inhoud op het tabblad HTML en plak de HTML-code die u extern hebt gemaakt.
- Ga naar het tabblad Ontwerp>Ontwerper van de ontwerper en inspecteer uw ontwerp.
- Als u werkt met een marketing-e-mail, moet u Bewerkhulp gebruiken om alle vereiste inhoud en links te plaatsen (inclusief een link naar een abonnement en uw fysieke afzenderadres).
Tip
Omdat u externe HTML hebt geplakt bevat uw ontwerp waarschijnlijk geen code die specifiek is voor Dynamics 365 Customer Insights - Journeys , zodat de Ontwerper de volledige pagina-editor toont, die functies voor elementaire tekstopmaak biedt, afbeeldingsopmaak en (voor e-mails) Bewerkhulp voor het toevoegen van dynamische inhoud. Zie de werkset weergeven en slepen en neerzetten inschakelen voor meer informatie over het werken met de volledige pagina-editor. Als de volledige pagina-bewerker alle functionaliteit biedt die u nodig hebt, gebruik die dan om uw ontwerp te fine-tunen en ga dan live zoals gewoonlijk. Als u liever de editor voor slepen en neerzetten wilt gebruiken om uw ontwerp te verfijnen, raadpleegt u de volgende paragraaf voor informatie over het inschakelen van de tekst.
De editor voor slepen en neerzetten inschakelen na importeren
Als u de editor voor slepen en neerzetten met volledige functionaliteit wilt inschakelen en/of geavanceerde ontwerpelementen wilt toevoegen terwijl u in de weergave Ontwerp werkt, kunt u dit eenvoudig doen door de geïmporteerde HTML-code als volgt verder te bewerken:
Ga terug naar het tabblad Design>HTML van de ontwerper.
Schakel de editor voor slepen en neerzetten in door de vereiste metatag toe te voegen aan de sectie
van uw document, zoals beschreven in De werkset weergeven en bewerken via slepen en neerzetten inschakelen. Doe het volgende als nodig is tijdens het werken op het tabblad Ontwerp>HTML:
- Voeg in elk gedeelte van het ontwerp waar u wilt een of meer ontwerpelementen toe, voeg code toe om een gegevenscontainer te maken zoals wordt beschreven in een container maken waarin gebruikers ontwerponderdelen kunnen toevoegen.
- Als u ontwerpelementen liever rechtstreeks in uw code plaatst zonder slepen en neerzetten te gebruiken, kunt u de vereiste code rechtstreeks in het tabblad Ontwerp>HTML invoeren. Elementen die u op deze manier toevoegt zullen niet slepen en neerzetten ondersteunen maar ze zullen instellingen ondersteunen in het deelvenster Eigenschappen van het tabblad Ontwerp>Ontwerper. U kunt tekst-, afbeeldings-, scheidings- en knopelementen toevoegen met behulp van deze techniek (maak containers en gebruik slepen en neerzetten voor andere typen ontwerpelementen). Zie de tabel na deze procedure voor de HTML-structuren die nodig zijn om elk van deze elementen te maken. Kopieer/plak deze code direct uit de tabel als dat nodig is.
U gaat nu naar Ontwerp>Ontwerper en sleept ontwerpelementen naar elk van de containers die u hebt ingesteld. Vervolgens kunt u het deelvenster Eigenschappen gebruiken om elk ontwerpelement dat u hebt gesleept te configureren of rechtstreeks te plakken in uw code.
| Type ontwerpelement | Plak deze code | Notes |
|---|---|---|
| Text | <div data-editorblocktype="Text"><p> Enter your text here</p></div> |
U kunt HTML-inhoud plaatsen tussen de <p>-tags of naar de Ontwerper gaan om de RTF-editor te gebruiken om dat te doen. |
| Image | <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> |
De gemakkelijkste manier om uw beeldbron en/of beeldverbinding te veranderen is door naar de Ontwerper te gaan en om het deelvenster Eigenschappen te gebruiken. Maar u kunt de volgende kenmerken ook rechtstreeks in de HTML bewerken:
|
| Divider | <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span> </span></p></td></tr></tbody></table></div></div> |
Bewerk geen van deze code rechtstreeks in de HTML-editor. Ga in plaats daarvan naar de Ontwerper en het deelvenster Eigenschappen. |
| Button | <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" |
Bewerk geen van deze code rechtstreeks in de HTML-editor. Ga in plaats daarvan naar de Ontwerper en het deelvenster Eigenschappen. |
Voor meer informatie over hoe deze ontwerpelementen in de code worden weergegeven, raadpleegt u Ontwerpelementen identificeren.
Nieuwe lettertypen toevoegen aan de werkbalk voor tekstelementen
Tekstelementen bieden een pop-up opmaakwerkbalk in de ontwerpfunctie, die een menu bevat voor het toepassen van een lettertype op geselecteerde tekst.
Als u nieuwe lettertypen aan deze lettertypeselector wilt toevoegen, voegt u een code <meta> met het volgende formulier toe aan de <head> van het document:
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">
Waarbij <font-list> een door puntkomma's gescheiden lijst met lettertypenamen is.
Instellingen toevoegen aan het tabblad Stijlen
Eén handige functie van de standaard geleverde sjablonen is dat zij algemene stijlinstellingen bieden op het tabblad Stijlen, waarmee gebruikers snel de lettertypefamilie, het kleurenpalet en andere algemene instellingen die zijn ingeschakeld voor de sjabloon kunnen aanpassen. Elke sjabloon bevat alleen die stijlinstellingen die relevant zijn voor dat specifieke ontwerp, en u kunt op dezelfde manier sjablonen ontwerpen die precies de juiste stijlinstellingen voor u en uw gebruikers bevatten.
Als u een instelling wilt toevoegen aan het tabblad Stijlen, moet u het volgende doen:
- Een code
<meta>toevoegen aan de<head>van uw document om de instelling te maken. - Stijlen en/of HTML-codes instellen waarmee de instellingen worden toegepast die door de metacode worden gemaakt.
In de volgende subparagrafen wordt uitgelegd hoe u elk van deze taken kunt uitvoeren.
Een metacode toevoegen voor het maken van de instelling
De vereiste code <meta> heeft de volgende vorm:
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">
Waarbij geldt:
- <name> identificeert de metacode, waarnaar u tevens moet verwijzen in de stijlen en HTML-codes waar de instelling wordt toegepast.
- <initial-value> is een geschikte standaardwaarde voor de stijl.
- <data-type> identificeert het type waarde dat wordt verstrekt door gebruikers. Deze instelling is van invloed op het type besturingselement dat op het tabblad Stijlen wordt gepresenteerd. U moet een van de waarden gebruiken die in de volgende tabel worden genoemd.
- <label> geeft de tekst op die wordt weergegeven op het tabblad Stijlen voor de instelling.
| Waarde gegevenstype | Beschrijving |
|---|---|
| color | Hiermee wordt een kleur ingesteld met waarden met hash-code, zoals #000 of #1a32bf. Hiermee wordt een besturingselement Kleurenkiezer gemaakt op het tabblad Stijlen. |
| font | Hiermee wordt de naam van een lettertype ingesteld. U kunt ook lettertypestacks instellen door een lijst met door komma's gescheiden lettertypenamen te gebruiken in volgorde van voorkeur. Hiermee wordt een simpel invoerveld gemaakt op het tabblad Stijlen. |
| number | Hiermee wordt een numerieke waarde zonder eenheid ingesteld (gebruik tekst om het opgeven van eenheden zoals px of em samen met de waarde toe te staan). Hiermee wordt een invoerveld gemaakt met knoppen voor omhoog/omlaag die tevens kunnen worden gebruikt voor het verhogen/verlagen van de actuele waarde op het tabblad Stijlen. |
| picture | Hiermee wordt een afbeeldingbron ingesteld (als URL). Hiermee wordt een simpel invoerveld gemaakt op het tabblad Stijlen. |
| text | Hiermee wordt een waarde ingesteld die zowel tekst als getallen kan bevatten. Gebruik dit gegevenstype ook voor numerieke waarden die een eenheid kunnen bevatten (zoals px of em). Hiermee wordt een simpel invoerveld gemaakt op het tabblad Stijlen. |
Opmerking
Het label dat wordt weergegeven op het tabblad Stijlen kan tussen vierkante haakjes staan, zoals "[Mijn Stijl]". De vierkante haakjes geven aan dat voor de weergegeven tekst geen vertaling beschikbaar is. Als u een waarde kiest die wordt ondersteund door een van de standaard beschikbare sjablonen (Zoals "Kleur 1"), is een vertaling beschikbaar, zodat de vierkante haakjes niet worden weergegeven.
Opmerking
Een stijlinstelling die is gedefinieerd met een code <meta>, zoals hier beschreven, wordt alleen weergegeven op het tabblad Stijlen wanneer naar deze instelling ook in minstens één werkelijke stijl of HTML-code wordt verwezen, zoals beschreven in de volgende paragrafen.
CSS-opmerkingen toevoegen om stijlinstellingen te implementeren in de koptekst
Instellingen die zijn uitgevoerd op het tabblad Stijlen, kunnen worden toegepast op CSS-stijlen die zijn vastgelegd in de <head> van uw HTML-document door een CSS-waarde tussen twee CSS-opmerkingen te plaatsen die de waarde van het namekenmerk van de overeenstemmende metacode xrm/designer/setting bevatten. De CSS-opmerking heeft de volgende vorm:
/* @<tag-name> */ <value> /* @<tag-name> */
Waarbij geldt:
- <tag-name> is het naamkenmerk voor de metacode xrm/designer/setting waarmee de relevante instelling voor het tabblad Stijlen wordt bepaald.
- <value> is een waarde die wordt vervangen wanneer een gebruiker de relevante instelling op het tabblad Stijlen bewerkt.
Belangrijk
U kunt deze paren CSS-opmerkingen alleen gebruiken in stijlen en klassen die zijn gedefinieerd binnen <style>-tags in de sectie <head>. Er mag bovendien maar één reeks <style>-codes aanwezig zijn, waarbij alle CSS-stijlen daar zijn ingesteld.
Hier volgt een voorbeeld waar u een metacode xrm/designer/setting kunt bekijken waarmee een kleurkiezer wordt gemaakt met de naam 'Kleur 1' op het tabblad Stijlen. Een CSS-stijl past vervolgens deze instelling toe om de tekstkleur voor <h1>-elementen te bepalen.
<head>
<meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
<style>
h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
</style>
</head>
Kenmerken voor eigenschapsverwijzing toevoegen voor het implementeren van stijlinstellingen in de hoofdtekst
Instellingen die worden uitgevoerd op het tabblad Stijlen kunnen als kenmerkwaarden worden toegepast op iedere HTML-code in de <body> van uw document door een kenmerk van de volgende vorm toe te voegen aan elke relevante code:
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"
Waarbij geldt:
- <attr> is de naam van het te maken kenmerk.
- <tag-name> is de waarde van het
name-kenmerk voor de metacode waarmee de instelling wordt bepaald. - Meerdere kenmerken, indien nodig, moeten worden gescheiden via een puntkomma binnen een enkel kenmerk voor eigenschapsverwijzing.
Hier volgt een voorbeeld waarin metacodes xrm/designer/setting te zien zijn die twee instellingen maken voor het besturen van een heldenafbeelding (banner) in het document besturingselementen die de naam 'Heldenafbeelding' en 'Hoogte van heldenafbeelding' hebben op het tabblad Stijlen. De eigenschap property-reference wordt vervolgens gebruikt in een code <img> om die instellingen toe te passen.
<head>
<meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
<meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
<img property-reference="src:@hero-image;height:@hero-image-height;">
</body>
In dit voorbeeld zou de code <img> worden herleid tot iets dat lijkt op het volgende:
<img src="picture.jpg" height="100px">