About: The Template Editor

Why This Matters

The template editor is your creative workspace for designing professional email campaigns and landing pages. Whether you're creating your first newsletter or building a complex multi-section landing page, understanding how the editor works will help you design faster, avoid frustration, and create templates that look great on any device.

This drag-and-drop editor makes it easy to create beautiful designs without knowing any code. You'll be able to add text, images, buttons, and other content with simple clicks and drags, then customize everything to match your brand.

Watch & Learn

🎥 Video: The Template Editor

Understanding the Editor Workspace

When you open the template editor, you'll see three main areas that work together:

The Canvas (Center) This is your design workspace where you build your template. Think of it as a blank page where you'll add and arrange your content. What you see here is very close to what your contacts will see when they receive your email or visit your landing page.

The Sidebar (Right) This control panel changes based on what you're working on. When you select different elements in your design, the sidebar shows you the options available for customizing that element. You'll use this area to change colors, adjust spacing, add links, and control how your content looks.

The Toolbar (Top) Here you'll find buttons for saving your template, previewing how it looks on different devices, undoing changes, and other essential actions.

How Content Is Organized

The editor uses a building-block approach with three levels of organization:

Settings (Foundation Level) These are your default choices that apply to your entire template - things like your default font, colors, and overall width. Any choices you make here become the starting point for everything you add.

Rows (Structure Level) Rows are horizontal sections that divide your template into organized areas. Each row can have its own background color, padding, and layout. Think of rows as the shelves where you'll place your content.

Content Blocks (Detail Level) These are the actual pieces of content - text paragraphs, images, buttons, dividers, and more. You'll drag these blocks into your rows to build your design.

Working with Rows

Rows give your template structure and help you create professional layouts.

Adding Rows Click the Rows tab in the sidebar to see available row layouts. Each shows a different column arrangement (one column, two columns, three columns, etc.). Drag the layout you want onto your canvas.

Understanding Columns Most rows contain columns - vertical spaces where you place content. A two-column row lets you put an image on the left and text on the right, for example. Columns automatically stack vertically on mobile devices so your content remains readable on small screens.

Customizing Rows Click anywhere in a row (but outside of content blocks) to select the entire row. The sidebar will show row properties like background colors, padding (spacing around content), and alignment options. These settings affect the entire row.

Adding and Arranging Content

Dragging Content Blocks Click the Content tab in the sidebar to see all available content types. To add content, simply drag a block from the sidebar and drop it into a column in your template. The block automatically adjusts to fit the column width.

Moving Content Click and hold any content block, then drag it to a new position. You can move blocks within the same row, to different rows, or even create new rows by dragging content between existing rows.

Deleting Content Click a content block to select it, then click the trash icon that appears. You can also delete entire rows the same way.

Copying Content When you select a content block or row, you'll see a duplicate icon. Click it to create an exact copy that you can then customize differently.

Desktop vs. Mobile View

Your templates automatically adapt to different screen sizes, but you can preview and fine-tune how they look on mobile devices.

Switching Views Look for the desktop and mobile icons in the top toolbar. Click the mobile icon to see how your template will appear on a phone. The canvas narrows to show you exactly what mobile users will see.

How Columns Stack On desktop, content in multi-column rows appears side by side. On mobile, these columns automatically stack vertically to fit smaller screens. You'll see this happen when you switch to mobile view.

Mobile-Specific Adjustments Some settings in the sidebar show a mobile icon. These let you make changes that only apply to the mobile version of your template - like using a smaller font size on phones while keeping larger text on desktop.

Saving Your Work

Manual Save Click the Save button in the top toolbar when you're ready to save your template. You can save at any time - you don't need to finish the entire design first.

What Gets Saved When you save, the system stores both your editable template and the final HTML code that will be used when you send emails or publish landing pages. This means you can always come back and make changes later.

Previewing and Testing

Preview Mode Click the Preview button to see exactly how your template will look when sent or published. Preview mode shows your template without the editing tools and highlights, giving you a clean view of the final result.

Device Preview In preview mode, you can toggle between desktop, tablet, and mobile views to see how your template adapts to different screen sizes. This helps you catch layout issues before you send.

Test Sends For email templates, send a test to your own email address before sending to your contact list. This lets you see exactly how the email renders in real email clients and gives you a chance to catch any mistakes.

Understanding Content vs. Structure

One of the most important concepts in the editor is knowing when you're editing content versus when you're editing structure:

Editing Content When you click on text, an image, or a button, you're selecting that specific content block. The sidebar shows options for that content - like text color, image size, or button style.

Editing Structure When you click in the empty space of a row (not on content), you're selecting the row itself. The sidebar shows structural options - like background color, column layout, and spacing.

Visual Clue The editor shows you what's selected with a blue outline. A thin blue outline around a specific element means you're editing content. A thicker blue outline around a larger area means you're editing a row.

Common Editing Tasks

Changing Colors Click the element you want to change, then look in the sidebar for color options. You'll see color pickers that let you choose from your brand colors or enter custom color codes.

Adjusting Spacing Spacing controls are called "padding" in the editor. You can add padding to individual content blocks or to entire rows. More padding creates more white space around your content.

Adding Links Select the content you want to link (text, images, or buttons), then look in the sidebar for the link or action section. You can link to web pages, email addresses, or phone numbers.

Aligning Content Most content blocks have alignment options in the sidebar. You can align text, images, and buttons to the left, center, or right within their column.

Best Practices for Template Design

Start with Structure Add all your rows first to create the basic layout, then go back and fill in content. This approach is faster than trying to do everything at once.

Use Consistent Spacing Apply the same padding to similar elements throughout your template. Consistent spacing makes your design look more professional.

Check Mobile View Often Don't wait until you're finished to check mobile view. Preview on mobile as you build each section to catch issues early.

Keep It Simple Templates with clear layouts and plenty of white space are easier to read and get better results than cluttered designs. When in doubt, remove elements rather than adding more.

Test Before Sending Always preview and send test emails before launching to your full contact list. It's much easier to fix mistakes before they go out.

Questions and Answers

Q: Can I undo changes if I make a mistake?

A: Yes! Click the undo button in the top toolbar or use the keyboard shortcut (Ctrl+Z on Windows, Cmd+Z on Mac). You can undo multiple steps backward through your recent changes.

Q: How do I know if my template will look good on mobile devices?

A: Use the mobile view toggle in the top toolbar to preview your design on a phone screen. The system automatically makes your template mobile-responsive, but you should always preview to confirm everything looks right.

Q: Can I use my own images in templates?

A: Yes! When you drag an image content block into your template, you can upload images from your computer, browse images you've uploaded previously, or use stock photos. Images are stored in your account's file manager.

Q: What's the difference between rows and columns?

A: Rows are horizontal sections that span the full width of your template. Columns are vertical divisions within rows that let you place content side-by-side (like an image next to text). You add rows to create sections, then the columns within those rows hold your actual content.

Q: Why does my content look different in preview mode than in the editor?

A: The editor shows extra outlines and controls that help you build your template - these don't appear in the final version. Preview mode shows you exactly what your contacts will see, without the editing interface.

Q: Can I copy sections from one template to another?

A: Yes, but you'll need to use the copy and paste approach within templates. Select a row or content block, click the duplicate icon to copy it, then you can move it to a different section. To reuse designs across multiple templates, save your template and use it as a starting point for new ones.

Q: How many columns can I have in a row?

A: You can have up to six columns in a single row. However, simpler layouts (one to three columns) usually work better and are easier to read on mobile devices.

Q: What if I want to change the overall width of my template?

A: Click in an empty area of your canvas to deselect everything, then look in the sidebar for Settings. You'll find content area width controls that let you adjust how wide your template appears. Most email templates work best at 500-600 pixels wide.

Q: Can I edit a template after I've saved it?

A: Absolutely! Saved templates remain fully editable. Just open the template again and make your changes, then save. If you've already used a template to send emails, editing the template won't affect emails that were already sent - only future sends will use the updated version.

Q: How do I make sure my brand colors are available in the editor?

A: The editor remembers colors you've used recently and displays them in color pickers for quick access. For consistent branding, write down your brand's color codes (hex codes like #FF0000) and enter them manually when needed.

Q: What should I do if a content block isn't appearing where I want it?

A: Make sure you're dragging the content into a column within a row, not just onto the canvas. If you're trying to place content side-by-side, verify you're using a multi-column row layout. You can also check that you've selected the correct column - click directly in the column where you want the content to appear.

Guide Type: Reference Guide

Estimated Time: 12 minutes

_{Video Transcript}

There are lots of great looking email templates built right into the system.

These templates are responsive in design; meaning they will look great when viewed on a desktop and also look great when viewed on a mobile device.

Here’s how to design your own email templates.

Go to settings, then email templates.

These are the email templates you have already created.

If you want to use one of your existing templates, a smart way to go is to first copy your template.. then make your edits and changes on the copy.

That way, you will still have your original template unaltered.

Let’s take one of our existing templates and make a few changes.

I’ll make my changes and then save it as a new template.

Now I can use this template for Email Blasts, I can add it to a Workflow, or I can add it to one of my Autoresponder Campaigns.

In that example, we started with a template I had already built.

Let’s do that again, but this time, we’ll start from scratch.

From this screen, instead of selecting a template we have already created, we’ll select ‘add email template’.

Here are some great samples of emails already formatted.

Browse through these samples and find the one you want to use as your starting point.

Let’s use this one, and we’ll make some changes.

In the Content Designer you will see the template on the left and the content design elements on the right, under these 3 tabs.

From here I can make changes to this template… like this.

When you have the template just the way you want it, you should preview it to see what it’s going to look like on both desktops and mobile devices.

Then make sure all of your changes have been saved, and click here.

This screen will allow you to change the name of the template, add your subject line, add your intelligent links and more.