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.
  • Import HTML emails and turn them into editable projects.
  • Generate and refine content with AI.
  • No coding skills required.

Ways to access Postcards

There are four simple ways to get started:

1. From Designmodo Homepage

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

2. From the Postcards dedicated page

  1. Go to designmodo.com/postcards/
  2. 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/ opens the app on your Templates screen, where you can start a project in a few ways:

  • Create Blank Template — start from an empty canvas and build from scratch.
  • Generate with AI — describe what you need and let Postcards create a template from your prompt.
  • Browse pre-made templates — use the filters (Industry, Usage, Season, Brand, Free & Premium) or the search bar to find the right starting point, then hover a template to Open or Preview it.

You can also use the green + Create button in the top-right at any time — it offers Blank Project, Create With AI, From Template, and Import HTML.

To learn everything you can do once you're in; folders, sorting, transferring projects, and more, see Postcards Projects.

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:

  1. Layout Panel and Module Panel
  2. Top Bar
  3. Canvas
  4. Settings Panel

1. 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.

Left Panel (Modules)

This panel contains all the content types you can add to your email, including layout sections and basic modules. You can choose a module and simply drag it onto the canvas to add it to your layout.

When you create a new blank project, the Modules Panel opens automatically. After you insert a module, you can click that module directly in the canvas and the editor will switch to the Layout Panel, where you can focus on arranging and editing your content.

You can reopen the Modules Panel at any time by clicking the blue “+” button, which opens the Modules Panel on the left side of the editor.

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.

2. Top Bar Overview

1 Project title & status · 2 Project menu · 3 Add module · 4 Undo / Redo · 5 AI Assistant · 6 Comments · 7 Team & invites · 8 Profile menu · 9 Preview & Share · 10 Export · 11 Health Bar

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.

1. Project Title & Status Indicator

Displays your current project name and its save status. You can rename a project instantly by using Cmd + click (Mac) or Ctrl + click (Windows) directly on the project title. Project names can be up to 50 characters, and a live character counter shows how many characters you've used while editing. When exporting an email as an Outlook OFT, the project name is automatically used as the email subject.

Projects save automatically while you work, so there's no need to manually save.

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

Hovering over the green dot also shows 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.

2. Project Menu Dropdown

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.
  • Create New Project – Start from a Blank Project, Create With AI (generate from a prompt), a Template, or Import HTML (convert an existing HTML email into an editable project).
  • Image Library – Access all the images you've uploaded or reuse assets across projects.
  • Invite a Friend – Add collaborators to your workspace and assign each a role. See Inviting and Managing Teammates.
  • 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.
  • Switch Workspace – Jump between your workspaces without leaving the editor. Each workspace has its own projects, team, and plan. See Creating and Managing Workspaces.

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

3. Add Module (+)

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.

4. 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.

5. AI Assistant

Opens the AI assistant, where you can generate or restyle your design from a prompt — create a new version, restructure the layout, or rework content with AI, right inside your project. See Creating Emails with AI in Postcards for the full guide.

AI actions run on AI credits. See Understanding AI Credits.

6. Comments

Opens Comment mode, where you and your teammates can leave feedback pinned directly on the design, reply in threads, and mark items resolved. It's the fastest way to collect and act on review feedback without leaving the editor.

See How to Use Comments in Postcards.

7. 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. For the full breakdown of invitation methods, roles, and permissions, see Inviting and Managing Teammates in Postcards.

You can invite collaborators in two ways:

  • Invite by Email – Send a direct email invitation to add a teammate 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.

8. Profile Menu

Click your avatar to open your profile menu. It shows:

  • Your workspace, plan
  • Remaining AI Credits (with Usage history and Add More Credits)
  • Quick links to Workspace Settings, Account Settings, Chat with Us, and Logout.

9. Preview & Share

The eye icon opens a dropdown with four preview options:

  • Quick Preview & Share – opens the full Preview & Share panel, where you can review your design before exporting or sharing it.
  • Direct Email Preview – send a test email straight to your inbox.
  • Copy Preview URL – grab a shareable preview link instantly.
  • Email Clients Preview – check how your design renders in specific email clients.

For more on previewing and sharing your designs, see Preview & Share Email in Postcards.

Preview & Share Panel

Inside Preview & Share, you can:

  1. Preview your email on both Desktop and Mobile views to ensure your layout looks perfect across all devices.
  2. Switch between Light and Dark mode previews using the toggle to see how your email appears in different color schemes.
    • Preview your email in different email clients (such as Apple Mail, Outlook macOS, and Outlook Windows) using the client selector in the top toolbar. This helps identify client-specific rendering differences early.

  1. Make a Copy – If someone shares a project link with you, this button appears when you open the link. Clicking it creates a copy of the project in your Drafts, allowing you to edit it independently.
  2. Choose project visibility 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.

  1. Share your design using multiple options:
    • Share 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 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.

10. Export Options

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.
  • Send to Email Platform – send directly to ESPs like Mailchimp, HubSpot, or Klaviyo. (See the full list of integrations here).
  • Save as Outlook Template (.OFT or .emltpl) – for Windows or macOS desktop Outlook users.
  • Copy Email Code – copy clean, production-ready HTML directly to your clipboard.
  • Export as Image – Save your entire email design as a static image (JPG or PNG). You can choose the image format, resolution (including 2× Retina and 3× Hi-DPI support), and size before exporting. It includes separate desktop and mobile versions.
  • Export as PDF – Exports the full layout in a single scrollable PDF. You can select different page sizes and optionally include the subject line, preview text, and sender details. It includes separate desktop and mobile versions.

Note: If you're not signed in, a Sign Up to Save button appears instead — without an account, your project can't be saved and will be lost.

Important: When exporting, always select Host images online so your visuals display correctly in all email clients. After canceling a paid plan, your assets remain available during a 14-day grace period. If the plan is not reactivated, hosted images and CDN assets, custom fonts, and preview links are permanently deleted after 14 days.

11. Project Health Bar

For the full walkthrough — what every card checks, how to read a deliverability result, and how to connect your SMTP server — see Using the Health Bar in Postcards.

The Project Health Bar is your built-in quality control panel. Click the slim vertical gauge at the far right of the top bar, past Export, and it opens over the right side of the editor.

It checks your project as you build and flags rendering problems, deliverability risks, accessibility trouble, and plain mistakes — an image with no alt text, a link you never meant to leave in, a button Outlook will draw without its background.

Reading top to bottom, the panel has four parts:

  • 1. Test Deliverability – sends your email through a real spam and inbox-placement test, and reports a Spam Score out of 100 plus where the message actually landed at a range of providers. Open either block for the detail behind it: the individual checks under Spam Score, each marked Passed, Needs attention or Failed, and the provider-by-provider breakdown under Inbox. It needs your workspace's own SMTP server connected; without one, Postcards shows a clearly marked demo result and no email is sent — see Connecting your SMTP server.

All three are opt-in: nothing runs until you press the button, and none of them change your email on their own.

  • 4. The check cards – the automatic checks, which are free, instant and always running in the background. Open a card and you get a plain explanation of why the problem matters, the specific findings for your project, and on most cards a Highlight button that jumps straight to the element on the canvas. Nothing is fixed for you — the panel points, you decide.


Note: The Health Bar and its automatic checks are available on all plans. The three AI reviews run on AI credits, so they need a paid plan — the estimated cost appears next to each button before you run it. See Understanding AI Credits.

A check card only appears when your project triggers it, so two projects rarely show the same list. The checks cover Buttons Over Backgrounds, Too Wide, Deliverability Issues, Missing Alt Texts, Overly Complex Layout, Outlook-Specific Issues, Invalid Links, Invalid Custom Code, Countdown Issues, Accessibility Issues, AMP Issues and Large Images.

Keeping your email under 102 KB

One of the most common email issues is exceeding Gmail's 102 KB clipping limit. When an email goes over this size, Gmail hides part of the message behind a "View entire message" link, which can reduce engagement and break your layout flow.

The Email Size bar shows your current size (for example, 40 / 102 KB) and fills as the email grows. To keep it down:

  • Avoid excessive nesting of Grids and Groups
  • Remove unused or hidden elements
  • Compress and optimize images
  • Simplify overly complex structures

Note: This is the size of the HTML itself, not your images. Images are hosted and loaded separately, so for those watch the Large Images card.

See "Tips to reduce email size" for quick optimization suggestions. For detailed guidance on deliverability, sender reputation, and avoiding spam traps, 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.

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.

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, opacity or borders.
  • Customize each element’s appearance to match your design.

To explore each option in the Settings Panel in more detail, you can refer to our guides. For example, these articles walk through common settings in depth for each specific element:

You can also browse or search all available guides in the Editor category to find exactly what you’re looking for.

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.

Next Steps

Now that you know your way around the editor, here's where to go deeper:

You can also browse every guide in the Help Center.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us