Hintergrundfarben zu deinen Layout-Ebenen hinzufügen

Du kannst die Hintergründe deiner Emailify-Layout-Ebenen anpassen, indem du Figma-Füllungen auf sie anwendest.

Wenn du wissen willst, wie du die äußere Hintergrundfarbe der E-Mail anpasst, die rund um den E-Mail-Body erscheint: Dafür änderst du den Hintergrund deiner Figma-Seite. Er wird in allen HTML-Exporten aus Emailify als Hintergrundfarbe des E-Mail-Bodys verwendet.

Einfarbigen Hintergrund für eine beliebige Layout-Ebene festlegen ​

Um für ein Layout-Element in deinem E-Mail-Design eine einfarbige Hintergrundfarbe festzulegen, klick in Figma auf die Ebene, füg eine Füllung hinzu (über das +-Icon neben dem Panel Fill in den Figma-Eigenschaften der Ebene) und leg für diese Ebene eine Solid-Füllung fest. Sie wird beim HTML-Export deiner E-Mail aus dem Plugin als CSS-Hintergrundfarbe angewendet.

Verlaufshintergrund für eine Row-, Column-, Hero- oder Wrapper-Ebene festlegen ​

Um für ein Row-, Column-, Hero- oder Wrapper-Layout-Element in deinem E-Mail-Design einen Verlaufshintergrund festzulegen, klick in Figma auf die Ebene, füg eine Füllung hinzu (über das +-Icon neben dem Panel Fill in den Figma-Eigenschaften der Ebene) und leg für diese Ebene eine Gradient-Füllung fest. Sie wird beim HTML-Export deiner E-Mail aus dem Plugin als Hintergrundbild angewendet (nicht als CSS-Verlauf, der in E-Mail-Clients nur eingeschränkt unterstützt wird).

Beachte, dass Verlaufshintergründe als Hintergrundbilder gerendert werden. Sie funktionieren auf Row-, Column-, Hero- und Wrapper-Ebenen in der Emailify-Vorschau und in HTML-Exporten, aber reine mjml- und loops-Exporte lassen die Hintergrundbild-Attribute von Columns weiterhin weg.

Einfarbigen Hintergrund für Textebenen festlegen ​

Um für Textebenen in deinem E-Mail-Design eine einfarbige Hintergrundfarbe festzulegen, wähl bei geöffnetem Panel Settings eine Figma-Textebene in deiner E-Mail aus und füg deinen Hex-Farbwert (zum Beispiel #FFFBA8) in das Eingabefeld Text Background Color ein. Dadurch wird in deiner HTML-E-Mail automatisch eine einfarbige Hintergrundfarbe hinter diesem Textinhalt eingefügt.

Du kannst die Hintergrundfarbe deiner Textebene optional mit Innenabstand für deine Textebene kombinieren. So bekommt der Textinhalt etwas zusätzlichen Abstand und die Hintergrundfläche wirkt luftiger.