Wie stapele ich Spalten auf Mobilgeräten?

Wähl die Row-Ebene aus, die die Column-Ebenen enthält, klick im Kopfbereich des Plugins auf den Button Settings und aktiviere Stack Columns in this Row. Standardmäßig werden die Spalten der Row dann auf Mobilgeräten zu einer einzigen Spalte gestapelt.

Warum werden Spalten auf Mobilgeräten nicht gestapelt?

Spalten werden nicht gestapelt, wenn Stack Columns in this Row für diese Row deaktiviert ist oder die Row so eingestellt ist, dass sie auf Mobilgeräten mehr als eine Spalte pro Zeile behält. Bei manchen vorgefertigten Komponenten ist das mobile Stapeln außerdem standardmäßig deaktiviert, wenn das zum Design der Vorlage passt.

Um das zu beheben, wähl die Row aus, öffne Settings, aktiviere Stack Columns in this Row und wähl 1 Column Per Row on Mobile, wenn jede Spalte unter der anderen erscheinen soll.

Standardmäßig werden alle Column-Ebenen in deinen Designs auf Mobilgeräten gestapelt (außer bei vorgefertigten Komponenten, bei denen das bereits deaktiviert ist, damit sie wie vorgesehen aussehen).

Du kannst dieses Verhalten auf Mobilgeräten ändern, indem du auf eine beliebige Row-Ebene klickst, dann im Kopfbereich des Plugins auf Settings und den Schalter Stack Columns in this Row ein- oder ausschaltest.

Wenn du mehr als 2 Column-Ebenen in deiner Row verwendest, solltest du sie gestapelt lassen. Sonst kann ihr Inhalt auf kleineren Mobilgeräten sehr schmal und klein werden.

Die Anzahl gestapelter Spalten auf Mobilgeräten überschreiben

Standardmäßig stapelt der Schalter Stack Columns in this Row alle Column-Ebenen deiner Row zu einer einzigen Spalte. Optional kannst du das überschreiben, indem du im Dropdown neben dem Schalter im Plugin eine der folgenden Optionen auswählst:

• 1 Column Per Row on Mobile
• 2 Columns Per Row on Mobile
• 3 Columns Per Row on Mobile
• 4 Columns Per Row on Mobile

Hast du zum Beispiel eine Row mit 4 Columns, kannst du die Option 2 Columns Per Row on Mobile wählen. Dann werden deine Spalten auf Mobilgeräten in 2 Spalten über 2 Zeilen gestapelt (als „Raster“ aus 4).

Wähl im Dropdown nur einen Wert, der zur Anzahl deiner Spalten passt. Stellst du zum Beispiel 3 Columns Per Row on Mobile ein, obwohl deine Row im Design nur 2 Spalten enthält, bekommen diese 2 Spalten jeweils eine Breite von 33%. Sie füllen auf Mobilgeräten dann nicht die gesamte Bildschirmbreite aus und können kaputt oder seltsam aussehen.

Die vertikale Ausrichtung mobiler Spaltenzeilen überschreiben

Wenn deine Row auf Mobilgeräten weiterhin mehrere Column-Ebenen nebeneinander zeigt, kannst du auch überschreiben, wie diese Spalten in der mobilen Zeile vertikal zueinander ausgerichtet sind. Klick dazu auf deine Row-Ebene, aktiviere den Schalter Mobile Column Vertical Alignment und wähl im Dropdown daneben Top, Middle oder Bottom.

Diese Anpassung der vertikalen Ausrichtung ist nur verfügbar, wenn deine Row auf Mobilgeräten noch mehrere Spalten hat. Das heißt entweder:

• der Schalter Stack Columns In This Row ist deaktiviert, oder
• der Schalter ist aktiviert und im Dropdown ist mehr als 1 Column Per Row on Mobile eingestellt

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.