Como criar layouts com colunas e linhas

Toda assinatura de e-mail é feita de dois blocos simples: linhas e colunas. Depois de entender como eles funcionam juntos, você cria layouts profissionais e refinados em minutos. Não é preciso experiência em design.

​

Pense como uma tabela

Imagine uma tabela simples, como uma planilha. Uma linha corre horizontalmente pela assinatura. Uma coluna divide essa linha em seções verticais, lado a lado. Ao combinar linhas e colunas, você cria uma grade. Essa grade é o esqueleto da sua assinatura. Tudo o que você vê em uma assinatura de e-mail bem projetada (sua foto ao lado do seu nome, os ícones das redes sociais alinhados em uma linha, um banner que se estende pela parte de baixo) é construído sobre essa grade.

​

Como as linhas funcionam

Uma linha é um contêiner horizontal que se estende por toda a largura da sua assinatura. Cada linha é empilhada sobre a próxima, de cima para baixo. Pense nas linhas como os andares de um prédio: o primeiro andar fica embaixo, e cada novo andar vai acima dele. No editor da Scribe, adicione uma nova linha clicando no botão Adicionar linha. Cada linha adicionada cria uma nova seção horizontal na sua assinatura. Usos comuns das linhas: Uma assinatura típica tem duas ou três linhas. A primeira linha normalmente contém suas informações principais (foto, nome, cargo). A segunda linha pode conter um divisor ou seus dados de contato. Uma terceira linha pode exibir um banner de campanha ou um aviso legal.

​

Como funcionam as colunas

Uma coluna é uma divisão vertical dentro de uma linha. Quando você adiciona colunas a uma linha, divide essa linha em seções lado a lado. É isso que permite, por exemplo, colocar sua foto à esquerda e seu nome e cargo à direita. No editor, selecione uma linha e clique em Adicionar coluna para dividi-la. Você pode adicionar até quatro colunas em uma única linha. Cada coluna funciona como um contêiner próprio, onde você pode inserir blocos de conteúdo como texto, imagens, ícones ou Smartfields. Usos comuns para colunas: O layout mais popular usa duas colunas na primeira linha: uma coluna estreita para a foto de perfil e uma coluna mais larga para nome, cargo, empresa e informações de contato. É a clássica assinatura “foto à esquerda, detalhes à direita” que aparece na maioria dos e-mails profissionais.

​

Como criar seu primeiro layout

Veja um passo a passo para montar um layout de assinatura comum, com duas colunas.

​

Padrões de layout que funcionam

Você não precisa reinventar a roda. Aqui estão três padrões de layout que cobrem a maioria das assinaturas de e-mail profissionais.

​

Padrão 1: duas colunas com banner de largura total

Este é o layout mais comum. A primeira linha tem duas colunas (foto à esquerda, informações de contato à direita). A segunda linha ocupa a largura total e exibe um banner de campanha ou um call to action. Funciona bem para equipes que rodam campanhas de assinatura, porque o banner ganha visibilidade máxima logo abaixo do bloco de contato.

​

Padrão 2: três colunas

A primeira linha usa três colunas: foto de perfil à esquerda, dados de contato no centro e logo da empresa à direita. Este padrão combina com empresas que querem presença forte de marca ao lado das informações de contato individuais. Mantenha a coluna central como a mais larga, para que o texto tenha espaço para respirar.

​

Padrão 3: linhas empilhadas, coluna única

Cada linha usa uma única coluna, e o conteúdo se empilha na vertical. Nome e cargo ficam na primeira linha. Os dados de contato ficam na segunda. Um banner fica na terceira. Isso cria um visual limpo e minimalista, que funciona especialmente bem em dispositivos móveis, onde o espaço horizontal é limitado.

​

Dicas para layouts melhores

Use no máximo duas ou três colunas. Quatro colunas até funcionam, mas quanto mais colunas você adiciona, mais apertado o layout fica em telas menores. Duas colunas é o ponto ideal para a maioria das assinaturas. Use uma linha por “seção” da sua assinatura. Se a assinatura tem um bloco de contato, uma barra de links sociais e um banner promocional, cada um deles merece a própria linha. Isso mantém tudo organizado e facilita edições futuras. Deixe uma coluna mais larga que a outra. Ao usar duas colunas, dê mais espaço à coluna de texto do que à coluna de imagem. Uma divisão de 30/70 ou 25/75 costuma funcionar melhor. No editor, você arrasta o divisor de coluna para ajustar a proporção. Visualize no celular. Os clientes de e-mail em celulares exibem as assinaturas de forma diferente dos clientes de desktop. Use a funcionalidade de pré-visualização da Scribe para conferir se as colunas e linhas continuam bem apresentadas em uma tela menor. Comece simples e itere. Comece com duas colunas em uma linha. Quando isso estiver no ponto, adicione uma segunda linha para conteúdo extra. Você sempre pode adicionar complexidade depois, mas começar com linhas e colunas demais torna mais difícil acertar.

​

O que vai onde

Se estiver em dúvida sobre qual conteúdo cabe em cada parte da grade, aqui vai uma referência rápida: Primeira linha (duas colunas): foto de perfil ou logotipo da empresa na coluna estreita. Nome completo, cargo, empresa, telefone, e-mail e site na coluna mais larga. Segunda linha (largura total ou duas colunas): ícones de redes sociais, um link para agendamento de reuniões ou uma linha secundária de dados de contato. Terceira linha (largura total): um banner de campanha, um aviso legal ou um slogan da empresa.

​

Próximos passos

Com o layout pronto, você refina cada detalhe no editor. Ajuste fontes, cores, espaçamentos e estilos de ícones para combinar com a sua marca. Se você gerencia assinaturas de uma equipe, conheça Membros da equipe para implantar o mesmo layout para todos, mantendo as informações de contato de cada pessoa únicas por meio dos Smartfields.