​
Changing the default auto-layout item spacing for your layers

By adjusting the Item Spacing property for your Row, Column or other Emailify layout layers (like a Wrapper, Hero or Social icons container), you can define the default amount of spacing in-between the child elements inside of that layer.

For example, setting an item spacing value of 16 to a Column layer will distribute an even amount of spacing (16 pixels) in-between any elements (eg. text, images, buttons etc) inside of that Column layer.

​
Adding custom vertical spacer elements to your columns

If you’ve already set your default item spacing, but still need an extra bit of vertical spacing between certain layers in your Column, you can add a special Emailify spacer element by clicking on your “Column” layer, then selecting the “Spacer” item from the Quick Add dropdown menu at the bottom of the plugin, and then clicking the Add + button to insert the spacer layer into your Column.

After the spacer layer has been added to your Column, you can drag and drop the layer in your layers panel to re-order which layers it sits between, and then you can adjust the size of it by adjusting the Height of the layer in its Figma layer properties panel.

Custom spacer elements will also have the default Item Spacing of its parent element surrounding it, so you take this into account when specifying the Height value of your spacer.

​
Adding automatic vertical item spacing between your column layers

If you’d like to have a column layout style where one layer of content is at the top (eg. a text layer) of the column and the other layer is always at the buttom (eg. a button layer), with variable amount of spacing in between (depending on the content length), you can do this by setting your “Column” layer’s vertical auto-layout setting to Fill container, and then setting the Item Spacing auto-layout setting to Auto.

Override the item spacing value for mobile. If you’re using this method to create a split vertical layout for your desktop design, you should also add a mobile override value for the Item Spacing by clicking on the same “Column” layer you applied the above steps to, then click the Settings button, enable the Item Spacing mobile override toggle, and enter a number value of your choice (in pixels) to make the item spacing a static and consistent size on mobile (regardless of the “auto” spacing size on desktop is).

Was this page helpful?

Adjust Layout PaddingAlign Layouts & Elements