Conversione di contenuti e-mail da editor legacy

Ultimo aggiornamento: 2023-12-29
  • Argomenti:
  • Email Design
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Intermediate
    User

Inizia a utilizzare E-mail Designer e crea modelli e frammenti riutilizzabili dal tuo HTML e-mail creato nell’Editor legacy.

Questo caso d’uso consente di creare un modello di E-mail designer utilizzando un’e-mail HTML e suddividendola in componenti HTML in E-mail Designer.

NOTA

Analogamente alla modalità di compatibilità, un componente HTML può essere modificato con opzioni limitate: è possibile eseguire solo l’edizione sul posto.

IMPORTANTE

Questa sezione è destinata agli utenti avanzati che hanno familiarità con il codice HTML.

Preparazione del contenuto dell’e-mail

  1. Seleziona un messaggio e-mail di HTML.
  2. Identifica le sezioni per dividere l’e-mail di HTML.
  3. Taglia i diversi blocchi dal tuo HTML.

Creare la struttura delle e-mail

  1. Apri Email Designer per creare un contenuto e-mail vuoto.
  2. Imposta gli attributi del livello del corpo: colori di sfondo, larghezza, ecc. Per ulteriori informazioni, consulta Modifica degli stili delle e-mail.
  3. Aggiungi tutti i componenti struttura che hai nelle sezioni. Per ulteriori informazioni, consulta Modifica della struttura delle e-mail.

Aggiungi contenuto HTML

  1. Aggiungi un componente HTML a ciascun componente struttura. Per ulteriori informazioni, consulta Aggiunta di frammenti e componenti.
  2. Copia e incolla il HTML in ogni componente.

Gestire lo stile dell’e-mail

  1. Passa a Mobile view. Per ulteriori informazioni, consulta questa sezione.

  2. Per risolvere questo problema, passa alla modalità codice sorgente e copia e incolla la sezione di stile in una nuova sezione di stile. Ad esempio:

    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    NOTA

    Assicurati di aggiungere il tuo stile dopo in un altro tag di stile personalizzato.

    Non modificare il CSS generato da E-mail Designer:

    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  3. Torna alla visualizzazione per dispositivi mobili per verificare che il contenuto sia visualizzato correttamente e salvare le modifiche.

Esempio di utilizzo

Proviamo a convertire questa e-mail, creata nell’editor legacy, in un Email Designer modello.

Identifica la sezione dell’e-mail

In questa e-mail possiamo identificare 11 sezioni.

Per identificare l’elemento che rappresenta la sezione del HTML, puoi selezionarlo.

Per visualizzare la versione HTML dell’e-mail, fai clic su Show source.

Creare il modello e-mail e la relativa struttura

  1. Trascina Structure components che riflette il layout dell’e-mail.

  2. Ripetere il numero di volte necessario. Dobbiamo creare 11 componenti struttura.

Inserimento di componenti di contenuto HTML

  1. Inserisci un HTML component in ogni Structure component .

  2. Per ogni sezione, fai clic su Show source code .

  3. Inserisce la sezione HTML.

  4. Fai clic su Save.

Ora puoi controllare il rendering dell’e-mail.

Gestione degli stili per adattarli alla vista mobile

  1. Inserisci elementi CSS per garantire che l’e-mail sia adatta alla visualizzazione per dispositivi mobili.

  2. Passa al codice sorgente e copia e incolla la sezione di stile in una nuova sezione di stile.

Per ulteriori informazioni, consulta Gestire lo stile dell’e-mail.

L’e-mail legacy è ora disponibile in E-mail Designer.

In questa pagina