Blocos de conteúdo: o que configurar em cada um
Título, parágrafo, lista, imagem, botão, tabela, divisor, espaçador, vídeo, menu, redes sociais, HTML, cabeçalho e rodapé da marca.
Clique em um bloco no e-mail para abrir as propriedades dele. Esta tabela traz o que cada bloco de conteúdo permite configurar. Produto, Carrinho, Pedido e Contador estão em Blocos de loja.
O que cada bloco configura
| Bloco | O que você configura |
|---|---|
| bTítulo | O nível (de H1 a H4), um subtítulo com tamanho próprio, a família e o peso da fonte (Regular, Médio, Seminegrito ou Negrito), o tamanho, a cor, o alinhamento, a altura da linha, o espaçamento entre letras e a direção do texto (LTR ou RTL). |
| bParágrafo | Os mesmos controles de texto do Título, mais a cor dos links e o espaçamento de parágrafo. |
| bLista | Não ordenada ou Ordenada, e o estilo do marcador: Padrão, Disco, Círculo, Quadrado, Decimal, a b c, A B C ou i ii iii. Também o espaçamento entre itens e o recuo de itens aninhados. |
| bImagem | A imagem (Procurar ou Trocar), o Texto alternativo (mostrado se o e-mail bloquear imagens), o Link da imagem, a largura (há a opção Largura automática) e o alinhamento. |
| bBotão | O texto, o Link, a cor, o arredondamento e o espaçamento interno do botão. |
| bTabela | Borda (cor, espessura e estilo), linhas zebradas com a cor das listras, o fundo do cabeçalho e o espaçamento da célula. |
| bDivisor | O estilo da linha (Nenhum, Sólida, Tracejada ou Pontilhada), a espessura, a cor e a largura. |
| bEspaçador | A altura do espaço vazio. |
| bVídeo | A URL do vídeo e o título. |
| bMenu | Os itens (adicionar, remover e mudar a ordem), o layout Horizontal ou Vertical, o separador, a cor do link, o espaçamento entre letras e o espaçamento dos itens. |
| bSocial | Os ícones (adicionar, buscar, remover, reordenar e usar um ícone personalizado), a coleção Colorido, Branco ou Preto, o layout, o tamanho, o espaçamento entre ícones e o texto do link. |
| bHTML | O código HTML do trecho. |
| bCabeçalho | O layout (Centralizado ou Ao lado), o logo, o link do logo, o texto alternativo, a largura e a altura máximas do logo em pixels, os links do menu e o espaço entre eles, o estilo, a cor de fundo, o fundo do menu e os espaçamentos. |
| bRodapé da marca | O título, a cor de fundo, o estilo das redes, a opção de mostrar o nome das redes, a cor do nome e o texto legal. |
Controles que vários blocos têm em comum
| Controle | O que faz |
|---|---|
| Borda | Liga uma borda ao redor do bloco, com estilo, espessura, cor e arredondamento. |
| Espaçamento interno | A margem de dentro do bloco, para todos os lados juntos ou um a um (Topo, Direita, Base e Esquerda). |
| Cor de fundo | A cor atrás do bloco. Há a opção Transparente. |
| Ocultar em | Esconde o bloco em Desktop, em Mobile ou deixa em OFF para aparecer nos dois. |
Imagens
As imagens do e-mail ficam hospedadas no CDN. O editor aceita PNG, JPEG ou GIF, até 2 MB. SVG e WebP não são aceitos porque não renderizam em clientes como o Outlook.
Escreva o texto alternativo
Ele aparece no lugar da imagem quando o programa de e-mail do contato bloqueia imagens, e é o que um leitor de tela lê.
Vídeo
O e-mail não reproduz vídeo. O bloco coloca uma imagem de capa que leva para o vídeo. Informe uma URL do YouTube ou do Vimeo e a capa é gerada automaticamente, com link para a URL informada.
HTML
Use HTML compatível com clientes de e-mail. Conteúdo inseguro ou não suportado é removido da prévia e do envio. Larguras fixas acima de 480 px podem estourar a tela do celular e encolher o e-mail inteiro: prefira width:100% com max-width.
Tabela
Tabelas com 4 ou mais colunas ficam espremidas no celular. Divida o conteúdo ou use menos colunas.