Ajustes do editor de e-mail

Tudo o que dá para mudar no painel da direita do editor de modelos de e-mail, ajuste por ajuste. O painel muda de acordo com o que você tiver escolhido na tela:

Se você escolher…	O painel mostra
Nada (clique no fundo cinza)	O e-mail: o que vale para o e-mail inteiro.
A borda ou o fundo de uma seção	A seção.
Um espaço vazio de uma coluna	A coluna.
Um bloco	Esse bloco: título, texto, imagem, botão…

Em cima do painel você sempre vê o que está escolhido e onde está: Seção · seção 3 de 10, Texto · bloco 3 de 4. Se disser E-mail · Toque em um bloco para editá-lo, não há nada escolhido.

Como usar os controles

Os mesmos seis controles se repetem em todo o painel. Se você entender estes, entende tudo:

Controle	Como é	Como usar
Botões de opção	Uma fileira de botões; o escolhido fica verde-menta.	Clique na opção que você quer. Só pode haver uma escolhida. Exemplo: Esquerda · Centro · Direita.
Número	Uma caixinha com um número e a unidade ao lado (px ou %).	Digite o número ou use as setinhas. Se você digitar algo fora do intervalo (por exemplo 9999), ao sair da caixinha o valor se ajusta ao máximo ou ao mínimo permitido.
Cor	Um quadradinho de cor e um código como #23FFCF.	Clique no quadradinho para escolher a cor no seletor, ou digite o código se você já souber (por exemplo, o da sua marca). O ✕ remove a cor própria: o elemento volta a usar a do e-mail.
Espaçamento	Quatro caixinhas: Acima, Direita, Abaixo, Esquerda.	Cada caixinha é o espaço daquele lado, em px. Para deixar respiro só em cima e embaixo, coloque por exemplo 20 · 0 · 20 · 0.
Interruptor	Um botão que desliza.	Verde é ligado; cinza, desligado.
Avançado	Um grupo com uma setinha ▸, fechado no começo.	Clique no título para abrir. Ali ficam os ajustes que quase nunca são necessários.

O botão «reiniciar»

Quando você escolhe um bloco, no canto superior direito do painel aparece reiniciar. Volta o estilo ao início, sem mexer no conteúdo: o texto que você escreveu, a imagem ou o link continuam; as cores, os tamanhos e os espaços voltam aos de um bloco novo. Útil quando você mexeu tanto que já não sabe como voltar. (E se se arrepender: Desfazer.)

«px» e «%»

px (pixels) é uma medida fixa: 20 px são 20 px em qualquer tela. % é uma parte do espaço disponível: 50 % é a metade da coluna, seja ela grande ou pequena. Como referência, o e-mail inteiro tem 600 ou 700 px de largura e um texto normal tem entre 14 e 16 px de altura.

O e-mail

O que você vê quando não há nada escolhido. São os ajustes gerais: o que você colocar aqui vale para o e-mail inteiro, a menos que uma seção ou um bloco diga outra coisa.

O painel do e-mail, com Avançado aberto

Caixa de entrada

Ajuste

O que faz

Texto de pré-visualização

A linha cinza que aparece ao lado do assunto na caixa de entrada, antes de abrir o e-mail (Aparece ao lado do assunto na caixa de entrada). Use para completar o assunto, não para repeti-lo. Exemplo: assunto Seu test drive está confirmado, pré-visualização Esperamos você no sábado às 10 na unidade norte. O contador (55 / 90 caracteres) fica amarelo depois dos 90: dá para escrever mais, mas a maioria das caixas de entrada corta ali.

Design

Ajuste	O que faz	Valor de um e-mail novo
Largura no desktop	Qual a largura do e-mail em um computador: 600 px ou 700 px. 600 px é o mais compatível. No celular, ele sempre se ajusta à largura do aparelho.	700 px
Fundo do e-mail	A cor de todo o fundo, inclusive dos lados do e-mail em telas largas. Cada seção pode ter o próprio fundo por cima.	Branco #FFFFFF
Cor dos links	A cor das palavras com link dentro dos textos. Os botões têm cor própria.	Azul #0000EE
Cor do texto	A cor de todos os textos e títulos que não tenham cor própria. Mudar aqui é o jeito rápido de mudar todos de uma vez.	Preto #000000
Sublinhar os links	Ligado, os links ficam sublinhados. Desligado, eles só se distinguem pela cor.	Ligado
Fonte	A letra do e-mail inteiro: Helvetica, Arial, Georgia, Times New Roman, Courier New, Verdana ou Tahoma. Fontes seguras: aparecem iguais em qualquer cliente de e-mail.	Helvetica
Imagem de fundo	Uma imagem atrás do e-mail inteiro. Com Enviar imagem + você escolhe; com o ✕ sobre a miniatura você remove. Com uma imagem colocada aparecem três opções de como ajustá-la (veja abaixo).	Sem imagem

Se a cor do texto e a do fundo forem parecidas demais, aparece um aviso amarelo: Com estas cores o texto não se lê. Mude a cor do texto ou a do fundo. Nada deixa de funcionar, mas o e-mail enviado ficaria igualmente ilegível.

Como uma imagem de fundo é ajustada (igual no e-mail e nas seções):

Opção	O que faz	Quando
Cobrir	Aumenta a imagem até cobrir todo o espaço. Pode cortar as bordas da imagem.	Fotos de capa. Quase sempre esta.
Conter	Mostra a imagem inteira, sem cortar nada. Pode deixar faixas vazias nos lados.	Quando nenhuma parte da imagem pode ser perdida.
Repetir	Repete a imagem como azulejos, uma ao lado da outra.	Texturas e padrões pequenos.

O Outlook no Windows não mostra imagens de fundo

Coloque sempre também uma cor de fundo parecida com o tom da imagem. Se a imagem não carregar, o texto continua legível.

Avançado

Ajuste	O que faz
Largura exata	Uma largura que não seja 600 nem 700, entre 280 e 1000 px. Só se a sua marca usa uma medida especial.
Título do e-mail	Um nome interno do e-mail. Não aparece na caixa de entrada, mas os leitores de tela (usados por pessoas cegas) o anunciam primeiro.
Idioma	O código do idioma em que o e-mail está escrito: es, en, pt. Ajuda os leitores de tela a pronunciá-lo bem.

A seção

Para escolher uma seção, clique no fundo ou na borda dela, fora dos blocos. Você sabe que ela está escolhida porque em cima aparece o cabeçalho SEÇÃO 3 | altura automática com os botões (veja Mover, duplicar e excluir).

O painel da seção, com altura fixa e Avançado aberto

Altura

Ajuste	O que faz
Automática	A seção tem a altura do conteúdo dela. É o normal.
Fixa	A seção tem a altura que você escrever, entre 20 e 2000 px. Ao escolher esta opção aparecem o número e Conteúdo.
Conteúdo (com altura fixa)	Onde fica o que está dentro se sobrar espaço: Acima, Centro ou Abaixo. Para uma capa com um título sobre uma foto, Centro costuma ficar melhor.

Se o conteúdo não couber, a seção cresce. Nunca é cortado. A altura fixa funciona como um mínimo: você nunca vai mandar um e-mail com um texto cortado pela metade.

Fundo

Ajuste	O que faz
Cor	O fundo da seção, em toda a largura da tela (inclusive dos lados do e-mail). O ✕ remove a cor e a seção deixa ver o fundo do e-mail.
Enviar imagem +	Uma imagem de fundo só para esta seção. É o jeito de fazer uma capa com texto por cima: imagem de fundo + altura fixa + título e botão dentro. Com a imagem colocada você escolhe Cobrir, Conter ou Repetir (veja acima).

Borda

Ajuste	O que faz
Espessura	A largura da linha da borda, de 0 a 20 px. Com 0 não há borda. Ao aumentar, aparecem Lados, a cor e o Estilo.
Lados	Em quais lados vai a linha: Acima, Direita, Abaixo, Esquerda. Você pode ligar vários. Sempre fica pelo menos um: para não ter borda, coloque a espessura em 0. Uma linha só Abaixo é um jeito elegante de separar seções.
Cor	A cor da linha. Começa em cinza #CCCCCC.
Estilo	Contínuo (uma linha), Tracejado (- - -) ou Pontilhado (· · ·).
Cantos	Arredonda os cantos, em px. Na seção funciona mesmo sem borda: arredonda o fundo.

Colunas

Seis botões com o desenho de cada divisão: Uma coluna, Duas metades, Três colunas, Um terço e dois terços, Dois terços e um terço e Um quarto e o resto. O escolhido fica verde. Ao mudar, cada coluna mantém os seus blocos. Se você passar para menos colunas, nada se perde: os blocos das colunas que sobram vão para o final da última que fica. Se passar para mais, as novas chegam vazias.

Se você arrastou a borda entre colunas na tela, nenhum botão fica marcado e embaixo aparece a divisão personalizada, por exemplo Personalizado: 58 % · 42 % (veja Mudar a largura das colunas).

Avançado

Ajuste	O que faz	Valor de uma seção nova
Endereço da imagem	O endereço na internet da imagem de fundo, se ela já está publicada e você não quer enviá-la.	Vazio
Preenchimento	O espaço entre a borda da seção e o conteúdo dela, lado por lado. Mais preenchimento = mais respiro em volta.	10 px em cada lado
Fundo das colunas	Uma cor só atrás das colunas, dentro da largura do e-mail. Com Fundo você pinta a faixa inteira de ponta a ponta; com este, só a parte do e-mail. Combinados: faixa cinza de ponta a ponta com o conteúdo em um cartão branco.	Sem cor
Ocultar no celular	A seção inteira não aparece quando o e-mail é aberto em um celular.	Desligado
Empilhar as colunas no celular	Ligado, no celular as colunas ficam uma embaixo da outra. Desligado, continuam lado a lado mesmo ficando estreitas. Desligue só com colunas de conteúdo bem curto, como três ícones ou três números.	Ligado

A coluna

Para escolher uma coluna, clique em um espaço vazio da coluna, fora dos blocos. O painel diz, por exemplo, Coluna · coluna 2 de 2.

O painel da coluna

Ajuste	O que faz
Fundo	Uma cor só para esta coluna. Serve para destacar uma das duas metades, por exemplo uma caixa colorida com um dado importante.
Borda	Igual à da seção: espessura, lados, cor, estilo e cantos. Uma linha só à Direita da primeira coluna separa as duas colunas com um traço vertical.
Avançado → Preenchimento	O espaço entre a borda da coluna e os blocos dela. Se você colocar fundo na coluna, aumente o preenchimento para que o texto não fique grudado na borda da cor.

Os blocos

Cada bloco tem os seus ajustes em cima —os que fazem dele o que ele é— e embaixo os ajustes que quase todos compartilham: altura, borda, espaçamento e celular. As imagens desta seção mostram só a parte própria de cada bloco.

Título

Para os cabeçalhos do e-mail. O texto é escrito na tela com duplo clique (veja Escrever e formatar o texto). Um título novo diz Título.

Os ajustes próprios do Título

Ajuste	O que faz	Valor de um título novo
Nível	H1, H2, H3 ou H4: o quanto o título é importante. H1 é o título principal (um por e-mail); H2, os subtítulos; H3 e H4, títulos menores dentro desses. Não muda o tamanho: isso é o Tamanho. Os leitores de tela usam o nível para entender a ordem do e-mail.	H1
Tamanho	A altura das letras, de 8 a 120 px. Como referência: 32 px para o título principal, 20–24 px para subtítulos.	32 px
Cor	A cor do título. Vazio (com o ✕), usa a Cor do texto do e-mail, e o campo diz Herda do e-mail.	A do e-mail
Alinhamento	Esquerda, Centro, Direita ou Justificado (as linhas chegam alinhadas às duas bordas).	Esquerda
Entrelinha	O espaço entre uma linha e a seguinte: 1,2 (apertado), 1,4, 1,6 ou 2,0 (bem arejado). Em títulos, 1,2 fica bem.	1,2

Texto

Para parágrafos: o que o e-mail diz. Um texto novo diz Escribe tu texto aquí. (o texto inicial vem em espanhol: «Escreva seu texto aqui.»). Ele é escrito na tela com duplo clique, e ali mesmo você coloca negrito, itálico, links e variáveis.

Os ajustes próprios do Texto

Ajuste	O que faz	Valor de um texto novo
Tamanho	De 8 a 120 px. Para uma leitura confortável, entre 14 e 16 px. Abaixo de 12 px fica difícil de ler no celular.	14 px
Cor	Igual ao título: vazio, usa a do e-mail.	A do e-mail
Alinhamento	Esquerda, Centro, Direita ou Justificado. Para parágrafos longos, Esquerda é o mais fácil de ler; o centro funciona bem para textos de uma ou duas linhas.	Esquerda
Entrelinha	1,2, 1,4, 1,6 ou 2,0. Para parágrafos, 1,4 ou 1,6.	1,4

Imagem

Uma foto, um logo, um banner. Uma imagem nova aparece como um quadro que diz Escolha uma imagem.

Os ajustes próprios da Imagem

Ajuste	O que faz	Valor de uma imagem nova
Enviar imagem + / Trocar imagem	Escolhe o arquivo do seu computador. Com uma imagem colocada você vê a miniatura; o ✕ da miniatura a remove. Formatos e peso máximo: veja Imagens.	Sem imagem
Texto alternativo	O que aparece no lugar da imagem quando o cliente de e-mail a bloqueia, e o que ouvem as pessoas que usam leitor de tela. Escreva sempre. Descreva o que se vê: Caminhonete branca em uma estrada de montanha.	Vazio
Medida	Como a largura é medida: Porcentagem (uma parte da coluna: 100 % preenche, 50 % ocupa a metade) ou Pixels (uma largura fixa, de 1 a 1200 px). Ao trocar de uma para a outra, o número volta para 100 % ou para 300 px. Porcentagem é o mais seguro: se adapta sozinha ao celular.	Porcentagem, 100 %
Alinhamento	Se a imagem for mais estreita que a coluna: Esquerda, Centro ou Direita.	Centro
Link	Um endereço para que a imagem possa ser tocada, como um botão. Abre em uma aba nova. Vazio, a imagem não leva a lugar nenhum.	Vazio

A imagem não tem ajuste de Altura: a altura sai da largura, para que ela nunca se deforme. Ela também não tem preenchimento no começo (0 nos quatro lados), para que as imagens se encostem sem bordas brancas.

Em Avançado fica Endereço da imagem: para colar o endereço de uma imagem já publicada na internet em vez de enviá-la.

Avançado, na Imagem

Botão

A chamada para a ação: Agende seu test drive, Ver a oferta, Fale com a gente. Um botão novo diz Ver más (o texto inicial vem em espanhol: «Ver mais»).

Os ajustes próprios do Botão

Ajuste	O que faz	Valor de um botão novo
Texto	O que o botão diz. Só texto, sem formatação. Curto e com um verbo: Agende sua visita funciona melhor que Clique aqui.	Ver más
Link	Para onde o botão leva. Cole o endereço completo, com https://. Um botão sem link não leva a lugar nenhum: confira sempre.	Vazio
Fundo do botão	A cor do botão.	Menta #23FFCF
Texto do botão	A cor das letras do botão. Que contraste com o fundo: letras escuras sobre cores claras e vice-versa.	Preto #000000
Cantos	O quanto ele é arredondado, de 0 px (quadrado) a 60 px (uma pílula).	12 px
Alinhamento	Esquerda, Centro ou Direita dentro da coluna.	Centro

Divisor

Uma linha horizontal para separar partes do e-mail.

Os ajustes próprios do Divisor

Ajuste	O que faz	Valor de um divisor novo
Cor	A cor da linha.	Cinza-claro #DDDFE6
Espessura	O quanto ela é grossa, de 1 a 20 px.	1 px
Largura	Que parte da coluna ela ocupa, de 1 a 100 %. Uma linha curta (30 %) centralizada fica mais delicada que uma de ponta a ponta.	100 %
Estilo	Contínuo, Tracejado ou Pontilhado.	Contínuo

Espaço

Um vão vazio, para dar respiro entre dois blocos. Não aparece no e-mail: só empurra o que está embaixo.

O ajuste do Espaço

Ajuste	O que faz	Valor de um espaço novo
Altura	Quanto espaço ele deixa, de 1 a 400 px.	24 px

O Espaço não tem borda nem o grupo Altura dos outros blocos: a altura dele é o bloco.

Redes

Os ícones das suas redes sociais, cada um com o link para o seu perfil. Um bloco novo diz Adicione suas redes.

Os ajustes próprios de Redes

Redes — a lista de ícones do bloco:

• Cada rede tem o seu campo com o endereço do seu perfil (por exemplo https://instagram.com/tumarca).
• Se uma rede ficar sem endereço, ela avisa: Sem endereço, este ícone não é enviado. Esse ícone não sai no e-mail.
• À direita de cada uma: Subir, Descer (a ordem dos ícones) e a lixeira para removê-la.
• Em Adicionar uma rede ficam as que você ainda não usou: Facebook, Instagram, X, LinkedIn, YouTube, TikTok, WhatsApp, Pinterest, Vimeo e Web (para o seu site). Um clique e ela entra na lista.

Ícones — como eles aparecem:

Ajuste	O que faz	Valor de um bloco novo
Tamanho	O tamanho de cada ícone, de 16 a 64 px.	32 px
Espaçamento	O espaço entre um ícone e outro, de 0 a 48 px.	12 px
Alinhamento	Esquerda, Centro ou Direita.	Centro

WhatsApp

Para o WhatsApp, o endereço é https://wa.me/ seguido do seu número com o código do país e sem espaços nem sinais: https://wa.me/573001234567.

Menu

Uma fileira de links de texto, como o menu de um site: Início · Catálogo · Unidades · Contato. Fica bem em cima, embaixo do logo, ou no rodapé. Um bloco novo diz Adicione os links do menu.

Os ajustes próprios do Menu

Links — cada link do menu tem Texto (o que se lê) e Link (para onde leva), com os botões para subir, descer e excluir. Adicionar link + adiciona um novo no final.

Tipografia:

Ajuste	O que faz	Valor de um menu novo
Disposição	Em linha (um ao lado do outro) ou Um embaixo do outro.	Em linha
Tamanho	O tamanho das letras, de 8 a 40 px.	14 px
Cor	A cor dos links do menu.	Cinza #606D85
Alinhamento	Esquerda, Centro ou Direita.	Centro
Separador (só em linha)	O sinal que vai entre um link e outro: `	, ·, /`… Vazio não coloca nada.
Cor do separador (só se houver separador)	A cor dele. Vazio, usa a cor do menu.	A do menu
No celular, um embaixo do outro (só em linha)	No celular os links se empilham, para não ficarem apertados.	Ligado

HTML

Um bloco de código: para colar algo feito à mão que o editor não tem, como um contador ou um formato muito especial. O que você cola é enviado do jeito que está.

O bloco HTML

• Escreva ou cole o código no quadro.
• Se o bloco veio de um modelo antigo que não pôde ser convertido, em cima aparece Isto veio de um modelo que não pôde ser convertido. É mantido como estava e não se edita por blocos, e ele pode estar bloqueado para escrita.

Só se você souber o que está fazendo

Um erro no código pode desalinhar o e-mail inteiro, e o editor não consegue revisá-lo para você. Nunca cole scripts (os clientes de e-mail os apagam e marcam o e-mail como suspeito) nem folhas de estilo externas (não chegam). Se você não sabe HTML, não precisa dele: todo o resto se faz com blocos.

Colunas

Não é um bloco, embora esteja na paleta: adiciona uma seção nova de duas metades. Os ajustes dele são os da seção.

Ajustes que os blocos compartilham

Embaixo dos ajustes próprios, quase todos os blocos têm estes quatro grupos. Na imagem, um texto com altura fixa e uma linha de borda à esquerda:

Altura, Borda, Espaçamento e No celular

Altura

Automática (o bloco tem a altura do conteúdo) ou Fixa, de 20 a 2000 px. Igual à seção, se o conteúdo não couber, ela cresce: nunca corta. Serve para que dois blocos em colunas vizinhas tenham a mesma altura, por exemplo dois cartões de produto com textos de tamanhos diferentes.

Não existe na Imagem (a altura sai da largura) nem no Espaço (a altura dele é o bloco).

Borda

O mesmo controle da seção: Espessura (0 a 20 px; 0 é sem borda), Lados, cor, Estilo e Cantos. Em um bloco, os cantos só aparecem se houver borda.

Uma linha grossa colorida só à Esquerda transforma um texto em uma citação em destaque, como a da imagem.

Não existe no Espaço nem no HTML.

Espaçamento

O respiro em volta do bloco, nas quatro caixinhas Acima, Direita, Abaixo e Esquerda.

• Sem borda, há um único conjunto de caixinhas: o espaço entre o bloco e o que está em volta dele.
• Com borda, ele se divide em dois, porque agora há um lado de dentro e um de fora:
  • Margem (fora da borda): o espaço entre a borda e os outros blocos.
  • Preenchimento (dentro da borda): o espaço entre a borda e o conteúdo.

Pense em um quadro pendurado: a margem é a parede que fica em volta da moldura; o preenchimento, o espaço branco entre a moldura e a foto.

Os blocos novos vêm com 10 px de cada lado, menos a Imagem e o Espaço, que vêm com 0.

No celular

Ajuste	O que faz
Ocultar no celular	O bloco não aparece quando o e-mail é aberto em um celular. No computador ele continua aparecendo.
Tamanho no celular (só Título e Texto)	Um tamanho de letra diferente só para o celular. Por exemplo, um título de 40 px no computador pode ficar com 28 px no celular para não ocupar meia tela.

Para conferir como fica, use Celular na barra de cima ou a pré-visualização.