Show Menu
TÓPICOS×

Conversão de conteúdo de email do editor herdado

Start que trabalha com o Email Designer e cria modelos e fragmentos reutilizáveis do seu HTML de email criado no Editor Herdado.
Esta seção destina-se a usuários avançados familiarizados com o código HTML.
Esse caso de uso permite que você crie um modelo do Email Designer usando um email HTML e dividindo-o em componentes HTML no Designer de email.
Como o modo de compatibilidade, um componente HTML é editável com opções limitadas: você só pode executar edição no local.

Preparando seu conteúdo de email

  1. Selecione um email HTML.
  2. Identifique as seções para dividir o email HTML.
  3. Recorte os diferentes blocos do seu HTML.

Criar sua estrutura de email

  1. Abra o arquivo Email Designer para criar um conteúdo de email vazio.
  2. Defina os atributos de nível de corpo: cores de fundo, largura, etc. Para obter mais informações, consulte Edição de estilos de email.
  3. Adicione quantos componentes de estrutura você tiver seções. Para obter mais informações, consulte Edição da estrutura de email.

Adicionar conteúdo HTML

  1. Adicione um componente HTML a cada componente de estrutura. Para obter mais informações, consulte Adicionar fragmentos e componentes .
  2. Copie e cole seu HTML em cada componente.

Gerenciar o estilo do seu email

  1. Mudar para Mobile view . Para obter mais informações, consulte esta seção .
  2. Para corrigir isso, alterne para o modo de código fonte e copie e cole sua seção de estilo em uma nova seção de estilo. Por exemplo:
    <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>
    
    
    Depois disso, adicione seu estilo em outra tag de estilo personalizada.
    Não modifique o CSS gerado pelo Designer de email:
    • <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. Volte para a visualização móvel para verificar se o conteúdo é exibido corretamente e salvar as alterações.

Caso de uso

Vamos tentar converter este email, criado no editor herdado, em um Email Designer modelo.

Identifique a seção do seu email

Podemos identificar 11 seções neste email.
Para identificar qual elemento é qual seção do HTML, você pode selecioná-lo.
Para ver a versão HTML do email, clique em Show source .

Criar o modelo de email e sua estrutura

  1. Arraste e solte Structure components refletindo o layout do nosso email.
  2. Repita quantas vezes forem necessárias. Precisamos criar 11 componentes estruturais.

Inserir componentes de conteúdo HTML

  1. Insira um HTML component em cada Structure component .
  2. Para cada seção, clique em Show source code .
  3. Insira a seção HTML.
  4. Clique em Save .
Agora você pode verificar a renderização do seu email.

Gerenciamento de estilos para ajustar à visualização móvel

  1. Insira elementos CSS para garantir que seu email seja adequado para visualização móvel.
  2. Alterne para o código-fonte e copie e cole sua seção de estilo em uma nova seção de estilo.
Para obter mais informações, consulte Gerenciar o estilo do seu email .
Seu email legado agora está disponível no Designer de email.