Crear áreas de contenido editable con la plantilla de lenguaje de Mailchimp

Cuando se codifican plantillas personalizadas con el lenguaje de plantilla de Mailchimp, usa nuestras convenciones de nomenclatura recomendadas para identificar las áreas de la plantilla que te gustaría editar desde la sección Diseño del Constructor de campaña. Te recomendamos limitar el número de espacios editables para mantener tu código limpio. Es importante crear un nombre único para cada valor de atributo y mantener la coherencia, para que así no pierdas tu contenido cuando cambies de plantillas al construir tus campañas.

Áreas de contenido editable

El formato general de atributo para la creación de áreas de contenido editable es: mc:edit="section"

Crea un valor único de atributo y añade a elementos cuyo contenido debe ser editable. A continuación encontrarás los nombres de código para algunas de las áreas de contenido habitual que puedes incluir en el código de tu plantilla:

• mc:edit="header"
  Se usa para nombrar el encabezado de tu correo electrónico.
• mc:edit="header_image"
  Se usa para nombrar una imagen de encabezado editable.
• mc:edit="sidecolumn"
  Se usa para nombrar una columna derecha o izquierda editable.
• mc:edit="body"
  Se usa para nombrar el espacio del contenido principal de tu correo electrónico.
• mc:edit="footer"
  Se usa para denominar el pie de página de tu correo electrónico.

En el siguiente ejemplo, hemos creado una sección del cuerpo utilizando el atributo mc:edit="body".

<td class="defaultText" mc:edit="body">
<h2 class="title">Primary Heading</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis.</p>
<h3 class="subTitle">Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>

Área de imagen editable

Para crear áreas de imagen editables, añade el atributo dentro de un elemento de imagen. Evita crear imágenes editables dentro de las áreas de contenido editable para mantener tu código limpio.

En el siguiente ejemplo, hemos añadido el atributo a un elemento de imagen.

<img mc:edit="postcard" style="max-width:600px;" />

Texto del encabezado editable

Añade el atributo mc:allowtext a un elemento de imagen para tu imagen de encabezado con el fin de poder introducir texto en lugar de una imagen.

En el siguiente ejemplo, hemos añadido el atributo a un elemento de imagen que convertimos en editable con el atributo mc:edit="section".

<img mc:edit="header_image" mc:allowdesigner mc:allowtext />

Repetir área de contenido

Añade el atributo mc:repeatable a cualquier área que incluya un atributo mc:edit para crear un bloque de contenido que se pueda añadir varias veces a una plantilla. Las áreas de contenido repetible están ocultas por defecto, así que sólo aparecen en una plantilla si las añades dentro del Constructor de campaña.

En el siguiente ejemplo, hemos añadido el atributo mc:repeatable a un área de contenido que convertimos en editable con el atributo mc:edit.

<div class="article" mc:repeatable>
<h3 mc:edit="article_title">Title</h3>
<p mc:edit="article_content">Content</p>
</div>

Cada instancia de mc:repeatable crea un elemento principal. Cuando se repite un bloque, el nuevo bloque es un elemento secundario de ese elemento principal. Los bloques secundarios sólo se pueden reorganizar si están asociados con el mismo elemento principal. Por ejemplo, si tienes dos secciones mc:repeatable en tu plantilla, no se puede reorganizar un bloque repetido de la primera instancia para que aparezca entre los bloques repetidos entre bloques asociados con la segunda instancia.

Para mover los bloques con más libertad, crea múltiples instancias del atributo mc:variant definido por el mismo nombre mc:repeatable. Esto creará un elemento principal mc:repeatable, de modo que cualquier bloque repetido será un elemento secundario del mismo elemento principal.

En el siguiente ejemplo se utilizan varios atributos mc:variant con el mismo nombre mc:repeatable.

<table mc:repeatable="content" mc:variant="variant_1">
<tr><td mc:edit="section_1">
Variant 1 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr><td mc:edit="section_2">
Variant 2 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr><td mc:edit="section_3">
Variant 3 Content
</td></tr>
</table>

Área de contenido ocultable

Añade el atributo mc:hideable a un área de contenido para permitir que ese bloque se pueda ocultar y mostrar cuando construyas tus campañas. El atributo mc:hideable no se puede usar en conjunción con el atributo mc:repeatable.

En el siguiente ejemplo, hemos añadido el atributo mc:hideable a un área de contenido que convertimos en editable con el atributo mc:edit.

<div mc:edit="content" mc:hideable>
</div>

Área de contenido variable

Añade el atributo mc:variant="somename" a un área de contenido para poder alternar entre una serie de diseños para ese bloque de contenido dentro del Constructor de campañas. El atributo mc:variante debe tener un nombre de atributo y se debe utilizar en conjunción con mc:repeatable.
En el siguiente ejemplo, hemos añadido el atributo mc:variant a un área de contenido que también utiliza el atributo mc:repeatable. En este caso, el nombre de atributo es "contenido con imagen a la izquierda".

<div mc:repeatable="product" mc:variant="content with left image"> </div>