Para adicionar uma imagem de fundo a qualquer camada Row, Column, Wrapper ou Hero do design do e-mail, clique na camada no Figma, clique no ícone + ao lado do painel Fill nas propriedades da camada no Figma e defina o tipo de preenchimento como Image. O exemplo acima mostra isso em uma camada Column, mas o mesmo fluxo também vale para as camadas Row, Wrapper e Hero. Esse preenchimento de imagem será aplicado como imagem de fundo quando o e-mail for exportado para HTML pelo plugin.

Para aumentar o contraste entre a imagem de fundo e as camadas de conteúdo, adicione uma cor semitransparente extra por cima do preenchimento de imagem de fundo da camada (clicando no ícone + ao lado do painel Fill nas propriedades da camada no Figma), defina o novo preenchimento Gradient ou Solid com a cor que quiser e ajuste a porcentagem de opacidade do preenchimento (por exemplo, 35).

Imagens de fundo e gradientes são compatíveis com camadas Row, Column, Wrapper e Hero na pré-visualização do Emailify e nas exportações renderizadas em HTML. Se você exportar a saída bruta mjml ou loops, os atributos de imagem de fundo das Columns ainda são omitidos.

Definir uma cor sólida alternativa atrás da imagem de fundo

Se quiser adicionar uma cor alternativa personalizada atrás da imagem de fundo (visível enquanto a imagem carrega no cliente de e-mail do usuário ou se o cliente de e-mail bloquear inicialmente a exibição de imagens), adicione uma cor sólida extra aos Fills da camada Row, Column, Wrapper ou Hero com imagem de fundo clicando no botão de ícone +, defina a cor escolhida com opacidade de 100% e arraste-a para o fim da lista de Fills (abaixo do preenchimento da imagem de fundo).