Configurações de aparência do editor de e-mails Stripo

Publicado em: 22 de outubro de 2024 · Última atualização: 12 de setembro de 2026 · Por Marcus Biel

A aba Appearance (aparência) permite controlar o estilo geral do e-mail, incluindo fontes, cores de fundo, estilos de botões e formatação para dispositivos móveis. Assim, o design se mantém consistente e se adapta a diferentes dispositivos e clientes de e-mail.

A seguir, veja uma explicação detalhada de cada seção da aba Appearance.

---

1. Configurações gerais (General Settings)

Personalize a aparência geral e o alinhamento do e-mail. Essas configurações se aplicam a todas as seções.

• Message Alignment: Alinhe o conteúdo do e-mail à esquerda (Left), ao centro (Center) ou à direita (Right).
• Default Padding: Defina um espaçamento uniforme ao redor de novas estruturas ou ajuste o espaçamento de cada lado individualmente: superior (Top), direito (Right), inferior (Bottom) e esquerdo (Left).
• General Background Color: Defina a cor de fundo geral do e-mail usando um código hexadecimal ou o seletor de cores.
• Font: Escolha entre fontes padrão, como Arial e Helvetica, ou fontes decorativas, como Roboto e Lato.
• Line Spacing: Ajuste o espaçamento entre linhas com quatro opções predefinidas.
• Paragraph Bottom Space: Ative ou desative o espaçamento entre parágrafos.
• Underline Links: Ative ou desative o sublinhado automático de todos os links do e-mail.
• Responsive Design: Ative para que o e-mail se adapte a diferentes tamanhos de tela, especialmente em dispositivos móveis.
• RTL Text Direction: Ative a direção do texto da direita para a esquerda para idiomas como árabe ou hebraico.
• Background Image: Adicione uma imagem de fundo, com a opção de associar um link a ela. Arraste e solte para fazer o upload das imagens.

---

2. Faixas (Stripes)

As faixas são as grandes seções que estruturam o e-mail, como cabeçalho (Header), conteúdo (Content), rodapé (Footer) e área de informações (Info Area). Cada faixa pode ter seu estilo definido de forma independente.

Faixa do cabeçalho

• Text Size: Personalize o tamanho do texto do cabeçalho (8–72).
• Background Color: Defina uma cor de fundo sólida ou deixe o fundo transparente.
• Content Background Color: Ajuste a cor de fundo da área de conteúdo do cabeçalho.
• Font Color: Defina a cor do texto.
• Link Color: Defina a cor dos links de navegação ou de outros links do cabeçalho.
• Background Image: Adicione uma imagem de fundo, se desejar.

Faixa de conteúdo

É o corpo principal do e-mail, destinado a textos, imagens e elementos interativos.

• Text Size: Ajuste o tamanho do texto do conteúdo (8–72).
• Content Background Color: Defina a cor de fundo da área de conteúdo principal.
• Font Color: Defina a cor padrão do texto.
• Link Color: Personalize a cor dos links.

Faixa do rodapé

Normalmente usada para dados de contato, informações legais ou links para redes sociais.

• Text Size: Defina o tamanho do texto (8–72).
• Background Color: Escolha uma cor de fundo sólida ou deixe o fundo transparente.
• Content Background Color: Defina a cor de fundo da área interna do rodapé.
• Font Color: Defina a cor da fonte.
• Link Color: Personalize a cor dos links do rodapé.
• Background Image: Adicione uma imagem com um link clicável, se desejar.

Faixa da área de informações

Usada para ressalvas, avisos legais ou informações adicionais.

• Text Size: Defina o tamanho da fonte (8–72).
• Font Color: Defina a cor da fonte.
• Link Color: Ajuste as cores dos links nesta faixa.

---

3. Títulos (Headings)

Defina o estilo visual dos títulos (H1, H2, H3) para criar hierarquia e estrutura no e-mail.

• Font: Escolha uma fonte para os títulos.
• Line Spacing: Ajuste o espaçamento entre linhas para facilitar a leitura.
• Heading Size: Personalize o tamanho dos títulos H1, H2 e H3 (8–72).
• Text Styling: Aplique negrito (Bold) ou itálico (Italic).
• Font Color: Defina uma cor específica para cada tipo de título.

---

4. Botão (Button)

Personalize o design dos botões do e-mail para aumentar o engajamento.

• Support for Outlook: Ative para garantir a exibição correta no Microsoft Outlook usando código VML (pode aumentar o tamanho do e-mail).
• Button Color: Defina a cor padrão dos botões.
• Highlight Hovered Buttons: Ative ou desative o efeito de mudança de cor ao passar o cursor sobre os botões.
  • Hover Color: Escolha a cor exibida ao passar o cursor.
• Font Color: Defina a cor do texto dos botões.
• Text Style:
  • Font: Selecione uma fonte para o texto dos botões.
  • Font Size: Ajuste o tamanho do texto (8–72).
  • Styling: Aplique negrito (Bold) ou itálico (Italic) ao texto.
• Border Radius: Arredonde os cantos dos botões (0–100).
• Borders:
  • Type: Escolha bordas contínuas (solid), tracejadas (dashed) ou pontilhadas (dotted).
  • Color: Defina as cores das bordas.
• Padding: Ajuste o espaçamento interno dos botões em cada lado: superior (Top), direito (Right), inferior (Bottom) e esquerdo (Left).

---

5. Formatação para dispositivos móveis (Mobile Formatting)

Garanta uma boa aparência para o e-mail em dispositivos móveis com configurações específicas.

• Header, Content, Footer, Info Area Text Sizes: Personalize o tamanho do texto de cada seção em dispositivos móveis: cabeçalho, conteúdo, rodapé e área de informações.
• Menu Items Font Size: Ajuste o tamanho da fonte dos itens do menu de navegação.
• Heading Sizes: Defina os tamanhos dos títulos H1, H2 e H3 na visualização para dispositivos móveis.
• Heading Alignment: Alinhe os títulos à esquerda (Left), ao centro (Center) ou à direita (Right).
• Button Text Size: Personalize o tamanho do texto dos botões em dispositivos móveis.
• Full-width Buttons: Ative para que os botões ocupem toda a largura da tela.
• Top and Bottom Padding: Ajuste o espaçamento interno superior e inferior para melhorar a aparência em dispositivos móveis.
• Content Margin: Ajuste a margem ao redor do conteúdo em dispositivos móveis (0–100).

---

Observações finais

• Testes: Sempre teste o e-mail em diferentes dispositivos e clientes de e-mail para garantir a consistência.
• Acessibilidade: Use fontes acessíveis, uma estrutura adequada de títulos e textos alternativos para imagens para tornar o conteúdo inclusivo.
• Otimização: Reduza o tamanho dos arquivos para acelerar o carregamento e melhorar o desempenho, especialmente para quem usa dispositivos móveis.