Defina diferentes estilos de fonte para dispositivos móveis para garantir a legibilidade e o apelo visual:

• Use um tamanho de fonte menor para ajustar o conteúdo em telas menores,
• Use uma família de fontes segura para melhor legibilidade e
• Ajuste a cor da fonte para garantir um bom contraste em diversas condições de iluminação ou para configurações de modo escuro.

E-mail em desktops	E-mail em dispositivos móveis

Para alterar o tamanho, a cor ou a família da fonte para dispositivos móveis, você precisará definir os estilos de fonte para dispositivos móveis e desktop: 

1. Crie seu e-mail. 
2. Acesse o modo de desenvolvedor. 
3. Pesquise o conteúdo para o qual você deseja alterar os estilos de fonte. Suas configurações de conteúdo estão logo acima dele no código. 
4. Copie os códigos correspondentes ao tipo de estilo que você deseja alterar em dispositivos móveis: 
   • Text font: font-family: 'font family name'
   • Text size: font-size: SIZEpx
   • Text color: color: 'HEX' 
5. Debaixo da string layout e do valor 320px, cole os códigos que você copiou acima para editar os estilos de fonte móveis e substitua o valor deles pelo que você precisa:
   
   • font-family: 'font family name' onde nome da família de fontes é o nome da fonte conforme aparece na lista de fontes disponíveis no editor. 
   • font-size: SIZEpx onde SIZE é o tamanho que você deseja atribuir ao seu conteúdo em px. 
   • color: 'HEX', onde HEX é o código HEX correspondente à cor que você deseja dar ao seu conteúdo. 
     
6. From the content string, in our example 3 tips to practice safe yoga, remove any style, span, or class attributes between the single quotes '' to only keep your content.
   ➡️  Por exemplo

   Se a sequência de conteúdo for: 

   content: '< h2 class= " default-heading2 " > < span style= " color: #116b6b; " > Nossas 3 dicas para praticar ioga segura 🧘</span></h2>'

   Remova qualquer atributo de estilo ou classe para manter apenas o seu conteúdo, como: 

   content: 'Nossas 3 dicas para praticar ioga segura 🧘 '
7. Alterne entre os modos desktop  (⇧ + D) e dispositivo móvel (⇧ + M) usando os ícones correspondentes no canto superior direito do editor de e-mail. Isso permitirá que você garanta que seus estilos de fonte sejam alterados de acordo com o tipo de dispositivo no qual eles são lidos:
   
8. Faça outras alterações no modo de desenvolvedor, se for necessário.  
9. Clique no ícone de cruz  para fechar o modo de desenvolvedor.

Parabéns! Seus estilos de fonte agora estão mudando dependendo do dispositivo no qual eles são lidos. 

As anotações do Gmail permitem que os usuários do Gmail visualizem e se envolvam com suas promoções diretamente da caixa de entrada, clicando na imagem ou no texto anotado sem abrir o e-mail. Essas anotações permitem que as mensagens recebidas na guia Promotions (Promoções) do Gmail se destaquem, adicionando recursos como:

Para exibir as anotações do Gmail em seu destinatário: 

1. Crie seu e-mail. 
2. Acesse o modo de desenvolvedor. 
3. Copie o código da guia abaixo correspondente ao tipo de anotação que você deseja exibir no seu destinatário do Gmail: 
   
   Anotações de oportunidade Carrosséis de produtos Pré-visualização de imagem única

   Código para copiar

   Valores a serem substituídos

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Opcional) DESCRIPTION é o texto exibido com o emblema de oportunidade, como 20% de desconto.  (Opcional) DISCOUNT_CODE é o código de desconto ou promoção da oferta, como 20TODAY.  (Opcional) START_DATE_TIME é a data e a hora em que a oferta começa no formato ISO 8601, como 2023-09-25T18:44:37-07:00. (Opcional) END_DATE_TIME é a data e a hora de término da promoção no formato ISO 8601, como 2023-09-25T18:44:37-07:00.

   ❗️ Importante

   Para cada imagem em seu carrossel de produtos, adicione um tipo de PromotionCard. 

   Código para copiar

   Valores a serem substituídos

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL é o URL da sua imagem no formato PNG ou JPEG, como https://www.example.com/image.png. As proporções suportadas são 4:5, 1:1, 1, 91:1. Para carrosséis de produtos, cada imagem deve ter um URL exclusivo e usar a mesma proporção. PROMO_URL é o URL da promoção. Quando os usuários clicam na imagem da guia Promotions (Promoções), eles visitam esse URL. (Opcional)HEADLINE é uma descrição de 1 a 2 linhas da promoção que é exibida sob a imagem da pré-visualização. (Opcional) PRICE é o preço da promoção. (Opcional) PRICE_CURRENCY é a moeda do preço no formato ISO 4217 de 3 letras, como USD. Determina o símbolo da moeda exibido com o preço. (Opcional) DISCOUNT_VALUE é o valor subtraído do preço para exibir um preço ajustado. O preço ajustado é exibido ao lado do preço original. Por exemplo, se o discountValue for 25, o preço for 100 e o PriceCurrency for USD, o preço ajustado será exibido como $75. (Opcional) POSITION é a posição do cartão no carrossel.

   Código para copiar

   Valores a serem substituídos

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL é o URL da sua imagem no formato PNG ou JPEG, como https://www.example.com/image.png. As proporções suportadas são 4:5, 1:1, 1, 91:1. Para carrosséis de produtos, cada imagem deve ter um URL exclusivo e usar a mesma proporção. PROMO_URL é o URL da promoção. Quando os usuários clicam na imagem da guia Promotions (Promoções), eles visitam esse URL. (Opcional) HEADLINE é uma descrição de 1 a 2 linhas da promoção que é exibida sob a imagem de pré-visualização. (Opcional) PRICE é o preço da promoção. (Opcional) PRICE_CURRENCY é a moeda do preço no formato ISO 4217 de 3 letras, como USD. Determina o símbolo da moeda exibido com o preço. (Opcional) DISCOUNT_VALUE é o valor subtraído do preço para exibir um preço ajustado. O preço ajustado é exibido ao lado do preço original. Por exemplo, se o discountValue for 25, o preço for 100 e o PriceCurrency for USD, o preço ajustado será exibido como $75.

4. Na parte superior do modo de desenvolvedor, abaixo do valor das fontes e no primeiro nível, cole o código que você copiou de uma das guias acima.
5. Faça outras alterações no modo de desenvolvedor, se for necessário.
6. Clique no ícone de cruz para fechar o modo de desenvolvedor.
7. (Opcional) Envie um e-mail de teste para um endereço de e-mail de teste usando o Gmail e com a guia Promotions (Promoções) ativa, para garantir que a anotação do Gmail seja exibida corretamente.

Como alternativa, você pode usar nosso editor de HTML para exibir as anotações do Gmail. Para saber mais, confira a documentação oficial do Google. 

Alterar a cor de seus marcadores ou números pode ser útil para enfatizar pontos-chave, agrupar ideias ou combinar sua marca. Veja abaixo um exemplo de como é uma lista com marcadores coloridos: 

Para alterar a cor de suas listas com marcadores e numeradas:

1. Crie uma lista de itens com marcadores ou números. 
2. Acesse o modo de desenvolvedor. 
3. Procure a lista que você acabou de criar no modo de desenvolvedor e localize o valor de conteúdo correspondente a ela. Suas configurações de conteúdo estão logo acima dele no código. 
4. Sob o valor padrão, cole o seguinte código, em que HEX é o código HEX correspondente à cor que você deseja fornecer à sua lista: color: '#HEX'
   
5. Verifique o design do seu e-mail no lado direito da tela para ver se a lista de itens mudou de cor. Os marcadores ou números e o texto associado devem aparecer na cor que corresponde ao código HEX que você digitou no modo de desenvolvedor. 
6. Faça outras alterações no modo de desenvolvedor, se for necessário. 
7. Clique no ícone de cruz para fechar o modo de desenvolvedor.
8. Para alterar a cor do texto e manter a cor dos marcadores ou números:
   1. Selecione o texto do qual você deseja alterar a cor. 
   2. Na barra de ferramentas acima do texto, clique no ícone Font color (Cor da fonte).
      
   3. No campo HEX, cole o código de cores HEX que você deseja fornecer ao seu texto. Em nosso exemplo, #
      3B3F44. 

Parabéns! Você alterou a cor dos seus marcadores ou números. 

Espaços não separáveis e hifens garantem a formatação adequada em designs de e-mail, evitando quebras de linha indesejáveis, como a divisão de um nome composto ou do preço de um item, bem como mantendo a legibilidade em todos os dispositivos. Confira nosso exemplo abaixo para entender a importância de espaços não separáveis e hifens;

Sem caracteres não separáveis	Com caracteres não separáveis

Para inserir espaços não separáveis e hifens no design do seu e-mail: 

1. Crie seu e-mail. 
2. Acesse o modo de desenvolvedor. 
3. Pesquise o conteúdo ao qual você deseja adicionar um espaço não separável ou hífen. Suas configurações de conteúdo estão logo acima dele no código. 
4. Copie o código correspondente ao tipo de caractere não separável que você deseja incluir:
   • Espaço não separável:  
   • Hífen não separável: ‑
5. Cole o código copiado acima no lugar do espaço ou hífen que você deseja que não seja separado.
   
6. Verifique o design do seu e-mail no lado direito da tela para ver se a lista de itens mudou de cor. 
7. Faça outras alterações no modo de desenvolvedor, se for necessário. 
8. Clique no ícone de cruz para fechar o modo de desenvolvedor.

Parabéns! Você adicionou caracteres não separáveis ao design do seu e-mail. 

As versões para desktop do Outlook que usam o mecanismo de renderização do Microsoft Word têm suporte limitado a CSS (por exemplo, Outlook 2007, 2010, 2013, 2016 e versões para desktop do Office 365). Imagens de fundo e formatação de texto geralmente são exibidas incorretamente, mostrando fundos brancos em vez de imagens e texto desalinhado devido ao mau manuseio de propriedades como background-image e line-height.

Para garantir que as imagens de fundo e os blocos de texto sejam renderizados corretamente no Outlook, use a seguinte solução alternativa:

1. Crie seu e-mail. 
2. Recupere o tamanho da altura em px da sua imagem de fundo. Em nosso exemplo, 265px. 
3. Acesse o modo de desenvolvedor. 
4. Clique na guia correspondente ao problema de renderização que você deseja resolver:
   
   Imagem de fundo Bloco de texto

   ❗️ Importante

   Essa solução alternativa só funciona para imagens de fundo aplicadas à largura do corpo, não à largura total, e abaixo de um valor grid-row. Observe que um valor grid-row não deve conter nenhum botão.

   1. Pesquise o valor grid-row correspondente ao local em que sua imagem de fundo é exibida.
   2. No valor de background-image, insira height: seguido do tamanho da altura em px da imagem de fundo. Em nosso exemplo, vamos inserir height: 265px.
      

   1. Pesquise o conteúdo para o qual você deseja corrigir problemas de exibição. Pesquise o valor line-height correspondente ao local em que seu texto é exibido. Se não houver valor line-height para esse conteúdo, adicione um.
   2. Substitua o tamanho padrão de seu valor line-height ou insira um tamanho em px, pois esses são os únicos valores suportados pelos clientes de e-mail do Outlook. Em nosso exemplo, vamos inserir 30px.
      
5. Faça outras alterações no modo de desenvolvedor, se for necessário. 
6. Clique no ícone de cruz para fechar o modo de desenvolvedor.
7. (Opcional) Envie um e-mail de teste para um endereço de e-mail de teste usando uma das versões do Outlook que não oferecem suporte a imagens de fundo para garantir que ele seja exibido corretamente.

Adicione texto alternativo aos ícones de mídia social em seus designs de e-mail para melhorar a acessibilidade para pessoas com deficiência visual que usam leitores de tela, aprimorar a experiência do usuário e garantir que o contexto fique claro se as imagens não forem carregadas.

Para adicionar texto alternativo ao design de seu e-mail: 

1. Crie seu e-mail e inclua seus ícones de mídia social.
2. Acesse o modo de desenvolvedor. 
3. Pesquise os valores type: social-media. Deve haver um para cada ícone de mídia social. Suas configurações de conteúdo estão logo acima dele no código. 
4. Sob cada valor type: social-media, pesquise o valor alt: null.
5. Substitua null pelo seu texto alternativo. Em nosso exemplo, o texto alternativo do ícone do site será o site do The Green Yoga, e o texto alternativo do ícone do Instagram será a conta do Instagram. 
   
6. Faça outras alterações no modo de desenvolvedor, se for necessário.  
7. Clique no ícone de cruz para fechar o modo de desenvolvedor.
8. (Opcional) Envie um e-mail de teste para verificar se o texto alternativo é exibido corretamente para cada um dos ícones de mídia.

Ao contrário do que você pode ter pensado, não é possível pode digitar HTML diretamente no Modo de desenvolvedor. Em vez disso, você deve usar YAML, que é uma representação fácil para uma estrutura de árvore semelhante ao JSON.

Com essa linguagem, você usará definições abstratas criadas por nossa equipe para facilitar o desenvolvimento de modelos e garantir que o HTML gerado e enviado aos clientes seja gerenciado por nossas ferramentas. Isso permite a melhor qualidade e amplo suporte a clientes de e-mail.

Como você deve saber, os clientes de e-mail não são todos iguais e pode ser difícil criar boletins informativos com aparência profissional que funcionem em qualquer lugar, inclusive em celulares e no Outlook.

Este também é um trabalho padrão em andamento à medida que novos clientes de e-mail surgem e clientes antigos mudam a maneira de processar e-mails.

É por isso que trabalhamos arduamente para garantir que seus e-mails funcionem conforme o esperado em todos os lugares com o mínimo de esforço de sua parte. Criamos uma maneira abstrata de alto nível para você definir seu HTML, enquanto nós fazemos a mágica nos bastidores. 

Em 99% dos casos de uso, você raramente encontrará alguma limitação com nossa linguagem de modelos, pois trabalhamos constantemente para atualizá-la, mas, é claro, pode haver algumas peculiaridades ou recursos específicos do cliente que podemos ter perdido. Isso abre um novo mundo de possibilidades além do que oferecemos na interface. Descubra nossos casos de uso mais frequentes no modo de desenvolvedor para personalização avançada do e-mail!