Adicionar padding aos layouts dos seus e-mails

Ajuste o padding vertical e horizontal das camadas de layout do Emailify atualizando a propriedade “Padding” do Auto Layout.

Adicionar padding às camadas de layout ​

Para definir a altura das camadas de layout e o espaçamento no topo ou na parte de baixo delas, ajuste a propriedade de Auto Layout Vertical Padding no Figma.

Para definir a largura do conteúdo interno das camadas de layout e o espaçamento à esquerda ou à direita, ajuste a propriedade de Auto Layout Horizontal Padding no Figma.

Sempre use o Padding para definir a altura de qualquer camada Row ou Column (com a propriedade de altura do Auto Layout da camada definida como Hug). Alturas Fixed definidas no Figma não são levadas para o HTML final, porque a altura dos elementos em HTML é determinada pelo tamanho do conteúdo (mais o padding superior e inferior). Por isso, usar o Padding é a maneira mais confiável de criar visualmente seus e-mails para exportar em HTML.

Adicionar padding externo em volta de várias camadas Row ​

Se você tiver várias linhas em volta das quais quer adicionar padding, pode adicionar ao seu e-mail uma camada de layout especial, o Wrapper: clique no frame do Emailify, selecione Row Wrapper nas opções do menu suspenso Quick Add e clique em Add + para inseri-lo no e-mail como uma nova camada do Figma.

Depois de adicionar o Wrapper ao design, você pode mover suas Rows para a nova camada Wrapper e ajustar as propriedades de Auto Layout Horizontal Padding e Vertical Padding no Figma para criar um padding externo em volta das camadas Row dentro do Wrapper.

Adicionar padding interno às camadas de texto ​

Você pode adicionar padding interno ao texto selecionando uma camada de texto do Figma no seu e-mail com o painel Settings aberto, ativando a opção Inner Padding e adicionando os valores de padding que quer aplicar à camada de texto selecionada.

Isso adiciona um padding “interno” extra dentro da camada de texto quando ela é convertida em HTML, para que você defina valores de padding para determinadas camadas de texto da Column sem afetar as outras camadas.

Você também pode definir um padding diferente para a camada de texto no celular ativando a opção Mobile Padding e adicionando os valores de padding que quer aplicar à camada de texto selecionada. Eles só aparecem quando o e-mail HTML é visto no celular.

Adicionar padding interno às camadas de linha divisória ​

Você pode adicionar padding interno às linhas divisórias selecionando uma camada de divisória do Emailify no seu e-mail com o painel Settings aberto, ativando a opção Inner Padding e adicionando os valores de padding que quer aplicar à camada de divisória selecionada.

Isso adiciona um padding “interno” extra dentro da camada de divisória quando ela é convertida em HTML, para que você defina valores de padding para determinadas camadas de texto da Column sem afetar as outras camadas.

Você também pode definir um padding diferente para a camada de divisória do Emailify no celular ativando a opção Mobile Padding e adicionando os valores de padding que quer aplicar à camada de divisória selecionada. Eles só aparecem quando o e-mail HTML é visto no celular.