Using the Drag & Drop Editor v2 (BETA)

Using our Drag and Drop template editor, you can streamline the design process, making it easy for anyone to create professional and visually appealing emails without coding knowledge. With intuitive tools, you can customize layouts, add images, text, and buttons, and preview designs in real-time.

This approach saves time, enhances creativity, and ensures consistent branding across your campaigns.

Additionally our drag and drop editor includes responsive design features which guarantee that emails look great on all devices, improve engagement, and conversion rates.

This article will take you through the various options and elements in the Drag & Drop template editor.

Follow along to create your own template:

Click on the Campaigns menu in the top menu bar and then go to Templates.
Use the button to Add a Template.
Click the Start Designing button next to the Drag and Drop heading.
You now get to choose from a number of templates, from a range of categories. There are 'Branded' templates which will use your own brand attributes stored from running the brand analyzer (if you've used that). You can also choose from one of Transpond's many pre-made designs, or start from scratch with a blank template. For the sake of this article, it doesn't matter which you choose.

An overview of the Drag and Drop editor

There are three key areas of Drag and Drop editor.

At the top you'll have settings and options for using the template such as its name, edit history, and the most popular option - the Preview & Test button.
On the left most side you have three options for Add, Style, and Checks. Within each option you then get a series of additional options. More on those below.
The rest of the screen is comprised of your 'Stage' where you can see your template take shape, and you can edit the content inline.

How to add template elements

In the options on the left hand side use Add to add new elements to your template. Click and drag an element into the main template stage to start using it.
- Under Basic Blocks there are a set of elements you can add to your template. They are:
  - Paragraph - for writing any type of text in your template
  - Image - You can make images clickable by configuring a link for them.
  - Divider - to make a visual divider horizontal between blocks of content in your template
  - Button - for calls to action, leading either to a URL, an email address, phone number, a file or to a Form.
  - YouTube Video - which inserts a preview image for a YouTube video using the URL for the video, and when clicked links back to the video.
  - Social Links - lets you add a set of social profile icons, where you can customize both shape and color-way.
  - Countdown - lets you add a timer counting down to a specific date & time.
  - HTML - for any type of custom HTML content that doesn't fit the mold of the standard elements.
  - Survey - lets you ask your subscribers questions inside the email, the answers for which are then collated in your campaign analytics.
  - RSS Feed - for inserting content from an RSS feed, where the content can either be static or dynamic. When dynamic you can configure your email campaigns to automatically send anew whenever there is new content in the RSS feed.

Empty Columns

Using the Empty columns section you can configure how your elements are placed in your template. This is indicated by how many columns they have. You can have single column layouts for big blocks of text or striking images.
You can then setup multi-column layouts for when you want to display images or text side by side.

Saved Layouts

When you've setup a layout that you like and think you might want to reuse in the future, you can star the layout in the editor, and at that point it will show up in your list of Saved Layouts to be used when needed. It's common to save layouts for standard business headers with logos, signatures etc.

Apps

Using the App Marketplace you can add content based on connected apps, such as a Calendly block for contacts to book a time with you based on your Calendly availability or you can insert YouTube or Vimeo videos etc.

How to use Styles in your Template

The Template Style

Defining the overall email template style first gives you a clear foundation for everything that follows. It ensures your colors, typography, spacing, and tone work together, so the final email feels consistent and professional.

It also saves time. With a shared style in place, you can build individual elements faster without needing to revisit and adjust them later.

Finally, it reduces errors and increases confidence. Clear guidelines make it easier for anyone to create or edit emails consistently, leading to fewer revisions and a smoother workflow.

Use the Style option on the left hand side, and then go through each section to define the style for it.

If you created the template from the 'Branded' section then the Style will already be set based on your brand which in turn was created using the Brand Analyzer.

There are sections each for Body, Buttons, Fonts, Links, Layouts, and Elements. Click to expand the options for each section.

The options will be different for each section, depending on what it's for. For Buttons for example you can set a radius, while for Fonts you can define the font name, size, color etc for each of your text styles.

Individual element styles

Any time you've selected a layout or element inside your template, the panel on the left hand side will display your configuration options.

Some examples of style options are:

Width & Height - choosing the size of the element with the layout block
Border - to give the element a solid or dotter border, and give said border a color.
Font - if it's a text or button element for example
Alignment - to left, center or right adjust
Rounded corners
Background - for setting the background color for example
Automatic image resizing - which will reduce the size of the element based on its current configuration. This is especially important to use if your contacts use Outlook to view their emails
Visibility - which lets you hide the element on mobile or desktop devices
Spacing - which lets you set padding and margins for your element.

If you're editing an image element for example, then you'll have one tab for the content e.g. the image itself, and another for the style of the element.

Layout vs element style

If you click on a Layout as opposed to a specific element then you can configure the style for the layout itself.

Saved layouts

Transpond has a set of predefined template blocks that you can use when you need a specific visual setup e.g. Image and Text combined, or a GDPR confirmation block, which includes a specific piece of text and two button options configured to specific merge tags.

In addition to the pre-made layouts, you can save your own layouts to re-use in the future.

How to save a layout

First set up the layout in your template
Click on the layout block as a whole (not an individual element) and then click the little star icon in the little option menu below the layout.
Give the layout a name and click the button to Save Block. This will save it for future use.

Saved layouts are then found using the Add option and then going to Saved Layouts.

Some common uses for Saved Layouts include:

Company header
Signature footer
A greeting with conditional merge tags.
Frequently used image sets

How to check your template merge tags, links, and history

When you're done with your template it can be helpful to check and make sure all your merge tags, links and the general look of your template are right before you use it for a campaign or automation.

On the left hand side there's a Checks option you can use to make sure your merge tags and links are all setup correctly.

Check Merge Tags will show you a list of all the detected merge tags in the template, and indicate if they are valid or not.
Check Links will show you a list of all links found in the template, and try to make sure they are valid. If not then they'll be highlighted in red in the list, so you can go back and fix them up.

At the top of the page you can use the History button to give you a history of all updates made to the template, and lets you go back to edits for a specific date & time, in case you want to go back to a previous version.

How to preview your Template

Preview will take you to a preview page where you'll be able to

Review your template and toggle between Desktop, Tablet and Mobile view.
You can also send yourself and your colleagues a test email.
Use the option to Preview as a contact to see what the email will look like with the merge tags populated based on one from a sample of contacts.
Download the template as a PDF