Crie estilos editáveis com a linguagem de modelos do Mailchimp

Ao codificar modelos personalizados com a linguagem de modelos do Mailchimp, use nossas convenções de nomenclatura recomendadas para identificar quais áreas do seu modelo você gostaria que fossem editáveis na seção Design do Campaign Builder (Construtor de campanhas).

Neste artigo, você encontrará mais informações sobre estilos de modelos editáveis.

Declarações de área

Adicione as seguintes declarações ao seu CSS para definir as áreas em que os estilos devem ser editáveis.

Obrigatório

• @tab : define de quais guias o design de estilos podem ser definidos.

Opcional

• @section : define em quais guias os estilos de design podem ser definidos. Isso é opcional, mas recomendado quando você tem vários estilos editáveis. Muitos estilos editáveis em uma seção ou agrupados em nenhuma seção podem dificultar encontrar opções de edição. A declaração de - @style utiliza um conjunto de regras CSS que você criou e o insere no menu suspenso do editor de texto da campanha e permite aplicar estilos ao seu texto de forma rápida e seletiva.
• @theme : se você quiser que as cores do seu modelo sejam alteráveis por meio da ferramenta de tema de cores do Mailchimp, use as seguintes definições de tema no seu CSS:
  • Página @theme : define a cor do plano de fundo do e-mail.
  • Corpo @theme : deve estar na seção do corpo principal da campanha para cores e fontes de texto
  • Cabeçalho @theme : deve ser usado para a cor de plano de fundo na seção "exibir neste navegador", ou não utilizado
  • Título @theme : define o primeiro plano, o tamanho e a fonte dos títulos
  • Legenda @theme : define o primeiro plano, o tamanho e a fonte das legendas
  • Rodapé @theme : deve estar na seção de rodapé do modelo para obter a cor de fundo.

Declarações de estilo

Use a seguinte declaração para definir um único estilo editável dentro de uma área do seu modelo.

/*@editable*/ property: value;

Os blocos de declaração de estilo compartilham de uma estrutura básica, independentemente do estilo do elemento direcionado, e a declaração /*@editable*/ se repete para cada elemento que você quer que seja editável em uma determinada área. Neste exemplo, é declarada uma etiqueta H1:

/** * @tab Page *
cabeçalho principal @section *
@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; }