Manual de design de e-mail do Zendesk

Qual é o meu plano?

Suite

Qualquer plano

Support

Qualquer plano

Caminho rápido: Central de administração > Canais > Talk e e-mail > E-mail

Este manual contém receitas de HTML para personalizar a aparência dos e-mails enviados da sua conta. Personalizar a aparência do seu e-mail pode ajudar a melhorar a consistência da marca e o engajamento do cliente. Por exemplo, você pode adicionar o logotipo da sua empresa ou um banner de chamada para ação ao layout do e-mail para corresponder à identidade da marca da sua empresa ou para que fique mais parecido com a aparência da sua central de ajuda.

A aparência das notificações por e-mail enviadas da sua conta do Zendesk é, em grande parte, determinada por dois modelos na Central de administração: um em HTML e o outro em texto sem formatação. O modelo de texto sem formatação não é compatível com o tipo de personalização descrito no manual. Para obter detalhes, consulte Personalização dos modelos de e-mail para notificações.

Este manual inclui os seguintes tópicos:

• Padrões de design comuns para e-mail de notificação
• Diretrizes de HTML e práticas recomendadas para e-mail
• Receita: adição do logotipo da sua empresa
• Receita: adição de um banner da empresa
• Receita: adição de um banner de chamada para ação
• Receita: adição de um rodapé
• Receita: adição de links de redes sociais ao rodapé
• Receita: personalização do corpo do e-mail
• Teste das alterações feitas

As receitas usam HTML e CSS para personalizar notificações por e-mail. Para ver uma introdução e referência de CSS, consulte CSS: Cascading Style Sheets na Mozilla Developer Network.

Observação: a Zendesk oferece este artigo apenas para fins educacionais. O Zendesk não oferece suporte para HTML e CSS nas receitas. Para respostas ou soluções, pesquise na internet ou pergunte ao seu bot de chat com IA favorito.

Padrões de design comuns para e-mail de notificação

Entender padrões comuns de design pode ajudar você a criar disposições de e-mail coesas e eficazes que estejam alinhadas com sua marca.

A maioria dos e-mails de notificação consiste em apenas alguns componentes:

• Logotipo: uma imagem de logotipo.
• Banner da empresa: uma alternativa ao uso de um logotipo sozinho.
• Conteúdo: o corpo do e-mail.
• Banner de chamada para ação: uma chamada para ação para fazer parte da sua comunidade, usar sua central de ajuda, experimentar um novo produto e assim por diante.
• Rodapé: pode conter várias informações, incluindo informações de contato, links de redes sociais e assim por diante.

Todos os componentes são opcionais no modelo de e-mail, exceto o conteúdo.

As receitas neste manual descrevem como criar e inserir elementos de design no modelo de e-mail. Você pode misturar e combinar elementos para criar seu próprio design de e-mail. A seguir estão alguns padrões de design comuns:

Logotipo da empresa	Logotipo da empresa com rodapé

Banner da empresa com rodapé	Banner da empresa com banner de CTA e rodapé

Para se inspirar, veja alguns designs de e-mail no blog da Lotus Themes.

Diretrizes de HTML e práticas recomendadas para e-mail

Criar a aparência dos e-mails pode ser desafiador porque HTML e CSS podem ser renderizados de formas distintas em diferentes aplicativos de e-mail. Alguns tipos de formatação podem até mesmo ser interpretados como spam.

Siga estas diretrizes gerais ao criar e-mails:

• Mantenha a simplicidade: mantenha seu design simples e evite o uso de layouts complexos.
• Use tabelas para o layout: alguns aplicativos de e-mail podem não renderizar layouts baseados em CSS de modo confiável. Criar layouts com tabelas em HTML é mais confiável.
• Use estilos de CSS embutidos: use estilos embutidos, que são estilos definidos no atributo style de um elemento HTML, como: <p style="width=400px;">. Folhas de estilo importadas ou estilos definidos em uma tag <style> podem não ser compatíveis com todos os aplicativos de e-mail.
• Use fontes seguras para a web: use fontes seguras para a web, como Arial, Verdana ou Georgia. Fontes personalizadas podem não ser compatíveis ou não ser renderizadas corretamente em todos os aplicativos de e-mail.
• Use o mínimo de formatação de texto: minimizar a formatação do texto ajuda a manter o layout limpo e organizado. Além disso, muito texto em negrito pode disparar filtros de spam.

Siga estas diretrizes para imagens:

• Use imagens com parcimônia: menos imagens ajudam a manter o layout limpo e organizado. Além disso, muitas imagens podem disparar filtros de spam.
• Defina o tamanho das imagens com CSS: use estilos embutidos para dimensionar as imagens no layout. Imagens sem tamanhos definidos muitas vezes distorcem o layout dos e-mails. Para maior tranquilidade, redimensione fisicamente as imagens usando a reamostragem.
• Use tags ALT em todas as imagens: as tags ALT mostram uma descrição das imagens antes que os usuários permitam que as imagens sejam exibidas.
• Não coloque links para imagens em uma conta do Zendesk fechada: as imagens serão corrompidas se o destinatário pretendido não estiver registrado e conectado à conta.

Receita: adição do logotipo da sua empresa

Esta receita mostra como adicionar o logotipo da sua empresa ao modelo de e-mail. Exemplo:

Ingredientes

• URL da imagem do logotipo da sua empresa

Receita

1. Cole o seguinte bloco de código em um editor de texto ou HTML:

   <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
    <tbody>
       <tr>
        <td align="center" style="padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;">
         </td>
       </tr>
     </tbody>
   </table>

2. Faça qualquer uma das seguintes alterações para personalizar o logotipo:

   Alterar
   Imagem do logotipo	Elemento: img > src Substitua o valor do placeholder do atributo src pela URL da imagem do seu logotipo. Exemplo: img src="https://www.example.com/images/logo_acme.png"
   Tamanho do logotipo	Elemento: img > style > width Altere o valor de width para redimensionar o logotipo. Exemplo: img style="width: 120px; height: auto; ..."
   Espaço ao redor do logotipo	Se houver muito espaço ao redor do logotipo, talvez seja necessário recortar o espaço em branco ao redor da imagem com uma ferramenta de edição de imagem. Se houver pouco espaço ao redor da imagem, você pode aumentar o preenchimento da célula da tabela. Elemento: td > style Adicione padding ao atributo style e ajuste o valor. Exemplo: td style="padding: 10px; ..."
   Alinhamento horizontal do logotipo	Elemento: td > align Escolha center, left ou right. Exemplo: td align="left"
   Espaçamento vertical do logotipo	Elemento: td > style > padding-top Altere o valor de padding-top para adicionar espaço acima do logotipo. Elemento: td > style > padding-top Altere o valor de padding-bottom para adicionar espaço abaixo do logotipo. Exemplo: td style="padding-top: 15px; padding-bottom: 5px; ..."

3. Ajuste outros valores conforme necessário.
4. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
5. Visualize o logotipo em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
6. Quando estiver tudo pronto para publicação, insira o bloco de código do logotipo no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Receita: adição de um banner da empresa

Esta receita mostra como adicionar um banner da empresa ao modelo de e-mail. Um banner de empresa normalmente consiste no logotipo e no nome da empresa posicionados em uma cor de plano de fundo. Exemplo:

Ingredientes

• URL da imagem do logotipo da sua empresa
• valores de cores para a identidade da sua marca

Receita

1. Cole o seguinte bloco de código em um editor de texto ou HTML:

   <table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p>
         </td>
       </tr>
     </tbody>
   </table>

2. Faça qualquer uma das seguintes alterações para personalizar o banner da empresa:

   Alterar
   Imagem do logotipo	Elemento: img > src Substitua o valor do placeholder do atributo src pela URL da imagem do seu logotipo. Exemplo: img src="https://www.example.com/images/logo_acme.png"
   Tamanho do logotipo	Elemento: img > style > width Altere o valor de width para redimensionar o logotipo. Exemplo: img style="width: 120px; height: auto; ..."
   Espaço ao redor do logotipo	Se houver muito espaço ao redor do logotipo, talvez seja necessário recortar o espaço em branco ao redor da imagem com uma ferramenta de edição de imagem. Se não houver espaço suficiente ao redor da imagem, você pode aumentar o preenchimento da célula da tabela. Elemento: td > style Adicione padding ao atributo style e ajuste o valor. Exemplo: td style="padding: 10px; ..."
   Formato do nome da empresa	Elemento: p > style Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo. Exemplo: p style="font-size: 30px; color: #553e3e; ..."
   Espaço entre o logotipo e o nome da empresa	Elemento: img > style > margin-right Aumente ou diminua o valor de margin-right para aumentar ou diminuir o espaço entre o logotipo e o nome. Exemplo: img style="margin-right: 15px; ..."
   Alinhamento vertical do nome da empresa em relação ao logotipo	Elemento: p > style > margin-top Aumente ou diminua o valor de margin-top para mover o nome da empresa para cima ou para baixo em relação ao logotipo. Exemplo: p style="margin-top: 40px; ..."
   Cor do plano de fundo do banner	Elemento: table > style > background-color Substitua o valor hexadecimal #d3d3d3 do estilo background-color pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes. Exemplo: table style="background-color: #d8e3fb; ..."

3. Ajuste outros valores conforme necessário.
4. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
5. Visualize o banner em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
6. Quando estiver tudo pronto para publicação, cole o bloco de código do banner no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Receita: adição de um banner de chamada para ação

Esta receita mostra como adicionar um banner de chamada para ação (CTA) ao modelo de e-mail. Um banner de chamada para ação costuma ficar localizado após o corpo do e-mail. Normalmente, ele convida o usuário a fazer algo, como participar de sua comunidade, usar sua central de ajuda, experimentar um novo produto e assim por diante. Ele consiste em uma imagem, texto e um link posicionados em uma cor de plano de fundo. Exemplo:

Ingredientes

• texto da sua chamada para ação
• URL de uma imagem de chamada para ação
• URL de um link para ajudar os usuários a executarem a chamada para ação
• valores de cores para a identidade da sua marca

Receita

1. Cole o seguinte bloco de código em um editor de texto ou HTML:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tbody>
     <tr>
       <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;">
   
         <div id="cta-text" style="width: 300px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p>
         </div>
   
         <div id="cta-image" style="padding-left: 20px;">
           <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;">
         </div>
   
       </td>
     </tr>
   </tbody>
   </table>

2. Adicione sua chamada para ação nas três tags de parágrafo. Adicione ou remova os parágrafos conforme necessário.
3. Faça qualquer uma das seguintes alterações para personalizar o banner de chamada para ação:

   Alterar
   Imagem de chamada para ação	Elemento: img > src Substitua o valor do placeholder do atributo src pela URL da sua imagem de chamada para ação. Exemplo: img src="https://www.example.com/images/cta_image.png"
   Tamanho da imagem	Elemento: img > style > width Altere o valor width para redimensionar sua imagem. Exemplo: img style="width: 120px; height: auto; ..."
   Formato das mensagens de chamada para ação	Elemento: p > style Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo. Exemplo: p style="font-size: 30px; color: #553e3e; ..."
   Espaço entre as mensagens e a imagem	Elemento: div id="cta-image" > style > padding-left Aumente ou diminua o valor de padding-left para aumentar ou diminuir o espaço entre as mensagens e a imagem. Exemplo: div id="cta-image" style="padding-left: 30px; ..."
   Cor do plano de fundo do banner	Elemento: table > style > background-color Substitua o valor hexadecimal #d8e3fb do estilo background-color pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes. Exemplo: table style="background-color: #d3d3d3; ..."

4. Ajuste outros valores conforme necessário.
5. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
6. Visualize o banner em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
7. Quando estiver tudo pronto para publicação, cole o bloco de código do banner no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Receita: adição de um rodapé

Esta receita mostra como adicionar um rodapé ao modelo de e-mail. Um rodapé pode conter várias informações, incluindo informações de contato, links de redes sociais e assim por diante. Para links de redes sociais, veja a próxima receita, Receita: adição de links de redes sociais ao rodapé.

O modelo de e-mail padrão já fornece os seguintes placeholders para um rodapé:

• {{footer}}: exibe a linha "Este e-mail é um serviço da Acme.", em que "Acme" corresponde ao nome da sua empresa.
• {{footer_link}}: exibe no e-mail a linha "Fornecido por Zendesk.", com um link em "Zendesk" para zendesk.com.

Você pode substituir ou complementar esses placeholders com seu próprio rodapé.

Nesta receita, você criará um rodapé que fornece informações de contato. Ele substituirá os placeholders {{footer}} e {{footer_link}}. Exemplo:

Ingredientes

• informações de contato da sua empresa
• valores de cores para a identidade da sua marca

Receita

1. Cole o seguinte bloco de código em um editor de texto ou HTML:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

2. Altere as informações de contato nas três tags de parágrafo.
3. Faça qualquer uma das seguintes alterações para personalizar o rodapé:

   Alterar
   Cor do plano de fundo do rodapé	Elemento: table > style > background-color Substitua o valor hexadecimal #d8e3fb do estilo background-color pelo seu próprio valor. Consulte as diretrizes da sua marca ou um seletor de cores online, como html-color.codes. Exemplo: table style="background-color: #d3d3d3; ..."
   Cor do texto	Elemento: p > style > color Altere o valor de color. Exemplo: p style="color: #553e3e; ..."
   Formatação do texto	Elemento: p > style Altere qualquer um dos estilos de texto ou adicione o seu próprio estilo. Exemplo: p style="font-family: Georgia, sans-serif; ..."
   Espaçamento das bordas superior e inferior	Elemento: td > style > padding-top Aumente ou diminua o valor de padding-top para alterar o espaço entre a borda superior e o texto. Exemplo: td style="padding-top: 8px; ..." Elemento: td > style > padding-bottom Aumente ou diminua o valor de padding-bottom para alterar o espaço entre o texto e a borda inferior. Exemplo: td style="padding-bottom: 8px; ..."

4. Ajuste outros valores conforme necessário.
5. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
6. Visualize o rodapé em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
7. Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Receita: adição de links de redes sociais ao rodapé

Esta receita mostra como adicionar links de redes social a um rodapé personalizado.

Observação: se você adicionou canais de redes sociais à sua conta do Zendesk, pode fazer com que o placeholder {{footer}} exiba botões para seus canais de redes sociais. Consulte Inclusão de botões de redes sociais em seus e-mails.

Exemplo:

Ingredientes

• URLs de imagens de redes sociais para usar como botões
• links para suas contas de redes sociais

Receita

1. Cole o seguinte bloco de código em um editor de texto ou HTML:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

   Esta é a receita para criar um rodapé com informações de contato (Receita: adição de um rodapé).

2. Adicione os ícones de redes sociais ao HTML antes da primeira tag de parágrafo. Exemplo:

   <div style="padding-top: 12px; padding-bottom: 0px;">
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a>
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a>
     <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a>  
   </div>

3. Para cada link de rede social, altere a URL do link (href="...") e a imagem do ícone (src="...").
4. Faça qualquer uma das seguintes alterações para personalizar os ícones:

   Alterar
   Tamanho dos ícones	Elemento: img > style > width Certifique-se de que todos os ícones tenham o mesmo valor de largura. Exemplo: img style="width: 24px; ..."
   Espaçamento entre os ícones	Elemento: img > style > padding-right Altere o valor do estilo padding-right de cada link de rede social, exceto o último. Exemplo: img style="padding-right: 8px; ..."
   Espaço acima e abaixo dos ícones	Elemento: div > style > padding-top Aumente ou diminua o valor de padding-top para ajustar o espaço acima dos ícones. Exemplo: div style="padding-top: 8px; ..." Elemento: div > style > padding-bottom Aumente ou diminua o valor de padding-bottom para ajustar o espaço abaixo dos ícones. Exemplo: div style="padding-bottom: 10px; ..."

5. Ajuste outros valores conforme necessário.
6. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
7. Visualize o rodapé em um modelo de e-mail de teste antes de adicioná-lo ao modelo de e-mail em sua conta.
8. Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Receita: personalização do corpo do e-mail

Esta receita mostra como personalizar o corpo do e-mail. Você alterará a fonte e o tamanho do texto, bem como o espaço ao redor do corpo do e-mail.

O e-mail consiste na mensagem de notificação e na conversa por e-mail. No modelo de e-mail, o corpo do e-mail é representado pelo placeholder {{content}}. O Zendesk substitui o placeholder pelo HTML antes de enviar o e-mail. Exemplo:

Parte do HTML inserido pelo Zendesk contém estilos que não podem ser modificados nem substituídos. Para obter detalhes, consulte Limitações para personalizar o corpo do e-mail.

Receita

1. Cole o placeholder {{content}} e a tag div principal em um editor de HTML ou de texto. Exemplo:

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Faça qualquer uma das seguintes alterações nos estilos da tag div principal para personalizar o corpo do e-mail.

   Alterar
   Tamanho do texto da mensagem	Elemento: div > style > font-size Altere o valor de font-size. Essa alteração não mudará o tamanho do texto do nome de usuário nem da hora em que o e-mail foi enviado. Exemplo: div style="font-size: 11px; ..."
   Fonte do texto	Elemento: div > style > font-family Você pode alterar a fonte dentro de determinados limites. Use fontes seguras para a web, como Trebuchet MS, Verdana ou Georgia. Outras fontes podem não ser compatíveis com todos os aplicativos de e-mail. Exemplo: div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Espaço ao redor do corpo do e-mail	Elemento: div > style > padding Aumente ou diminua o valor de padding para alterar o espaço ao redor do corpo do e-mail. Exemplo: div style="padding: 15px; ..." Se você quiser alterar o espaço nos lados esquerdo e direito (por exemplo, para 25 px), especifique dois valores para o estilo padding. O primeiro valor é o preenchimento para a parte superior e inferior e o segundo valor é o preenchimento para a esquerda e a direita. Exemplo: div style="padding: 15px 25px; ..."

3. Adicione outros estilos embutidos ou ajuste outros valores conforme necessário.

   Algumas propriedades do corpo do e-mail não podem ser alteradas. Consulte Limitações para personalizar o corpo do e-mail.

4. Salve o arquivo com a extensão .html e visualize com frequência suas alterações em um navegador.
5. Visualize as alterações em um modelo de e-mail de teste antes de adicioná-las ao modelo de e-mail em sua conta.
6. Quando estiver tudo pronto para publicação, cole o bloco de código no seguinte local no modelo de e-mail HTML da Central de administração (Central de administração > Canais > E-mail).

   

Limitações para personalizar o corpo do e-mail

O Zendesk substitui o placeholder {{content}} pelo próprio HTML quando envia o e-mail. No entanto, o HTML gerado pelo sistema contém estilos embutidos para determinados elementos do corpo do e-mail. Porém, não é possível acessar esses estilos para modificá-los. Também não é possível substituí-los usando estilos embutidos no modelo de e-mail. Em CSS, os estilos embutidos de elementos secundários prevalecem em relação aos estilos embutidos de elementos principais, como divs.

Esta seção descreve algumas das limitações para personalizar o corpo do e-mail. Certifique-se de levar essas configurações em consideração ao tomar decisões de design sobre o restante do corpo do e-mail.

Corpo do texto

Não é possível alterar os seguintes estilos para o corpo do texto:

• cor da fonte
• altura da linha
• margens ao redor do texto

As configurações para esses estilos são as seguintes:

color: #2b2e2f; line-height: 22px; margin: 15px 0

Nome e data de envio do texto

Não é possível alterar os seguintes estilos para o nome e a data de envio do texto:

• cor da fonte
• família de fontes
• tamanho da fonte
• altura da linha
• margens ao redor do texto

As configurações para o texto do nome são as seguintes:

color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"

As configurações para a data de envio do texto são as seguintes:

font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px; 
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"

Teste das alterações feitas

Você pode testar suas alterações com o modelo de e-mail de teste anexado a esta receita.

As alterações feitas no modelo de e-mail da Central de administração são ativadas imediatamente. Portanto, você deve testar cuidadosamente suas alterações no modelo de teste para ter certeza de que funcionam conforme o esperado antes de adicioná-las ao modelo de e-mail em sua conta.

Como testar as alterações feitas

1. Baixe o modelo de e-mail de teste, test_email_template.html anexado a seguir, e abra-o em um editor de HTML ou de texto.
2. Cole o bloco de código do seu componente no local indicado no modelo de e-mail de teste. Exemplo:

   <!-- Paste logo or company banner code block here -->

3. Abra o modelo de teste em um navegador e deixe a janela do navegador mais estreita para simular um aplicativo de e-mail.
4. Faça ajustes no código no modelo de teste e atualize a página do navegador para ver o efeito das alterações.
5. Continue fazendo alterações iterativas até que o design fique conforme desejado.
6. Quando estiver tudo pronto para publicação, cole o bloco de código do seu componente no mesmo local no modelo de e-mail da Central de administração (Central de administração > Canais > Email).