Conversión del contenido de correo electrónico del editor heredado converting-an-html-content

Empiece a trabajar con Email Designer 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 Designer de correo electrónico mediante un correo electrónico de HTML y dividirlo en componentes de HTML en el Designer de correo electrónico.

NOTE
Al igual que el modo de compatibilidad, un componente de HTML es editable con opciones limitadas: solo puede realizar ediciones in situ.
IMPORTANT
Esta sección es para usuarios avanzados familiarizados con el código de HTML.

Preparación del contenido del correo electrónico

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

Crear la estructura de correo electrónico

  1. Abra Email Designer para crear contenido de correo electrónico vacío.
  2. Defina 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 del HTML

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

Administrar el estilo del correo electrónico manage-the-style-of-your-email

  1. Cambiar 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 estilo en una nueva sección de estilo. Por ejemplo:

    code language-none
    <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>
    
    note note
    NOTE
    Asegúrese de agregar el estilo después de esto en otra etiqueta de estilo personalizada.
    No modifique el CSS generado por el Designer 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.

Caso de uso

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

Identificar 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 de HTML del correo electrónico, haga clic en Show source.

Crear la plantilla de correo electrónico y su estructura

  1. Arrastre y suelte Structure components según el diseño del correo electrónico.

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

Inserción de componentes de contenido del HTML

  1. Insertar 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 adaptarlos a la vista móvil

  1. Inserte elementos CSS para asegurarse de 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 estilo en una nueva sección de estilo.

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

El correo electrónico heredado ya está disponible en la Designer de correo electrónico.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff