Usa il builder di campagne HTML personalizzato

Con ActiveCampaign puoi creare una campagna che usa codice HTML personalizzato. Questa opzione è l’ideale per chi vuole avere più controllo sul design delle proprie email ed è a suo agio nell’usare l’HTML.

In questo articolo scoprirai come accedere al builder HTML e troverai alcuni consigli sulle migliori pratiche di design.

Prendi nota

• Il nostro team di Assistenza Clienti non può aiutarti a risolvere problemi con codice HTML personalizzato
• Gli iframe non sono supportati nelle campagne email

Crea una campagna HTML personalizzata

1. Vai a Campagne nel menu a sinistra.
2. Fai clic su "Start from scratch instead."
3. Nella pagina Tipo di campagna:
   • Inserisci un nome per la tua campagna
   • Seleziona il tipo di campagna
   • Fai clic sul pulsante "Avanti"
4. Nella pagina Riepilogo campagna, inserisci i dettagli della tua campagna. Nota che puoi saltare questo passaggio e iniziare a creare il tuo design. Tuttavia, dovrai inserire i dettagli della campagna prima di inviare la tua email.
5. Fai clic sulla freccia verso il basso accanto al pulsante “Crea con il designer per email”. Seleziona “HTML builder”.
6. Seleziona un modello (se applicabile) oppure fai clic sul pulsante "Start from Scratch".
7. Si aprirà l'editor HTML. Aggiungi il tuo HTML personalizzato nell'editor a sinistra. Man mano che aggiungi il codice, vedrai l’anteprima nel riquadro a destra.
8. Per inserire contenuti personalizzati, contenuto condizionale, un’immagine, un feed RSS o contenuti da un URL, fai clic sull’opzione "Inserisci" e poi seleziona l’elemento che vuoi aggiungere. Poi, segui le istruzioni per aggiungere quell’elemento.
9. Per passare al Visual Editor, clicca sull'icona del visual editor.
   
   
    
10. Fai clic sull’icona delle impostazioni (ingranaggio) per aggiornare l’oggetto, aggiungere o modificare il testo di anteprima, aggiornare le informazioni "Da" e "Rispondi a" e testare la tua email.
11. Fai clic sul pulsante "Avanti". Verrai reindirizzato alla pagina Riepilogo campagna.
12. Quando è tutto a posto, puoi fare clic su "Invia ora" per inviare la campagna, fare clic sul pulsante "Pianifica" per inviarla in un secondo momento, oppure fare clic su "Salva e esci" per tornare più tardi alla campagna.

Guida alla progettazione HTML

Qui sotto trovi alcune indicazioni generali per usare l’editor HTML. Ti ricordiamo che il nostro team di Assistenza Clienti non può aiutarti a risolvere problemi o creare codice per la tua email.

Layout

• Larghezza di design di 650 px o meno
  La regola generale per la dimensione di un'email è mantenerla a 650 px di larghezza o meno. Questo fa sì che l’email venga visualizzata correttamente nella maggior parte dei client email e delle configurazioni.
• Meglio puntare su layout semplici
  Quando si tratta di design delle email, meno è meglio. Se provi a creare un design complicato, dovrai fare un sacco di test e debug per via dei problemi con i client email. Se vuoi creare un design più avanzato, preparati a usare molte tabelle e a dedicare abbastanza tempo ai test.
• Usa le tabelle HTML di base 
  Per creare il layout generale, dovrai usare le tabelle HTML standard. Le tecniche di floating e di layout CSS non verranno visualizzate correttamente in tutti i client email.
• Fai attenzione alla spaziatura interna delle celle della tabella
  Outlook applicherà la spaziatura interna di una qualsiasi cella di una riga a tutte le celle di quella riga. Questo potrebbe causare alcune modifiche visive che non vuoi. È meglio cercare di applicare la stessa spaziatura interna a tutte le celle di una riga, oppure inserire un div interno o una tabella (con spaziatura interna) dentro la cella in cui vuoi avere la spaziatura interna. (Altre info)
• Evita di usare colspans="" nelle tue tabelle
  Alcuni client email non supportano completamente i colspans e altri potrebbero avere problemi di visualizzazione con le altre celle.

CSS

• Non usare fogli di stile esterni
  Funzionano solo in pochi client email, quindi inserisci tutto il tuo CSS inline direttamente nell’HTML.
• Non usare classi CSS – usa sempre il CSS inline 
  Molti client email non supportano le classi CSS. Invece di dichiarare classi CSS, dovresti usare CSS inline. Un esempio potrebbe essere <div style="color:#cccccc;">contenuto</div> invece di <div class="cssclassa">contenuto</div> 
• Non usare scorciatoie CSS
  CSS normalmente ti permette di impostare le proprietà in gruppi. Ad esempio style=" font: 12px, Arial". Invece di raggruppare questi attributi, dovresti impostare ogni parte singolarmente. Ad esempio style="font-size:12px; font-family:Arial" 
• Evita di usare le opzioni CSS float o position
  Alcuni client email ignorano sia l’opzione CSS float, sia l’opzione position. Prova a usare invece le tabelle.

Immagini e video

• Usa URL assolute come origine delle immagini 
  Invece di inserire un’immagine come (<img src= "img.gif">) devi inserire l’URL assoluto del file, ad esempio (<img src= "http://site.com/img.gif">) 
• Usa sempre i tag alt (<img src="http://site.com/img.gif" alt="Company ABC">) 
  La maggior parte dei client email disattiva le immagini per impostazione predefinita. Se non usi tag alt, i tuoi iscritti vedranno solo un riquadro vuoto. Con una tag alt, i tuoi iscritti vedranno il testo che inserisci nella tag.
• Non incorporare video o contenuti Flash
  Incorporare direttamente video o contenuti Flash nella tua email non è una buona idea. Molti client email non supportano questo tipo di codice e molti programmi di rilevamento di spam e virus segnaleranno la tua email come spam o come dannosa. Invece di incorporare il tuo video o il contenuto Flash nella email, fai uno screenshot di come appare il video o il lettore Flash e incorpora quello. Puoi fare in modo che il video o il contenuto Flash si aprano nel loro browser quando ci cliccano sopra. 
• Le GIF animate non sono pienamente supportate
  Chiediti se hai davvero bisogno di un'animazione nella tua email. Anche se la maggior parte dei client email supporta le GIF animate, Outlook 2007 no. I client email che non supportano le GIF animate mostreranno probabilmente il primo fotogramma della sequenza.
• Attenzione alle immagini spezzettate
  Se hai un’immagine grande suddivisa e inserita nell’HTML usando celle di tabella o tag img uno accanto all’altro, assicurati di fare test approfonditi. Alcuni client email potrebbero aggiungere spazio extra tra le tue immagini e far sembrare la tua email brutta.
• Evita di usare le immagini per sistemare il layout
  Alcune persone usano immagini di 1 o 2 pixel per allineare gli elementi all'interno del layout. Alcuni client o filtri email potrebbero scambiarla per un’immagine di tracciamento delle letture o delle aperture, e penalizzare l’email.
• Testa la tua email con le immagini disattivate
  Visto che la maggior parte dei client di posta mostra le email con le immagini disattivate per impostazione predefinita, è importante controllare come appare la tua email senza immagini.
• Occhio alle dimensioni dei file
  Come per il normale web design, anche per le email è importante tenere d’occhio le dimensioni dei file immagine. Cerca di mantenerle leggere, così si scaricheranno velocemente per i tuoi iscritti.

Contesto

• Le immagini di sfondo non sono completamente supportate
  Se usi un'immagine di sfondo, ricorda che alcuni client email potrebbero non mostrarla. Se vuoi comunque usare un’immagine di sfondo, usa le opzioni di sfondo HTML invece di usare il CSS per impostare lo sfondo.
• Colori di sfondo per l’intera pagina 
  Molti client email (come Gmail) non mostrano il colore di sfondo che imposti per il corpo principale (tag <body>). Se imposti un colore di sfondo nel tag body, dovresti anche usare un div contenitore con un colore di sfondo che racchiuda il tuo contenuto. In questo modo, anche se il colore di sfondo del body non è supportato, avrai comunque qualcosa di simile.

Varie

• Non inserire niente sopra il tag <body> di apertura
  Qualsiasi cosa tu metta sopra il tag body verrà probabilmente rimossa e non utilizzata.
• Non includere javascript
  Nella maggior parte dei client email viene probabilmente rimosso e i filtri antispam potrebbero rilevarlo come codice malevolo.
• Evita Microsoft Office
  L’HTML generato causerà quasi sicuramente dei problemi. Inoltre, quando copi e incolli da Office, importerai anche la loro formattazione e rischierai di avere problemi di design.