Referência de blocos de conteúdo de e-mail

Referência para cada bloco que você pode adicionar na tela do editor Arrastar e soltar, e para os tipos de link disponíveis em botões e texto. Para controlar quais destinatários veem um bloco, defina uma condição de exibição.

Adicionar blocos de conteúdo

Abra a aba Blocos e arraste um bloco para a tela, ou clique em um bloco para adicioná-lo no final do e-mail. Blocos disponíveis:

Título: títulos e cabeçalhos curtos no e-mail
Texto: corpo do texto e descrições mais longas
Botão: uma chamada para ação clicável
Imagem: fotos do Repositório de mídia, upload ou URL
Vídeo: um pôster de vídeo clicável que leva a um vídeo do YouTube ou Vimeo
Cartão: uma imagem combinada com um título, texto e botão em um único layout
Divisor: uma linha que separa seções visualmente
2 colunas: duas colunas iguais lado a lado
3 colunas: três colunas iguais lado a lado
4 colunas: quatro colunas iguais lado a lado
33 / 67: duas colunas onde a esquerda ocupa cerca de 33% da largura e a direita cerca de 67%
67 / 33: duas colunas onde a esquerda ocupa cerca de 67% da largura e a direita cerca de 33%
Temporizador: uma contagem regressiva para ofertas e prazos
Menu: uma linha ou coluna de links, como navegação ou contatos
Social: ícones que levam aos seus perfis sociais
HTML: HTML personalizado, como um formulário, pesquisa ou vídeo incorporado
Produtos: uma grade repetida de cartões de produtos. Insira produtos manualmente ou puxe-os do seu Catálogo de produtos, do carrinho abandonado de um destinatário ou de uma estratégia de recomendação integrada, como mais vendidos ou de volta ao estoque.
Notícias: uma grade repetida de cartões de artigos. Escolha-os manualmente de um feed RSS ou Atom, ou puxe-os ao vivo de um feed registrado para sua aplicação.

Título e texto

Blocos de Título e Texto contêm o texto que os destinatários leem no e-mail. Use Título para títulos e linhas curtas, Texto para o corpo do texto e descrições mais longas.

Clique em um bloco na tela para começar a editar. Selecione o texto para abrir a barra de ferramentas de formatação.

Bloco de título selecionado na tela com a barra de ferramentas de formatação de texto mostrando opções de estilo e formatação

Opções da barra de ferramentas

Estilo de texto: defina um estilo de parágrafo (Título 1, Título 2, Normal, etc.) para todo o bloco
Tamanho da fonte: redimensione o texto selecionado ou aplique um tamanho a todo o parágrafo
Negrito / Itálico / Sublinhado / Tachado: formatação de caracteres padrão
Alinhamento: esquerda, centro ou direita
Link: envolva o texto selecionado em um hiperlink
Lista com marcadores / Lista numerada: transforme as linhas selecionadas em uma lista. Qualquer marcador ou número com que as linhas já comecem é descartado, para que não seja duplicado com o marcador da própria lista.

Selecione o bloco (não um intervalo de texto) para abrir suas configurações no painel direito, depois ative o Espaçamento entre letras para aumentar ou diminuir o espaçamento entre caracteres para todo o bloco. Aceita valores fracionários e negativos. Para aplicar o espaçamento entre letras em todos os blocos de texto de uma vez, defina-o como padrão para todo o e-mail em Tipografia. Consulte Configurar estilo para todo o e-mail.

Colando de outros documentos

Colar texto do Google Docs, Word ou de uma página da web mantém negrito, itálico, sublinhado, tachado e links. Cor, tamanho da fonte e família da fonte da origem não são transferidos — a tipografia do próprio bloco sempre prevalece. Para ignorar completamente a formatação de origem e assumir o estilo do bloco, cole com Ctrl+Shift+V (Cmd+Shift+V no Mac).

Uma lista com marcadores ou numerada colada mantém seu marcador ou número como texto simples no início de cada linha, no mesmo bloco. Selecione essas linhas e clique em Lista com marcadores / Lista numerada para transformá-las em uma lista real — o botão remove o marcador restante para você.

Em campos de linha única, como o rótulo de um Botão, as quebras de linha coladas se transformam em um único espaço.

Personalização com Tags de Mesclagem

As Tags de Mesclagem são espaços reservados que inserem um valor de Tag do perfil do destinatário, para que cada assinante veja um texto personalizado. Para adicionar uma, selecione o texto, clique em Tags de Mesclagem na barra de ferramentas e escolha uma Tag da sua conta. Clique em uma Tag de Mesclagem inserida para abrir um painel com os campos Padrão (o valor mostrado quando a tag está vazia) e Formato (capitalização, número ou formatação de data a ser aplicada ao valor).

Imagem

Um bloco de Imagem exibe uma figura no e-mail. Selecione-o na tela para abrir as configurações de Imagem no painel direito.

Adicionando uma imagem

Clique em Adicionar imagem quando o bloco estiver vazio, ou Substituir imagem quando uma figura já estiver definida. Isso abre a Galeria de Mídia com três abas:

Biblioteca: seus arquivos enviados, pesquisáveis por nome de arquivo.
Fotos de banco de imagens: pesquise fotos gratuitas do Pexels sem sair do editor. Clique em uma para copiá-la para sua biblioteca e inseri-la.
Gerar com IA: descreva a imagem que você deseja e escolha uma proporção. A imagem gerada é salva em sua biblioteca.

Galeria de Mídia com as abas Biblioteca, Fotos de banco de imagens e Gerar com IA, e um campo de busca por nome de arquivo

Você também pode colar um link hospedado diretamente em URL da Imagem para pular a galeria.

Excluindo imagens da Biblioteca

Na aba Biblioteca, passe o mouse sobre um arquivo e clique no ícone Excluir para excluí-lo, ou marque vários arquivos (ou clique em Selecionar tudo para selecionar todas as imagens na página atual) e clique em Excluir selecionados para removê-los em massa. Confirme a caixa de diálogo para prosseguir.

Texto alternativo

Descreva a imagem em Texto alternativo para acessibilidade, ou clique em Gerar alt com IA para que a IA o escreva a partir da imagem no seu idioma de edição atual. Imagens adicionadas de Fotos de banco de imagens ou Gerar com IA recebem texto alternativo automaticamente.

Tamanho e ajuste

Largura: defina a largura da imagem em px, ou como uma porcentagem do espaço disponível para que ela permaneça fluida. Deixe no padrão para usar a largura natural da imagem.
Altura (px): defina uma altura de renderização fixa. Deixe em branco para escalar automaticamente — a partir da proporção de corte, se uma for definida, caso contrário, a partir das proporções naturais da imagem.
Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
Ajuste: escolha Preencher para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro.

Mude a tela para Celular (consulte Editar a visualização móvel) para definir qualquer uma dessas opções separadamente para telas de telefone. Marque Largura (celular), Altura (celular), Cortar (celular) ou Ajuste (celular) para substituir essa configuração específica, começando pelo seu valor de desktop; deixe uma caixa desmarcada para continuar herdando a configuração de desktop. Cortar (celular) só aparece quando Cortar está definido para uma proporção no desktop, e mudar Cortar de volta para Original no desktop descarta qualquer substituição de Cortar (celular).

Configurações de tamanho e ajuste para um bloco de Imagem na visualização móvel, mostrando as caixas de seleção de substituição móvel de Largura, Altura, Cortar e Ajuste, todas definidas para herdar o valor do desktop

Links e espaçamento

Para abrir um link quando a imagem for clicada, insira-o em URL do link e defina o Destino do link para abrir na mesma aba ou em uma nova. Consulte Adicionar links para os tipos de link disponíveis.

Em Espaçamento, ative o Preenchimento para adicionar espaço ao redor da imagem. Use Todos os lados para um preenchimento uniforme, ou ative Mais opções para definir cada lado separadamente.

Painel de configurações de imagem com Substituir imagem, URL da imagem, Texto alternativo, URL do link, Destino do link e Preenchimento

Vídeo

Um bloco de Vídeo adiciona um vídeo do YouTube ou Vimeo ao e-mail como uma miniatura clicável. Os clientes de e-mail não podem reproduzir vídeo dentro da mensagem, então o bloco mostra uma imagem estática com uma sobreposição de ▶. Quando o destinatário toca nela, o vídeo abre no YouTube ou Vimeo. Isso funciona em todos os principais clientes, incluindo o Outlook.

Selecione o bloco de Vídeo na tela para abrir suas configurações no painel direito.

URL do vídeo: cole um link do YouTube ou Vimeo. O editor busca uma miniatura automaticamente.
Texto alternativo: descreva o vídeo para acessibilidade.
URL da miniatura: mantenha a miniatura buscada automaticamente, ou clique em Adicionar miniatura / Substituir miniatura para escolher uma da Galeria de Mídia, ou cole um link hospedado diretamente.
Sobreposição do botão de reprodução: ativado por padrão. Desative para mostrar a miniatura simples sem a sobreposição de ▶. A sobreposição não está disponível para miniaturas em alguns hosts externos. O editor avisa quando isso se aplica, e o e-mail mostra a miniatura simples em vez disso.
Largura (px), Raio do canto (px) e Alinhamento: controlam a aparência da miniatura e onde ela se posiciona no layout. Você pode definir o alinhamento separadamente para celular.

Configurações do bloco de vídeo com URL do vídeo, Texto alternativo, URL da miniatura, Sobreposição do botão de reprodução, Largura, Raio do canto e Alinhamento

Cartão

Um bloco de Cartão combina uma imagem com um título, texto e botão em um único layout pronto. Selecione-o na tela para abrir suas configurações no painel direito.

Layout: escolha de que lado a imagem fica em relação ao conteúdo.
Imagem: substitua a imagem, defina o texto alternativo ou edite o prompt para uma imagem que você criou com Gerar com IA.
Tamanho e ajuste: os campos de tamanho dependem do Layout. Cortar está disponível para todos os layouts. Ajuste se aplica a todos os layouts:
- Topo: Altura define a altura da imagem em px ou como uma porcentagem da largura do cartão. Largura (px) estreita a imagem para uma largura fixa em pixels e a centraliza.
- Fundo: Altura define a altura do cartão em px ou como uma porcentagem de sua largura. Não há campo Largura (px). A imagem é o fundo do cartão. Ajuste também funciona aqui: Preencher corta a imagem para o cartão — defina o ponto de corte com Ponto focal — e Conter escala a imagem inteira dentro dele, posicionada com Definir posição. O Outlook Desktop aproxima o Conter e ignora ambos.
- Esquerda ou Direita: Largura define a largura da coluna da imagem em px ou como uma porcentagem do cartão. Altura (px) fixa a imagem em uma altura em pixels. Definir uma altura em pixels limpa a proporção de corte abaixo. Escolher uma proporção de corte limpa a altura em pixels. Você não pode usar ambos ao mesmo tempo.
- Para todos os layouts:
  - Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
  - Ajuste: escolha Preencher para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
  - Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O mesmo suporte de cliente de e-mail que qualquer outra imagem.
Espaçamento: defina o preenchimento ao redor do conteúdo do cartão.

Botão

Um Botão é uma chamada para ação clicável no e-mail.

Clique em um bloco de Botão para editar seu rótulo na tela. Use a barra de ferramentas para alterar o tamanho da fonte, cor do texto, negrito, itálico, sublinhado, tachado e alinhamento. O rótulo é uma linha única: quebras de linha coladas se transformam em um espaço. Consulte Colando de outros documentos para saber o que uma colagem mantém e descarta.

Para definir o que acontece quando o destinatário clica no botão:

Clique no ícone de link na barra de ferramentas para abrir Inserir/Editar Link.
Ou use Tipo de ação e URL na seção Link do painel direito.

Bloco de botão na tela com uma barra de ferramentas de formatação e configurações de Link no painel direito

Consulte Adicionar links para os tipos de ação disponíveis.

No painel direito, em Estilos:

Alinhamento: esquerda, centro ou direita.
Fundo: ative para substituir a aparência padrão, depois escolha Sólido para uma cor sólida ou Gradiente para um gradiente linear de duas paradas (uma cor inicial, uma cor final e um ângulo em graus, padrão 90°). Com Gradiente selecionado, o botão ainda mostra um preenchimento sólido em clientes de e-mail que não suportam fundos de gradiente, como o Outlook no Windows. Botões que já tinham um fundo sólido o mantêm e abrem com Sólido selecionado.
Cor do texto, Tamanho da fonte e Família da fonte: ative cada opção para substituir a aparência padrão.
Raio do canto, Cor da borda e Largura da borda: forma e contorno do botão. O Gmail e o Apple Mail renderizam o raio do canto do botão; o Outlook Desktop o ignora e mostra cantos quadrados, da mesma forma que faz com as imagens.
Largura: defina uma largura fixa para o botão ou deixe-a automática.
Preenchimento: adicione espaço dentro do botão. Use Todos os lados para um preenchimento uniforme, ou ative Mais opções para definir cada lado separadamente.

Configurações de Estilos de Botão no painel direito com Alinhamento, Fundo, Cor do texto, Tamanho da fonte, Raio do canto e Preenchimento

Divisor

Um Divisor é uma linha horizontal entre os blocos de conteúdo. Use-o para separar seções visualmente no e-mail.

Configure o estilo da linha (Sólida, Tracejada, Pontilhada), cor, espessura e largura no painel de configurações.

Configurações do bloco Divisor com opções de estilo de linha, cor, espessura e largura no painel direito

HTML

O bloco HTML permite que você cole HTML personalizado em seu e-mail. Use-o para um formulário personalizado, pesquisa ou vídeo incorporado.

Acima do campo de código, clique em Tag de mesclagem para pesquisar as Tags da sua conta e inserir uma Tag de Mesclagem na posição do cursor — o mesmo recurso de personalização descrito acima — ou clique no ícone de emoji para inserir um emoji da mesma forma. Clique em uma Tag de Mesclagem inserida para abrir o mesmo painel Padrão / Formato como em um bloco de Título ou Texto.

Exemplos

Este formulário de lead coleta um endereço de e-mail para enviar um código promocional para a Venda de Ano Novo.

Formulário de lead HTML no editor de e-mail com um campo de e-mail e um botão Obter meu código

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Esta pesquisa pergunta em qual categoria o destinatário está comprando e vincula cada opção à página de venda relevante.

Pesquisa HTML no editor de e-mail perguntando o que o usuário está comprando com quatro opções de categoria

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Este exemplo incorpora um vídeo promocional da Venda de Ano Novo no e-mail.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Você também pode adicionar um link de cancelamento de inscrição diretamente no bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O espaço reservado %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

O bloco Menu coloca vários itens clicáveis em uma linha ou coluna. Use-o para uma barra de navegação ou uma lista de contatos da empresa.

Para cada item do menu, defina:

Rótulo: o texto que os destinatários veem
URL: para onde o item abre
Destino: mesma aba ou uma nova aba

Nas configurações do bloco, você também pode definir:

Direção: Horizontal ou Vertical
Alinhamento: Esquerda, Centro ou Direita
Separador: um divisor opcional entre os itens
Fonte, tamanho, peso, espaçamento entre letras e cores de link/texto

Configurações do bloco de menu com rótulos de itens, URLs, direção, alinhamento e opções de separador

O bloco Social exibe uma linha de ícones de mídia social que levam aos seus perfis. Use-o para enviar destinatários para o Facebook, Instagram, X e outras plataformas a partir do e-mail.

Adicione entradas de plataforma, depois defina o alinhamento, o tamanho do ícone e o espaço entre os ícones.

Configurações do bloco social com links de plataforma mais Alinhamento, Tamanho do ícone e Espaçamento

Temporizador de contagem regressiva

O bloco Temporizador é uma contagem regressiva no e-mail. Use-o para ofertas por tempo limitado, vendas relâmpago e lembretes de eventos.

Para configurá-lo:

Em Contagem regressiva, defina a Data de término e a Hora de término, depois escolha o Fuso horário e o Idioma para os rótulos do temporizador.
Ative os Rótulos para mostrar legendas “dias / horas / minutos / segundos” sob os dígitos, ou desative para apenas números.
Em Aparência, defina o Fundo, a Cor dos dígitos, a Cor dos rótulos e o tamanho da fonte para os dígitos (padrão 40px) e rótulos (padrão 16px).
Ajuste o Espaçamento (preenchimento) conforme necessário.

Configurações do bloco de temporizador com data e hora de término da contagem regressiva, Rótulos, Aparência e opções de Espaçamento

O temporizador é renderizado como uma imagem nítida em qualquer idioma ou tamanho, com um fundo que se estende por toda a linha do e-mail e uma versão renderizada nativamente para a largura do celular, em vez de uma imagem de desktop encolhida.

Colunas

As Colunas dividem a tela em seções lado a lado para que você possa colocar conteúdo um ao lado do outro em uma única linha.

Arraste um destes blocos para a tela:

2 colunas: duas colunas iguais
3 colunas: três colunas iguais
4 colunas: quatro colunas iguais
33 / 67: coluna esquerda com cerca de 33% de largura, direita com cerca de 67%
67 / 33: coluna esquerda com cerca de 67% de largura, direita com cerca de 33%

Em seguida, adicione conteúdo a cada coluna. Para alterar o espaçamento de todas as colunas no e-mail, abra Configurações → Padrões de colunas e ajuste o preenchimento externo, o preenchimento da coluna e o espaço entre as colunas.

Para a própria imagem da coluna (aquela que você adiciona com Adicionar imagem nas configurações da coluna), as configurações mostram uma seção Tamanho e ajuste. Este é o mesmo controle do layout Esquerda / Direita do bloco Cartão. Um bloco de Imagem arrastado para uma coluna é um elemento de conteúdo separado e mantém seus próprios campos de dimensionamento simples — consulte Imagem.

Você também pode colar um link hospedado diretamente em URL da Imagem para pular a galeria.

Largura: defina a largura da imagem em px ou como uma porcentagem da coluna. Deixe-a não definida para preencher a coluna.
Altura (px): fixe a imagem em uma altura em pixels. Definir uma altura em pixels limpa a proporção de corte abaixo. Escolher uma proporção de corte limpa a altura em pixels. Você não pode usar ambos ao mesmo tempo.
Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
Ajuste: escolha Preencher para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O mesmo suporte de cliente de e-mail que qualquer outra imagem.

Produtos

Um bloco de Produtos mostra uma grade de cartões de produtos a partir de um modelo compartilhado. Cada cartão pode incluir uma imagem, título, descrição, preço e um botão de compra. O modelo se repete para cada produto.

Clique em um cartão na tela para torná-lo ativo e editá-lo:

Altere o título, descrição, preço, imagem ou link por produto para atualizar apenas esse cartão.
Altere o layout do modelo, cores, preenchimento ou quais elementos ele contém para atualizar todos os cartões.

No painel de configurações, em Fonte, escolha de onde vêm os produtos:

Manual: insira produtos manualmente, escolha-os do seu Catálogo de produtos por ID ou misture ambos.
Regra do catálogo: puxe produtos automaticamente por categoria e ordem de classificação, resolvidos na hora do envio a partir do catálogo.
Carrinho: mostre os itens do carrinho abandonado atual de cada destinatário.
Recomendações: puxe produtos classificados por uma estratégia integrada — mais vendidos, novidades, de volta ao estoque ou queda de preço — resolvidos do seu catálogo na hora do envio.

Adicionar produtos manualmente

Preencha a grade você mesmo, inserindo produtos manualmente ou escolhendo itens específicos do seu Catálogo de produtos por ID. Você pode misturar ambos no mesmo bloco.

Número de produtos: defina quantos cartões mostrar (1–24).
Adicionar produto: adicione um cartão e preencha seu título, descrição, preço, imagem e link você mesmo.
Escolher do catálogo…: selecione produtos específicos do seu Catálogo de produtos em vez de digitá-los.
Atualizar do catálogo: puxe o título, descrição, preço e imagem mais recentes para os produtos que você escolheu do catálogo, caso tenham mudado desde que você os adicionou. Não afeta produtos inseridos manualmente.
Imagens do produto: clique em uma miniatura para substituir a imagem daquele produto.
Links do produto: insira ou edite a URL para cada produto.

Configurações de fonte manual para o bloco de Produtos com Adicionar produto, Escolher do catálogo, Atualizar do catálogo, Imagens do produto e Links do produto

Puxar produtos com uma regra do catálogo

Puxe produtos automaticamente por categoria e ordem de classificação, sem escolha manual.

Categoria: limite a uma categoria específica do catálogo ou Todas as categorias.
Ordenar: escolha a ordem em que os produtos são puxados: Mais recentes primeiro, Preço: do menor para o maior, Preço: do maior para o menor ou Título A-Z.
Número de produtos: defina um limite de quantos cartões mostrar (1–12).
Atualizar pré-visualização: recalcule a pré-visualização da tela em relação ao catálogo agora mesmo.

Configurações de fonte de regra do catálogo para o bloco de Produtos com Categoria, Ordenar, Número de produtos e Atualizar pré-visualização

Mostrar itens do carrinho

Renderize os itens atuais do carrinho abandonado de um destinatário.

Máximo de produtos exibidos: defina um limite de quantos cartões mostrar (1–12).
Pré-visualizar o carrinho de um usuário: insira um ID de usuário ou e-mail e clique em Pré-visualizar carrinho para ver como o bloco é renderizado para aquele destinatário específico.

Configurações de fonte do Carrinho para o bloco de Produtos com Máximo de produtos exibidos e Pré-visualizar o carrinho de um usuário

Obter produtos recomendados

Puxe produtos classificados por uma estratégia integrada em vez de escolhê-los você mesmo ou escrever uma regra de catálogo.

Configurações do bloco de Produtos com Fonte definida como Recomendações, um seletor de Estratégia definido como Mais vendidos (30 dias), Categoria, Número de produtos e Atualizar pré-visualização

Estratégia: escolha como os produtos são classificados — Mais vendidos (7 dias), Mais vendidos (30 dias), Novidades, De volta ao estoque, Queda de preço, Comprados juntos ou Com base no que eles viram. Selecionar Recomendações substitui o controle Ordenar de Regra do catálogo por este seletor de Estratégia.

Seletor de estratégia expandido mostrando Mais vendidos (7 dias), Mais vendidos (30 dias), Novidades, De volta ao estoque, Queda de preço, Comprados juntos e Com base no que eles viram

Categoria: limite a uma categoria específica do catálogo ou Todas as categorias.
Número de produtos: defina um limite de quantos cartões mostrar (1–12).
Atualizar pré-visualização: recalcule a pré-visualização da tela em relação ao catálogo agora mesmo.

Estilizar a grade

Depois de escolher uma fonte, essas configurações controlam a aparência da grade e de seus cartões. Elas permanecem as mesmas, não importa qual fonte você use:

Colunas: escolha 1, 2 ou 3 cartões por linha. No celular, os cartões sempre se empilham em uma coluna.
Espaçamento: ative para definir o espaço entre os cartões. Desativado usa o padrão (16px).
Limite da descrição: o limite de caracteres ao qual o texto da descrição é cortado, para que os cartões mantenham um tamanho consistente.
Modelo de cartão: escolha um layout, depois defina Fundo do cartão, Raio do canto do cartão e Preenchimento do conteúdo para cada cartão.
Tamanho e ajuste: mostrado para cada layout que tem uma imagem. Os mesmos controles de Largura, Altura, Cortar e Ajuste que o dimensionamento de imagem por layout do bloco Cartão, dimensionado em relação à largura do cartão em vez de todo o e-mail.

As configurações de Estilo do bloco abaixo estilizam o bloco como um todo, separadamente dos cartões dentro dele:

Fundo e Imagem de fundo: defina uma cor de fundo ou imagem por trás de toda a grade. Com uma imagem definida, Ajuste escolhe como ela se posiciona no bloco — Preencher a corta para o bloco, Conter ajusta a imagem inteira dentro dele — e Ponto focal / Definir posição a posiciona. O Outlook Desktop mostra apenas a cor de fundo e ignora a imagem, então mantenha uma cor legível por trás dela.
Cor da borda, Largura da borda e Raio do canto: adicione um contorno e cantos arredondados ao redor de toda a grade. Ative Mais opções em Raio do canto para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail o renderizam; o Outlook Desktop o ignora e mostra cantos quadrados, da mesma forma que faz com as imagens.
Ocultar no celular e Ocultar no desktop: oculte o bloco inteiro em um dispositivo. Consulte Mostrar ou ocultar conteúdo por dispositivo.

Notícias

Um bloco de Notícias mostra uma grade de cartões de artigos. Cada cartão pode incluir uma imagem, data, título, resumo e um link “Leia mais”. O modelo se repete para cada artigo, da mesma forma que para o bloco de Produtos. Um novo bloco de Notícias começa com 2 cartões de amostra.

No painel de configurações, em Fonte, escolha de onde vêm os artigos:

Escolhidos: carregue artigos de um feed RSS ou Atom uma vez, ou escolha artigos específicos manualmente. Eles são copiados para o e-mail e não mudam mais.
Feed ao vivo: puxe artigos de um feed registrado para sua aplicação, resolvidos na hora do envio para que cada destinatário receba os mais novos.

Escolher artigos de um feed

Clique em um cartão na tela para torná-lo ativo e editá-lo:

Altere a data, título, resumo, imagem ou link por artigo para atualizar apenas esse cartão.
Altere o layout do modelo, cores, preenchimento ou quais elementos ele contém para atualizar todos os cartões.

Os artigos são copiados para o conteúdo do e-mail assim que você os carrega; nada é buscado novamente na hora do envio. As imagens dos artigos são copiadas para o seu Repositório de mídia e convertidas de WebP para JPEG, se necessário, já que o Outlook não pode renderizar WebP.

Cole uma URL do feed RSS 2.0 ou Atom, e então:

Carregar artigos mais recentes: substitua os cartões atuais pelos artigos mais recentes do feed, o mesmo número de cartões que você já tem (2 por padrão).
Escolher artigos…: abra uma gaveta listando até 12 dos artigos mais recentes do feed, com miniatura, título, data, categoria e autor, e escolha quais adicionar. Os artigos escolhidos são anexados aos cartões existentes, até um total de 12; artigos já na tela não podem ser escolhidos duas vezes.

Painel de configurações de Notícias com Fonte definida como Escolhidos, um campo de URL do Feed e botões Carregar artigos mais recentes e Escolher artigos

A gaveta permite que você escolha artigos específicos manualmente em vez de sempre pegar os mais novos.

Gaveta Escolher artigos listando artigos do feed com miniaturas, títulos, datas e caixas de seleção para selecionar

Imagens do artigo: clique em uma miniatura para substituir a imagem daquele artigo.
Links do artigo: mostrado quando o modelo de cartão tem um link vinculado ao artigo (o botão padrão “Leia mais”). Lista cada artigo por título para que você possa editar ou substituir sua URL de destino, inicialmente puxada do feed.

Puxar artigos de um feed ao vivo

Os artigos são buscados quando o e-mail é enviado, para que cada destinatário receba os mais recentes. Em vez de escolher os artigos você mesmo, escolha um feed e um limite:

Painel de configurações de Notícias com Fonte definida como Feed ao vivo, um seletor de Feed registrado, filtro de Categoria, contagem de Artigos e botão Atualizar pré-visualização

Feed registrado: escolha um feed já registrado para sua aplicação, ou Todos os feeds da aplicação para puxar de todos eles. Este painel apenas escolhe um feed, não registra um; se ainda não existir nenhum, peça ao Suporte ou à sua equipe de conta para adicionar um para sua aplicação.
Filtro de categoria: um filtro de texto livre opcional correspondido com a categoria do artigo do feed (padrão: qualquer categoria).
Artigos: quantos cartões mostrar (1–12, 3 por padrão).
Atualizar pré-visualização: recalcule a pré-visualização da tela em relação ao feed agora mesmo. Se o feed não retornar artigos, a Pushwoosh deixa os cartões atuais inalterados; se o feed não puder ser alcançado, a Pushwoosh mostra um erro em vez disso.

Estilizar a grade

Depois de escolher uma fonte, essas configurações controlam a aparência da grade e de seus cartões. Elas permanecem as mesmas, não importa qual fonte você use:

Colunas: escolha 1, 2 ou 3 cartões por linha. No celular, os cartões sempre se empilham em uma coluna.
Espaçamento: ative para definir o espaço entre os cartões. Desativado usa o padrão (16px).
Limite do resumo: o limite de caracteres ao qual o resumo do artigo é cortado, para que os cartões mantenham um tamanho consistente.
Modelo de cartão: escolha um layout, depois defina Fundo do cartão, Raio do canto do cartão e Preenchimento do conteúdo para cada cartão. Para o layout Esquerda ou Direita, ative Quebrar texto ao redor da imagem para que o título e o resumo fluam ao redor da imagem em vez de mantê-los em uma coluna fixa. Tamanho e ajuste (Largura, Altura, Cortar, Ajuste) funciona da mesma forma que o dimensionamento de imagem por layout do bloco Cartão, dimensionado em relação à largura do cartão.

As configurações de Estilo do bloco abaixo estilizam o bloco como um todo, separadamente dos cartões dentro dele:

Fundo e Imagem de fundo: defina uma cor de fundo ou imagem por trás de toda a grade. Com uma imagem definida, Ajuste escolhe como ela se posiciona no bloco — Preencher a corta para o bloco, Conter ajusta a imagem inteira dentro dele — e Ponto focal / Definir posição a posiciona. O Outlook Desktop mostra apenas a cor de fundo e ignora a imagem, então mantenha uma cor legível por trás dela.
Cor da borda, Largura da borda e Raio do canto: adicione um contorno e cantos arredondados ao redor de toda a grade. Ative Mais opções em Raio do canto para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail o renderizam; o Outlook Desktop o ignora e mostra cantos quadrados, da mesma forma que faz com as imagens.
Ocultar no celular e Ocultar no desktop: oculte o bloco inteiro em um dispositivo. Consulte Mostrar ou ocultar conteúdo por dispositivo.

Salvar e reutilizar blocos

Salve um bloco para reutilizá-lo neste ou em outros e-mails, em vez de reconstruí-lo a cada vez.

Clique em um bloco (sua moldura ou fundo, não o texto ou botão dentro dele) para selecioná-lo. Cartão, Colunas e Social são exemplos de blocos que funcionam dessa maneira. Para salvar vários blocos juntos, clique com a tecla Shift em mais blocos irmãos, na tela ou no Painel de Camadas, para estender a seleção a um intervalo contíguo. Salvar não é oferecido para um intervalo que inclui um bloco já sincronizado ou um espaço reservado de IA vazio.
Clique no ícone de marcador na barra de ferramentas do bloco e dê um nome a ele.

Ícone de marcador na barra de ferramentas de um bloco de Cartão abrindo uma caixa de diálogo para nomear e salvar o bloco

Os blocos salvos aparecem em Blocos salvos na parte inferior da aba Blocos.

Seção de blocos salvos na parte inferior da aba Blocos com blocos salvos e ícones de exclusão

Arraste um bloco salvo para a tela, ou clique nele para adicioná-lo no final do e-mail.
Clique no × no bloco salvo para excluí-lo.

Manter cópias sincronizadas

Ao salvar um bloco, ative Manter cópias sincronizadas para vincular cada cópia inserida à mesma fonte. Edite a fonte uma vez, e a alteração se aplica em todos os lugares onde o bloco é usado, incluindo e-mails já agendados para envio.

Salvar um intervalo de blocos funciona da mesma maneira. A Pushwoosh envolve os blocos selecionados em um Grupo, um bloco contêiner que aparece como sua própria linha no Painel de Camadas, para que a sincronização tenha uma única raiz, e então vincula cada cópia inserida a esse grupo. Edite qualquer bloco dentro dele e aplique a alteração para atualizar todo o grupo em todos os lugares onde é usado.

Caixa de diálogo Salvar para um intervalo de 3 blocos com Manter cópias sincronizadas ativado

Uma cópia sincronizada é bloqueada na tela. Você não pode editá-la diretamente. Selecione a cópia para abrir suas configurações:

Editar bloco sincronizado: desbloqueie esta cópia para que você possa alterá-la. Um banner aparece no topo. Clique em Aplicar a todos para salvar suas alterações na fonte e em todas as outras cópias, ou em Cancelar para descartá-las. Você pode desbloquear apenas um bloco sincronizado por vez.
Atualizar da fonte: substitua esta cópia pela versão mais recente da fonte.
Desvincular da fonte: desvincule esta cópia da fonte para que você possa editá-la por conta própria.

Enquanto um bloco sincronizado está desbloqueado para edição, o resto do e-mail é bloqueado para evitar edições acidentais:

Na tela e no Painel de Camadas, tudo fora do bloco fica esmaecido e não mostra alça de arrastar ou menu kebab — clicar, arrastar, duplicar ou excluir essas linhas não tem efeito.
Selecionar qualquer coisa fora do bloco mostra Termine de editar o bloco sincronizado para editar o resto do e-mail no painel de configurações em vez dos campos daquele elemento.
No Painel de Camadas, o bloco sendo editado é rotulado como Bloco sincronizado (editando) com um ícone de edição.
O botão Salvar fica desabilitado, com uma dica explicando que salvar agora armazenaria o e-mail com o conteúdo antigo do bloco.

Aplique ou cancele suas alterações para desbloquear o resto do e-mail novamente.

Adicionar links

Use a caixa de diálogo Inserir/Editar Link para definir o que acontece quando um destinatário clica em um botão ou texto selecionado. Escolha um Tipo de ação e preencha os campos para essa ação.

Abrir site

Abre um link quando o destinatário clica. Insira o endereço em URL.

Link para gerenciar preferências

Adiciona um link para o centro de preferências de inscrição onde os destinatários podem escolher quais categorias de e-mail recebem. O link é inserido automaticamente.

Link para cancelar inscrição

Permite que os destinatários cancelem a inscrição de acordo com os regulamentos e suas preferências.

Você também pode adicionar um link de cancelamento de inscrição em um bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O espaço reservado %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

O que acontece quando o destinatário clica no link de cancelamento de inscrição

Se o centro de preferências de inscrição estiver habilitado

O destinatário cancela a inscrição apenas da categoria atribuída a esse e-mail (por exemplo, Newsletter). O nome da categoria é removido da sua tag Categorias de E-mail Inscritas.

Uma tela de confirmação aparece com as opções Reinscrever e Gerenciar preferências. Saiba mais.

Se o centro de preferências de inscrição não estiver habilitado

O destinatário opta por não receber todos os e-mails de marketing e a tag E-mails com Inscrição Cancelada é definida como true. E-mails transacionais não são afetados e continuarão a ser entregues. Saiba mais sobre tipos de mensagem.

Os cliques são contados na taxa de cancelamento de inscrição no Histórico de Mensagens.

Link para versão web

Dá aos destinatários acesso a uma versão web do e-mail, útil se eles tiverem problemas para visualizá-lo em sua caixa de entrada.

Não rastrear estatísticas

Abre um link quando o destinatário clica, sem contar o clique para as estatísticas de cliques do seu e-mail. Insira o endereço em URL.

Link de confirmação do formulário de inscrição

Insere um link de confirmação para o envio de um formulário de inscrição (por exemplo, para confirmar um double opt-in). Saiba mais sobre double opt-in.