Compartilhar via

Usar atributos personalizados para habilitar os recursos do designer em emails, páginas e formulários

  • Artigo

Os designers de conteúdo fornecem um editor gráfico e um editor de código HTML. O HTML gerado é compatível com qualquer renderizador HTML, mas também oferece suporte a alguns atributos personalizados que são compatíveis com os elementos de design de arrastar e soltar e as configurações gerais de estilo fornecidas pelo editor gráfico. Os modelos padrão de mensagem e os modelos de página fornecidos com o Dynamics 365 Customer Insights - Journeys usam esses atributos personalizados para tornar mais fácil para você personalizá-los de maneiras específicas. Também é possível utilizar esses atributos personalizados ao criar seus próprios modelos.

Dica

A Microsoft não dá suporte a HTML personalizado em emails.

Resumo de marcas e atributos

A tabela a seguir apresenta uma referência rápida aos atributos personalizados e às metamarcas descritas neste tópico.

Atributo personalizado Descrição
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Quando esta marca estiver presente no <head> de seu documento, a guia Designer fornecerá os recursos de arrastar e soltar. Se esta marca não estiver presente, a guia Designer fornecerá o editor de página completa simplificado. Mais informações: Mostrar a caixa de ferramentas e habilitar a edição arrastar-e-soltar
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Quando esta marca estiver presente no <head> do seu documento, as fontes listadas na <lista de fontes> (separadas por ponto-e-vírgula) serão adicionadas ao menu fonte da barra de ferramentas de formatação para elementos de texto. Mais informações: Adicionar novas fontes à barra de ferramentas de elemento de texto
<div data-container="true"> … </div> Marca o início e o fim de um contêiner em que os usuários podem arrastar e soltar elementos de design. Mais informações: Criar um contêiner em que os usuários possam adicionar elementos de design
<div data-editorblocktype="<element-type>"> … </div> Marca o início e o fim de um elemento de design. O valor do atributo identifica qual tipo de elemento ele é (texto, imagem, botão e assim por diante). Alguns elementos de design dão suporte a atributos adicionais aqui. Mais informações: Identificar elementos de design e Bloquear elementos no modo de exibição Designer
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Esta marca define uma configuração de estilo do documento que os usuários podem editar usando a guia Designer>Estilos. Mais informações: Adicionar configurações à guia Estilos
/* @<tag-name> */ … /* @<tag-name> */ Use comentários de CSS como estes para envolver um valor de CSS a ser controlado por uma configuração de estilo em que <tag-name> é o valor do atributo name da metamarca que estabeleceu a configuração. Mais informações: Adicionar comentários de CSS para implementar configurações de estilo no cabeçalho
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Coloque este atributo em qualquer marca HTML para colocar um atributo com um valor controlado por uma configuração de estilo, em que <attr> é o nome do atributo a ser criado e <tag-name> é o valor do atributo name da metamarca que estabeleceu a configuração. Mais informações: Adicionar atributos de referência a propriedades para implementar as configurações de estilo no corpo da mensagem

As seções restantes deste tópico fornecem mais informações sobre como usar cada um dos recursos resumidos na tabela.

Mostrar a caixa de ferramentas e habilitar edição arrastar-e-soltar

É possível colar o HTML desenvolvido em qualquer ferramenta de terceiros diretamente na guia HTML do designer para começar a criar um design com rapidez. No entanto, ao fazer isso, a guia Designer será exibida como um editor de rich-text que fornece uma barra de ferramentas de formatação de texto e mostra todas as imagens, links e estilos incluídos em seu HTML, mas não fornece as guias Caixa de ferramentas, Propriedades ou Estilos nem qualquer funcionalidade de arrastar e soltar (às vezes, esta exibição simplificada do Designer é chamada de editor de página completa). No entanto, você pode habilitar a funcionalidade de arrastar e soltar para qualquer design colado adicionando a metamarca a seguir à seção <head> de seu documento:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

A imagem a seguir mostra o mesmo design em modo de edição de página completa (esquerda) e modo de arrastar e soltar (direita). A única diferença é que o design à direita inclui a metamarca, portanto, a opção de arrastar e soltar está habilitada e o painel lateral é exibido.

Editor de página inteira x editor de arrastar e soltar.

Observação

Ao usar o editor de página completa, você ainda pode selecionar, editar e dar estilo ao texto usando a barra de ferramentas de formatação de texto (mostrada) e também pode clicar duas vezes em imagens, links e outros elementos para definir suas propriedades usando uma caixa de diálogo pop-up. A barra de ferramentas também inclui o botão Assistente de edição O botão de personalização. para adicionar conteúdo dinâmico, como valores de campo extraídos dos registros do contato de cada destinatário.

Criar um contêiner em que os usuários possam adicionar elementos de design

Na guia Designer, os usuários só podem editar o conteúdo de um elemento de design e só podem arrastar novos elementos de design para essas partes do documento que estão definidas como contêineres de dados. Portanto, você pode criar modelos onde algumas áreas (fora de contêineres) estão bloqueadas para edição na guia Design, enquanto outras áreas (dentro de contêineres desbloqueados) aceitarão edições e conteúdo arrastado.

Use marcas <div> que incluem o atributo data-container="true" para criar contêineres de dados, como:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

Os textos e as marcas HTML que estão aninhadas em um par de marcas div no contêiner de dados, e não fazem parte de um elemento de design, criarão uma área não arrastável e não editável entre duas áreas arrastáveis. Por exemplo: 

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

Nota

Quando o editor de página completa estiver habilitado, todos os recursos de arrastar e soltar serão desabilitados e você poderá editar todo o conteúdo na guia Designer, incluindo o conteúdo fora das marcas div data-container (que não têm efeito no editor de página completa.)

Bloquear um contêiner no modo de exibição Designer

Você pode bloquear um contêiner para tornar todo seu conteúdo somente leitura na guia Designer. Se um contêiner bloqueado contiver elementos de design, então todo o conteúdo e configurações para esses elementos permanecerão bloqueados, e a guia Propriedades nunca será mostrado para eles, mesmo se você selecioná-los.

Você pode usar o recurso de bloqueio de contêiner para bloquear um contêiner depois de concluir a adição e a configuração de componentes de design para ele.

Para bloquear um contêiner, adicione o atributo data-locked="hard" à marca do contêiner, desta forma:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

Nota

Você ainda pode bloquear o conteúdo no nível de elemento de design. Se o conteúdo estiver bloqueado no nível de contêiner, então essa configuração anulará o status bloqueado/desbloqueado de todos os elementos de design dentro do contêiner. Mais informações: Bloquear elementos no modo de exibição Designer

Para impor ainda mais o bloqueio de contêiner, você poderá limitar o acesso à guia HTML, o que impedirá que os usuários selecionados acessem o código (onde, de alguma forma, poderiam contornar essa configuração). Mais informações: Controlar o acesso a recursos do designer

Identificar elementos de design

Sempre que você adicionar um elemento de design usando a guia Designer, o editor inserirá um par de marcas <div> para marcar o início e o fim do elemento e criará o HTML necessário para exibir o elemento conforme especificado em suas configurações na guia Propriedades.

Os elementos de design são identificados com marcas <div> que incluem um atributo do formulário data-editorblocktype="<element-type>", em que o valor desse atributo identifica o tipo de elemento que ele é. Por exemplo, a seguinte marca <div> cria um elemento de texto:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

A tabela a seguir lista os valores disponíveis para o atributo data-editorblocktype.

Nome de elemento de design Tipo de elemento Valor do atributo data-editorblocktype
Elemento de texto Elemento de design comum Text
Elemento de imagem Elemento de design comum Image
Elemento divisor Elemento de design comum Divisor
Elemento de botão Elemento de design comum Botão
Elemento de bloco de conteúdo Elemento de design comum Conteúdo
(Esse tipo de elemento de design também inclui um atributo data-block-datatype="<block-type>", que identifica o tipo de bloco de conteúdo, onde <block-type> tem um valor text ou image).
Elemento de página de marketing Email Página de Marketing
Elemento de evento Email Evento
Elementos de pesquisa Email Pesquisa
Elemento de formulário Formulário FormBlock
Elemento de campo Conteúdo do formulário Field-<field-name>, por exemplo: Field-email
Elemento de lista de assinaturas Conteúdo do formulário SubscriptionListBlock
Elemento Encaminhar para um amigo Conteúdo do formulário ForwardToFriendBlock
Elemento Do-not- email e elemento Remember-me Conteúdo do formulário Field-checkbox
(Esses elementos criam caixas de seleção e são diferenciados por suas configurações internas).
Elemento de botão Enviar Conteúdo do formulário SubmitButtonBlock
Elemento de botão Redefinir Conteúdo do formulário ResetButtonBlock
Elemento de Captcha Conteúdo do formulário CaptchaBlock

Para obter mais informações sobre cada um desses elementos de design, consulte Referência a elementos de design.

Importante

Ao trabalhar na guia HTML, é necessário evitar a edição de qualquer conteúdo entre as marcas <div> dos elementos de design porque os resultados disso são imprevisíveis e é provável que as edições sejam substituídas pelo designer mesmo assim. Em vez disso, use a guia Designer para gerenciar o conteúdo e as propriedades de seu elemento de design.

Bloquear elementos no modo de exibição Designer

Você pode bloquear o conteúdo e as propriedades de qualquer elemento de design ao adicionar o atributo a seguir à marca de abertura <div>:

data-protected="true"

Por exemplo:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

Quando um elemento de design é marcado como protegido, os usuários que estejam trabalhando na guia Designer para uma página ou email não poderão editar as propriedades ou o conteúdo do elemento. Esse atributo é sempre incluído no elemento content-block, mas você pode adicioná-lo a qualquer tipo de elemento de design para protegê-lo. Qualquer elemento de design que inclua esse atributo é mostrado como sombreado na guia HTML para indicar que está protegido, mas você ainda poderá editá-lo ali se insistir. Defina esse atributo como "falso" (ou simplesmente remova-o) para remover a proteção de um elemento de design.

Nota

Você também pode bloquear o conteúdo no nível de contêiner, que anulará o status bloqueado/desbloqueado de todos os elementos de design dentro do contêiner. Mais informações: Bloquear um contêiner no modo de exibição Designer

Para impor ainda mais o bloco de conteúdo, você poderá limitar o acesso à guia HTML, o que impedirá que os usuários selecionados acessem o código (onde, de alguma forma, poderiam contornar essa configuração). Mais informações: Controlar o acesso a recursos do designer

Importar HTML criado externamente para o designer

Você pode usar qualquer ferramenta que quiser para criar o layout de HTML inicial e o conteúdo de um email de marketing, página ou formulário. Quando seu HTML estiver pronto, basta colá-lo no designer relevante e, em seguida, adicionar quaisquer recursos do Dynamics 365 Customer Insights - Journeys que precisar, conforme descrito nas subseções a seguir:

Importar seu código HTML

Para trazer o HTML criado externamente para o designer, comece fazendo o seguinte:

  1. Crie um novo email de marketing, página ou formulário no Dynamics 365 Customer Insights - Journeys.
  2. Vá para a guia Design>HTML do designer.
  3. Desmarque todos conteúdo da guia HTML e cole no HTML criado externamente.
  4. Vá para a guia Design>Designer do designer e inspecione seu design.
  5. Se estiver trabalhando com email de marketing, certifique-se de usar o assistente de edição para colocar todo conteúdo e links obrigatórios (incluindo um link do centro de assinatura e seu endereço do remetente físico).

Gorjeta

Como você colou apenas em HTML externo, provavelmente seu design não inclui um código que seja específico para o Dynamics 365 Customer Insights - Journeys, de forma que o Designer mostre o full-page editor, que fornece recursos para formatação de texto básico, formatação de imagem e assistente de edição (para emails) para adicionar conteúdo dinâmico. Para obter mais informações sobre como trabalhar com o editor de página completa, consulte Mostrar a caixa de ferramentas e habilitar a edição arrastar-e-soltar. Se o editor página completa fornece toda a funcionalidade que você precisa, então use-a para ajustar o design e ativá-lo normalmente. Se preferir usar drag-and-drop editor para ajustar seu design, consulte a próxima seção de informações para saber como ativá-lo.

Habilitar o editor de arrastar e soltar após a importação

Se quiser habilitar o editor de arrastar e soltar com todos os recurso e/ou adicionar elementos de design avançados ao trabalhar na exibição do Designer, você poderá fazer isso facilmente, editando seu código HTML importado, como segue:

  1. Volte para a guia Design>HTML do designer.

  2. Habilite o editor do tipo "arrastar e soltar" adicionando a marca meta necessária à seção do documento conforme descrito em Mostrar a caixa de ferramentas e habilitar a edição do tipo "arrastar e soltar".

  3. Faça o seguinte ao trabalhar na guia Design>HTML, conforme necessário:

    • Em cada parte de seu design onde você deseja habilitar para arrastar um ou mais elementos de design, adicione o código para criar um contêiner de dados, conforme descrito em Criar um contêiner em que os usuários possam adicionar elementos de design.
    • Se preferir posicionar elementos de design diretamente em seu código usando arrastar e soltar, você pode inserir o código obrigatório diretamente na guia Design>HTML. Os elementos que você adicionar dessa forma não suportarão arrastar e soltar, mas fornecerão configurações no painel Propriedades da guia Design>Designer. Somente é possível colocar texto, imagem, divisor e elementos do botão usando esta técnica (criar contêineres e usar arrastar e soltar para outros tipos de elementos de design). Consulte a tabela após este procedimento para obter as estruturas HTML necessárias para criar cada um desses elementos; copiar/colar este código diretamente da tabela, conforme necessário.

  4. Agora você pode ir para a guia Design>Designer e arrastar os elementos de design para cada um dos contêineres que você configurar e, em seguida, usar o painel Propriedades para configurar cada elemento de design arrastado ou colado diretamente em seu código.

Tipo de elemento de design Cole este código Observações                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> É possível inserir o conteúdo HTML entre as tags <p> diretamente daqui ou ir para o Designer para usar o editor rich-text para fazer isso.
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> A maneira mais fácil de alterar sua origem da imagem e/ou link da imagem é ir para o Designer e usar o painel Propriedades. Mas você também poderá editar os seguintes atributos diretamente no HTML:
  • Defina o link da imagem e/ou título, editando o href e/ou atributos de título do elemento <a>.
  • Para remover o link da imagem, limpe o conteúdo dos atributos href e title do elemento <a> (mas mantenha os atributos e aspas, como href="").
  • Defina a origem da imagem editando o atributo src do elemento <img>.
Não edite nenhum outro código.
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>&nbsp;</span></p></td></tr></tbody></table></div></div> Não edite nenhum código diretamente no editor HTML. Em vez disso, vá para o Designer e use o painel Propriedades.
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" Não edite nenhum código diretamente no editor HTML. Em vez disso, vá para o Designer e use o painel Propriedades.

Para obter mais informações sobre como os elementos de design aparecem no código, consulte Identificar elementos de design.

Adicionar novas fontes à barra de ferramentas de elemento de texto

Os elementos de texto fornecem uma barra de ferramentas de formatação pop-up no designer, que inclui um menu para aplicar uma fonte ao texto selecionado.

O seletor de fonte para elementos de texto.

Para adicionar novas fontes a esse seletor de fontes, adicione a marca <meta> que usa o seguinte formulário para o <head> do documento:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

Onde <font-list> é uma lista de nomes de fontes separados por ponto-e-vírgula.

Adicionar configurações à guia Estilo

Um recurso útil dos modelos prontos para uso é que eles fornecem configurações de estilo globais na guia Estilo, que permitem que os usuários ajustem rapidamente a família de fontes, a paleta de cores e outras configurações globais habilitadas para o modelo. Cada modelo inclui somente as configurações de estilo que façam sentido para esse design específico, e você também pode criar modelos de design que forneçam apenas as configurações certas de estilo a você e a seus usuários.

A guia Designer > Estilos.

Para adicionar uma configuração à guia Estilo, faça o seguinte:

  • Adicione uma metamarca <meta> ao <head> de seu documento para criar a configuração.
  • Configure as marcas de estilos e/ou marcas HTML que aplicam as configurações criadas pela metamarca.

As subseções a seguir explicam como fazer essas duas coisas.

Adicionar uma metamarca para criar a configuração

A<meta>marca necessária tem o seguinte formato:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

Em que:

  • <name> identifica a metamarca, à qual você também deve fazer referência nas marcas de estilo e nas marcas HTML em que a configuração será aplicada.
  • <initial-value> é um valor padrão adequado para o estilo.
  • <data-type> identifica o tipo de valor que os usuários fornecerão. Essa configuração afeta o tipo de controle que é apresentado na guia Estilo. Você deve usar um dos valores listados na tabela a seguir.
  • <label> especifica o texto a ser exibido na guia Estilos para a configuração.
Valor de tipo de dados Descrição
color Define uma cor usando valores de hashtag, como #000 ou #1a32bf. Cria um controle de seletor de cores na guia Estilos.
font Define um nome de família de fontes. Você também pode configurar pilhas de fontes usando uma lista de nomes de fonte separadas por vírgulas em ordem de preferência. Cria um campo de entrada simples na guia Estilos.
number Define um valor numérico sem nenhuma unidade (usa texto permitir que unidades como px ou em sejam especificadas juntas com o valor). Criar um campo de entrada com botões para cima/para baixo que podem ser usados incrementar/diminuir o valor atual na guia Estilos.
picture Define a origem de uma imagem (como uma URL). Cria um campo de entrada simples na guia Estilos.
text Define um valor que pode incluir texto e números. Também usa esse tipo de dados para valores numéricos que podem incluir uma unidade (como px ou em). Cria um campo de entrada simples na guia Estilos.

Nota

O rótulo exibido na guia Estilos pode aparecer entre colchetes, como "[Meu Estilo]". Os colchetes indicam que o texto que está sendo exibido não tem uma tradução disponível. Se você escolher um valor com suporte de qualquer um dos modelos prontos para uso (como "Cor 1"), a tradução ficará disponível, portanto, os colchetes não aparecerão.

Nota

Uma configuração de estilo estabelecida usando-se uma <meta>marca, conforme descrito aqui, só será mostrada na guia Estilos quando houver referência a essa configuração em, pelo menos, uma marca de estilo ou marca HTML atual, conforme descrito nas próximas seções.

Adicione comentários de CSS para implementar configurações de estilo no cabeçalho

As configurações feitas na guia Estilos podem ser aplicadas aos estilos de CSS estabelecidos no <head> de seu documento HTML envolvendo um valor de CSS com dois comentários de CSS que contêm o atributo name da metamarca xrm/designer/setting correspondente. O par de comentários de CSS tem o seguinte formato:

/* @<tag-name> */ <value> /* @<tag-name> */

Em que:

  • <tag-name> é o atributo de nome para a metamarca xrm/designer/setting que estabelece a configuração relevante da guia Estilos.
  • <value> é um valor que será substituído quando um usuário editar a configuração relevante da guia Estilos.

Importante

Você só pode usar esses pares de comentários de CSS em estilos e classes definidos dentro das tags <style> na seção do <head>. Além disso, deve haver somente um conjunto de marcas de <style> presente, com todos os estilos de CSS configurados aqui.

Veja um exemplo em que você pode ver uma metamarca xrm/designer/setting que cria um controle do seletor de cores chamado "Cor 1" na guia Estilos. Um estilo de CSS é aplicado a esta configuração para estabelecer a cor do texto para os elemento de <h1>.

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

Adicionar atributos de referência a propriedades para implementar as configurações de estilo no corpo da mensagem

As configurações definidas na guia Estilos podem ser aplicadas como valores de atributo a qualquer marca HTML no <body> de seu documento adicionando-se o formulário a seguir a cada marca relevante:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

Em que:

  • <attr> é o nome do atributo a ser criado.
  • <tag-name> é o valor do atributo name para a metamarca que estabeleceu a configuração.
  • Vários atributos, se necessário, deverão ser separados por um ponto e vírgula em um único atributo de referência a propriedades.

Veja um exemplo em que você pode ver as metamarcas xrm/designer/setting que criam duas configurações para controlar uma imagem Hero (faixa) no documento, com controles chamados "Imagem Hero" e "Altura da imagem Hero" na guia Estilos. A propriedade property-reference será então usada em uma marca de <img> para implementar essas configurações.

<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>

Portanto, neste exemplo, a marca de <img> resolveria algo como:

<img src="picture.jpg" height="100px">