Conversione del contenuto e-mail dell’editor legacy

Inizia a utilizzare E-mail Designer e crea modelli e frammenti riutilizzabili dal codice HTML dell’e-mail creato nell’editor legacy.

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

Preparazione del contenuto dell’e-mail

1. Seleziona un messaggio e-mail HTML.
2. Identifica le sezioni per dividere l’e-mail 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 disponibili. 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 codice HTML in ogni componente.

Gestione dello stile dell’e-mail

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

2. Per risolvere il problema, passa alla modalità codice sorgente e copia-incolla la sezione stile in una nuova sezione 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 lo stile dopo questo 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 mobile per verificare che il contenuto sia visualizzato correttamente e salvare le modifiche.

Caso d’uso

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

Identifica la sezione dell’e-mail

Possiamo identificare 11 sezioni in questo messaggio e-mail.

Per identificare quale elemento è la sezione dell’HTML, puoi selezionarla.

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 per rispecchiare il layout della nostra e-mail.

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

   

Inserimento di componenti di contenuto HTML

1. Inserisci un HTML component in ogni Structure component .

   

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

   

3. Inserisci la sezione HTML.

4. Fai clic su Save.

Ora puoi controllare il rendering della tua e-mail.

Gestione degli stili per adattarli alla visualizzazione mobile

1. Inserisci elementi CSS per assicurarti che l’e-mail sia adatta alla visualizzazione mobile.

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

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

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