Rahmenlinien zu deinen Layout-Elementen hinzufügen
Du kannst Ebenen in deinen E-Mail-Designs (zum Beispiel Row, Column, Button usw.) einen durchgehenden Rahmen geben: Klick auf die Ebene und wende eine Figma-Kontur (Stroke) darauf an. Sie wird im fertigen, aus Emailify exportierten HTML automatisch als CSS-Rahmen übernommen.
Für etwas Abstand zwischen dem Rahmen und dem Inhalt deiner Ebene kannst du nach dem Anwenden des Rahmens Padding auf diese Ebenen anwenden.
Beachte, dass E-Mail-Clients keine Verlaufsrahmen unterstützen. Wenn du für deine Figma-Kontur eine Verlaufsfüllung verwendest, wird im fertigen HTML-Export stattdessen die erste Volltonfarbe deines Verlaufs verwendet.
Trennlinien zwischen deine Inhaltsebenen einfügen
Wenn du in deinen E-Mail-Layouts eine Trennlinie zwischen Inhaltsebenen innerhalb einer Column brauchst, kannst du ein spezielles Emailify-Trennelement einfügen: Klick auf deine „Column“-Ebene, wähl im Dropdown-Menü Quick Add unten im Plugin den Eintrag „Divider“ aus und klick dann auf den Button Add +, um die Trennlinien-Ebene in deine Column einzufügen.
Nachdem die Trenn-Ebene zu deiner Column hinzugefügt wurde, kannst du sie in deinem Ebenen-Panel per Drag-and-drop verschieben, um festzulegen, zwischen welchen Ebenen sie liegt. Ihre Größe passt du über die Height der Ebene im Figma-Eigenschaften-Panel an, ihre Hintergrundfarbe, indem du die Fill deiner Ebene in Figma auf eine beliebige Volltonfarbe änderst.
Beachte, dass E-Mail-Clients keine Verlaufsrahmen unterstützen. Wenn du für deine Trennlinie eine Verlaufsfüllung verwendest, wird im fertigen HTML-Export stattdessen die erste Volltonfarbe deines Verlaufs verwendet.
Innenabstand zu deinen Trennlinien-Ebenen hinzufügen
Du kannst deinen Trennlinien optional Innenabstand geben: Wähl bei geöffnetem Panel Settings eine Emailify-Trenn-Ebene in deiner E-Mail aus, aktiviere den Schalter Inner Padding und trag die Padding-Werte ein, die auf die ausgewählte Trenn-Ebene angewendet werden sollen.
Dadurch wird beim Rendern ins HTML zusätzlicher „innerer“ Abstand in deiner Trenn-Ebene eingefügt. So kannst du Padding-Werte für bestimmte Textebenen in deiner Column festlegen, ohne andere Ebenen zu beeinflussen.
Du kannst das Padding jeder Emailify-Trenn-Ebene auf Mobilgeräten optional überschreiben: Aktiviere den Schalter Mobile Padding und trag die Padding-Werte ein, die auf die ausgewählte Trenn-Ebene angewendet werden sollen. Sie sind nur sichtbar, wenn deine HTML-E-Mail auf einem Mobilgerät angezeigt wird.
Eckenradius für Hintergründe deiner Layout-Elemente hinzufügen
Wenn dein Row- oder Column-Layout-Element eine Hintergrundfüllung hat (ohne Kontur), kannst du deinem Hintergrund abgerundete Ecken geben: Klick auf deine Ebene und leg in Figma über die Eigenschaft Corner Radius einen Wert für die abgerundeten Ecken fest.
Hinweis für bildbasierte Inhalte: Wenn du einen mobilen Eckenradius anwendest, der kleiner ist als der Desktop-Radius, wird das Bild als quadratisches JPG exportiert, damit der gesamte Bildbereich erhalten bleibt. So kann auf Mobilgeräten der kleinere Radius angewendet werden, allerdings ist der Radius dann nicht fest ins PNG eingebettet. Outlook stellt das Bild deshalb mit eckigen Ecken dar, weil es keinen CSS-Eckenradius unterstützt.
Beachte, dass E-Mail-Clients keinen Eckenradius für Rahmenlinien unterstützen. Wenn du einen Eckenradius auf ein Layout-Element mit Figma-Kontur anwendest, werden im fertigen HTML-Export stattdessen eckige Rahmen ohne Rundung dargestellt.
Wichtige Hinweise zum Eckenradius mit Konturen
Der Eckenradius funktioniert zuverlässig bei Column-Ebenen, die ebenfalls eine Kontur haben. Bei Row-Ebenen funktioniert er dagegen nicht, weil das HTML-Tabellen sind (die leider keinen Eckenradius für Konturen unterstützen).
Leider wird der Eckenradius in keiner Outlook-Version unterstützt. Diese Clients zeigen unabhängig vom Setup immer eckige Ecken.
Die besten Ergebnisse erzielst du, wenn du den Eckenradius direkt auf die Emailify-Column-Ebene mit der Kontur anwendest statt auf eine Row oder einen Wrapper. Denk aber daran, dass die abgerundeten Ecken in keiner Outlook-Version dargestellt werden.