Conversión del contenido de correo electrónico del editor heredado

Empiece a trabajar con el Diseñador de correo electrónico y cree plantillas y fragmentos reutilizables a partir del HTML de correo electrónico creado en el Editor heredado.

Este caso de uso le permite crear una plantilla de Diseñador de correo electrónico utilizando un correo electrónico HTML y dividiéndola en componentes HTML en el Diseñador de correo electrónico.

NOTA

Al igual que el modo de compatibilidad, un componente HTML es editable con opciones limitadas: solo puede realizar la edición in situ.

IMPORTANTE

Esta sección está dirigida a usuarios avanzados familiarizados con el código HTML.

Preparación del contenido del correo electrónico

  1. Seleccione un correo electrónico HTML.
  2. Identifique secciones para dividir el correo electrónico HTML.
  3. Elimine los diferentes bloques del HTML.

Cree su estructura de correo electrónico

  1. Abra Email Designer para crear un contenido de correo electrónico vacío.
  2. Establezca los atributos de nivel de cuerpo: colores de fondo, anchura, etc. Para obtener más información, consulte Edición de estilos de correo electrónico.
  3. Añada tantos componentes de estructura como secciones. Para obtener más información, consulte Edición de la estructura de correo electrónico.

Añadir contenido HTML

  1. Añada un componente HTML a cada componente de estructura. Para obtener más información, consulte Añadir fragmentos y componentes.
  2. Copie y pegue su HTML en cada componente.

Administre el estilo de su correo electrónico

  1. Cambie a Mobile view. Para obtener más información, consulte esta sección.

  2. Para solucionarlo, cambie al modo de código fuente y copie y pegue la sección de estilos en una nueva sección de estilos. Por ejemplo:

    <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

    Asegúrese de agregar el estilo después de esto en otra etiqueta de estilo personalizada.

    No modifique la CSS generada por el Diseñador de correo electrónico:

    • <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. Vuelva a la vista móvil para comprobar que el contenido se muestra correctamente y guardar los cambios.

Ejemplo de uso

Intentemos convertir este correo electrónico, creado en el editor heredado, en una plantilla Email Designer.

Identifique la sección del correo electrónico

Podemos identificar 11 secciones en este correo electrónico.

Para identificar qué elemento es qué sección del HTML, puede seleccionarlo.

Para ver la versión HTML del correo electrónico, haga clic en Show source.

Creación de la plantilla de correo electrónico y su estructura

  1. Arrastre y suelte Structure components reflejando el diseño de nuestro correo electrónico.

  2. Repita tantas veces como sea necesario. Necesitamos crear 11 componentes de estructura.

Inserción de componentes de contenido HTML

  1. Inserte un HTML component en cada Structure component .

  2. Para cada sección, haga clic en Show source code .

  3. Inserte la sección HTML.

  4. Haga clic en Save.

Ahora puede comprobar la renderización del correo electrónico.

Administración de estilos para ajustarse a la vista móvil

  1. Inserte elementos CSS para garantizar que el correo electrónico sea adecuado para la vista móvil.

  2. Cambie al código fuente y copie y pegue la sección de estilos en una nueva sección de estilos.

Para obtener más información, consulte Administrar el estilo de su correo electrónico.

El correo electrónico heredado ya está disponible en el Diseñador de correo electrónico.

En esta página

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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now