Skip to content

Content Row

Use rows as primary layout containers and optionally render rows as images.

๐Ÿšฃ Row elements are the main basic building blocks inside of an Emailify โœ‰๏ธ Email frame. These can only be added directly inside of the main email frame, and are just used as containers for ๐Ÿ›๏ธ Content elements.

Rows can't be nested. ๐Ÿšฃ Row layers can only be added directly to an โœ‰๏ธ Email frame, and can only contain one or more ๐Ÿ›๏ธ Column layers inside of it.

Adding background images and/or gradients. You can add image and/or gradient background fills to ๐Ÿšฃ Row, ๐Ÿ›๏ธ Column, ๐Ÿฆธ Hero and ๐ŸŽ Wrapper layers. Please note that raw mjml and loops exports still omit Column background image attributes.

Content Row Elements โ€‹

These options will be visible when a ๐Ÿšฃ Row Figma layer is selected:

Using the "Quick Add" feature to add new Emailify layers โ€‹

Emailify allows you to build out your designs using special layout blocks and content elements that are added as layers to your Figma designs, and allows them to be exported out to HTML from the plugin.

To add these layout blocks and content elements, ensure that you have created at least one Emailify frame, and then click on that frame to automatically reveal the Quick Add Element context menu at the bottom of the plugin, then click the desired element, and click the Add + button to add it to the selected layer.

The options that are available in the context menu will change based on your current Figma layer selection.

Rendering a row as an image (instead of HTML) โ€‹

For whatever reason, if you'd like to ensure that a certain row is rendered out as a full width image (instead of rich text/HTML content), you can do this by clicking on any row in your Emailify container frame with the settings panel open, then clicking on the Render as image (instead of HTML) toggle.

You can visually preview your image render using the preview HTML feature in the plugin.