Créer des styles modifiables avec le langage de modèle de Mailchimp

Lorsque vous codez des modèle personnalisés avec le langage de modèle de Mailchimp, configurez les déclarations dans votre code CSS pour définir les zones qui peuvent être mises en forme dans la section de Design (Conception) de Campaign Builder (l'éditeur de campagne). Vous trouverez ci-dessous plus d'informations sur les styles de modèles modifiables.

Déclarations de zone

Ajoutez les déclarations suivantes à votre code CSS afin de définir les zones où les styles seront modifiables.

Obligatoire

• @tab : définit à partir de quel onglet de design les styles peuvent être définis.

Facultatif

• @section : définit à partir de quel onglet les styles peuvent être définis. Cette option est facultative, mais recommandée lorsque vous disposez d'un certain nombre de styles modifiables. Trop de styles modifiables dans une section ou non regroupés dans des sections peuvent vous compliquer la tâche lorsque vous recherchez les options d'édition.
• @style : cette déclaration extrait un ensemble de règles CSS que vous avez créé et le place dans le menu déroulant de l'éditeur de texte de votre campagne, vous permettant de personnaliser le style de votre texte de façon rapide et sélective.
• @theme : si vous souhaitez que les couleurs de votre modèle soient modifiables à l'aide de l'outil de thème de couleur Mailchimp, utilisez les définitions de thème suivantes dans votre code CSS :
  • @theme page : définit la couleur d'arrière-plan de l'e-mail.
  • @theme body : doit figurer dans la section du corps principal de la campagne pour la couleur et les polices du texte.
  • @theme header : cette option doit être utilisée pour la couleur d'arrière-plan de la section « afficher dans ce navigateur » ou être complètement désactivée.
  • @theme title : définit le premier plan, la taille et la police des titres.
  • @theme subtitle : définit le premier plan, la taille et la police des sous-titres.
  • @theme footer : doit figurer dans la section de pied de page du modèle pour la couleur d'arrière-plan.

Déclarations de style

Utilisez la déclaration suivante pour définir un seul style modifiable dans une zone de votre modèle :

/*@editable*/ property: value;

Les blocs de déclaration de style partagent une structure de base quel que soit le style de l'élément ciblé. La déclaration /*@editable*/ est répétée pour chaque élément qui sera modifiable dans une zone. Dans cet exemple, un tag H1 est déclaré :

/** * @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; }