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

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

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

Preparação do conteúdo do 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 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 da estrutura 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. Alterne 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

   Adicione seu estilo depois disso em outra tag de estilo personalizada.

   Não modifique o CSS gerado pelo Email Designer:

   • <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 à visualização móvel para verificar se o conteúdo é exibido corretamente e salvar as alterações.

Caso de uso

Vamos tentar converter esse email, criado no editor herdado, em um template Email Designer.

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 de estrutura.

   

Inserção de 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 é possível verificar a renderização do email.

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

1. Insira elementos de CSS para garantir que o email seja adequado para exibiçã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.

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