Skip to content

Adding hero background image blocks to your email designs

You can add ๐Ÿฆธ Hero elements when you need to display a single column of rich text, buttons or other content elements on top of a background image.

The quickest way to add a new Hero is either to add a preset starter component (mostly from the "CTA" tab) or to use the Quick Add Element dropdown at the bottom of the plugin to insert a new blank Hero layer to your email design, when your Emailify email Figma frame is selected.

This will add a brand new empty Hero layer with a placeholder background image fill set on it.

You can then start populating it with content layers and customizing the styles (eg. adding a background, adjusting padding and spacing, etc) in Figma as needed.

If you need to use a background image for more than one column of content, you can also add background images to any ๐Ÿšฃ Row or ๐ŸŽ Wrapper layers, too.

๐Ÿฆธ Hero elements can only be added directly inside of โœ‰๏ธ Email layers. ๐Ÿฆธ Hero elements cannot contain any ๐Ÿ›๏ธ Column layers, as it doesn't support multiple column layouts; instead, content layers are added directly inside of the frame, without needing any ๐Ÿ›๏ธ Column layers (unlike a ๐Ÿšฃ Row element).