Con ActiveCampaign è possibile creare una campagna che utilizza un codice HTML personalizzato. Questa opzione è la migliore per coloro che desiderano un maggiore controllo sulla progettazione delle email e che si trovano a proprio agio con l'uso dell'HTML.
In questo articolo scoprirete come accedere al costruttore HTML e riceverete indicazioni sulle migliori pratiche di progettazione.
Sapevate che il nostro nuovo Designer per email vi permette di passare facilmente dal vostro HTML/CSS alla nostra funzionalità di drag and drop? Imparate a utilizzare HTML con il Designer per email.
Prendi nota
Il nostro Team di Esperienza del Cliente non è in grado di aiutarvi a risolvere i problemi relativi al codice HTML personalizzato
Creare una campagna HTML personalizzata
- Fai clic su Campagne "Crea una campagna".
- Nella pagina Tipo di campagna:
- Fornite un nome per la vostra campagna
- Selezionare il tipo di campagna
- Fare clic sul pulsante "Avanti".
- Nella pagina di riepilogo della campagna, fornire i dettagli della campagna. È possibile saltare questo passaggio e iniziare a creare il disegno. Tuttavia, è necessario fornire i dettagli della campagna prima di inviare l'email.
- Fare clic sulla freccia rivolta verso il basso accanto al pulsante "Crea con il designer per email". Selezionare "Costruttore HTML"
- Selezionare un modello (se applicabile) o fare clic sul pulsante "Start from Scratch".
- Si aprirà il costruttore HTML. Aggiungete il vostro HTML personalizzato al costruttore sulla sinistra. Man mano che si aggiunge codice, lo si vedrà visualizzato nella schermata di anteprima sul pannello di destra.
- Per inserire un contenuto personalizzato, un contenuto condizionale, un'immagine, un feed RSS o un contenuto da un URL, fare clic sull'opzione "Inserisci" quindi selezionare l'elemento che si desidera aggiungere. Quindi, seguire le indicazioni per aggiungere l'elemento in questione.
- Per passare all'editor visuale, fare clic sull'icona dell'editor visuale.
- Fare clic sull'icona delle impostazioni (ingranaggio) per aggiornare l'oggetto, aggiungere/aggiornare il testo dell'intestazione, aggiornare le informazioni "Da" e "Rispondi a" e testare l'email.
- Fare clic sul pulsante "Avanti". Verrai reindirizzato alla pagina "Riepilogo campagna".
- Una volta che tutto sembra a posto, è possibile fare clic su "Send now" (Invia ora) per inviare la campagna, fare clic sul pulsante "Schedule" (Pianifica) per inviare in una data e ora successive, oppure fare clic su "Save and Exit" (Salva ed esci) per tornare alla campagna in un secondo momento.
Guida alla progettazione HTML
Di seguito sono riportate le indicazioni generali per l'utilizzo del costruttore HTML. Come promemoria, il nostro Team di Esperienza del Cliente non è in grado di aiutarvi a risolvere i problemi o a creare un codice per la vostra email.
Layout
-
650 px o meno di larghezza
di progetto La regola generale per la dimensione dell'email è di mantenerla 650px o meno in larghezza. Ciò consente alle email di essere visualizzate correttamente nella maggior parte dei client e delle configurazioni di posta elettronica. -
I layout semplici sono i migliori
Con la progettazione di email, semplice è meglio. Se provi a fare una progettazione complicata, incontrerai molti test e debug con problemi del client di posta elettronica. Se si desidera completare un progetto più avanzato, essere pronti a utilizzare molte tabelle e mettere da parte una ragionevole quantità di tempo per il test. -
Utilizzare tabelle HTML di base Sarà necessario utilizzare tabelle
HTML standard per creare il layout generale. Le tecniche di layout e fluttuanti CSS non verranno visualizzate correttamente in tutti i client di posta elettronica. -
Prestare attenzione con la spaziatura
interna delle celle della tabella Outlook applicherà la spaziatura interna da qualsiasi cella di fila a tutte le celle della riga. Ciò potrebbe comportare alcune modifiche visive che non si desiderano. Sarebbe meglio se provassi ad applicare la stessa spaziatura interna per tutte le celle di fila o posizionassi un div o un tavolo interno (che ha spaziatura interna) all'interno della cella che si desidera avere spaziatura interna. (Maggiori informazioni) -
Evitare di utilizzare colspans="" nelle tabelle
Alcuni client di posta elettronica non supportano completamente questi e altri avranno problemi di visualizzazione per le altre celle se si dispone di un colspan.
CSS
-
Non utilizzare fogli
di stile esterni Funzioneranno solo in pochi client di posta elettronica e dovresti includere tutti i tuoi CSS utilizzando CSS in linea all'interno del tuo HTML. -
Non utilizzare classi CSS: utilizzare sempre CSS in linea Molti client di posta elettronica non supportano le classi CSS
. Invece di dichiarare le classi CSS, è necessario utilizzare CSS inline. Un esempio potrebbe esserecontentinvece dicontent -
Non utilizzare scorciatoie
CSS CSS consente di impostare normalmente le proprietà in gruppi. Ad esempio style="font: 12px, Arial" Invece di raggruppare tali attributi, è necessario impostare ogni parte singolarmente. Ad esempio style="font-size:12px; font-family:Arial" -
Evita di utilizzare le opzioni CSS float o position Alcuni client di posta elettronica ignoreranno sia le opzioni
float che quelle di posizione CSS. Prova invece a usare le tabelle.
Immagini e video
-
Utilizzare URL di origine dell'immagine assoluti
Invece di includere un'immagine come (), è necessario includere l'URL
assoluto del file, ad esempio ()
-
Usa sempre i tag alt (
)
La maggior parte dei client di posta elettronica disabilita le immagini per impostazione predefinita. A meno che tu non abbia tag alt, i tuoi iscritti vedranno solo una casella vuota. Con un tag alt, i tuoi iscritti vedranno il testo che hai inserito nel tag. -
Non incorporare video o Flash
Incorporare video direttamente o flash nella tua email non è una buona idea. Molti client di posta elettronica non supportano tale codice e molti programmi di rilevamento di spam e virus contrassegnano la tua email come spam / dannosa. Invece di incorporare il tuo video o flash nella tua email, fai uno screenshot di come appare il video del flash player e incorporalo. Puoi avere il video o il flash aperto nel loro browser quando fanno clic su di esso. -
Le GIF animate non sono completamente supportate
Chiediti se hai bisogno di un'animazione nella tua email. Mentre la maggior parte dei client di posta elettronica supporta GIF animate, Outlook 2007 non lo supporta. I client di posta elettronica che non supportano le GIF animate mostreranno probabilmente il primo fotogramma della sequenza di animazione. -
Fai attenzione alle immagini
giuntate Se hai un'immagine più grande giuntata e inserita nel tuo HTML usando celle di tabella o tag img uno accanto all'altro, dovrai testare a fondo. Alcuni client di posta elettronica possono aggiungere spazio extra tra le immagini e causare un brutto aspetto dell'email. -
Evita di usare le immagini per facilitare il layout Alcune persone usano immagini da 1 o 2 pixel per allineare gli elementi all'interno del layout
. Alcuni client di posta elettronica o filtri penseranno che sia una potenziale immagine di tracciamento letta o aperta e penalizzeranno l'email. -
Testare l'email con le immagini disabilitate Poiché la maggior parte dei client di posta elettronica mostra email con immagini disabilitate per impostazione predefinita, è necessario verificare l'aspetto dell'email con le immagini disabilitate
. -
Guarda le dimensioni
dei tuoi file Come con il web design tradizionale, vuoi essere consapevole delle dimensioni dei file di immagine per la tua email. Cerca di tenerli bassi per assicurarti che vengano scaricati rapidamente per i tuoi iscritti.
Priorità bassa
-
Le immagini di sfondo non sono completamente supportate
Se utilizzi un'immagine di sfondo, ricorda che alcuni client di posta elettronica non le mostreranno. Se desideri comunque utilizzare un'immagine di sfondo, utilizza le opzioni di sfondo HTML invece di utilizzare CSS per dichiarare uno sfondo. -
Colori di sfondo dell'intero corpo
Molti client di posta elettronica (come Gmail) non mostrano il colore di sfondo impostato per il corpo principale (tag). Se stai impostando un colore di sfondo nel tag del corpo, dovresti anche avere un div di ritorno a capo con un colore di sfondo che circonda il contenuto. In questo modo, anche se il colore di sfondo del corpo non è supportato, avrai qualcosa di simile.
Varie
-
Non mettere nulla sopra l'apertura
Tutto ciò che metti sopra il body tag verrà probabilmente rimosso e inutilizzato. -
Non includere javascript
È probabile che venga rimosso nella maggior parte dei client di posta elettronica e i filtri antispam potrebbero rilevarlo come codice dannoso. -
Evita Microsoft Office
L'HTML generato garantirà quasi i problemi. Inoltre, quando si copia e incolla da Office, si incollerà la loro formattazione e probabilmente si verificheranno problemi di progettazione.