Crea modelli modificabili con il linguaggio dei template Mailchimp

Quando codifichi template personalizzati con il linguaggio template di Mailchimp, usa le nostre convenzioni di denominazione consigliate per identificare quali aree del template identificare come modificabili dalla sezione Design di Campaign Builder.

In questo articolo scoprirai altre informazioni sugli stili template modificabili.

Dichiarazioni di area

Aggiungi le dichiarazioni di seguito al tuo CSS per definire le aree in cui poter modificare gli stili.

Obbligatorio

• @tab: definisce la scheda progetto in cui impostare gli stili.

Facoltativo

• @section: definisce la scheda in cui impostare gli stili di progetto. È facoltativo, ma consigliato se hai diversi stili modificabili. Potresti avere difficoltà a trovare le opzioni di modifica in caso di troppi stili modificabili in una sezione o di stili raggruppati senza sezioni.
• La dichiarazione dell’attributo @style prende una regola CSS che hai creato e la applica al menu a tendina dell'editor di testo della campagna, consentendoti di applicare gli stili al testo in modo rapido e selettivo.
• @theme: se vuoi modificare i colori del tuo template con lo strumento temi colore di Mailchimp, usa le definizioni tema di seguito nel tuo CSS:
  • pagina @theme: definisce il colore di sfondo dell’email.
  • corpo @theme: dovrebbe applicarsi alla sezione principale del corpo della campagna per colore testo e carattere
  • intestazione @theme: da utilizzare per il colore di sfondo della sezione “visualizza su questo browser” o tralasciata del tutto
  • titolo @theme: definisce primo piano, dimensioni e carattere dei titoli
  • sottotitolo @theme: definisce primo piano, dimensioni e carattere dei sottotitoli
  • piè di pagina @theme: da applicare alla sezione piè di pagina del template per il colore di sfondo.

Dichiarazioni dell’attributo Style

Usa la seguente dichiarazione per definire uno stile modificabile in un’area del tuo template.

/*@editable*/ property: value;

I blocchi della dichiarazione dell’attributo Style condividono una struttura di base a prescindere dallo stile dell’elemento interessato, e la dichiarazione /*@editable*/ si ripete su tutti gli elementi che vuoi rendere modificabili all’interno di un’area. In questo esempio, è dichiarato un tag 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; }