Den standardmäßigen Auto-Layout-Abstand zwischen deinen Ebenen ändern
Über die Eigenschaft Item Spacing deiner Row-, Column- oder anderen Layout-Ebenen von Emailify (etwa eines Wrappers, Heros oder Containers für Social-Icons) legst du fest, wie viel Abstand standardmäßig zwischen den untergeordneten Elementen dieser Ebene liegt.
Setzt du für eine Column-Ebene zum Beispiel einen Item-Spacing-Wert von 16, wird zwischen allen Elementen in dieser Column (zum Beispiel Texten, Bildern, Buttons usw.) ein gleichmäßiger Abstand von 16 Pixeln verteilt.
Eigene vertikale Spacer-Elemente zu deinen Spalten hinzufügen
Hast du den Standardabstand schon festgelegt, brauchst aber zwischen bestimmten Ebenen in deiner Column noch etwas zusätzlichen vertikalen Abstand, kannst du ein spezielles Spacer-Element von Emailify hinzufügen: Klick auf deine „Column“-Ebene, wähle im Dropdown-Menü „Quick Add“ unten im Plugin den Eintrag „Spacer“ und klick dann auf den Button Add +, um die Spacer-Ebene in deine Column einzufügen.
Ist die Spacer-Ebene in deiner Column, kannst du sie im Ebenen-Panel per Drag-and-drop verschieben, um festzulegen, zwischen welchen Ebenen sie liegt. Ihre Größe passt du dann über die Height der Ebene im Eigenschaften-Panel von Figma an.
Auch um eigene Spacer-Elemente herum gilt das standardmäßige Item Spacing ihres übergeordneten Elements. Berücksichtige das, wenn du den Height-Wert deines Spacers festlegst.
Automatischen vertikalen Abstand zwischen den Ebenen deiner Spalte hinzufügen
Um eine Ebene oben in einer Column und eine andere unten zu halten, setze die vertikale Auto-Layout-Größe der Column auf Fill container. Setze dann Item spacing auf Auto. Figma verteilt den verfügbaren Platz zwischen den Ebenen, wenn sich die Länge des Inhalts ändert.
Den Item-Spacing-Wert für Mobilgeräte überschreiben. Nutzt du diese Methode für ein vertikal geteiltes Layout in deinem Desktop-Design, solltest du für das Item Spacing auch einen mobilen Wert festlegen: Klick auf dieselbe „Column“-Ebene, auf die du die Schritte oben angewendet hast, dann auf den Button Settings, aktiviere den Schalter Mobile Item Spacing und gib einen Zahlenwert deiner Wahl (in Pixeln) ein. So ist der Abstand auf Mobilgeräten statisch und einheitlich (unabhängig davon, wie groß der „automatische“ Abstand auf dem Desktop ist).
Eigenen vertikalen Abstand zwischen den Absätzen deiner Textebenen hinzufügen
Den vertikalen Abstand zwischen Absätzen in deinen Figma-Textebenen passt du an, indem du das Panel mit den Texteigenschaften in Figma öffnest und im Tab Basics den Wert Paragraph spacing änderst. Er bestimmt, wie viel margin-bottom beim Erzeugen deiner HTML-E-Mail zu den <p>-Tags im Inhalt dieser Textebene hinzugefügt wird.
Hast du zusätzliche Absatzzeilen eingefügt (zum Beispiel durch zweimaliges Drücken von Enter oder Return für eine Leerzeile), bleibt der leere zusätzliche Absatz erhalten, und darunter wird ebenfalls dein eigener Absatzabstand als margin-bottom hinzugefügt. Du kannst diese zusätzlichen, leeren Absätze optional entfernen (wie im Video oben), um den Absatzabstand in deinem Text genauer zu steuern.
Du kannst Einstellungen auf mehrere Ebenen anwenden, indem du Settings öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.