Images in email campaigns

Exponha uma galeria de imagens na sua campanha; e adicione legendas e links de clickthrough.

Ultima atualização 16 de Janeiro de 2025

Use uma seção de imagens para adicionar imagens à sua campanha. Você pode adicionar várias imagens, cada uma com legendas e URLs de clickthrough; e escolher diferentes layouts para alterar o posicionamento das imagens e legendas.

Este guia ensina a criar uma seção de imagens na sua campanha e mostra em quais outros locais da campanha as imagens podem aparecer.

Image formatting

To prevent blurry images, we recommend keeping your image width 750px or less. For more help with image formatting, visit Formatting your images for display on the web.

Multiple images display in a vertical stack, but you can choose different layouts to change the placement of images and captions.

Adicione uma seção de imagens

To add an image section to a campaign:

  1. Create or open your campaign draft. For more help, visit Building email campaigns.
  2. Clique em + no espaço da campanha entre o cabeçalho e o rodapé.
  3. Clique em Imagem.
  4. No painel direito, clique em Adicionar imagens para carregar até quatro imagens do seu aparelho; ou clique em Selecionar da biblioteca para selecionar imagens da sua biblioteca ou do Unsplash. Não é possível obter a licença de imagens premium no Campanhas por E-mail, mas você pode usar imagens do Getty Images já licenciadas.
  5. After uploading at least one image, click Manage Images below the thumbnail to add, rearrange, or delete images.
  6. Clique em Sem link ao lado do nome de uma imagem para adicionar um URL de clickthrough.
  7. Clique no menu suspenso de layout para alterar o layout da seção da imagem.
  8. Clique em Espaçamento e Cor da seção para fazer alterações no estilo.
  9. Dependendo do layout, adicione uma legenda às imagens.

All changes save automatically. You can undo or redo changes as long as the draft is open.

Dica

para abrir o editor da imagem, passe o cursor sobre a imagem desejada no rascunho e clique no ícone de lápis.

Add, rearrange, or delete images

Após adicionar pelo menos uma imagem, clique em Gerenciar imagens. Você pode:

  • Adicionar outras imagens — basta clicar em Adicionar imagem. É possível adicionar até quatro imagens em todos os layouts.
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position.
  • Delete an image by clicking - to the left of the filename.

Feitas as alterações, clique em Voltar para retornar ao painel "Imagens".

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link, so when a subscriber clicks the image, it opens the link.

To add a clickthrough URL:

  1. Click Unlinked beside the images name in the right panel. If an image already has a clickthrough URL, the URL displays beside the image name. If you don't see Unlinked or a URL beside your image name, you might be in the Manage images panel. Click Back to return to the Images panel.
  2. In the clickthrough URL field, you can add a web address directly, or click the gear icon to open the link editor for more options.
  3. In the link editor, you can link to an external web address, a page on your site, an email address, or a phone number. To learn more about links in Squarespace, visit Adding links to your site.
  4. Após criar o URL no editor do link, clique em Salvar.

Adiciona um texto alternativo

O texto alternativo nas imagens as deixa mais acessíveis aos visitantes. Ele aparece nos leitores de tela e outras ferramentas de acessibilidade, mas não aparece na sua campanha.

Se você não adicionar manualmente, não aparecerá nenhum texto alternativo. Para adicionar o texto alternativo a uma imagem na seção de imagens:

  1. Clique na seção de imagens e depois no nome do arquivo da imagem no painel direito.
  2. Clique no campo abaixo de Texto alternativo da imagem e adicione a descrição da imagem.
  3. O texto alternativo é salvo automaticamente.

Você também pode adicionar um texto alternativo às seções do blog e às seções de produtos — basta seguir os mesmos passos. Saiba mais sobre o texto alternativo em geral, incluindo as recomendações, em Adicionando um texto alternativo à imagem.

Layouts da seção de imagens

Clique no menu suspenso do layout para escolher como as imagens e legendas devem aparecer. Ao adicionar uma nova seção de imagens, ela aparece no layout Banner.

You can choose from these layouts:

  • Banner - Full-bleed images with captions below.
  • Grade - as imagens aparecem em uma grade com miniaturas. Não é possível adicionar legendas nesse layout.
  • Card - Images with captions displaying on an overlapping card. The captions display on alternating sides for each image, starting on the right.
  • List (Left) - Images in a list on the left side with captions on the right.
  • List (Right) - Images in a list on the right side with captions on the left.
  • Side - Images in a list with captions displaying on alternating sides.

Cada seção pode usar apenas um estilo de layout. Para adicionar outra imagem com um layout diferente, adicione uma nova seção.

Ajuste o estilo da seção de imagens

Use as opções de tamanho, espaçamento e cor para ajustar o estilo da seção de imagens. As opções variam dependendo do layout.

Image size

Nos layouts em grade, lateral e lista, é possível editar diretamente o tamanho da imagem.

Clique em Tamanho da imagem e depois em P, M ou G; ou clique em ... para fixar manualmente o tamanho.

Nos layouts de banner e de cartão, use o ajuste de espaçamento lateral em Espaçamento para alterar a largura da imagem. Alguns aplicativos sempre mostram as imagens na largura total, independentemente dessas configurações.

Spacing

Clique em Espaçamento para alterar o espaçamento na seção de imagens. As opções de espaçamento variam dependendo do layout:

  • Espaçamento lateral - adicione espaço em branco em ambos os lados da imagem. Nos layouts de banner e cartão, use este ajuste para alterar a largura da imagem.
  • Espaçamento entre as seções - adicione espaço em branco na parte superior e inferior da seção de imagens.
  • Padding between rows - Add vertical white space between images in the section. This only appears if you add multiple images to a single section.
  • Alinhamento horizontal e Alinhamento vertical - alinhe as imagens no layout de grade.
  • Center padding - Add white space between the images and captions in the side and list layouts.

Color

You can change the following section-specific colors:

  • Section color - Change the color that appears behind images and captions. If set to transparent, the content background or email background appears instead.
  • Cor do texto - altere a cor das legendas. O tamanho da fonte e do texto segue os estilos gerais da campanha.
  • Card color - Change the background of the captions on the card layout.

Saiba mais em "Ajustando o estilo de uma campanha por e-mail".

Add captions

To add captions:

  1. Ao usar o layout de banner, ative a opção Mostrar legenda no painel de imagens.
  2. Clique em Escreva aqui... na prévia e adicione o texto.
  3. Highlight text to format it or add a link.

Keep in mind:

  • O layout de grade não aceita legendas.
  • Na campanha por e-mail, as legendas não se transformam em texto alternativo.
  • Text added to images is image-specific. If you delete an image, its caption is deleted too.
  • Use the side panel to style the text color. The font matches your global fonts.

Add an image without a caption

To add an image without a caption:

  1. Adicione uma seção de imagens.
  2. Adicionada a imagem, escolha o layout Grade ou Banner.
  3. On the banner layout, switch the Show Caption toggle off to hide the caption.

Can I add an image slideshow?

Não há nenhum layout integrado de slideshow. Para adicionar esse efeito, crie um .gif animado de um conjunto de imagens e, em seguida, carregue-o na seção de imagens.

Header images

Você pode carregar ou reutilizar uma imagem da sua biblioteca no cabeçalho da campanha; ou pode incluir o logotipo do seu site se ele tiver um. Saiba mais em Criando uma campanha por e-mail.

Blog and product images

As seções de blog e de produtos extraem publicações do blog e de produtos do seu site para a campanha, incluindo a publicação ou as imagens em destaque do produto.

Não é possível alterar as imagens da publicação e do produto em destaque nessas seções, mas você pode passar o cursor sobre elas e clicar no ícone de lápis para abrir o editor da imagem. Para adicionar uma imagem totalmente diferente, altere as imagens em destaque na página do blog ou na página da loja; ou use uma seção de imagens para escolher diretamente a imagem e a legenda.

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.