---
url: "/emailify/elements/hero.md"
description: "Use Hero sections for single-column content with background images and content elements."
---

# Hero

> Use Hero sections for single-column content with background images and content elements.

**🦸 Hero** elements are a special type of content container that are able to have a background image added to its own frame element.

> **Warning:** **Hero layers can't be nested or contain columns**. **🦸 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).

> **Tip:** **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.

## Hero Content Elements

These options will be visible when a 🦸 **Hero** Figma layer is selected:

- ✍️ [Text](/emailify/elements/text)
- 📷 [Image](/emailify/elements/image)
- 🔗 [Button](/emailify/elements/button)
- 📐 [Spacer](/emailify/elements/spacer)
- ➖ [Divider Line](/emailify/elements/divider)
- 🧾 [Spreadsheet (Import)](/emailify/elements/spreadsheet)
- 🪑 [Data Table](/emailify/elements/table)
- 🍔 [Navigation Links](/emailify/elements/navbar)
- 🐦 [Social](/emailify/elements/social)
- 🎠 [Image Carousel](/emailify/elements/carousel)

## Using the "Quick Add" feature to add new Emailify layers

[Video](/assets/videos/emailify/element-contexts.mp4)

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.

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