Designing Emails with Styles, Sections, and Elements

The SmartPush Email Editor provides a visual, drag-and-drop interface that helps you build professional marketing emails without any coding. By combining global styles, sections, and content elements, you can control both the structure and appearance of your emails with ease.

This article explains how to use Styles, Sections, and Elements in the Email Editor to design well-structured and visually consistent email campaigns.
 

Understanding Global Styles

Global Styles allow you to define the overall appearance of your email, ensuring visual consistency across all sections.

Accessing Global Styles

When you enter the Email Editor, Global Styles are selected by default.
If you are editing other areas, you can return to Global Styles by clicking the edge of the Header, Body, or Footer section.
 

Available Style Settings

In Global Styles, you can:

• Set the email background color
• Reset the background color using the eraser icon
• Adjust border display to control whether the background color:
  • Appears only within the email body, or
  • Extends to both sides of the email canvas

These settings apply to the entire email layout.

---

Working with Rows

Rows define the structural layout of your email. They act as containers that hold content elements.

Adding a Row

1. Go to the Block tab in the Email Editor.
2. Drag rows into the design area.
3. Choose a layout:
   1. One-column section
   2. Two-column section

There is no limit to the number of sections you can add.

---

Managing Header, Body, and Footer Sections

When you open the Email Editor, a sample layout is preconfigured with three main sections:

• Header: Typically used for brand elements such as logos or view-in-browser links.
• Body: The main content area for messages, images, promotions, and calls to action.
• Footer: Commonly used for social links, company information, and legal content.

Footer Restrictions

• The Footer automatically includes unsubscribe and legal information
• This content cannot be edited or removed
• The language of the footer automatically matches the store’s language settings

Editing and Managing Sections

When hovering over a section, a shortcut toolbar appears in the top-right corner.

You can perform the following actions:

Edit Section Style

• Click the pencil icon
• Customize the section’s background color and border style

Move a Section

• Click the move icon to reorder sections
• Header and Footer sections cannot be moved

Delete a Section

• Click the trash icon to delete a section
• All content within the section will be permanently removed
• Deleted sections cannot be restored
• A confirmation prompt appears to help prevent accidental deletion

---

Adding and Editing Elements

Elements are content blocks used to display information within a section, such as:

• Text
• Images
• Buttons
• Other interactive or visual components

Adding an Element

1. Select an element from the editor panel
2. Drag it into the desired section
3. Edit its content and style using the right-side settings panel

Each element provides its own customization options depending on its type.

Saving Your Changes

After editing, click Save in the upper-right corner to save your email content.

By combining Global Styles for consistency, Sections for structure, and Elements for content, you can efficiently design emails that are both visually appealing and easy to maintain.