Setting Up Email Background Styles with Overlay Blocks in SmartPush

SmartPush’s Email Editor now supports multi-layer email design, allowing you to set an image as a section background and overlay other content blocks (such as text, buttons, and discount codes) on top of it.

This enhancement gives you greater design flexibility and helps you create more visually engaging and conversion-focused emails.

In This Article

• What Is Multi-Layer Email Design?
• Setting a Background Image for a Section
• Adding Overlay Blocks on the Background Image
• Using Spacing Blocks to Adjust Layout

---

What Is Multi-Layer Email Design? 

Multi-layer email design is a layout approach that lets you organize and stack different types of content within a single email section. By separating background visuals from foreground content, you can control how elements are positioned, layered, and aligned, making it easier to build structured and visually balanced email layouts.

With multi-layer support, you can now:

• Use images as section background styles
• Overlay multiple content blocks within the same section
• Design richer layouts without manual HTML or external tools

This feature is especially useful for:

• Hero banners with text and call-to-action buttons
• Promotional sections with background images and discount codes
• Brand storytelling layouts with layered visual elements

---

Setting a Background Image for a Section

To set an image as the background of a section:

1. In the SmartPush Admin, go to Campaigns, Automations, or Pop-ups & Forms, and select any templates with an Editor.
2. In the Email Editor, click directly within the purple section area.

3. Enter the Section editing mode.

   

4. Add Background Image.

5. Upload or select an image and adjust the background settings as needed.

   

The selected image will be applied as the base layer of the section.

---

Adding Overlay Blocks on the Background Image

Once a background image is set, you can place other blocks on top of it:

1. While editing the same section, add blocks such as:
   • Text
   • Button
   • Discount

   • Other supported content block

     

2. Adjust spacing, alignment, and styles to layer the content over the background image.

All added blocks will appear above the background image, allowing you to build a multi-layer layout within a single section.
 

---

Using Spacing Blocks to Adjust Layout

The Email Editor provides a Spacing block to help fine-tune spacing between overlay blocks.

Spacing block settings:

• Height: Enter an integer value between 0–2000 px
• Background color: Optional (default is transparent)