Fragmentos personalizables customizable-fragments

Cuando los fragmentos se utilizan en una plantilla de correo electrónico o de correo electrónico, están bloqueados de forma predeterminada debido a la herencia, lo que significa que los cambios realizados en un fragmento se propagan automáticamente a todos los recursos donde se utiliza. Con los fragmentos personalizables, los campos específicos de un fragmento se pueden definir como editables cuando el fragmento se agrega a un correo electrónico o a una plantilla de correo electrónico. Por ejemplo, si tiene un fragmento con un titular, texto y un botón, puede designar ciertos campos, como la imagen o la dirección URL de destino del botón, como editables.

Los fragmentos personalizables le permiten administrar y personalizar el contenido sin crear bloques de contenido completamente nuevos ni interrumpir la herencia de fragmentos. Los cambios realizados en el nivel de fragmento se siguen propagando, pero permiten la personalización en el nivel de correo electrónico o de plantilla de correo electrónico.

Los fragmentos visuales y de expresión se pueden marcar como personalizables.

Agregar campos editables en fragmentos visuales visual

Para poder editar partes de un fragmento visual, siga estos pasos:

Después de agregar el fragmento a un correo electrónico, los usuarios pueden personalizar todos los campos editables configurados en el fragmento.

Componentes editables de HTML en fragmentos editable-html

Dentro de un componente de HTML, los siguientes tipos de elementos se pueden convertir en editables:

Cada valor de propiedad de CSS parametrizado debe ser exactamente {{{varName}}}: sin sufijos, sin texto adicional, sin múltiples variables y sin concatenación dentro de una sola propiedad.

Para parametrizar propiedades de varios lados, como el relleno, haga lo siguiente:

Funcionamiento de los campos editables en los componentes de HTML components

Los campos editables de un componente de HTML se crean declarando variables en línea directamente dentro del código fuente del componente. Cada variable tiene un ID único y un valor predeterminado. A continuación, se hace referencia a la variable siempre que el valor editable deba aparecer en el marcado.

Una vez guardado y publicado el fragmento, cada variable declarada en el componente HTML aparece automáticamente como un parámetro editable cuando se agrega el fragmento a un correo electrónico.

El autor del correo electrónico puede anular el valor predeterminado de cualquier variable de la Designer de correo electrónico (por ejemplo, cambiar un color de fondo, intercambiar una URL de CTA o actualizar un titular) sin modificar la HTML subyacente.

Referencia de sintaxis syntax

Los campos editables se definen y se hace referencia a ellos mediante dos patrones:

Declarar una variable declaring

Utilice la declaración en línea para definir una variable con un ID único y un valor predeterminado:

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

Reemplace variableID con un identificador único para el campo editable. El ID debe ser único dentro del componente y no debe contener espacios.

Reemplace default_value con el valor que debería usarse si el autor del correo electrónico no lo anula.

Referencia a una variable referencing

Utilice llaves triples para hacer referencia a la variable dondequiera que su valor deba aparecer en el marcado:

{{{variableID}}}

Se puede hacer referencia al mismo ID de variable cualquier número de veces dentro de HTML. Todas las referencias se resolverán con el valor que establezca el autor del correo electrónico (o con el valor predeterminado si no se proporciona ninguna anulación).

Parámetros opcionales optional

La declaración en línea admite parámetros opcionales que cambian la forma en que se presenta o procesa el campo editable:

Añadir campos editables a un componente de HTML adding-editable-fields

Para poder editar partes de un componente de HTML dentro de un fragmento visual, siga estos pasos:

Uso del fragmento en un correo electrónico using-fragment

Una vez publicado el fragmento, todas las variables declaradas en sus componentes de HTML aparecen como parámetros editables en el Designer de correo electrónico.

Para personalizarlos al utilizar el fragmento en un correo electrónico:

El fragmento se procesa con los valores personalizados, al tiempo que hereda las futuras actualizaciones estructurales realizadas en el fragmento publicado.

Ejemplo: fragmento simple con texto, color y dirección URL editables example

En el siguiente ejemplo se crea un pequeño titular promocional con cuatro campos editables:

Después de publicar el fragmento, un autor de correo electrónico puede anular cualquiera de estos valores al añadir el fragmento a un correo electrónico.

Titular editable simple

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

En este ejemplo:

Prácticas recomendadas best-practices

Cosas que hay que saber things-to-know