Creare template HTML personalizzati su Mailchimp
I template HTML personalizzati in Mailchimp permettono di andare oltre il drag-and-drop e ottenere email su misura del brand, riutilizzabili e con sezioni editabili dai colleghi non tecnici. La sintassi mc:edit di Mailchimp e semplice ma potente.
Quando serve un template HTML custom
Quando il template builder visuale non basta: layout particolari, font web specifici, integrazione con design system aziendale, esigenze accessibilità avanzate, riuso per più campagne con sezioni modificabili. I template custom sono indispensabili per agenzie e team marketing strutturati.
Sintassi mc:edit base
La direttiva chiave e mc:edit="nome_sezione" all'interno di un tag HTML. Mailchimp trasforma ogni elemento con mc:edit in un blocco editabile nell'editor visuale. mc:repeatable rende una sezione duplicabile, mc:hideable la rende eliminabile, mc:variant fornisce varianti pre-impostate.
Procedura passo-passo
- Crea un file HTML in locale con la struttura della tua email.
- Usa table per il layout (le email non supportano flexbox/grid affidabili).
- Marca le sezioni editabili con mc:edit="hero_title", mc:edit="body_text", ecc.
- Aggiungi inline CSS per ogni stile (alcuni client ignorano i CSS in head).
- Includi i tag merge obbligatori: *|UNSUB|*, *|LIST:COMPANY|*, *|LIST:ADDRESS|*.
- Testa il rendering con strumenti come Litmus o Email on Acid.
- Vai su Mailchimp > Templates > Create Template > Code your own > Paste in code.
- Incolla l'HTML, salva e prova creando una campagna con il template.
Esempio di sezione editabile
Un blocco titolo con mc:edit="hero_title" diventa modificabile direttamente nell'editor visuale Mailchimp, senza richiedere conoscenza HTML al marketer. Aggiungi mc:repeatable a un blocco prodotto per permettere di duplicarlo a piacere.
Errori comuni e come risolverli
- CSS in head ignorato: Gmail e altri client strippano il head. Usa sempre inline styles.
- Font web non visualizzati: Outlook desktop non supporta @font-face. Definisci fallback.
- Immagini bloccate: usa testo alternativo e dimensioni esplicite width/height.
- Tag merge mancanti: senza *|UNSUB|* Mailchimp blocca l'invio.
- Layout non responsive: usa media query inline e percentuali per le table.
Domande frequenti
D: Posso usare React o Vue per i template?
R: No, le email accettano solo HTML statico e CSS inline.
D: Esistono framework consigliati?
R: Si, Foundation for Emails, MJML e Cerberus generano HTML compatibile da scrivere in modo più pulito.
D: Posso versionare i template?
R: Mailchimp non ha versioning nativo. Conserva i template in un repository Git.
Hai bisogno di aiuto?
Se vuoi delegare l'email marketing al team di G Tech Group, scrivici tramite il modulo di contatto. Ti aiutiamo con configurazione SMTP, migrazioni, automation e reportistica.