Añadir colores de fondo a tus capas de diseño

Puedes personalizar el fondo de las capas de diseño de Emailify aplicándoles rellenos de Figma.

Si buscas cómo personalizar el color de fondo exterior del email, el que aparece alrededor del cuerpo del email, puedes definirlo cambiando el fondo de tu página de Figma, que se usará como color de fondo del cuerpo del email en todas las exportaciones HTML de Emailify.

Definir un color de fondo sólido en cualquiera de tus capas de diseño ​

Para definir un color de fondo sólido en cualquier elemento de diseño de tu email, haz clic en la capa en Figma, añade un relleno (con el icono + junto al panel Fill de las propiedades de Figma de la capa) y elige el relleno Solid para esa capa. Se aplicará como color de fondo CSS cuando exportes tu email a HTML desde el plugin.

Definir un fondo degradado en una capa Row, Column, Hero o Wrapper ​

Para definir un fondo degradado en cualquier elemento de diseño Row, Column, Hero o Wrapper de tu email, haz clic en la capa en Figma, añade un relleno (con el icono + junto al panel Fill de las propiedades de Figma de la capa) y elige el relleno Gradient para esa capa. Se aplicará como imagen de fondo (no como degradado CSS, que tiene una compatibilidad limitada en los clientes de email) cuando exportes tu email a HTML desde el plugin.

Ten en cuenta que los fondos degradados se renderizan como imágenes de fondo. Funcionan en las capas Row, Column, Hero y Wrapper en la vista previa y en las exportaciones HTML de Emailify, pero las exportaciones mjml y loops sin procesar siguen omitiendo los atributos de imagen de fondo de las Column.

Definir un color de fondo sólido en las capas de texto ​

Para definir un color de fondo sólido en las capas de texto de tu diseño de email, selecciona una capa de texto de Figma de tu email con el panel Settings abierto y pega tu valor de color hexadecimal (por ejemplo, #FFFBA8) en el campo Text Background Color. Se añadirá automáticamente un color de fondo sólido detrás de ese texto en tu email HTML.

Si quieres, también puedes combinar el color de fondo de tu capa de texto con un relleno interior en la capa de texto, que añade un margen extra alrededor del texto y le da algo de espacio al área del fondo.