Adicionar cores de fundo às camadas do layout

Personalize o fundo das camadas de layout do Emailify aplicando preenchimentos do Figma a elas.

Se você quer saber como personalizar a cor de fundo externa do e-mail, que aparece em volta do corpo do e-mail, basta mudar o fundo da página no Figma. Ele será usado como cor de fundo do corpo do e-mail em todas as exportações HTML do Emailify.

Definir uma cor de fundo sólida em qualquer camada do layout ​

Para definir uma cor de fundo sólida em qualquer elemento de layout do design do e-mail, clique na camada no Figma, adicione um preenchimento (clicando no ícone + ao lado do painel Fill nas propriedades da camada no Figma) e defina o preenchimento Solid dessa camada. Ele será aplicado como cor de fundo CSS quando o e-mail for exportado para HTML pelo plugin.

Definir um fundo em gradiente em uma camada Row, Column, Hero ou Wrapper ​

Para definir um fundo em gradiente em qualquer elemento de layout Row, Column, Hero ou Wrapper do design do e-mail, clique na camada no Figma, adicione um preenchimento (clicando no ícone + ao lado do painel Fill nas propriedades da camada no Figma) e defina o preenchimento Gradient dessa camada. Ele será aplicado como imagem de fundo (e não como gradiente CSS, que tem compatibilidade limitada entre os clientes de e-mail) quando o e-mail for exportado para HTML pelo plugin.

Atenção: os fundos em gradiente são renderizados como imagens de fundo. Eles funcionam em camadas Row, Column, Hero e Wrapper na pré-visualização e nas exportações HTML do Emailify, mas as exportações brutas mjml e loops ainda omitem os atributos de imagem de fundo das Columns.

Definir uma cor de fundo sólida em camadas de texto ​

Para definir uma cor de fundo sólida em camadas de texto do design do e-mail, selecione uma camada de texto do Figma no e-mail com o painel Settings aberto e cole o valor hexadecimal da cor (por exemplo, #FFFBA8) no campo Text Background Color. Isso adiciona automaticamente uma cor de fundo sólida atrás desse conteúdo de texto no seu e-mail HTML.

Se quiser, você também pode combinar a cor de fundo da camada de texto com um espaçamento interno na camada de texto, o que cria um espaço extra em volta do conteúdo do texto e dá um respiro à área do fundo.