Adicionar contornos de borda aos elementos do layout
Para adicionar uma borda sólida a camadas (por exemplo, Row, Column, Button etc.) dos seus designs de e-mail, clique na camada e aplique um contorno (stroke) do Figma a ela. Ele é incluído automaticamente como borda CSS no HTML final exportado pelo Emailify.
Para criar um espaço entre a borda e o conteúdo interno da camada, considere aplicar padding a essas camadas depois de aplicar a borda.
Atenção: os clientes de e-mail não são compatíveis com bordas em gradiente. Se você usar um preenchimento em gradiente no contorno do Figma, a exportação HTML final usará a primeira cor sólida do gradiente.
Adicionar linhas divisórias entre as camadas de conteúdo
Se precisar adicionar uma linha divisória entre camadas de conteúdo dentro de uma Column dos seus layouts de e-mail, adicione um elemento divisor especial do Emailify: clique na camada “Column”, selecione o item “Divider” no menu suspenso Quick Add na parte de baixo do plugin e clique no botão Add + para inserir a camada da linha divisória na Column.
Depois que a camada divisória for adicionada à Column, arraste e solte a camada no painel de camadas para mudar entre quais camadas ela fica. Depois, ajuste o tamanho dela alterando a Height da camada no painel de propriedades da camada no Figma, ou ajuste a cor de fundo mudando o Fill da camada no Figma para qualquer cor sólida.
Atenção: os clientes de e-mail não são compatíveis com bordas em gradiente. Se você usar um preenchimento em gradiente no divisor, a exportação HTML final usará a primeira cor sólida do gradiente.
Adicionar padding interno às camadas de linha divisória
Se quiser, adicione padding interno aos divisores: selecione uma camada divisória do Emailify no e-mail com o painel Settings aberto, ative a opção Inner Padding e adicione os valores de padding que quer aplicar à camada divisória selecionada.
Isso adiciona um padding “interno” extra dentro da camada divisória quando ela é renderizada em HTML, o que permite definir valores de padding para determinadas camadas de texto da Column sem afetar as outras camadas.
Se quiser, você também pode substituir o padding de qualquer camada divisória do Emailify no celular ativando a opção Mobile Padding e adicionando os valores de padding que quer aplicar à camada divisória selecionada. Eles só aparecem quando o e-mail HTML é visualizado no celular.
Adicionar raio de borda aos fundos dos elementos do layout
Se a sua Row ou Column tem um preenchimento de fundo (sem contorno), você pode arredondar os cantos do fundo clicando na camada e definindo um valor de arredondamento com a propriedade Corner Radius no Figma.
Atenção ao conteúdo baseado em imagem. Se você aplicar no celular um raio de borda menor que o do desktop, a imagem é exportada como um JPG quadrado para preservar toda a área da imagem. Isso permite aplicar o raio menor no celular, mas significa que o raio não fica embutido no PNG. Por isso, o Outlook exibe a imagem com cantos retos, já que não é compatível com o border radius do CSS.
Atenção: os clientes de e-mail não são compatíveis com raio de borda em contornos. Se você usar raio de borda em um elemento de layout que tenha um contorno do Figma, a exportação HTML final usará bordas quadradas, sem arredondamento.
Observações importantes sobre raio de borda com contornos
O raio de borda funciona de forma confiável em qualquer camada Column que também tenha um contorno aplicado. Mas ele não funciona em camadas Row, porque elas são tabelas HTML (que, infelizmente, não são compatíveis com raio de borda em contornos).
Infelizmente, o raio de borda não é compatível com nenhuma versão do Outlook, então esses clientes sempre usam cantos retos, independentemente da configuração.
Para obter os melhores resultados, aplique o arredondamento diretamente na camada Column do Emailify que tem o contorno, e não em uma Row ou Wrapper, lembrando que os cantos arredondados não aparecem em nenhuma versão do Outlook.