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.
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.
Esta seção destina-se a usuários avançados familiarizados com o código HTML.

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 do email .

Adicionar conteúdo HTML

  1. Adicione um componente HTML a cada componente de estrutura. Para obter mais informações, consulte Inclusão de 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.