Modifica dei formati di testo normale, HTML e e-mail per dispositivi mobili

E-mail Designer consente di modificare diversi rendering delle e-mail. Puoi generare una versione testuale dell’e-mail, modificare l’origine HTML di un’e-mail e progettare e-mail per la visualizzazione mobile.

Generazione di una versione testuale dell'e-mail

Per impostazione predefinita, la versione Plain text dell’e-mail viene generata automaticamente e sincronizzata con la versione Edit.

Anche i campi di personalizzazione e i blocchi di contenuto aggiunti alla versione HTML vengono sincronizzati con la versione di testo normale.

NOTA

Per utilizzare i blocchi di contenuto nella versione di testo normale, accertati che non contengano codice HTML.

Per avere una versione di testo normale diversa dalla versione HTML, puoi disattivare la sincronizzazione facendo clic sul pulsante Sync with HTML nella visualizzazione Plain text del messaggio e-mail.

Puoi quindi modificare la versione di testo normale come desiderato.

NOTA

Se si modifica la versione Plain text quando la sincronizzazione è disabilitata, alla successiva attivazione dell'opzione Sync with HTML tutte le modifiche apportate nella versione di testo normale verranno sostituite con la versione HTML. Le modifiche apportate nella visualizzazione Plain text non possono essere applicate nella visualizzazione HTML.

Modifica di un’origine di contenuto e-mail in HTML

Per gli utenti più avanzati e il debug, puoi visualizzare e modificare il contenuto dell’e-mail direttamente in HTML.

Sono disponibili due modi per modificare la versione HTML dell’e-mail:

  • Seleziona Edit > HTML per aprire la versione HTML dell’intero messaggio e-mail.

  • Dall’interfaccia WYSIWYG, seleziona un elemento e fai clic sull’icona Source code .

    Viene visualizzata solo l’origine dell’elemento selezionato. Puoi modificare il codice sorgente se l’elemento selezionato è un componente di contenuto HTML. Altri componenti sono in modalità di sola lettura, ma possono ancora essere modificati nella versione HTML completa dell’e-mail.

Se modifichi il codice HTML, la reattività dell’e-mail potrebbe non riuscire. Assicurati di testarlo utilizzando il pulsante Preview . Consulta Anteprima dei messaggi.

Progettazione di e-mail per il rendering mobile

Puoi ottimizzare il design reattivo di un’e-mail modificando separatamente tutte le opzioni di stile per la visualizzazione mobile. Ad esempio, puoi adattare i margini e la spaziatura, utilizzare font di dimensioni più piccole o più grandi, modificare i pulsanti o applicare colori di sfondo diversi che saranno specifici per la versione mobile del messaggio e-mail.

Tutte le opzioni di stile sono disponibili nella visualizzazione mobile. Le impostazioni dello stile di E-mail Designer sono precedentemente presentate in questa pagina.

  1. Crea un’e-mail e inizia a modificare il contenuto. Per ulteriori informazioni, consulta Progettazione di contenuti e-mail da zero.

  2. Per accedere alla visualizzazione mobile dedicata, seleziona il pulsante Switch to mobile view .

    Viene visualizzata la versione mobile dell’e-mail. Contiene tutti i componenti e gli stili definiti nella visualizzazione desktop.

  3. Modificare in modo indipendente tutte le impostazioni di stile, ad esempio il colore di sfondo, l’allineamento, la spaziatura, il margine, la famiglia di font, il colore del testo e così via.

  4. Quando modifichi un’impostazione di stile in visualizzazione mobile, le modifiche vengono applicate solo alla visualizzazione mobile.

    Ad esempio, riduci le dimensioni di un’immagine, aggiungi uno sfondo verde e modifica la spaziatura nella visualizzazione mobile.

  5. Puoi nascondere un componente quando viene visualizzato su un dispositivo mobile. A questo scopo, seleziona Show only on desktop devices dal Display options.

    Puoi anche scegliere di nascondere questo componente sui dispositivi desktop, il che significa che verrà visualizzato solo sui dispositivi mobili. A questo scopo, seleziona Show only on mobile devices.

    Ad esempio, questa opzione consente di visualizzare un’immagine specifica sui dispositivi mobili e un’altra sui dispositivi desktop.

    Puoi impostare questa opzione dalla visualizzazione per dispositivi mobili o desktop.

  6. Fai nuovamente clic sul pulsante Switch to mobile view per tornare alla visualizzazione desktop standard. Le modifiche allo stile appena apportate non vengono applicate.

    NOTA

    L’unica eccezione è rappresentata dalle impostazioni Style inline . Qualsiasi modifica alle impostazioni in linea di stile viene applicata anche alla visualizzazione desktop standard.

  7. Qualsiasi altra modifica alla struttura o al contenuto dell’e-mail, come modifiche al testo, caricamento di una nuova immagine, aggiunta di un nuovo componente, ecc. viene applicata anche alla visualizzazione standard.

    Ad esempio, torna alla visualizzazione mobile, modifica del testo e sostituisci un’immagine.

  8. Fai nuovamente clic sul pulsante Switch to mobile view per tornare alla visualizzazione desktop standard. Le modifiche vengono applicate.

  9. La rimozione di uno stile nella visualizzazione per dispositivi mobili riporta lo stile applicato in modalità desktop.

    Ad esempio, nella visualizzazione per dispositivi mobili, applica un colore di sfondo verde a un pulsante.

  10. Passa alla visualizzazione desktop e applica uno sfondo grigio allo stesso pulsante.

  11. Passa di nuovo alla visualizzazione mobile e disattiva l'impostazione Background color.

    Viene ora applicato il colore di sfondo definito nella visualizzazione desktop: diventa grigio (non vuoto).

    L'unica eccezione è l'impostazione Border color. Quando è disabilitata nella visualizzazione mobile, non viene più applicato alcun bordo, anche se il colore del bordo è definito nella visualizzazione desktop.

NOTA

La visualizzazione mobile non è disponibile in frammenti.

In questa pagina