O layout de grade é uma maneira poderosa de organizar o conteúdo no design do seu e-mail. Ele ajuda você a apresentar diversas informações — como produtos, eventos ou artigos — de forma limpa, estruturada e visualmente atraente. Ao organizar o conteúdo em linhas e colunas, você facilita para seus leitores escanear, comparar e interagir com o que é mais importante.

Criar um layout de grade em um design de e-mail

🎥 Assista ao vídeo a seguir e siga as instruções abaixo para aprender como criar um layout de grade no editor de e-mail de arrastar e soltar:

1. Crie ou abra um design de e-mail no editor de e-mail de arrastar e soltar.
2. Arraste e solte um bloco de conteúdo na tela. Aqui, vamos soltar um bloco de conteúdo Image (Imagem).
3. Clique na seção que contém seu bloco de conteúdo na tela para exibir as configurações.
4. Na tela, clique no ícone de mais + ao lado do seu bloco de conteúdo para adicionar uma coluna. Você pode adicionar no máximo 5 colunas. Aqui, queremos exibir 3 colunas.
5. Abaixo de cada bloco de conteúdo, arraste e solte os outros blocos de conteúdo que deseja adicionar para criar um layout de grade e repetir o padrão. Coloque seus blocos de conteúdo dentro da mesma seção. Para saber mais, consulte nosso artigo dedicado Diferenças entre blocos de seções e conteúdo.
6. Preencha seus blocos de conteúdo com os textos e imagens que quiser. 

Parabéns! 🎉 Você criou um layout de grade no design do seu e-mail. 

Inserir variáveis de feed de dados em um layout de grade [Avançado]

Para inserir suas variáveis de feed de dados em um layout de grade, você precisa inserir manualmente as variáveis para especificar o índice exato de cada item que deseja exibir. Isso significa que você precisa decidir com antecedência qual entrada do seu feed deseja mostrar.

Parte 1: recuperar as variáveis do feed de dados

Para saber exatamente quais campos mencionar no seu feed de dados, acesse a página Data feeds (Feeds de dados) e abra o feed de dados que deseja exibir. Lá, você pode visualizar a estrutura do seu feed e encontrar as chaves corretas para usar na sintaxe das variáveis. 

A sintaxe para buscar manualmente itens específicos do seu feed de dados é: {{feed.feedalias.array.index.variable}} onde: feedalias é nome exato do alias do seu feed de dados, com a mesma ortografia e capitalização que aparece na página Data feeds (Feeds de dados). array é a matriz que contém os valores de cada item. index é a posição do item específico que você deseja exibir no seu feed de dados (começando em 0 para o primeiro item). variable é o nome específico da variável ou do campo que você deseja exibir, por exemplo, nome, preço, data.

Por exemplo, para exibir o nome da aula de ioga na matriz following_classes, no primeiro índice, a variável de feed de dados seria: 

{{feed.yoga_classes.following_classes.0.class_name}}

Parte 2: criar e preencher o layout de grade com feeds de dados

1. Crie um design de e-mail com um layout de grade. Para saber mais sobre como criar um layout de grade, confira nossa seção dedicada acima Criar um layout de grade em um design de e-mail.
2. Preencha seus blocos de conteúdo com variáveis de feed de dados usando a sintaxe da Parte 1: recuperar as variáveis de feed de dados. Para aprender a inserir variáveis nos seus blocos de conteúdo, abra o item correspondente ao bloco de conteúdo que você deseja preencher:
   🔠 Adicionar uma variável como texto

   Adicione uma variável dentro de um bloco de conteúdo contendo texto para exibir detalhes específicos relacionados a um item, como nome, local ou data.

   1. Clique em um bloco de conteúdo contendo texto (blocos de Título, Texto ou Botão).
   2. Coloque o cursor onde você deseja adicionar uma variável.
   3. Insira a variável de feed de dados correspondente ao texto que você quer exibir. Por exemplo, com nosso feed de dados de exemplo, para exibir o nome da aula de ioga do primeiro elemento no feed de dados, a variável seria: {{feed.yoga_classes.following_classes.0.class_name}}.
      
   4. Repita as etapas para cada variável que você deseja adicionar como texto. Substitua sempre o índice correspondente ao elemento do seu feed de dados que você deseja exibir.

   🖼️ Adicionar uma variável a uma imagem

   Adicione uma variável a um bloco de imagem para exibir a imagem associada a um item, como uma foto de evento.

   1. Clique em um bloco de imagem.
   2. Na barra lateral, vá para Image settings (Configurações de imagem).
   3. No campo Insert image from URL (Inserir imagem do URL), insira a variável de feed de dados correspondente à imagem que você deseja exibir. Em nosso exemplo, para exibir a imagem do primeiro elemento no feed de dados, a variável seria: {{feed.yoga_classes.following_classes.0.imageurl}}.
      
      
   4. Repita as etapas para cada variável que você deseja adicionar a uma imagem. Substitua sempre o índice correspondente ao elemento do seu feed de dados que você deseja exibir.

   🔗 Adicionar uma variável como um hiperlink em um texto

   Adicione uma variável como um hiperlink no texto para direcionar os destinatários ao URL associado a um item, como um formulário de registro ou uma página de programação de eventos.

   1. Clique em um bloco de conteúdo contendo texto (blocos de título ou texto).
   2. Realce o texto onde você deseja adicionar o link.
   3. Clique no ícone Add link (Adicionar link) 🔗 na barra de formatação.
   4. No campo Link target (Destino do link), insira a variável de feed de dados correspondente ao URL que você deseja exibir. No nosso exemplo, para exibir o URL da página de reserva de aula de ioga para o primeiro elemento do feed de dados, a variável seria: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   5. Repita as etapas para cada variável que você deseja adicionar como um hiperlink em um texto. Substitua sempre o índice correspondente ao elemento do seu feed de dados que você deseja exibir.

   🔗 Adicionar uma variável como um hiperlink em uma imagem

   Adicione uma variável como um hiperlink em uma imagem para direcionar os destinatários ao URL associado a um item, como uma página de evento.

   1. Clique em um bloco de imagem.
   2. Na barra lateral, vá para Link settings (Configurações de link).
   3. No campo Link target (Destino do link), insira a variável de feed de dados correspondente ao URL que você deseja exibir. No nosso exemplo, para exibir o URL da página de reserva de aula de ioga para o primeiro elemento do feed de dados, a variável seria: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repita as etapas para cada variável que você deseja adicionar como um hiperlink em uma imagem. Substitua sempre o índice correspondente ao elemento do seu feed de dados que você deseja exibir.

   🔗 Adicionar uma variável como um hiperlink em um botão

   Adicione uma variável como um hiperlink em um botão para direcionar o destinatário ao URL associado a um item, como uma página de produto.

   1. Clique em um bloco Button (Botão).
   2. Na barra lateral, vá para Link settings (Configurações de link).
   3. No campo Link target (Destino do link), insira a variável de feed de dados correspondente ao URL que você deseja exibir. No nosso exemplo, para exibir o URL da página de reserva de aula de ioga para o primeiro elemento do feed de dados, a variável seria: {{feed.yoga_classes.following_classes.0.url}}.
      
      
   4. Repita as etapas para cada variável que você deseja adicionar como um hiperlink em um botão. Substitua sempre o índice correspondente ao elemento do seu feed de dados que você deseja exibir.
3. Pré-visualize e teste seu e-mail para garantir que seu feed de dados variáveis seja exibido corretamente. 

Parabéns! 🎉 Você criou um layout de grade contendo variáveis de feed de dados. 

Modelo de e-mail	E-mail na caixa de entrada dos destinatários

⏭️ O que vem a seguir? 

• Personalize o conteúdo do seu e-mail com dados em tempo real (feed de dados)
• Personalize o assunto do e-mail e a pré-visualização do texto com dados em tempo real (feed de dados)

🤔 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.