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

Comece a trabalhar com o Designer de email e crie modelos e fragmentos reutilizáveis a partir do HTML de email criado no Editor herdado.

Esse caso de uso permite criar um modelo do Designer de email usando um email de HTML e dividindo-o em componentes de HTML no Designer de email.

Preparação do conteúdo de email

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

Criar sua estrutura de email

1. Abra o Email Designer para criar um conteúdo de email vazio.
2. Defina os atributos do nível do corpo: cores do plano 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 de 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 todos os componentes.

Gerenciar o estilo do email

1. Alternar 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>
   

   OBSERVAÇÃO

   Certifique-se de adicionar o estilo depois disso 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. Retorne à exibição para dispositivos móveis para verificar se o conteúdo é exibido corretamente e salve as alterações.

Caso de uso

Vamos tentar converter esse 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 do HTML do email, clique em Show source.

Criar o modelo de email e sua estrutura

1. Arrastar e soltar Structure components refletindo o layout do nosso email.

2. Repita quantas vezes forem necessárias. Precisamos criar 11 componentes de estrutura.

   

Inserção de componentes de conteúdo de HTML

1. Inserir 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 se adequar à exibição móvel

1. Insira elementos CSS para garantir que o 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 email.

Seu email herdado agora está disponível no Designer de email.