The hero section is the first thing your subscribers see when they open your email. It sets the tone, communicates your message, and drives the primary action. A well-designed hero can be the difference between a click and a scroll-past.
This guide covers the most common hero patterns you can build with the Email Love Figma Plugin, along with practical advice on making them work across email clients and devices.
What Makes a Hero Section
A hero section is typically the top content block of your email (below the header/navigation). It usually includes some combination of a headline, supporting text, a call-to-action button, and an image or background visual. Heroes are designed to grab attention and drive a single action.
In the Email Love plugin, hero sections are built using the same structural elements as any other part of your email — wrappers, sections, columns, and content elements. The difference is in how you arrange them.
Hero Layout Patterns
Background Image Hero
The most visually impactful hero pattern. A full-width background image with text and a CTA button overlaid on top.
How to build it:
- Create a wrapper (mj-wrapper) and set an image fill on it in Figma's design panel. This becomes your background image.
- Inside the wrapper, add a section with a single column.
- Place your headline text, supporting text, and button inside the column.
- Set the wrapper's background color to a complementary dark or light color as a fallback for clients that don't load images.
Why use a wrapper: The wrapper lets the background image span the full width of the email, including behind the padding areas. If you use a section instead, the background image is constrained to the content width.
For detailed guidance on background image setup, VML for Outlook, and image sizing, see Background Images in Email.
Tip: Keep your text short and high-contrast. If the background image is busy, add a semi-transparent overlay in Figma between the image fill and your text layers to improve readability.
Image Left / Text Right (Two-Column Hero)
A side-by-side layout with an image in one column and text content in the other. This is popular for product announcements, feature highlights, and editorial content.
How to build it:
- Add a section with two columns.
- In the left column, place an image element.
- In the right column, add your headline, supporting text, and CTA button.
- Set column widths — a 50/50 split works well, or try 40/60 (image/text) for more text-heavy heroes.
Flip it: For an "Image Right / Text Left" variant, simply swap which column contains the image and which contains the text.
Mobile behavior: On mobile, these two columns will stack vertically. By default, the left column appears on top. If you have the image on the right but want it to appear first on mobile, you can adjust the stacking order using the Mobile Styles tab. See Mobile Optimization for details.
Stacked Hero (Image + Text)
The simplest hero pattern. A full-width image on top followed by text and a CTA below (or text on top with the image below).
How to build it:
- Create a section with a single column.
- Place an image element at the top of the column.
- Below the image, add your headline, supporting text, and CTA button.
- The image should be the full width of the content area (640px, or 1280px for retina).
This pattern is the most reliable across email clients because it doesn't depend on background images or complex column layouts. It works well for product photos, lifestyle images, or banner graphics.
Text-Only Hero
No image at all — just a bold headline, supporting copy, and a CTA on a solid background color. This pattern loads instantly, works perfectly in every email client, and puts the focus entirely on your message.
How to build it:
- Create a section with a single column.
- Set a background color on the section (or wrapper for full-width color).
- Add your headline text, supporting text, and CTA button.
- Use generous padding (40–60px top and bottom) to give the section visual weight.
Text-only heroes work especially well for announcements, event invitations, and transactional-style marketing emails where the message matters more than the visual.
Designing for Mobile
Hero sections need to work on screens as narrow as 320px. Here are the key considerations:
Text sizing:
Headlines that look great at desktop size may be too large on mobile, causing awkward line breaks. Use the Mobile Styles tab to set a smaller font size for your hero headline on mobile. A desktop headline at 36px might work better at 24–28px on mobile.
Button sizing:
Make your CTA button easy to tap. On mobile, buttons should be at least 44px tall with generous horizontal padding. Consider making buttons full-width on mobile for easier tapping.
Image scaling:
Full-width images scale down automatically with MJML's responsive behavior. Background images on wrappers and sections also scale, though the effect varies by email client.
Column stacking:
Two-column heroes stack into a single column on mobile. Preview your design on mobile to confirm the stacking order makes sense — if the image stacks below the text but should be above it, use the Mobile Styles tab to adjust direction.
Padding adjustments:
Desktop padding (40–60px) often feels too spacious on mobile. Use the Mobile Styles tab to reduce padding on mobile — 20–30px usually works better.
Best Practices
One clear CTA.
Your hero section should drive a single action. Resist the temptation to add multiple buttons or competing links. If you need secondary actions, place them further down the email.
Keep it above the fold.
The hero should be immediately visible without scrolling on most devices. For desktop, this means keeping the total hero height under roughly 400–500px. On mobile, the "fold" is even shorter.
Set a background color fallback.
Whether you're using a background image or not, always set a solid background color on your hero section. If images are blocked or slow to load, the background color ensures your text remains readable.
Use the pre-built hero components.
The Email Love component library includes several hero variants (Image Left, Image Right, No Image) with properties already configured. These are a faster starting point than building from scratch. See Pre-Built Components for the full list.
Test in Outlook.
Heroes with background images render differently in Outlook due to VML. Always preview or test your hero in Outlook to confirm the background image, text positioning, and button alignment look correct.
Common Issues
Background image hero looks broken in Outlook:
Outlook uses VML for background images, which renders at fixed dimensions. Make sure your wrapper or section in Figma is sized correctly (e.g., 640px wide) before exporting. Also confirm you're using a Figma image fill on the wrapper — not a separate image layer placed behind content. See Background Images in Email for VML details.
Two-column hero doesn't stack properly on mobile:
Check that your section contains exactly two columns (not nested sections). Verify the stacking behavior in the plugin's mobile preview. If the order is wrong, use the Mobile Styles tab to reverse the column direction on mobile.
Hero text is hard to read over the background image:
Add contrast. In Figma, you can add a rectangle with a dark fill and reduced opacity between the background image and your text. Alternatively, choose a background image with a consistent tone (avoid images with mixed bright and dark areas).
Hero image looks pixelated on retina screens:
Use images at 2x resolution. For a 640px-wide hero image, export at 1280px wide. The plugin and MJML will display it at the correct size while keeping it sharp on high-DPI screens.
Hero CTA button is too small to tap on mobile:
Increase the button's height and horizontal padding. Use the Mobile Styles tab to make the button full-width on mobile if needed. The minimum recommended tap target is 44px × 44px.
Powered by