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 Spacer Blocks to Adjust Layout
• Using Transparent Background Colors

 

What Is Multi-Layer Email Design?

Previously, each section in the Email Editor supported only a single content layer. Once an image was added, other blocks could not be placed in the same area.

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. Select 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 blocks
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 Spacer Blocks to Adjust Layout

The Email Editor now includes a Spacer block to help fine-tune spacing between overlay blocks.

Spacer block settings:

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

---

Using Transparent Background Colors

All color pickers in the Email Editor now support transparent colors, making it easier to layer content cleanly over background images.

You can:

• Select Transparent directly from recommended colors.
• Adjust the opacity level manually using the color picker.

This is useful when you want text or buttons to appear without blocking the background image.