Impostazioni dell’editor email drag-and-drop di Stripo

Published: 22 ottobre 2024 · Last updated: 21 luglio 2026 · By Marcus Biel

Sul lato destro dell’editor email di Maildroppa trovi la colonna Impostazioni email, che offre strumenti per aiutarti a strutturare e personalizzare il contenuto e l’aspetto della tua email. Questa colonna è suddivisa in due schede: Contenuto e Aspetto.

Scheda Contenuto

La scheda Contenuto è il punto in cui progetti e organizzi il contenuto della tua email. Contiene due sezioni principali: Strutture e Blocchi.

1. Strutture

Le strutture definiscono il layout della tua email organizzando il contenuto in righe e colonne. Puoi scegliere tra diversi layout predefiniti, come:

• Una colonna
• Due colonne
• Più colonne

Non sei limitato a queste opzioni: puoi combinare più blocchi per creare qualsiasi layout personalizzato desideri, con la massima flessibilità per soddisfare le tue esigenze di design.

• Trascina e rilascia: trascina semplicemente una struttura da questa sezione e rilasciala nell’area di progettazione dell’email per iniziare ad aggiungere contenuti.
• Personalizzazione: una volta aggiunta una struttura, puoi riempirla con diversi blocchi di contenuto, come immagini, testo o pulsanti.

2. Blocchi

I blocchi sono gli elementi di contenuto che inserisci nelle strutture per creare la tua email.

I tipi di blocco disponibili sono:

• Immagine: carica immagini (PNG, JPG, GIF) e personalizzane l’aspetto.
• Testo: aggiungi e formatta il testo per comunicare il tuo messaggio.
• Pulsante: aggiungi pulsanti cliccabili con testo, link e stili personalizzabili.
• Spaziatore: inserisci uno spazio vuoto per regolare il layout tra gli altri blocchi.
• Video: incorpora contenuti video da piattaforme come YouTube, Vimeo e altre.
• HTML: aggiungi codice HTML e CSS personalizzato per personalizzare contenuti email avanzati.

Ogni blocco è progettato per essere flessibile e personalizzabile, permettendoti di creare un’email in linea con l’identità visiva del tuo brand.

Spiegazione dettagliata dei blocchi di contenuto

Blocco Immagine

Il Blocco Immagine nell’editor email drag-and-drop di Stripo ti permette di aggiungere e personalizzare le immagini nella tua campagna email.

Aggiungere un Blocco Immagine

Puoi aggiungere un Blocco Immagine alla tua email in due modi:

Opzione 1

Passa il cursore sull’area "Rilascia qui il contenuto" di una struttura, quindi fai clic sull’icona Immagine. La struttura selezionata verrà immediatamente trasformata in un blocco immagine.

Opzione 2

Vai alla sezione Blocchi nella scheda Contenuto. Trascina il Blocco Immagine nella struttura desiderata del layout della tua email. Questo metodo ti offre un maggiore controllo sulla posizione esatta dell’immagine.

Caricare un’immagine

Dopo aver aggiunto il Blocco Immagine, hai due metodi per caricare un’immagine:

Trascina e rilascia

Puoi trascinare direttamente un file immagine (PNG, JPG, GIF) dal computer nella casella di caricamento che appare all’interno del Blocco Immagine.

Carica dal computer

In alternativa, puoi fare clic sull’icona della nuvola nel Blocco Immagine per aprire il browser dei file e selezionare un’immagine dal computer (fino a 2 MB). Una volta selezionata, l’immagine apparirà sia nel blocco sia nella scheda contenuto sulla destra.

Cambiare l’immagine

Per sostituire l’immagine, usa l’opzione Cambia immagine disponibile nella scheda contenuto. Fai clic sull’icona circolare Cambia immagine, che ti permetterà di caricare una nuova immagine o collegarne una da un URL esterno.

Modificare l’immagine

Dopo aver caricato un’immagine, potresti voler apportare ulteriori modifiche direttamente nella piattaforma. l’Editor immagini integrato di Stripo ti permette di migliorare e modificare le immagini senza uscire dall’editor email.

Accedere all’Editor immagini

1. Dopo aver caricato un’immagine, fai clic sul pulsante Modifica immagine. Si aprirà l’interfaccia dell’Editor immagini.
2. L’editor offre un’ampia gamma di strumenti, visualizzati nella barra del menu superiore.

Strumenti di modifica delle immagini disponibili

• Filtri Applica vari filtri con un solo clic, come:

  • Scala di grigi
  • Bianco e nero
  • Nitidezza
  • Inverti
  • Seppia
  • Luminosità
  • Colore

• Ridimensiona Regola le dimensioni dell’immagine. Puoi:

  • Definire una larghezza e un’altezza specifiche.
  • Mantenere le proporzioni.

• Ritaglia Seleziona la parte dell’immagine da mantenere e rimuovi quelle indesiderate.

• Trasforma Ruota o capovolgi l’immagine:

  • Orizzontalmente
  • Verticalmente

• Disegna Usa lo strumento di disegno per aggiungere elementi a mano libera, come linee o forme personalizzate, sopra l’immagine.

• Testo Aggiungi testo direttamente all’immagine. Personalizza:

  • Font
  • Dimensione
  • Colore
  • Allineamento

• Forme e adesivi Migliora l’immagine sovrapponendo:

  • Forme predefinite
  • Adesivi divertenti

• Cornici Scegli tra una selezione di cornici per dare all’immagine un bordo elegante.

• Angoli Regola lo stile degli angoli per un aspetto più curato.

• Sfondo Rimuovi o sostituisci lo sfondo di un’immagine per un aspetto più pulito.

Salvare le modifiche

Dopo aver apportato le modifiche desiderate, fai clic sul pulsante Salva in alto a sinistra dell’editor. L’immagine modificata sostituirà automaticamente l’originale nel layout della tua email.

Impostazioni immagine

Dopo aver caricato l’immagine, puoi personalizzarla usando le opzioni Impostazioni immagine disponibili nella scheda Contenuto sulla destra.

Link

Aggiungi un link all’immagine. Puoi scegliere tra vari tipi di link, come:

• Sito web (HTTP, HTTPS)
• Email (mailto:)
• File (ftp)
• Condivisione sui social (Facebook, X (in precedenza Twitter), LinkedIn, Pinterest)

Puoi trovare queste opzioni nel menu a discesa delle impostazioni del link.

Testo alternativo

Aggiungi un testo alternativo che verrà visualizzato se l’immagine non viene caricata. Questo testo è utile anche per l’accessibilità, perché consente agli screen reader di descrivere l’immagine ai destinatari con disabilità visive.

Allineamento

Scegli come allineare l’immagine all’interno del contenitore. Puoi allinearla a Sinistra, Centro o Destra.

Dimensioni

Regola manualmente la larghezza e l’altezza dell’immagine usando i pulsanti più/meno o digitando le dimensioni desiderate.

Puoi anche attivare l’opzione "Adatta alla larghezza" per fare in modo che l’immagine si adatti automaticamente all’intera larghezza del contenitore.

Immagine reattiva

Attiva l’opzione "Immagine reattiva" per assicurarti che l’immagine si adatti alle diverse dimensioni dello schermo, soprattutto sui dispositivi mobili.

Spaziatura interna

Personalizza la spaziatura intorno all’immagine per controllare lo spazio tra l’immagine e il contenuto circostante. Puoi applicare una spaziatura uniforme o personalizzarla per ogni lato (Superiore, Inferiore, Sinistro, Destro).

Link di ancoraggio

Puoi assegnare un link di ancoraggio all’immagine, consentendo ai destinatari di passare a una sezione specifica della stessa email quando fanno clic sull’immagine. Tuttavia, tieni presente che i link di ancoraggio potrebbero non funzionare in alcuni client email, come Gmail e Apple Mail.

Blocco Testo

Migliora i tuoi blocchi di testo personalizzandone l’aspetto e le funzionalità con le impostazioni seguenti. Ogni opzione ti consente di definire con precisione la visualizzazione del testo, assicurandoti che sia perfettamente in linea con le tue preferenze di design.

Barra degli strumenti del testo

Quando fai clic all’interno di un blocco di testo, sopra l’area del contenuto appare la barra degli strumenti del testo, che offre un accesso rapido a molte opzioni comuni di formattazione del testo. Ecco le funzioni disponibili nella barra degli strumenti:

1. Formato paragrafo

Imposta lo stile del paragrafo scegliendo opzioni come Normale per il testo standard o vari livelli di intestazione (Intestazione 1 fino a Intestazione 6) per creare una gerarchia strutturata nella tua email. Questo rende il contenuto più leggibile e organizzato.

2. Famiglia di font

Il font predefinito è Arial, ma puoi scegliere tra una varietà di font, incluse opzioni comuni come Georgia, Helvetica e Courier New. È disponibile anche una funzione di ricerca per trovare rapidamente un font specifico.

3. Dimensione del font

Regola la dimensione del font da 8pt a 72pt. Il valore predefinito è 14pt, adatto alla maggior parte dei testi del corpo delle email. Usa il menu a discesa per impostare rapidamente la dimensione desiderata.

4. Stile del testo

Applica uno stile al testo usando le seguenti opzioni:

• Grassetto (B): evidenzia il testo rendendolo in grassetto.
• Corsivo (I): formatta il testo in corsivo per un aspetto più stilizzato.
• Sottolineato (U): sottolinea il testo, comunemente usato per i collegamenti ipertestuali.
• Barrato (S): traccia una linea sul testo, utile per modifiche o contenuti rimossi.

5. Stile avanzato del testo (menu con tre puntini)

Facendo clic sui tre puntini nella barra degli strumenti si espandono altre opzioni:

• Pedice: abbassa il testo sotto la linea di base (utile per note a piè di pagina o formule chimiche).
• Apice: alza il testo sopra la linea di base (comunemente usato per esponenti o numeri ordinali).
• Rimuovi formattazione: elimina ogni formattazione applicata, riportando il testo allo stile predefinito.

6. Colore del testo e dello sfondo

• Colore del testo: fai clic sul pulsante Colore del testo per scegliere da una tavolozza o inserire un codice esadecimale e controllare con precisione il colore del testo.
• Colore di sfondo: seleziona un colore di sfondo (evidenziazione) per il testo.

7. Allineamento del testo

Allinea il testo all’interno del blocco:

• Allinea a sinistra: allinea il testo a sinistra.
• Centra: centra il testo.
• Allinea a destra: allinea il testo a destra.
• Giustifica: distribuisce uniformemente il testo per tutta la larghezza del blocco.

8. Elenchi

Crea elenchi ordinati (numerati) e non ordinati (puntati):

• Inserisci/Rimuovi elenco puntato: aggiunge o rimuove i punti elenco.
• Inserisci/Rimuovi elenco numerato: aggiunge o rimuove un elenco numerato.

9. A capo automatico

Attiva o disattiva l’andata a capo all’interno del blocco di testo. Quando è attiva, le righe di testo lunghe passano automaticamente alla riga successiva.

10. Rientro

Regola il rientro del testo:
- **Aumenta rientro**: allontana il testo dal margine, utile per sottoelenchi o citazioni.
- **Diminuisci rientro**: riduce il rientro, avvicinando il testo al margine sinistro.
![Rientro del testo](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Inserisci collegamento ipertestuale

Scopri come aggiungere, modificare e gestire i collegamenti ipertestuali nei contenuti della tua email.

Passaggi per aggiungere o modificare un link

a) Evidenzia il testo

Seleziona il testo che vuoi trasformare in un collegamento ipertestuale.

b) Fai clic sull’icona del link

Nella barra degli strumenti del testo, fai clic sull’icona del link.

c) Modifica il link nel pannello delle impostazioni

Apparirà il pannello delle impostazioni di destra con le opzioni del link:

• Campo Link: inserisci l’URL o seleziona un’opzione predefinita.
• Tag: aggiungi tag per etichettare gli iscritti o attivare automazioni.

Correggere i link dopo l’invio

Non c’è niente di peggio che inviare una nuova campagna ai tuoi 2.365 iscritti e scoprire che uno dei link è rotto a causa di un semplice errore di battitura. Addio alle vendite del Black Friday!

Fortunatamente, abbiamo reso possibile correggere i link non funzionanti anche dopo che l’email è già stata inviata ai tuoi iscritti.

a) Visualizza campagna

Trova la campagna inviata nella panoramica, fai clic sui tre puntini e scegli Visualizza campagna.

b) Modifica link o tag

Scorri fino all’elenco dei link nei dettagli della campagna per:

• Aggiornare le destinazioni dei link: correggere gli URL errati.
• Gestire i tag: aggiungere o rimuovere tag per le automazioni.

Nota: assicurati che il Monitoraggio dei clic sia attivato nelle impostazioni della campagna per usare la funzione di retargeting dei link.

Personalizzare l’aspetto dei link

Nel pannello delle impostazioni di destra, puoi modificare l’aspetto del link:

• Colore del link: seleziona un colore o inserisci un codice esadecimale.

• Sottolinea i link: attiva o disattiva la sottolineatura per un aspetto più pulito.

12. Tag di personalizzazione

Usa i Tag di personalizzazione per aggiungere contenuti dinamici, come il nome del destinatario o altri campi personalizzati.

• Accedi al menu a discesa Tag di personalizzazione nella barra degli strumenti per selezionare campi comuni come Nome, Email o Paese, oppure definisci campi personalizzati per adattare le email a ogni destinatario.

13. Emoji

Aggiungi un tocco visivo al testo includendo emoji.

• Fai clic sull’icona Emoji nella barra degli strumenti per aprire un elenco categorizzato di emoji, facile da consultare.
• Nota sulla compatibilità: testa le email in alcuni client come Outlook, poiché alcuni potrebbero non visualizzare correttamente le emoji.

14. Tabella e caratteri speciali

Alla fine della barra degli strumenti, fai clic sui tre puntini per visualizzare altre opzioni avanzate.

Inserimento di una tabella

Crea e personalizza tabelle per migliorare il layout della tua email.

• Definisci righe, colonne, spaziatura delle celle, spaziatura interna e dimensione del bordo secondo necessità.

Inserisci caratteri speciali

Arricchisci il testo con simboli, caratteri accentati e altri caratteri non standard.

• Accedi all’opzione Caratteri speciali per consultare un’ampia varietà di caratteri.

Impostazioni aggiuntive del Blocco Testo (pannello destro)

Il pannello destro offre un controllo completo sull’aspetto e sulle funzionalità dei blocchi di testo. Di seguito sono riportate le impostazioni disponibili:

1. Colore del testo

Definisci il colore del testo usando il selettore dei colori o inserendo un codice esadecimale.

2. Colore di sfondo

Imposta un colore di sfondo personalizzato per il blocco di testo. Per impostazione predefinita, lo sfondo è trasparente.

3. Impostazioni specifiche dei link

Quando il blocco di testo contiene link, nelle impostazioni vengono visualizzate opzioni aggiuntive:

• Colore del link: regola il colore dei link usando il selettore dei colori o un codice esadecimale.

• Sottolinea i link: attiva o disattiva la sottolineatura per i link all’interno del blocco di testo.

• Modifica dei link: Seleziona un link nell’area del contenuto per modificarne l’URL nel pannello delle impostazioni. Puoi anche assegnare o aggiornare i tag del link usando il menu a discesa denominato "Tag".

4. Allineamento

Allinea il blocco di testo all’interno del contenitore: Sinistra, Centro o Destra.

5. Altezza fissa

Imposta un’altezza fissa per il blocco di testo attivando questa opzione. Puoi anche controllare l’allineamento verticale del testo: In alto, Al centro o In basso.

6. Interlinea

Controlla lo spazio tra le righe di testo. Scegli tra Stretta, Normale o Ampia.

7. Spaziatura interna

Regola lo spazio intorno al blocco di testo. Applica una spaziatura uniforme o personalizza ogni lato: Superiore, Inferiore, Sinistro e Destro.

8. Link di ancoraggio

Crea link di ancoraggio per permettere ai lettori di passare a sezioni specifiche della tua email. Nota che alcuni client email non supportano i link di ancoraggio.

Blocco Pulsante

Il Blocco Pulsante ti consente di aggiungere alla tua email un pulsante cliccabile con impostazioni personalizzabili per funzionalità e stile.

Impostazioni del link

L’opzione Link determina l’azione attivata quando un destinatario fa clic sul pulsante.

Tipi di link disponibili

• Link a un sito normale (HTTP o HTTPS): indirizza l’utente a una pagina web.
• Link email: apre il client email dell’utente per comporre una nuova email.
• Link a un file (FTP, FTPS): collega a un file su un server FTP.
• Skype: avvia una chiamata o una chat Skype.
• Telefono (tel): avvia una chiamata sui dispositivi compatibili.
• SMS: apre l’app di messaggistica con il numero del destinatario già inserito.
• Viber: apre l’app Viber per messaggi o chiamate.
• Altro tipo di protocollo: specifica un protocollo personalizzato non elencato sopra.

Opzioni di condivisione sui social

Puoi anche impostare il pulsante per la condivisione sui social o via email:

• Facebook
• X (in precedenza Twitter)
• LinkedIn
• Pinterest
• Condivisione via email

Campo URL

Accanto al tipo di link, il Campo URL (che in genere inizia con https://) consente di inserire l’indirizzo specifico corrispondente al tipo di link.

Etichetta del pulsante

Personalizza l’etichetta del pulsante per riflettere la tua call to action. L’etichetta predefinita è "Pulsante", ma puoi cambiarla con opzioni come "Scopri di più", "Iscriviti ora" o "Acquista ora".

Stile del testo

Le impostazioni dello Stile del testo consentono di modificare l’aspetto del testo del pulsante.

Selezione del font

Scegli tra una varietà di font standard, tra cui:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Per i font non standard, sono disponibili anche:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Nella parte superiore dell’elenco dei font, una casella di ricerca ti aiuta a trovare rapidamente un font specifico.

Dimensione e formattazione del font

• Dimensione del font: scegli un valore da 8 a 72, in base alla visibilità che vuoi dare al testo del pulsante.
• Formattazione del testo: applica lo stile Grassetto o Corsivo usando le icone "B" o "I" per enfatizzare il testo del pulsante.

Impostazioni del colore

Personalizza l’aspetto del pulsante modificandone le impostazioni del colore.

1. Colore del pulsante: cambia il colore di sfondo del pulsante. Il valore predefinito è verde (#31cb4b). Usa il campo del codice esadecimale o il selettore dei colori per scegliere un nuovo colore.

2. Colore del testo: definisci il colore del testo del pulsante. Il valore predefinito è bianco (#ffffff). Scegli un colore che contrasti bene con lo sfondo del pulsante per garantire la leggibilità.

3. Colore di sfondo: regola lo sfondo del contenitore del pulsante. Per impostazione predefinita è trasparente, ma puoi cambiarlo per far risaltare il pulsante rispetto allo sfondo dell’email.

Raggio del bordo

Controlla quanto devono essere arrotondati gli angoli del pulsante usando l’impostazione Raggio del bordo.

• Valore predefinito: 30 (angoli moderatamente arrotondati).
• Intervallo: da 0 (angoli quadrati) a 100 (pulsante a forma di capsula).

Nota: Per assicurarti che gli angoli arrotondati vengano visualizzati correttamente in Microsoft Outlook, attiva l’opzione "Supporto di Outlook" nella scheda Aspetto.

Allineamento

Posiziona il pulsante all’interno dell’area del contenuto usando l’impostazione Allineamento.

• Opzioni: Sinistra, Centro, Destra.
• Uso comune: allineamento centrato per dare risalto, allineamento a sinistra o a destra per mantenere coerenza nel design.

Altezza fissa

Attiva l’opzione Altezza fissa per mantenere costanti le dimensioni del pulsante.

1. Predefinito: disattivata.
2. Altezza minima: 44 pixel.
3. Allineamento verticale del contenuto: quando l’altezza fissa è attivata, allinea il contenuto del pulsante in Alto, Centro o Basso per un posizionamento preciso.

Pulsante con icona

L’opzione Pulsante con icona consente di includere un’icona accanto al testo del pulsante, migliorando l’aspetto visivo e rafforzando la call to action. Questa funzione è disattivata per impostazione predefinita.

• Formati supportati: carica icone in formato PNG, JPG o GIF, con una dimensione massima di 2 MB.
• Posizionamento dell’icona: scegli se visualizzare l’icona a Sinistra o a Destra del testo del pulsante.

Nota: le icone non vengono visualizzate in alcune versioni di Microsoft Outlook per Windows, tra cui:

• Outlook 2002, 2007, 2010, 2013, 2016 e 2019. Questa limitazione dipende dal modo in cui questi client email eseguono il rendering delle email HTML. Tienine conto se una parte significativa del tuo pubblico usa questi client.

Impostazioni del bordo

Personalizza i bordi del pulsante per aggiungere stile e risalto.

• Larghezza del bordo: imposta individualmente la larghezza di ogni lato (sinistro, destro, superiore e inferiore), fino a 40 pixel.
• Stile del bordo: scegli tra gli stili Continuo, Tratteggiato o Puntinato.
• Colore del bordo: usa il selettore dei colori o inserisci un codice esadecimale per abbinare il colore del bordo al tuo brand o schema di design.

Spaziatura interna

Regola lo spazio all’interno del pulsante, tra il contenuto (testo e icona) e il bordo del pulsante.

• Opzioni di personalizzazione: definisci i valori della spaziatura per i lati Sinistro, Destro, Superiore e Inferiore, fino a un massimo di 99 pixel.
• Impatto: la spaziatura interna influisce sulle dimensioni complessive del pulsante e sulla posizione del contenuto al suo interno.

Spaziatura esterna

Controlla lo spazio esterno al pulsante per regolarne la posizione rispetto agli altri elementi del layout dell’email.

• Opzioni di personalizzazione: imposta i valori della spaziatura esterna per i lati Sinistro, Destro, Superiore e Inferiore, fino a un massimo di 40 pixel.
• Caso d’uso: evita che il pulsante appaia troppo vicino agli altri contenuti o ai bordi dell’email.

Aggiungi link di ancoraggio

Usa i link di ancoraggio per indirizzare i lettori a sezioni specifiche della stessa email, offrendo una navigazione rapida nelle newsletter più lunghe.

• Nome dell’ancora: definisci una destinazione all’interno dell’email e collega il pulsante a questa ancora. Quando viene selezionato, il messaggio scorre fino alla sezione specificata, migliorando la navigazione dell’utente.

Importante: i link di ancoraggio non sono supportati da alcuni client email, tra cui:

• App Gmail per iOS
• Apple Mail per iOS
• App Outlook per Android
• App Outlook per macOS
• Email AMP

Testa accuratamente la tua email per assicurarti che funzioni nei diversi client email e per determinare se questa funzione è adatta al tuo pubblico.

Blocco Spaziatore

Il Blocco Spaziatore ti permette di aggiungere spazio regolabile all’interno del contenuto della tua email, controllandone dimensioni, allineamento, aspetto e spaziatura interna. Di seguito trovi i dettagli sui due tipi di spaziatori: Spaziatore normale e Spaziatore dinamico.

1. Spaziatore normale

Lo Spaziatore normale è un elemento a forma di linea che separa visivamente le sezioni della tua email.

Impostazioni principali

1. Spessore e stile della linea Personalizza spessore, stile e colore della linea:

   • Spessore: regolalo usando i pulsanti + e - (a partire da 1).
   • Stile: scegli tra continuo, tratteggiato o puntinato.
   • Colore: imposta un colore personalizzato usando un codice esadecimale o il selettore dei colori (predefinito: #cccccc).

2. Larghezza Definisci quanto deve estendersi la linea dello spaziatore sul contenuto. Regola la larghezza in pixel usando i pulsanti + e -.

3. Allineamento Allinea la linea a sinistra, al centro o a destra in base al layout.

4. Spaziatura interna Controlla lo spazio interno intorno allo spaziatore:

   • Predefinito: la spaziatura è impostata su 20 per tutti i lati.
   • Usa l’interruttore Altro per specificare la spaziatura dei singoli lati:
     • Superiore
     • Destro
     • Inferiore
     • Sinistro

Caso d’uso

Lo Spaziatore normale è ideale per creare separazioni visive pulite tra le sezioni della tua email, garantendo un layout ordinato e professionale.

2. Spaziatore dinamico

Lo Spaziatore dinamico è un blocco invisibile di spazio vuoto progettato per creare respiro all’interno del layout dell’email.

Funzioni principali

1. Regolazione dell’altezza Regola l’altezza direttamente nell’area del contenuto o tramite il pannello di controllo usando i pulsanti + e -. L’altezza determina quanto spazio verticale viene aggiunto tra le sezioni.

2. Colore di sfondo Per impostazione predefinita, lo spaziatore ha uno sfondo trasparente, ma puoi applicare un colore di sfondo personalizzato usando un codice esadecimale o il selettore dei colori. In questo modo lo spaziatore può fungere da blocco visibile, se necessario.

3. Comportamento reattivo L’opzione Spaziatore reattivo assicura che lo spaziatore si adatti dinamicamente alle diverse dimensioni dello schermo per un layout ottimale su tutti i dispositivi. Questa funzione è attivata per impostazione predefinita.

Differenze principali tra spaziatori normali e dinamici

• Spaziatore dinamico: aggiunge spazio vuoto senza una linea visibile.
• Spaziatore normale: include impostazioni specifiche della linea, come:
  • Larghezza della linea
  • Allineamento
  • Stili della linea
  • Spaziatura interna

Lo Spaziatore dinamico non supporta queste funzioni ed è progettato esclusivamente per creare separazione senza elementi visivi.

3. Aggiungi link di ancoraggio

I link di ancoraggio possono essere applicati a entrambi i tipi di spaziatore, consentendo agli utenti di passare direttamente alla posizione dello spaziatore da un’altra parte dell’email. È particolarmente utile per creare una navigazione interna nelle newsletter più lunghe.

Nota: i link di ancoraggio non sono supportati da alcuni client email, tra cui:

• Microsoft Outlook
• Gmail (su dispositivi mobili)

Blocco Video

Il Blocco Video ti permette di incorporare video nella tua email e personalizzarne l’aspetto e il comportamento. Supporta link video da piattaforme come YouTube e Vimeo, offrendo flessibilità e controllo sulla presentazione del video.

1. Link al video

Aggiungi l’URL del video nel campo Link al video. Le piattaforme supportate includono YouTube, Vimeo e altri servizi che consentono l’incorporamento.

• Comportamento automatico: quando viene aggiunto un URL valido:

  • viene generata automaticamente un’immagine di anteprima usando la miniatura del video fornita dalla piattaforma;
  • il campo Testo alternativo viene compilato automaticamente con il titolo o la descrizione del video (se disponibile).

• Campi modificabili: puoi modificare o sostituire manualmente l’immagine e il testo di anteprima generati, se necessario.

2. Testo alternativo

Il campo Testo alternativo garantisce l’accessibilità visualizzando una descrizione del video se non riesce a caricarsi.

• Viene compilato automaticamente quando aggiungi un URL video supportato.
• Può essere personalizzato in base alle tue esigenze di contenuto.

3. Miniatura personalizzata

Carica un’immagine personalizzata per sostituire l’anteprima video predefinita.

• Come attivarla: attiva l’opzione Miniatura personalizzata.
• Formati supportati: PNG, JPG o GIF.
• Quando usarla: sostituisci la miniatura generata quando non è in linea con il design della tua email.

4. Pulsante di riproduzione

Personalizza il pulsante di riproduzione sovrapposto alla miniatura del video.

• Opzioni disponibili:
  • scegli tra gli stili dei pulsanti di riproduzione di YouTube, Vimeo o altri;
  • seleziona “Nessuno” per nascondere completamente il pulsante di riproduzione.

5. Dimensioni

Regola le dimensioni del video per adattarle al design della tua email.

• Larghezza e altezza: usa i pulsanti + e - oppure inserisci manualmente i valori per controllare le dimensioni.
• Design reattivo: assicurati che il video si adatti perfettamente ai diversi dispositivi.

6. Adatta alla larghezza

Attiva l’interruttore Adatta alla larghezza per fare in modo che il video si adatti automaticamente alla larghezza del contenitore. Questo assicura un design reattivo del video su diversi dispositivi.

7. Immagine reattiva

L’interruttore Immagine reattiva assicura che la miniatura del video si adatti alla larghezza dello schermo sui dispositivi mobili.

• Nota: la reattività dipende dal supporto del dispositivo e del client email.

8. Allineamento

Usa l’impostazione Allineamento per controllare la posizione orizzontale del video nel blocco:

• Sinistra: allinea il video a sinistra.
• Centro: centra il video.
• Destra: allinea il video a destra.

9. Opzioni specifiche per dispositivi mobili

Personalizza il comportamento e l’aspetto del video sui dispositivi mobili:

1. Nascondi elemento su dispositivi mobili Nascondi il blocco video sui dispositivi mobili, se necessario.

   • Nota: questa funzione dipende dal supporto delle media query e potrebbe non funzionare in tutti i client email.

2. Spaziatura interna su dispositivi mobili Regola la spaziatura intorno al video per la visualizzazione su dispositivi mobili.

   • Usa l’interruttore Altro per impostare singoli valori di spaziatura per:
     • Superiore
     • Destro
     • Inferiore
     • Sinistro

10. Includi in AMPHTML o HTML

Scegli se il blocco video deve apparire in versioni specifiche dell’email:

• Sia AMPHTML sia HTML
• Solo AMPHTML
• Solo HTML

Questa opzione garantisce che il video venga incluso correttamente in base alla versione dell’email consegnata.

Blocco HTML

Il Blocco HTML consente di inserire codice HTML e CSS personalizzato nella tua email, offrendo flessibilità per personalizzazioni avanzate nel rispetto della compatibilità con i client email. Che tu voglia aggiungere un singolo elemento HTML o progettare un’intera email, questo blocco è lo strumento ideale per creare design su misura.

1. Interfaccia dell’editor di codice

Quando selezioni il Blocco HTML, nel riquadro del contenuto appare una finestra nera dell’editor di codice. Questo editor ti permette di scrivere, incollare o modificare codice personalizzato. L’editor include due sezioni:

• Sezione HTML: aggiungi o modifica la struttura HTML della tua email.
• Sezione CSS: apri un editor CSS separato per applicare stili al contenuto.

2. Regolazione della dimensione del font

Regola la dimensione del font del codice nell’editor per migliorare la leggibilità:

• Usa il pulsante A+ per aumentare la dimensione del font.
• Usa il pulsante A- per ridurre la dimensione del font.

3. Regolazione delle dimensioni della finestra dell’editor

Ridimensiona la finestra dell’editor di codice in base alle tue preferenze di lavoro:

• Come regolarla:
  • passa il cursore sui tre puntini nella parte superiore centrale della finestra dell’editor;
  • trascina il controllo a scorrimento verso l’alto o verso il basso per aumentare o ridurre le dimensioni dell’editor.

Questa funzione è particolarmente utile per gestire blocchi di codice più grandi o dettagliati.

4. Editor CSS

L’Editor CSS consente di gestire gli stili del contenuto HTML ed è accessibile tramite un pulsante nell’angolo in alto a destra dell’editor di codice.

Considerazioni importanti:

• Supporto limitato: molti client email non supportano funzioni CSS avanzate come Flexbox, Grid o le media query.
• Attieniti alle basi: usa CSS inline di base per ottenere la massima compatibilità.
• Stili preconfigurati: evita di eliminare gli stili preconfigurati, poiché garantiscono un rendering corretto nei principali client email.

5. Compatibilità con i client email

L’HTML delle email richiede particolare attenzione a causa dei motori di rendering obsoleti presenti in molti client email.

Linee guida principali:

• usa layout basati su tabelle invece di layout basati su <div> per una migliore compatibilità;
• evita funzioni CSS avanzate come animazioni, Flexbox o Grid;
• aspettati un comportamento non uniforme per le media query e alcune proprietà CSS minori;
• Test: testa sempre le email in più client (ad esempio Gmail, Outlook e Apple Mail) per assicurarti che vengano visualizzate correttamente.

6. Spaziatura interna

L’impostazione Spaziatura interna regola lo spazio intorno al contenuto HTML:

• Spaziatura predefinita: impostata su 0 per impostazione predefinita.
• Spaziatura personalizzata: attiva l’interruttore Altro per regolare singolarmente la spaziatura di:
  • Superiore
  • Destro
  • Inferiore
  • Sinistro

Questa funzione è ideale per allineare il contenuto HTML all’interno del layout dell’email.

7. Aggiungi link di ancoraggio

La funzione Aggiungi link di ancoraggio consente di creare un link cliccabile in un’altra parte dell’email che porta al Blocco HTML.

Come usarla:

• attiva l’opzione e inserisci un nome dell’ancora nel campo.

Limitazioni:

• i link di ancoraggio non sono supportati da alcuni client email, come:
  • app Gmail per iOS
  • Apple Mail per iOS
  • app Outlook (Android e macOS)
  • Email AMP

8. Scrivere HTML personalizzato

L’Editor HTML è progettato per scrivere o incollare la struttura HTML personalizzata della tua email.

Buone pratiche:

• usa HTML semplice e ampiamente supportato;
• evita layout complessi o elementi come <div>;
• attieniti a design basati su tabelle per garantire una migliore compatibilità.

9. Consigli per ottenere buoni risultati

1. Inizia in piccolo: usa il Blocco HTML per sezioni specifiche se non hai esperienza nello sviluppo di email.
2. Convalida il codice: assicurati che il tuo HTML sia conforme ai requisiti dei client email.
3. Testa accuratamente: usa strumenti per visualizzare in anteprima e testare la tua email su più client e dispositivi.