Il blocco HTML personalizzato ti consente di aggiungere il tuo codice alle email nell'Editor email di Omnisend. Usalo per incorporare widget di terze parti, applicare stili personalizzati o inserire elementi di contenuto avanzati come timer di conto alla rovescia.
Due modi per utilizzare HTML personalizzato in Omnisend:
Blocco HTML (trascina e rilascia nell'Editor email): Aggiungi frammenti di codice all'interno di un'email. Usa per widget, tabelle o CSS personalizzati.
Importa il template HTML (Impostazioni Negozio → Template email salvati): Carica un design email completo codificato esternamente. Scopri di più: Importa Template email HTML
Questo articolo tratta del flusso HTML per le campagne Email e i Flussi automatizzati.
Prima di iniziare
Avrai bisogno di una conoscenza pratica di HTML e CSS inline. Il blocco HTML richiede di scrivere o modificare manualmente il codice.
Il blocco HTML supporta solo contenuti del corpo. Rimuovi
<!DOCTYPE><head><body>Non tutti i tag HTML sono supportati. Elementi come
<iframe><script><div><font>tag supportati di seguito.Testa sempre la tua email inviandola a te stesso prima di lanciare. Il rendering varia tra Gmail, Outlook, Apple Mail e altri client.
Prima di aggiungere HTML, controlla:
Rimuovi i tag
<!DOCTYPE>,<head>e<body>– il blocco HTML supporta solo contenuti del corpoIncolla da un editor di testo semplice o usa 'Cancella formattazione' se copi da Canva, Word o editor visivi
Mantieni i tag
<p></p>vuoti anche se non utilizzati – sono richiesti per la validazioneAssicurati che gli URL delle immagini inizino con
https://e siano accessibili pubblicamente
Aggiungi un blocco HTML personalizzato
1. Nell'Editor email, apri il menu Aggiungi elementi e trascina il blocco HTML nel contenuto della tua email.
2. Clicca sul blocco HTML per aprire l'editor HTML nella barra laterale destra.
3. Incolla o scrivi il tuo codice HTML nell'editor.
4. Clicca su Salva.
Il blocco HTML ti consente di aggiungere codice personalizzato come timer di conto alla rovescia, tabelle e widget. Usa CSS inline per lo stile e testa la tua email prima di inviarla.
💬 Scopri di più sui Fondamenti dell'HTML per Email.
Tag HTML consentiti ed elementi CSS supportati
Per garantire che le tue email siano compatibili con i principali client di posta elettronica, il blocco HTML supporta solo un insieme limitato di tag HTML, attributi e stili CSS.
⚠️ Nota: Il blocco HTML supporta solo la parte <body> dell'email. La sezione <head> dovrebbe essere omessa.
Tag HTML supportati
<a><p><br><span><hr><ul><li><ol><u><strong><em><s><sub><sup><pre><h1><h2><h3><img><table><tr><td>
Visualizza la lista completa con attributi:
Tag HTML | Supportato | Note/limitazioni |
| ✅ Sì | I link sono supportati da tutti i principali client email |
| ✅ Sì | Viene visualizzato come testo in grassetto |
| ✅ Sì | Stessa visualizzazione di |
| ✅ Sì | Viene visualizzato come testo in corsivo |
| ✅ Sì | Stessa visualizzazione di |
| ✅ Sì | Il supporto per la sottolineatura varia leggermente a seconda del client |
| ✅ Sì | Il supporto per il testo barrato può variare visivamente |
| ✅ Sì | Stesso comportamento di |
| ✅ Sì | Stili in linea solo |
| ✅ Sì | Il distanziamento dei paragrafi può differire a seconda del client |
| ✅ Sì | I ritorni a capo sono supportati |
| ✅ Sì | L'indentazione e il distanziamento variano a seconda del client |
| ✅ Sì | La dimensione del font e il spacing possono differire a seconda del client email |
| ✅ Sì | Le immagini devono utilizzare URL assoluti |
| ✅ Sì | Consigliato per il layout |
| ✅ Sì | Struttura supportata; lo stile può variare |
| ✅ Sì | Ampiamente supportato |
| ✅ Sì | Usa con cautela per il layout |
| ✅ Sì | Lo stile è limitato in alcuni client |
Sebbene questi tag HTML siano supportati nelle email di Omnisend, il rendering può variare tra i client di posta elettronica (come Gmail, Outlook, Apple Mail e app mobili).
Elementi di collegamento e stile supportati
Supporto per l'elemento HTML <link>
Utilizzo | Supportato | Note |
| ❌ No | I fogli di stile esterni vengono ignorati o rimossi dalla maggior parte dei client email |
| ❌ No | Non supportato nell'HTML dell'email |
Importante: I client email fanno non supporta file CSS esterni. Qualsiasi stile aggiunto utilizzando <link>
Buona pratica: Usa sempre CSS inline o, in casi limitati, un <style>
<style>
Utilizzo | Supportato | Note |
| ⚠️ Parziale | Supportato in molti client, ma non in tutti |
| ⚠️ Parziale | Può essere rimosso o ignorato da alcuni client |
Limitazioni importanti:
Outlook (Windows) ha supporto CSS limitato anche quando
<style>è consentitoAlcuni client email spostano o riscrivono i blocchi
<style>Il CSS all'interno dei
<style>blocchi può essere ignorato in parte
Buona pratica:
Per il rendering più affidabile:
Usa CSS inline ogni volta che è possibile
Usa
<style>blocchi solo per regole semplici e non criticheEvita di fare affidamento su
<style>blocchi per layout o comportamento reattivo
Proprietà CSS supportate
Il blocco HTML supporta solo CSS inline (tramite attributi style=).
Categorie CSS supportate:
Proprietà di sfondo
Proprietà di box e bordo
Proprietà di testo
Proprietà di tabella
Media queries
Proprietà di sfondo CSS supportate
Proprietà CSS | Supportato | Note/limitazioni |
| ✅ Sì | Completamente supportato da tutti i client email |
| ⚠️ Parziale | Non supportato in Outlook (Windows). Usa colori di sfondo di fallback |
| ⚠️ Parziale | Ignorato da alcune versioni di Outlook |
| ⚠️ Parziale | Comportamento incoerente in Outlook |
| ⚠️ Parziale | Non supportato in Outlook (Windows) |
Consiglio: Imposta sempre un background-color
Proprietà CSS di box e bordo
proprietà CSS | Supportato | Note/limitazioni |
| ✅ Sì | Completamente supportato |
| ⚠️ Parziale | Non supportato in Outlook (Windows) |
| ❌ No | Non supportato in modo affidabile |
| ❌ No | Ignorato in molti client, specialmente Outlook |
| ✅ Sì | Completamente supportato |
| ⚠️ Parziale | Può comportarsi in modo incoerente in Outlook |
| ⚠️ Parziale | Non supportato in Outlook (Windows) |
| ⚠️ Parziale | Non supportato in Outlook (Windows) |
Consiglio: Utilizza layout basati su tabelle con larghezze fisse per i risultati più coerenti.
query media CSS
caratteristica CSS | Supportato | Note/limitazioni |
| ⚠️ Parziale | Non supportato in Outlook (Windows) o Outlook.com |
| ⚠️ Parziale | Ignorato da Outlook (Windows) |
| ⚠️ Parziale | Ignorato da Outlook (Windows) |
| ⚠️ Parziale | Non supportato in Outlook |
Importante: Il design responsivo funziona meglio in Apple Mail, app mobili di Gmail e Yahoo Mail, ma non in Outlook (Windows).
proprietà di testo CSS
proprietà CSS | Supportato | Note/limitazioni |
| ✅ Sì | Utilizza solo font web-safe |
| ⚠️ Parziale | Outlook potrebbe sovrascrivere i valori |
| ⚠️ Parziale | Alcuni pesi potrebbero non essere visualizzati come previsto |
| ✅ Sì | Completamente supportato |
| ⚠️ Parziale | Supporto limitato |
| ⚠️ Parziale | Può essere ignorato in alcuni client |
| ✅ Sì | Ampiamente supportato |
| ✅ Sì | Completamente supportato |
| ⚠️ Parziale | Supporto incoerente |
| ❌ No | Non supportato in modo affidabile tra i client |
Consiglio: Attieniti ai font di sistema come Arial, Helvetica, Georgia o Times New Roman.
Proprietà della tabella CSS
Proprietà CSS | Supportato | Note/limitazioni |
| ⚠️ Parziale | Outlook ha un comportamento incoerente |
| ⚠️ Parziale | Non supportato in Outlook (Windows) |
| ⚠️ Parziale | Supporto limitato |
Buona pratica: Usa gli attributi della tabella HTML (cellpaddingcellspacing
Note aggiuntive
Il supporto di Omnisend non può assistere con problemi di codice personalizzato. Se il tuo elemento personalizzato non viene visualizzato come previsto, contatta il fornitore del frammento di codice o consulta uno sviluppatore.
Testa sempre prima di inviare. Il rendering delle email varia tra i client (Gmail, Outlook, Apple Mail, ecc.).
Risoluzione dei problemi
Il mio blocco HTML scompare o non si salva. Cosa c'è che non va?
Il tuo codice contiene tag non supportati o problemi di codifica.
Per risolvere:
Copia il tuo HTML e incollalo in htmlcorrector.com, quindi incolla la versione ripulita di nuovo in Omnisend.
Se hai copiato da Word, Canva o un altro editor, seleziona il testo in Omnisend e fai clic su Cancella formattazione prima di salvare.
Controlla di non aver rimosso i tag wrapper
<p></p>richiesti – sono necessari per la validazione anche se vuoti.
Tag non supportati che causano errori:
<iframe><script><div><font><video><audio><object><embed>
L'anteprima mostra uno schermo vuoto anche se il codice sembra corretto nel builder.
Le anteprime vuote di solito significano che gli URL delle immagini mancano di https://, o hai rimosso i tag wrapper richiesti.
Per risolvere:
Verifica che tutti gli URL delle immagini inizino con
https://e siano accessibili pubblicamente.Controlla che i tag
<p></p>siano presenti (anche se vuoti).Testa prima con HTML semplice:
<p style="color:blue;">Test</p>. Se funziona, aggiungi gradualmente il tuo codice completo per isolare il problema.
Posso modificare il codice HTML completo della mia intera email (non solo il blocco HTML)?
No. L'Editor email di Omnisend è visivo e non fornisce un editor HTML raw per l'intera email.
Puoi modificare HTML solo all'interno di singoli blocchi HTML personalizzati.
Per modificare l'HTML completo dell'email:
Apri la tua email nell'Editor email.
Usa l'Inspect del browser → visualizza
#document→ copia l'intero HTML.Modifica l'HTML esternamente.
Re-importa tramite Impostazioni Negozio → Template email salvati → Importa Template → Incolla codice HTML.
Sto usando CSS !important per controllare i colori della modalità scura, ma non funziona.
I client email come Gmail, Outlook e Apple Mail sovrascrivono il CSS in modalità scura indipendentemente dalle dichiarazioni !important.
Raccomandazione:
Progetta la tua email per apparire bene sia in modalità chiara che scura. Testa utilizzando Anteprima → Modalità scura prima di inviare.
⚠️ Nota: Il comportamento della modalità scura è controllato dal client email del destinatario, non dal tuo codice. Alcuni client invertono automaticamente i colori; altri applicano aggiustamenti selettivi.
Ricevo un errore che dice "Il tuo codice HTML necessita di aggiustamenti." Come posso trovare il problema specifico?
Omnisend non evidenzia la linea esatta che causa l'errore.
Per risolvere:
Usa htmlcorrector.com per correggere automaticamente i problemi comuni.
Controlla manualmente i tag non supportati come
<iframe>,<script>,<div>,<font>,<!DOCTYPE>,<head>.Prova a incollare HTML di test semplice (ad es.,
<p>Test</p>) per confermare che il blocco funzioni, quindi aggiungi il tuo codice completo in sezioni.
Casi d'uso
Timer di conto alla rovescia
Puoi aggiungere timer di conto alla rovescia alle Campagne Email o ai Flussi automatizzati utilizzando il blocco HTML personalizzato.
Scegli la tua configurazione:
Campagne Email: Timer di conto alla rovescia statico (data/ora di fine fissa)
Flussi automatizzati: Timer di conto alla rovescia dinamico (calcola dal momento dell'invio)
Timer di conto alla rovescia nelle campagne email
Passo 1: Trascina e rilascia il Blocco HTML nel tuo Template email.
Passo 2: Crea un timer di conto alla rovescia:
Vai a Sendtric e genera un timer di conto alla rovescia.
⚠️ Nota: Sendtric richiede un piano a pagamento per timer di conto alla rovescia attivi.Clicca Genera e copia il codice.
Passo 3: Incolla il codice nel blocco HTML in Omnisend e clicca Salva.
Per centrare il timer:
Trova
style="display: block;"Sostituisci con
style="display: block; margin-left: auto; margin-right: auto; width: 50%"
Per rendere il timer dinamico (conta dal momento di invio):
Aggiungi [[ current_date | date: "%s" | plus: 86400 ]] all'URL dell'immagine.
Questa funzione converte la data/ora attuale in secondi e aggiunge 86400 secondi (1 giorno) al momento di invio.
Esempio:
<img src="http://gen.sendtric.com/countdown/vtkfdyi20u?to=[[ current_date | date: '%s' | plus: 86400 ]]" style="display: block;" />
Puoi cambiare 86400 con qualsiasi numero di secondi. Ad esempio:
86400 secondi = 1 giorno
172800 secondi = 2 giorni
604800 secondi = 7 giorni
💡 Alternative gratuite: NiftyImages offre timer dinamici gratuiti. Puoi anche utilizzare la nostra integrazione di terze parti: Essential Email Countdown Timer.
Timer di conto alla rovescia nei flussi automatizzati
Per i Flussi automatizzati, hai bisogno di un timer dinamico che calcola la data di scadenza ogni volta che l'Email viene inviata.
Strumento consigliato: NiftyImages (piano gratuito disponibile)
💬 Guarda la Guida Video NiftyImages per familiarizzare con i timer dinamici.
Esempio di caso d'uso: Aggiungi un timer di conto alla rovescia dinamico che scade quando scade un codice sconto (2 giorni dopo l'invio dell'email).
Nota! Per rendere il timer del conto alla rovescia dinamico, seleziona la casella di controllo 'Tag di unione Email'.
💬 Ti consigliamo di guardare la Guida Video NiftyImages per familiarizzare con i timer dinamici e come funzionano.
Aggiungiamo il nostro timer basato su un caso d'uso specifico: immagina di voler un timer dinamico che scade alla fine della vendita (utilizzando un articolo in sconto).
Passo 1. Crea il tuo flusso automatizzato in Omnisend → Apri l'Editor email e aggiungi un blocco sconto per la tua vendita. Imposta la data di scadenza per il tuo sconto, che sarà la stessa della data di scadenza per il tuo timer.
Importante! In Shopify, il codice sconto scade alle 12:00 AM nella data che selezioni in Omnisend. Quindi devi regolare il timer del conto alla rovescia per corrispondere a quella data di scadenza.
Passo 2. Aggiungi qui un codice HTML con un timer di conto alla rovescia che mostra quando scade il codice sconto. Copia il Anno-Mese-Giorno e Offset del Fuso Orario HTML dalle immagini Nifty e aggiungilo all'Elemento HTML in Omnisend.
Ora devi cambiare il formato della data nel formato data di Omnisend. Trova la data nel tuo codice. Vedrai che c'è un trattino tra ogni tag di personalizzazione, che sostituirai con i tag di data dinamici di Omnisend.
Rimuovi la parte della data dal codice e inserisci i tag di personalizzazione di Omnisend:[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].
Una volta sostituita, la data mostrerà zeri, ma quando l'Email verrà inviata, qui verrà mostrata una data reale perché abbiamo aggiunto i tag di personalizzazione.
Passo 3. Regola il fuso orario. Nella personalizzazione, vedrai un fuso orario impostato sull'ora di Greenwich. Devi cambiarlo con il fuso orario del tuo account. Come mostrato nello screenshot qui sotto, cambia "T00:00:00-07" in "T00:00:00+2," ecc., in base al tuo fuso orario.
Passo 4. Il tuo timer è impostato sulla data odierna, ma vuoi anche che conti dinamicamente fino alla fine della tua vendita (la scadenza dello sconto è impostata su 2 giorni).
Ad esempio, se il tuo codice sconto scade in 2 giorni, hai bisogno che il tuo timer funzioni dinamicamente per 72 (non conta oggi, quindi devi aggiungere 24h a 2 giorni).
Per questo, vai su Niftyimages, copia questo codice, torna all'elemento HTML in Omnisend e posizionalo subito dopo il tag di formato. Si prega di notare che il numero di ore dovrebbe essere regolato in base alla durata delle tue vendite. Se il tuo sconto scade in 10 giorni, devi mettere 264 (240h+24h).
Ecco un esempio di codice incollato in Omnisend:
Ecco fatto; hai impostato il timer per funzionare fino alla fine della tua promozione. Si prega di ricordare che puoi testare l'automazione solo attivandola tu stesso.
⚠️ Test: Puoi testare solo i Flussi automatizzati attivandoli tu stesso (ad esempio, effettuando un ordine di prova).
Importazione di HTML da Canva
Se hai progettato la tua Email in Canva e vuoi importarla come un Template email completo:
Esporta il tuo design di Canva come HTML.
Apri il file HTML in un editor di testo (ad es., Notepad, TextEdit).
Elimina la dichiarazione
<!DOCTYPE>e l'intera sezione<head>.Copia il codice rimanente e incollalo in htmlcorrector.com per pulirlo.
In Omnisend, vai a Impostazioni Negozio → Template email salvati → Importa Template → Incolla codice HTML.
Incolla l'HTML ripulito e salva.
Domande generali? Non esitare a contattare il nostro team di supporto. Siamo disponibili tramite chat in-app e a [email protected].