Edição de estilos da campanha por e-mail

Edite as fontes, cores, espaçamento e outras configurações de estilo de sua campanha para corresponder ao seu site ou marca.

Ultima atualização 6 de Dezembro de 2024

Cada campanha de email é composta por várias seções . Embora você possa estilizar a maioria das seções separadamente, há certas configurações de estilo "globais" que afetam toda a sua campanha. Isso cria uma aparência consistente para ajudar você a manter uma marca unificada.

Esses estilos globais são aplicados em todas as campanhas:

É possível aplicar automaticamente as configurações de estilo do site à sua campanha ou definir esses estilos manualmente. Você também pode salvar e reutilizar cores para qualquer elemento ou duplicar uma campanha para reutilizar todas as configurações de estilo em um novo rascunho.

Dica

para ajustar os estilos gerais, clique na área fora das seções (o plano de fundo do e-mail).

Aplicar Estilos do Site

Se você quiser que sua campanha corresponda à estética do seu site, você pode inserir automaticamente o logotipo do site e aplicar cores com base na paleta de cores do seu site. Para fazer isso:

  1. Ao editar o rascunho da campanha, clique em Estilo no painel direito.
  2. Clique em Corresponder rapidamente ao seu site. Se esse botão não estiver aparecendo, pode ser porque as configurações de estilo de uma seção de conteúdo estão abertas. Clique na área fora do conteúdo do rascunho para mostrar os estilos globais de e-mail.
  3. Para inserir o logotipo do site, clique em Inserir logotipo. Essa opção será desativada se você não tiver adicionado um logotipo do site.
  4. Para alterar as cores da campanha, clique em um dos temas de cores. Para alterar esses temas, altere a paleta de cores do seu site.

Depois de fazer essas alterações, você pode revertê-las para as configurações anteriores clicando na seta desfazer. Para remover o logotipo, clique no logotipo na visualização da campanha e selecione Texto no painel direito.

Escolha suas fontes

Em qualquer seção, clique em Pacote de Fonte para definir as fontes de todo o texto em uma campanha.

Os pacotes de fontes são combinações de fontes cuidadosamente escolhidas por nossos designers para agradar aos olhos e ajudar seus assinantes a focarem na sua mensagem. Navegue entre as opções para encontrar um pacote de fontes que corresponda ao tom e ao conteúdo de sua campanha.

Não há como editar fontes individuais em um pacote de fontes. Nossos pacotes de fontes são selecionados para serem consistentes para uma ampla variedade de clientes de e-mail. A maioria dos clientes de e-mail para dispositivos móveis, por exemplo, não oferece suporte para webfonts e os substitui por suas próprias fontes padrão. As fontes em nossos pacotes de fontes são selecionadas para compatibilidade máxima, assim você pode ter certeza de que o que você vê no seu rascunho é o mais próximo possível do que seus assinantes verão em suas caixas de entrada.

Se você precisar de uma fonte diferente em um local específico, considere adicioná-la como uma imagem ou usar cores e formatação para diferenciar seu texto.

Por exemplo, no layout Bloom, o tema "Floral" é uma imagem adicionada ao cabeçalho e o recurso "extra especial" (em sua própria seção de texto) é exibido em itálico e na cor rosa para ajudar a destacá-lo:

bloom.png

Defina seus tamanhos de texto

Em qualquer seção, clique em Tamanhos de Fontes para definir o tamanho de todo o texto da sua campanha.

  • Use o controle deslizante Tamanho de Fonte Base para escolher o tamanho do corpo do texto da sua campanha.
  • Use o controle deslizante de Escala de Tipo para definir o contraste do tamanho do texto. Por exemplo, uma escala de tipo menor resultará em um e-mail "plano", em que os cabeçalhos são apenas marginalmente maiores que o texto do parágrafo, e uma escala de tipos maior tornará os cabeçalhos relativamente maiores.
font-size.png

Existem algumas exceções. O Texto do cabeçalho tem suas próprias configurações de tamanho e os elementos a seguir têm, até o momento, um tamanho fixo:

  • Texto do botão
  • Postagem de blog e títulos de produtos
  • Datas de postagem do blog
  • Preços dos produtos
  • Texto do rodapé, incluindo seu endereço e o link de cancelamento de assinatura

Mude suas cores

Ao clicar em um elemento para alterar sua cor, como o plano de fundo do conteúdo ou a cor do link, você verá duas opções, Paleta de e-mailPaleta de sites, com os círculos de amostra correspondentes.

Paleta de e-mails

Em Paleta de e-mail, as cores utilizadas na campanha são exibidas.

  • Para usar uma cor existente, clique na amostra correspondente
  • Para adicionar uma nova cor, clique no seletor de cores e depois em + na amostra que aparecer
  • Para apagar uma cor, clique na amostra e depois no X na amostra.
adjust-colors.gif

Dica

consulte nossas dicas sobre como usar cores para transmitir sua personalidade.

Caso saiba o valor da cor desejada, digite no campo de valor. Essa é uma ótima maneira de copiar as cores exatas de outras configurações de estilo. O campo de valor aceita HEX e RGB.

color_code.jpg

Paleta de sites

A seção "Paleta de sites" mostra as cores usadas nos estilos do site. Você pode usar essa opção para que suas campanhas correspondam à identidade visual do seu site.

  • Para usar uma cor da Paleta de sites, clique em sua amostra. Isso a adiciona à sua paleta de e-mail.
  • Não é possível alterar ou excluir as cores da Paleta de sites diretamente. Altere as cores do seu site nos estilos do site.

Apaguei acidentalmente uma amostra de cor na Paleta de e-mail

Se essa cor estiver sendo usada em uma seção diferente, você poderá adicioná-la às cores de amostra principal. Por exemplo, se você excluir uma cor de amostra que também está sendo usada nos botões de publicação de seu blog:

  1. Clique na seção de publicação do blog.
  2. Clique em Detalhes.
  3. Clique em Cor do botão.
  4. Clique em + na amostra dessa cor e ela aparecerá em outras áreas de estilo de cor novamente.

Se a cor não está sendo usada na campanha, não há como recuperá-la no momento. Como precaução, você pode anotar o código HEX das cores que usadas caso apague uma amostra sem querer.

Cores de fundo

Existem três tipos de configurações de cor de fundo:

  • Plano de fundo do e-mail - A cor de fundo da área ao redor do conteúdo. Se os dois estilos abaixo estiverem definidos como transparentes, essa é a cor exibida por trás do conteúdo da campanha também.
  • Plano de fundo do conteúdo - a cor do fundo de todas as seções da campanha. Se a cor da seção estiver como transparente, ela aparecerá atrás da seção. Se todas as seções tiverem cores exclusivas, talvez essa cor não apareça em nenhum lugar.
  • Cor da seção - A cor de fundo de uma seção individual. Você pode estilizar cada seção de forma independente. Se a cor da seção estiver definida como transparente, o plano de fundo do conteúdo ou o plano de fundo do e-mail aparecerão atrás da seção.

Para definir o Plano de fundo do e-mail e o Plano de fundo do Conteúdo, clique na área fora das seções e clique nas opções no painel lateral. Para definir a cor de uma seção, clique na seção e, em seguida, clique em Cor da seção.

Lembre-se:

  • Na seção de imagens, a cor do fundo aparece apenas atrás das legendas e das áreas de imagem transparentes. Por exemplo: se você selecionou o layout da seção Abaixo e ocultou as legendas, a cor do fundo não ficará visível.
  • Como os e-mails geralmente ocupam a tela inteira na versão móvel, a cor de fundo pode não ficar visível em alguns aparelhos.
  • Para criar um plano de fundo transparente, escolha a amostra à esquerda com linhas diagonais.
transparent_color.jpg

Os links de texto acompanham o pacote e o tamanho geral das fontes. Para definir a cor de todos os links da sua campanha, clique na área fora das seções e depois clique na Cor do link.

Dica

os links Ver no navegador têm a própria opção de cor, pois eles aparecem por cima da cor de fundo do cabeçalho.

style-a-link.png

Margem

Para alterar o espaço em branco em torno de texto e imagens, clique em uma seção para ver as opções de espaçamento. A aparência do espaçamento varia dependendo do aparelho. As imagens das campanhas, por exemplo, não têm preenchimento na versão móvel para que o conteúdo fique visível e claro na tela menor.

Se aparecer muito ou muito pouco espaçamento, experimente configurações diferentes até encontrar a aparência ideal para suas necessidades. Tenha em mente que suas campanhas podem ter pequenas diferenças na aparência, dependendo de como seus assinantes visualizam a campanha.

Dica

Você pode adicionar mais espaço em branco acima e abaixo das seções com os espaçadores.

Design responsivo

O design responsivo das Campanhas por e-mail redimensiona imagens e textos com base na tela do destinatário. Não importa se o assinante está checando e-mails num desktop ou no smartphone enquanto espera o trem, o design responsivo deixa sua campanha com o melhor visual.

  • Os tipos de letra aumentam ligeiramente em dispositivos móveis para melhorar a legibilidade em telas menores.
  • No browser e nas telas estreitas, as imagens e o texto nas seções de blog, produtos e imagens são empilhados. Isso serve para o conteúdo continuar visível.

Estilize uma seção

Além dos estilos globais acima, cada seção é estilizada separadamente. Clique em uma seção na visualização à esquerda e use o painel direito para estilizar. Para obter mais ajuda, visite nossas dicas sobre como criar e estilizar cada tipo de seção:

Reutilizar um estilo

Para usar uma campanha que você já enviou como template, incluindo todas as configurações de estilo:

  1. Abra o painel de controle das Campanhas por E-mail.
  2. Clique em Enviar.
  3. Clique no ícone Reutilizar template na campanha com o estilo que você deseja reutilizar.
  4. Selecione o tipo de automação.

O layout aparece como um novo rascunho, que você pode usar como ponto de partida para uma nova campanha. Saiba mais em Criação de Campanhas por e-mail.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.