Fontes personalizadas, ativos reutilizáveis e várias imagens nos templates

Jacob Mølby

Por , Sócio ·

Ilustração de um card de fonte com as letras Aa, um botão para enviar uma fonte e ativos de imagem de produto reutilizáveis

Nas últimas semanas, fomos adicionando recursos à plataforma aos poucos, e agora é uma boa hora para contar sobre eles. Criamos três recursos importantes, que vou apresentar um por um: os ativos, várias imagens no mesmo template e a possibilidade de enviar e usar as suas próprias fontes personalizadas. Vamos começar pelos ativos.

Ativos

Normalmente você quer reaproveitar certos elementos em vários designs diferentes. Pode ser o logotipo da sua empresa, um gráfico com um dos seus diferenciais ou uma imagem com as suas estrelas do Trustpilot. Enviar esses arquivos de novo toda vez é cansativo, então agora toda imagem que você envia fica salva. Você encontra todos os seus ativos no novo botão Ativos, na barra lateral esquerda.

Onde ficam os ativos no editor
Novo botão de ativos

Quisemos levar essa ideia mais longe. Além de imagens simples, você também deveria poder salvar nos seus ativos os componentes de design que usa com frequência. Em outras palavras: você pode salvar um grupo inteiro nos seus ativos e reutilizá-lo depois em outros designs.

Meus ativos no editor
Meus ativos

Além dos ativos que você mesmo cria, nós também criamos alguns para você! Na barra lateral da janela, você vê as categorias disponíveis. Decidimos dividi-las em Tipos e Casos de Uso. Os tipos são elementos básicos que você pode usar nos seus templates, de faixas a fundos. E não se preocupe com o fato de todas as ondas, faixas e etiquetas serem pretas: você pode escolher a cor que quiser depois de adicioná-las ao template.

Os casos de uso são mais específicos. Como o nome indica, eles foram pensados para um uso em particular, como a Black Friday ou o Natal. Em Natal, por exemplo, você encontra enfeites e outros gráficos que combinam com a sua campanha de fim de ano.

Ativos de Natal
Ativos de Natal

Várias imagens no mesmo template

Os anúncios dinâmicos de produtos, como os anúncios de catálogo da Meta, existem para apresentar os seus produtos da melhor forma possível. Às vezes, a melhor forma é mostrar fotos diferentes do mesmo produto. Para roupas, podem ser ângulos diferentes ou a peça vestida em um modelo em vez de sozinha. Se você vende móveis, talvez queira mostrar um close do tecido ou dos veios da madeira. Agora tudo isso é possível no editor.

Quando você seleciona uma imagem no editor, pode escolher qual imagem do produto vai aparecer nela. Você também vai ver que precisa definir uma Estratégia ausente. Ela é usada quando você escolhe uma imagem que não existe para o produto exibido, por exemplo se escolher a terceira imagem e o produto tiver só duas. Para esse caso, há duas opções:

  • Ocultar: se a imagem escolhida não estiver disponível, ela simplesmente fica oculta. Nada aparece no lugar dela.
  • Mostrar primeira imagem: usa a primeira imagem do produto (que sempre existe) no lugar da imagem que está faltando.

Normalmente, um template é aplicado a todas as imagens do produto. Dependendo do canal de vendas, a primeira imagem costuma ir na tag <image_link/>, e as imagens adicionais vão em várias tags <additional_image_link/>. Todas as imagens do produto recebem o template.

<image_link>
  https://images.feedr.com/1/1/1/a/abc
</image_link>
<additional_image_link>
  https://images.feedr.com/1/1/1/b/abc
</additional_image_link>
<additional_image_link>
  https://images.feedr.com/1/1/1/c/abc
</additional_image_link>

Quando você usa várias imagens, isso muda. Só a imagem principal recebe o template (que, por sua vez, inclui duas ou mais das outras imagens). As tags <additional_image_link/> trazem todas as imagens originais (incluindo a principal), para que possam ser vistas se o canal de vendas tiver suporte a isso.

<image_link>
  https://images.feedr.com/1/1/1/a/abc
</image_link>
<additional_image_link>
  https://webshop.com/image1.jpeg
</additional_image_link>
<additional_image_link>
  https://webshop.com/image2.jpeg
</additional_image_link>
<additional_image_link>
  https://webshop.com/image3.jpeg
</additional_image_link>

Com esse novo recurso, você pode criar templates como estes:

Anúncio dinâmico de moda com várias imagens do produto
Exemplo de anúncio dinâmico de moda
Anúncio dinâmico de moda com várias imagens do produto
Anúncio dinâmico de moda com várias imagens do produto

Fontes personalizadas

Esse era um dos recursos mais pedidos. Por padrão, o editor inclui a maioria das Google Fonts para você escolher. Mas às vezes você quer usar uma fonte própria, como a do seu site ou a que aparece no resto da sua identidade visual. Naturalmente, você também quer essa fonte nos seus anúncios dinâmicos de produtos.

Aproveitando esse recurso, também reformulamos a seleção de fontes. Antes, mostrávamos todas as variações de cada fonte. Na prática, isso dificultava escolher entre fontes diferentes, porque a tela ficava cheia da mesma fonte em pesos e estilos diferentes.

Agora mostramos cada fonte uma única vez. Você escolhe o peso e o estilo que quer, e só aparecem as fontes que têm essas opções.

Nova tela de fontes
Nova tela de fontes

Ao lado das fontes padrão, há uma aba Fontes Personalizadas. Ali você vê todas as fontes que foram enviadas no seu Team, para poder reutilizá-las em templates diferentes. Para enviar uma fonte, basta arrastá-la para o quadro ou clicar nele. Depois do envio, ela aparece na lista e pode ser escolhida para o seu template.

Fontes personalizadas no editor
Fontes personalizadas

Quer tirar mais proveito do editor? Adicione ícones aos seus templates ou organize o seu design com grupos.

Por enquanto é isso. Esperamos que você goste, e estamos ansiosos para ver o que você vai criar com esses recursos! 😀