Usa il builder di campagne HTML personalizzato

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

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

Prendi nota

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

Crea una campagna HTML personalizzata

1. Vai a "Email" 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 "Next"
4. Nella pagina Riepilogo campagna, inserisci i dettagli della campagna. Nota che puoi saltare questo passaggio e iniziare subito a creare il 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 “Create with email designer”. Seleziona “HTML builder”.
6. Seleziona un modello (se applicabile) oppure fai clic sul pulsante “Start from Scratch”.
7. Il builder HTML si aprirà. Aggiungi il tuo HTML personalizzato nel builder a sinistra. Man mano che aggiungi il codice, vedrai il risultato nel riquadro di anteprima sulla destra.
8. Per inserire contenuto personalizzato, contenuto condizionale, un’immagine, un feed RSS o contenuto da un URL, fai clic sull’opzione “Insert” poi seleziona l’elemento che vuoi aggiungere. Quindi, segui i prompt per aggiungere quell’elemento.
9. Per passare al Visual Editor, fai clic sull’icona del visual editor.
   
   
    
10. Fai clic sull’icona delle impostazioni (ingranaggio) per aggiornare l’oggetto, aggiungere/aggiornare il testo del preheader, aggiornare le informazioni “Da” e “Rispondi a” e testare la tua email.
11. Fai clic sul pulsante "Next". Verrai reindirizzato di nuovo 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.

Linee guida per il design HTML

Qui sotto trovi alcune linee guida generali per usare il builder HTML. Ricorda che il nostro team di Assistenza Clienti non può aiutarti a risolvere problemi relativi al codice né a creare codice per la tua email.

Layout

• Larghezza di design di 650 px o meno
  La regola generale per la dimensione dell’email è mantenerla a 650 px o meno di larghezza. Questo permette all’email di essere visualizzata correttamente nella maggior parte dei client e delle configurazioni email.
• I layout semplici sono i migliori
  Quando si parla di design per email, la semplicità è la scelta migliore. Se provi a creare un design complicato, dovrai fare molti test e debug a causa di problemi con i client email. Se vuoi realizzare un design più avanzato, preparati a usare molte tabelle e a dedicare un po’ di tempo ai test.
• Usa tabelle HTML di base 
  Per creare il layout generale dovrai usare 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 delle tabelle
  Outlook applicherà la spaziatura interna di qualsiasi cella di una riga a tutte le celle di quella riga. Questo potrebbe causare alcune modifiche visive che non desideri. L’ideale è cercare di applicare la stessa spaziatura interna a tutte le celle di una riga oppure inserire un div o una tabella interna (con spaziatura interna) nella cella in cui vuoi la spaziatura interna. (Maggiori informazioni)
• Evita di usare colspans="" nelle tue tabelle
  Alcuni client email non supportano completamente i colspans e altri possono avere problemi di visualizzazione per le altre celle.

CSS

• Non usare fogli di stile esterni
  Funzioneranno solo in pochi client email, e dovresti includere tutto il tuo CSS usando CSS inline all’interno del tuo HTML. 
• Non usare classi CSS: usa sempre CSS inline 
  Molti client email non supportano le classi CSS. Invece di dichiarare classi CSS, dovresti usare CSS inline. Un esempio è <div style="color:#cccccc;">contenuto</div> invece di <div class="cssclassa">contenuto</div> 
• Non usare abbreviazioni CSS
  Normalmente il CSS ti permette di impostare le proprietà in gruppo. 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 ignoreranno sia le opzioni CSS float che position. Cerca invece di usare le tabelle.

Immagini e video

• Usa URL assoluti come sorgente delle immagini 
  Invece di includere 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 i tag alt, i tuoi iscritti vedranno solo un riquadro vuoto. Con un tag alt, i tuoi iscritti vedranno il testo che inserisci nel tag. 
• Non incorporare video o contenuti Flash
  Incorporare direttamente video o 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 segneranno la tua email come spam o pericolosa. Invece di incorporare il tuo video o il contenuto in flash nella tua email, fai uno screenshot dell'aspetto del video o del player flash e incorpora quello. Puoi fare in modo che il video o il contenuto in flash si apra nel loro browser quando ci cliccano sopra. 
• Animated GIFs are not fully supported
  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 non le supporta. I client email che non supportano le GIF animate probabilmente mostreranno il primo fotogramma della tua sequenza animata. 
• Fai attenzione alle immagini sezionate
  Se hai un'immagine grande suddivisa e inserita nel tuo HTML usando celle di tabella o tag img uno accanto all'altro, dovrai fare test accurati. Alcuni client email potrebbero aggiungere spazio extra tra le tue immagini e far sembrare la tua email poco curata.
• Evita di usare immagini per gestire il layout
  Alcune persone usano immagini da 1 o 2 pixel per allineare gli elementi all'interno del layout. Alcuni client o filtri email potrebbero considerarla un'immagine di tracciamento di lettura o apertura e penalizzare l'email.
• Testa la tua email con le immagini disabilitate
  Dal momento che la maggior parte dei client email mostra le email con le immagini disabilitate per impostazione predefinita, devi controllare come appare la tua email senza immagini.
• Fai attenzione alle dimensioni dei file
  Come nel web design tradizionale, è importante tenere d'occhio le dimensioni dei file immagine nella tua email. Cerca di mantenerle basse per assicurarti che vengano scaricate velocemente dai tuoi iscritti.

Sfondo

• Le immagini di sfondo non sono completamente supportate
  Se usi un'immagine di sfondo, ricorda che alcuni client email non la mostreranno. Se vuoi comunque usare un'immagine di sfondo, usa le opzioni HTML per lo sfondo invece di usare il CSS per dichiararlo.
• Colori di sfondo a tutta pagina 
  Molti client email (come Gmail) non mostrano il colore di sfondo che imposti per il body 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 mettere niente sopra il tag di apertura <body>
  Qualsiasi cosa tu metta sopra il tag body verrà probabilmente rimossa e non verrà usata.
• Non includere javascript
  È probabile che venga rimosso dalla maggior parte dei client email e i filtri antispam potrebbero rilevarlo come codice dannoso.
• Evita Microsoft Office
  L'HTML generato quasi sicuramente causerà dei problemi. Inoltre, quando copi e incolli da Office, incolli anche la loro formattazione e con ogni probabilità avrai problemi di design.