As imagens desempenham um papel fundamental para captar a atenção de seus destinatários e dar vida ao design do seu e-mail. Utilize o bloco de conteúdo Image (Imagem) do editor de e-mail de arrastar e soltar para adicionar, personalizar e aprimorar suas imagens. Ajuste o tamanho, as bordas, o texto alternativo e edite diretamente no editor para tornar seu e-mail atraente, profissional e alinhado à sua marca.
🏞️ Insira imagens no design do seu e-mail
Para inserir imagens no design do seu e-mail, primeiro você precisa arrastar e soltar o bloco de conteúdo Image (Imagem) na tela do seu e-mail, no local onde deseja que a imagem apareça:
Depois de inserir o bloco de conteúdo Image (Imagem) na sua tela, existem várias maneiras de adicionar uma imagem a ele:
- Arraste e solte do seu computador
- Faça upload para sua Biblioteca de conteúdo para reutilizar imagens
- Insira desde um URL
- Use variáveis para adaptar as imagens ao seus destinatários
- Gere uma imagem com o Aura AI
Selecione a guia correspondente à forma como deseja inserir imagens no design do seu e-mail:
Adicione imagens facilmente ao design do seu e-mail, arrastando e soltando-as diretamente do seu sistema para o bloco de conteúdo Image (Imagem). Suas imagens serão adicionadas automaticamente ao design do seu e-mail e salvas na sua Biblioteca de conteúdo:
Utilize a Biblioteca de conteúdo para carregar suas próprias imagens, usar imagens de banco de imagens ou GIFs, ou criar imagens diretamente no editor de e-mail. Para acessar a Biblioteca de conteúdo, passe o mouse sobre o bloco de conteúdo Image (Imagem) e clique em Select an image (Selecionar uma imagem):
A partir daí, você poderá:
|
|
➡️ Para saber como usar a Biblioteca de conteúdo, consulte o artigo dedicado Adicionar e gerenciar imagens na Biblioteca de conteúdo.
Para inserir uma imagem desde um URL, ela precisa estar hospedada em um site de acesso público.
- Clique no bloco de conteúdo Image (Imagem). As configurações de imagem são abertas na barra lateral esquerda.
- Na seção Visual, no campo Image URL (URL da imagem), cole o link direto para onde sua imagem está hospedada.
A imagem aparecerá no seu e-mail sem que você precise carregá-la na sua Biblioteca de conteúdo e não será salva nela. Quando seu e-mail for aberto, a imagem será carregada diretamente desse URL, portanto, quaisquer atualizações feitas no arquivo em seu site aparecerão automaticamente em visualizações futuras do e-mail.
As variáveis permitem exibir imagens dinâmicas e personalizadas em seus e-mails automaticamente. Em vez de inserir uma imagem fixa, adicione uma variável que será substituída em tempo real quando o e-mail for enviado, com base nos dados mais recentes disponíveis.
| Modelo de e-mail na Brevo | E-mail recebido na caixa de entrada |
|---|---|
Por exemplo, com uma variável de dados de evento, cada destinatário verá a imagem dos dados atualmente vinculados a ele no momento do envio. Os dados são atualizados automaticamente e a imagem exibida sempre refletirá a versão mais recente dos dados, sem necessidade de atualizações manuais.
➡️ Para saber mais sobre variáveis e como inserir imagens usando-as, consulte nossos artigos dedicados:Personalize seu e-mail com dados de eventos, Crie e envie recomendações de produtos com feed de produtos e Personalize o conteúdo do seu e-mail com dados em tempo real (feed de dados).
Gere imagens personalizadas com facilidade usando o Aura como gerador de imagens integrado no editor de e-mail de arrastar e soltar. Crie visuais que combinem perfeitamente com a sua campanha, sem precisar de nenhuma habilidade em design!
Para gerar uma imagem usando o Aura AI:
- Selecione o bloco de conteúdo Image (Imagem) e clique em Use AI (Usar IA) na barra de ferramentas da imagem. Uma caixa de diálogo é aberta.
- Na caixa de diálogo, descreva a imagem que você deseja que o Aura crie. Para obter os melhores resultados, seja o mais específico possível. Por exemplo: “Um estúdio de ioga tranquilo, com luz natural entrando pelas grandes janelas, plantas ao fundo e um tapete de ioga sobre um piso de madeira”.
- Escolha o tamanho e o estilo desejados nas opções correspondentes do menu suspenso (por exemplo, fotografia, fundo, arte vetorial etc.).
- (Opcional) Clique em Add reference images (Adicionar imagens de referência) para fazer upload de imagens de exemplo que correspondam ao que você quer gerar. Isso ajuda o Aura a garantir que ele gere exatamente o que você quer.
- Pressione Enter ou clique no ícone de seta ⬆ para gerar a imagem. Sua imagem será salva automaticamente sua biblioteca de conteúdo.
O Aura irá gerar sua imagem em apenas alguns segundos. Se quiser editar sua imagem, você poderá clicar em Use AI (Usar IA) novamente para refiná-la ajustando o prompt ou gerar uma nova imagem.
🖌️ Edite sua imagem (redimensione, recorte, adicione texto alternativo, etc.)
Redimensionar uma imagem
Para redimensionar uma imagem, clique na imagem que deseja redimensionar e posicione o cursor em um dos cantos inferiores da imagem. Quando a seta aparecer, puxe a ponta até encontrar o tamanho perfeito. Como alternativa, você pode clicar na imagem para abrir a configuração e ajustar a largura dela na seção Layout :
Adicionar texto alternativo a uma imagem
| O texto alternativo é uma breve descrição da imagem que aparece caso a imagem não carregue ou para usuários de leitores de tela. Isso aumenta a acessibilidade, melhora a experiência do usuário e transmite a mensagem quando as imagens estão bloqueadas ou indisponíveis. |
Para adicionar um texto alternativo às suas imagens:
-
Selecione a imagem à qual deseja adicionar um texto alternativo. As configurações do botão são abertas no painel esquerdo.
- Na seção Visual no painel esquerdo, localize o campo Alt text (Texto alternativo).
-
Digite uma breve descrição de sua imagem. Recomendamos que você escreva uma descrição breve e precisa do conteúdo da imagem, transmitindo apenas as informações essenciais. Evite escrever Imagem de e mantenha a descrição focada no propósito da imagem.
- (Opcional) Clique no ícone {} Add variable (Adicionar uma variável para personalizar seu texto alternativo com um atributo de contato, dados de evento ou variável de feed de dados.
Adicionar um link a uma imagem
Adicionar um link a uma imagem permite redirecionar os seus destinatários para o seu site, uma página de produto ou qualquer outro destino diretamente da imagem:
Para redirecionar seus destinatários para uma página da web:
Clique na imagem à qual deseja adicionar um link. As configurações do botão são abertas no painel esquerdo.
- Na seção Link , na lista suspensa Type (Tipo), selecione Absolute link (Link absoluto) (URL).
- No campo Link target (Destino do link), insira o URL da sua página.
- (Opcional) Clique no ícone {} Add variable (Adicionar uma variável para personalizar sua URL com um atributo de contato, dados de evento ou variável de feed de dados.
- (Opcional) Adicione uma Tooltip (Dica de ferramenta) que aparecerá como um texto de ajuda quando o link for destacado com o mouse.
Para redirecionar seus destinatários para um arquivo que você gostaria que eles baixassem:
- Faça o upload do seu arquivo para um serviço de terceiros, como o WeTransfer ou o Dropbox, e certifique-se de que ele esteja publicamente acessível.
-
Clique na imagem à qual deseja adicionar um link. As configurações do botão são abertas no painel esquerdo.
- Na seção Link , na lista suspensa Type (Tipo), selecione Absolute link (Link absoluto) (URL).
- No campo Link target (Destino do link), insira o URL da sua página.
- (Opcional) Clique no ícone {} Add variable (Adicionar uma variável para personalizar sua URL com um atributo de contato, dados de evento ou variável de feed de dados.
- (Opcional) Adicione uma Tooltip (Dica de ferramenta) que aparecerá como um texto de ajuda quando o link for destacado com o mouse.
Editar uma imagem (recortar, alterar a cor, adicionar texto, etc...)
Nosso editor de arrastar e soltar inclui um editor de imagens que permite recortar a imagem, adicionar filtros, texto ou design de texto. Para acessar o editor de fotos, clique na sua imagem e clique no botão Edit (Editar) no painel esquerdo.
📹 Assista ao vídeo a seguir para aprender a usar o básico do editor de imagens:
Adicionar uma borda ou cantos arredondados
Bordas e cantos arredondados ajudam suas imagens a se destacarem e adicionam um estilo visual que combina com sua marca:
Clique na imagem à qual você quer adicionar uma borda ou cantos arredondados. As configurações do botão são abertas no painel esquerdo.
Role a página até a seção Rounded corners (Cantos arredondados) e entre com um tamanho de raio para sua imagem.
- Role a página até a seção Borders (Bordas).
- Se quiser adicionar bordas somente a lados específicos da sua imagem, desmarque a caixa Aplicar a todos os lados. Para cada lado, insira um tamanho e escolha uma cor.
- Caso contrário, insira um tamanho para suas bordas em px e escolha a cor.
Adicionar condições de visibilidade a uma imagem
| Escolha quando exibir suas imagens em seu e-mail configurando as condições de visibilidade. Permite exibir ou ocultar uma imagem com base no dispositivo ou atributo de contato do destinatário, como localização ou idioma. É uma maneira simples de personalizar seu design e garantir que cada destinatário veja a versão mais relevante do seu e-mail. |
➡️ Para saber mais sobre visibilidade de conteúdo, consulte nossos artigos dedicados Mostrar ou ocultar conteúdo em seus e-mails (visibilidade de conteúdo).
⏭️ O que vem a seguir?
🤔 Dúvidas?
Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.
Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar à agência parceira da Brevo certa.