Crear estilos editables con el lenguaje de plantilla de Mailchimp

Al codificar las plantillas personalizadas con el idioma de la plantilla de Mailchimp, establece declaraciones en tu código CSS para definir las zonas que pueden ser diseñadas en la sección Design (Diseño) del Campaign Builder (Constructor de campaña).

En este artículo, encontrarás más información sobre los estilos de plantilla editables.

Declaraciones de áreas

Añade las siguientes declaraciones al CSS para definir las áreas donde se podrán editar los estilos.

Obligatorias

• @tab: define desde qué pestaña de diseño se pueden configurar los estilos.

Opcionales

• @section: define desde qué pestaña se pueden configurar los estilos de diseño. Aunque es opcional, es recomendable incluirla si se tienen varios estilos editables. Si hay demasiados estilos editables en una misma sección, o no se encuentran agrupados en ninguna sección, resultará más difícil encontrar las opciones de edición.
• @style: esta declaración lleva un conjunto de reglas de CSS que has creado y las integra en el menú desplegable del editor de texto de la campaña. Así podrás aplicar estilos al texto de una forma rápida y selectiva.
• @theme: si quieres cambiar los colores de una plantilla mediante la herramienta de temas de color de Mailchimp, utiliza las siguientes definiciones de temas en el CSS:
  • @theme page: define el color de fondo del correo electrónico.
  • @theme body: tendrá que estar en la sección del cuerpo principal de la campaña para el color del texto y las tipografías.
  • @theme header: es aconsejable utilizarlo para el color de fondo de la sección "verlo en el navegador" u omitirlo por completo.
  • @theme title: define el primer plano, tamaño y tipografía de los títulos.
  • @theme subtitle : define el primer plano, tamaño y tipografía de los subtítulos.
  • @theme footer : es aconsejable utilizarlo en la sección del pie de página de la plantilla para el color de fondo.

Declaraciones de estilo

Usa la siguiente declaración para definir un único estilo editable dentro de un área de la plantilla.

/*@editable*/ property: value;

Los bloques de declaración de estilo comparten una estructura básica, independientemente del estilo de elemento objetivo y la declaración /*@editable*/ se repite para cada elemento que desees hacer editable dentro de un área. En este ejemplo, se declara una etiqueta H1:

/** * @tab Page *
@section main heading *
@style heading 1 */ h1{ /*
     @editable*/ color:#202020 !important; display:block; /*
     @editable*/ font-family:Arial; /*
     @editable*/ font-size:34px; /*
     @editable*/ font-weight:bold; /*
     @editable*/ line-height:100%; /*
     @editable*/ text-align:left; }