Fragmentos personalizáveis customizable-fragments

Quando os fragmentos são usados em um email ou modelo de email, eles são bloqueados por padrão devido à herança, o que significa que quaisquer alterações feitas em um fragmento são propagadas automaticamente para todos os ativos onde ele é usado. Com fragmentos personalizáveis, campos específicos em um fragmento podem ser definidos como editáveis quando o fragmento é adicionado a um email ou modelo de email. Por exemplo, se você tiver um fragmento com um banner, algum texto e um botão, poderá designar determinados campos, como a imagem ou o URL de destino do botão, como editáveis.

Os fragmentos personalizáveis permitem gerenciar e personalizar o conteúdo sem criar blocos de conteúdo totalmente novos ou interromper a herança do fragmento. As alterações feitas no nível do fragmento ainda são propagadas, enquanto permitem personalização no nível do email ou do template de email.

Os fragmentos visuais e de expressão podem ser marcados como personalizáveis.

Adicionar campos editáveis em fragmentos visuais visual

Para tornar partes de um fragmento visual editáveis, siga estas etapas:

Depois de adicionar o fragmento a um email, os usuários podem personalizar todos os campos editáveis configurados no fragmento.

Componentes editáveis do HTML em fragmentos editable-html

Em um componente do HTML, os seguintes tipos de elementos podem se tornar editáveis:

Cada valor de propriedade CSS com parâmetros deve ser exatamente {{{varName}}}: sem sufixos, sem texto adicional, sem várias variáveis e sem concatenação em uma única propriedade.

Para parametrizar propriedades de vários lados, como preenchimento:

Como os campos editáveis funcionam nos componentes do HTML components

Os campos editáveis em um componente do HTML são criados declarando variáveis em linha diretamente dentro do código-fonte do componente. Cada variável tem uma ID exclusiva e um valor padrão. A variável é referenciada sempre que o valor editável deve aparecer na marcação.

Depois que o fragmento é salvo e publicado, cada variável declarada no componente do HTML é automaticamente exibida como um parâmetro editável quando o fragmento é adicionado a um email.

O autor do email pode substituir o valor padrão de qualquer variável do Designer de email (por exemplo, alterar uma cor de fundo, trocar um URL do CTA ou atualizar um título) sem modificar o HTML subjacente.

Referência de sintaxe syntax

Os campos editáveis são definidos e referenciados usando dois padrões:

Declaração de uma variável declaring

Use a declaração em linha para definir uma variável com um identificador exclusivo e um valor padrão:

{{#inline "variableID"}}default_value{{/inline}}

Substitua variableID por um identificador exclusivo para o campo editável. A ID deve ser exclusiva no componente e não deve conter espaços.

Substitua default_value pelo valor que deve ser usado se o autor do email não o substituir.

Referência a uma variável referencing

Use chaves triplas para fazer referência à variável onde quer que seu valor deva aparecer na marcação:

{{{variableID}}}

A mesma ID de variável pode ser referenciada várias vezes na HTML. Todas as referências resolverão para qualquer valor que o autor do email definir (ou para o valor padrão se nenhuma substituição for fornecida).

Parâmetros opcionais optional

A declaração em linha suporta parâmetros opcionais que alteram como o campo editável é apresentado ou processado:

Adicionar campos editáveis a um componente do HTML adding-editable-fields

Para tornar editáveis partes de um componente do HTML em um fragmento visual, siga estas etapas:

Uso do fragmento em um email using-fragment

Depois que o fragmento é publicado, todas as variáveis declaradas em seus componentes do HTML são exibidas como parâmetros editáveis no Designer de email.

Para personalizá-los ao usar o fragmento em um email:

O fragmento é renderizado com os valores personalizados, enquanto ainda herda quaisquer atualizações estruturais futuras feitas no fragmento publicado.

Exemplo: fragmento simples com texto, cor e URL editáveis example

O exemplo a seguir cria um pequeno banner promocional com quatro campos editáveis:

Depois de publicar o fragmento, um autor de email pode substituir qualquer um desses valores ao adicionar o fragmento a um email.

Banner editável simples

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

Neste exemplo:

Práticas recomendadas best-practices

O que você deve saber things-to-know