Get Started with Postcards

Postcards gives you everything you need to start creating and customizing your email templates - going from zero to a finished product in just a few minutes.

Build email templates faster.
Enjoy unlimited design freedom.
No coding skills required.

Ways to access Postcards

There are three simple ways to get started:

1. From Designmodo Homepage

Visit designmodo.com
On the main page, click the green “Open App” button to launch the Postcards editor.

2. From the Postcards dedicated page

Go to designmodo.com/postcards/
Explore details about Postcards and launch the editor directly from there.

3. Via pre-made templates

Browse designmodo.com/email-templates/, where you’ll find a wide collection of ready-made templates.

Use filters (industry, usage, season, brand) to find the most relevant option.

Once you’ve found the right one, click to preview it fully.

Press the Edit in Postcards button to open it in Postcards, where you’ll see both mobile and desktop previews and can instantly make a copy to start editing.

4. Direct App Access

Going directly to designmodo.com/postcards/app/ will redirect you to the templates where you can:

Start from a blank template to build from scratch.
Browse through predefined templates and use filters (industry, usage, season, brand) to find the most relevant option.

See the template name and categories listed just under each template.

Hover over any template to reveal a circular button with three bubbles (···) and choose:

Open → instantly open the template in the editor.
Preview → check the template in full height and mobile view before editing.

Once you enter the Postcards editor, you’ll notice four main sections that help you build your email templates efficiently:

Layout and Module Panel

Your Layout panel is the map of your email, a visual guide to how everything is structured and arranged from top to bottom. It helps you see how each module and its elements are stacked in order, making it easy to create, rearrange, duplicate, or fine-tune sections at any time. This gives you full control over the flow, hierarchy, and composition of your design.

This is an example of the Layout panel in Postcards. Here, you can see one module, "Header 7," along with the elements nested inside it (text, images, grids, and items).

When you hover your mouse over an element in the Layout panel, that same element is highlighted on the canvas. This makes it easy to locate where each piece of content appears in your design. It’s especially useful when working with complex modules; you can quickly see which text block, image, or button you’re editing without guessing.

Modules and Elements

Each block in your email is a module, things like Header, Menu, Content, or Footer.

Inside each module are elements (text blocks, images, buttons, or grid items).

You can mix and match modules and elements however you like; there’s no required order. A typical module layout might include a Menu, Header, Content, and Footer, but you’re free to create any sequence that suits your design.

To add new elements within a module, hover your mouse between existing elements on the canvas. A small blue “+” icon will appear. When you click it, a menu opens with options to insert text blocks, images, buttons, grids, and more, right where you want them.

If you want to add a completely new module (such as a Header, Content block, or Footer), click the large blue “+” button located above the Layout panel on the far left. This opens the module library, where you can browse and insert new sections into your email.

Reordering and Structuring

To change the order of modules or elements, click and hold, then drag them up or down in the Layout panel.

Moving a module or element changes its position in the overall email.

The order you see here is exactly how your content will appear in the email, top to bottom.

Managing Modules and Elements

When you right-click a module or element, a quick-action menu appears with several management options:

Rename – give the module or element a clear, descriptive name to make navigation easier.
Duplicate – instantly create a copy that preserves all styling, spacing, and content.
Group – combine related elements into a single group for easier organization and movement.
Remove – delete the selected module or element from your layout. (You can hold Ctrl or Command and click multiple elements to select them, then press Delete to remove several elements at once).

These right-click tools help you organize, adjust, and refine your layout efficiently without leaving the design view.

2. Left Panel (Modules)

This panel contains the types of content you can add to your email:

Basic Modules:

Title, Subtitle, Text, Two Columns, Bullet List, Numbered List
Logo, Icon, Menu, Custom Code, Group, Button, Two Buttons, Wide Button
Image, Two Images, Link Menu, Text Footer, Separator, Video

Pre-Made / Complex Modules:

Menu, Header, Content, Feature, Call-to-Action, E-Commerce, Transactional, Footer

These modules allow you to quickly build sections or use ready-made layouts for faster creation.

Top Bar Overview

The Top Bar in Postcards gives you quick access to your main project tools, adding modules, managing projects, previewing your design, and exporting your finished email.

Each button has a specific purpose designed to make your workflow fast and intuitive.

Add Module (+)

(Located on the far left)

Use the blue “+” button to open the Modules Panel on the left side of the editor.

From here, you can drag and drop sections such as Headers, Content, Features, Footers, and more directly into your canvas.

This panel opens automatically when you start a new project, but you can reopen it anytime with this button.

Project Title & Status Indicator

Displays your current project name and its save status. Projects save automatically while you work, so there’s no need to manually save. Clicking the project title (for example, Untitled) lets you rename it

Green dot – your project is saved.
Orange dot – autosave is in progress.

Hovering over the green dot will also show when the last autosave occurred.

Important: Always wait until the dot turns green before closing your browser or switching projects. Leaving while it’s orange may cause unsaved changes to be lost.

Click the small arrow next to your project name to open the Project Menu. This menu gives you quick access to key tools and resources:

My Projects – View and manage all your saved projects in one place.
New Project – Start a brand-new design with a clean canvas.
Invite a Teammate – Add collaborators instantly and work together.
Image Library – Access all the images you’ve uploaded or reuse assets across projects.
Chat with Us – Reach our support team directly for quick help or troubleshooting.
Help Docs – Open the Designmodo Help Center for detailed guides and tutorials.

This menu keeps your workspace organized and makes it easy to jump between projects or get support without leaving the editor.

Undo / Redo

Use these two arrows to quickly reverse or reapply your most recent changes.

Undo works for nearly all design edits, including text, images, and layout adjustments.

Team Collaboration

The round “+” icon opens your Team Settings, where you can invite new teammates, manage existing members, and set their roles. This area also shows your current team members, their roles, and when they were last active.

You can invite collaborators in two ways:

Invite by Email – Send a direct email invitation to add an editor to your workspace.
Invite with URL – Copy a shareable link to invite teammates instantly.

Managing your team here ensures everyone has the right access level and makes collaboration seamless across all your Postcards projects. Each editor’s avatar appears inside the project while they’re working, so you’ll always know who’s editing.

Preview & Share

The eye icon opens the Preview & Share panel, and the airplane icon lets you send a direct test email to your inbox. This feature allows you to review your design before exporting or sharing it with others.

Preview & Share Panel

Inside Preview & Share, you can:

Preview your email on both Desktop and Mobile views to ensure your layout looks perfect across all devices.
Choose visibility settings with two options:
- Team Only – Only teammates with access to the project can view or make copies.
- Everyone – Anyone with the share link can view and duplicate the project.
Share your design directly on social platforms like X (formerly Twitter), Facebook, or LinkedIn.
Send via Email to share your preview privately.
Copy URL to quickly generate a shareable link for clients or collaborators.
Send a test email (airplane icon) to check rendering, image display, and spacing in your inbox before sending your campaign.

Always review both desktop and mobile versions, then send a test email before exporting; it’s the easiest way to spot alignment or font issues early and ensure your design looks great everywhere.

Export

Sign Up to Save Button: Prompts you to create an account. Without signing up, your current project cannot be saved and will be lost. Use the Export button to save or send your finished design. You can choose from:

Download as ZIP – get a full HTML package of your email.
Export via Integrations – send directly to ESPs like Mailchimp, HubSpot, or Klaviyo. (See full list of integrations Here).
Save as Outlook Template (.OFT) – for desktop Outlook users.
Copy Email Code – copy clean, production-ready HTML directly to your clipboard.

Tip: When exporting, always select Host images online so your visuals display correctly in all email clients.

Project Health Bar

The Health Bar, located next to the Export button, helps you monitor the overall condition and size of your email. It’s designed to keep your project optimized and ensure smooth delivery across different email clients.

When you click the bar, a panel appears showing:

Helpful insights and tips on how to improve your email’s performance or fix detected issues.
Email Size Indicator, which displays how close your email is to the recommended 102 KB limit - this is important because Gmail clips emails that exceed this size.

If you prefer not to see this reminder each time, you can check “Don’t show again.”

Try to keep your total size well below 100 KB to avoid clipping and ensure your email loads quickly for all recipients. You can also see our article “Tips to reduce email size” for quick optimization suggestions.

For detailed guidance on deliverability, sender reputation, avoiding spam traps, and related best practices, you can explore these in-depth articles:

3. Canvas (Container)

The canvas is the main workspace where your email template comes to life.

Drag modules from the left panel into the canvas.
Arrange and structure your content visually.

4. Right Panel (Edit Content)

Click any element in your project to select it. Then, use the right panel to:

Adjust parameters like font, colors, spacing, alignment, or borders.
Customize each element’s appearance to match your design.

Regular Click vs Deep Click – Falling Deeper into the Structure

In Postcards, when you click an element on the canvas, you can interact with it in two different ways: Regular Click and Deep Click.

Regular Click:
A regular click selects the top-level block or module. You’ll see general styling options in the right panel (for example, background color, padding, border, or spacing). This is useful when you want to adjust the overall look of a section rather than specific content.
Deep Click:
A deep click happens when you click again on an element that’s already selected; each click “dives deeper” into the structure. You can keep clicking to move through nested levels of content, allowing you to edit specific items like text, icons, or buttons individually. Once you’re inside this deeper level, the right panel updates to show properties specific to that element (for example, font, color, alignment, or link settings).

This layered editing flow lets you move seamlessly between the structure level (modules and groups) and the content level (individual elements), giving you full control over both layout and detail.

After adding the First Module

Once you drag and drop your first module onto the canvas, both the top bar menu and left panel will expand with new functionality.