メールデザインの任意のRow、Column、Wrapper、Heroレイヤーに背景画像を追加するには、Figmaでレイヤーをクリックし、レイヤーのFigmaプロパティでFillパネルの横にある + アイコンをクリックして、塗りの種類をImageに設定します。上の例はColumnレイヤーでの操作ですが、Row、Wrapper、Heroレイヤーでも手順は同じです。プラグインからメールをHTMLにエクスポートすると、この画像塗りが背景画像として適用されます。
背景画像とコンテンツレイヤーのコントラストを高めるには、レイヤーの背景画像の塗りの上に半透明の色を追加します(レイヤーのFigmaプロパティでFillパネルの横にある + アイコンをクリックします)。新しいGradientまたはSolidの塗りを好きな色に設定し、塗りの不透明度の値(例:35)を調整してください。
背景画像とグラデーションは、EmailifyのプレビューとHTMLとして出力されるエクスポートで、Row、Column、Wrapper、Heroレイヤーに対応しています。mjmlまたはloopsの生の出力をエクスポートする場合は、Columnの背景画像の属性は引き続き省略されます。
背景画像の背後に単色の代替色を設定する
背景画像の背後に独自の代替色を表示させたい場合(受信者のメールクライアントで画像の読み込み中や、メールクライアントが最初に画像コンテンツの表示をブロックした場合に表示されます)は、背景画像を設定したRow、Column、Wrapper、HeroレイヤーのFillsに単色を追加します。+ アイコンボタンをクリックし、選んだ塗りの色の不透明度を100%に設定して、Fillsリストのいちばん下(背景画像の塗りの下)にドラッグしてください。