Conversione del contenuto delle e-mail dell'editor legacy

Iniziate a utilizzare e-mail Designer e create modelli e frammenti riutilizzabili dal codice HTML dell'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 dividendolo in componenti HTML in Designer e-mail.

NOTA

Come la modalità di compatibilità, un componente HTML è modificabile con opzioni limitate: è possibile eseguire solo edizioni interne.

IMPORTANTE

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

Preparazione del contenuto delle e-mail

  1. Selezionate un messaggio e-mail HTML.
  2. Identificare le sezioni per dividere l’e-mail HTML.
  3. Rimuovete i diversi blocchi dal codice HTML.

Creare la struttura delle e-mail

  1. Aprite la Email Designer per creare un contenuto e-mail vuoto.
  2. Impostate gli attributi a livello di corpo: colori di sfondo, larghezza, ecc. Per ulteriori informazioni, consulta Modifica degli stili delle e-mail.
  3. Aggiungete tutti i componenti della struttura disponibili. Per ulteriori informazioni, consulta Modifica della struttura delle e-mail.

Aggiunta di contenuto HTML

  1. Aggiungete un componente HTML a ciascun componente struttura. Per ulteriori informazioni, consulta Aggiunta di frammenti e componenti.
  2. Copiate e incollate il codice HTML in ogni componente.

Gestione dello stile dell'e-mail

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

  2. Per risolvere il problema, passare alla modalità codice sorgente e copiare e incollare 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

    Accertatevi di aggiungere lo stile dopo questo in un altro tag di stile personalizzato.

    Non modificate il CSS generato da Designer e-mail:

    • <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. Tornate alla visualizzazione mobile per verificare che il contenuto sia correttamente visualizzato e salvare le modifiche.

Caso d’uso

Proviamo a convertire questo messaggio e-mail, creato nell'editor legacy, in un modello Email Designer.

Identificare la sezione del messaggio e-mail

In questa e-mail possiamo identificare 11 sezioni.

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

Per visualizzare la versione HTML del messaggio e-mail, fate clic su Show source.

Creare il modello e-mail e la relativa struttura

  1. Trascinare Structure components per riflettere il layout dell'e-mail.

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

Inserimento di componenti di contenuto HTML

  1. Inserire un HTML component in ogni Structure component .

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

  3. Inserite la sezione HTML.

  4. Fai clic su Save.

Ora potete controllare il rendering dell'e-mail.

Gestione degli stili per adattarli alla visualizzazione mobile

  1. Inserite elementi CSS per assicurarvi che il messaggio e-mail sia adatto alla visualizzazione mobile.

  2. Passate al codice sorgente e copiate e incollate la sezione di stile in una nuova sezione di stile.

Per ulteriori informazioni, fare riferimento a Gestione dello stile dell'e-mail.

L'e-mail precedente è ora disponibile in Designer e-mail.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free