Template editor

Template editor

The most important element for a successful email campaign is quality content. When the right content meets responsive designs, you can make sure that your email campaign is a huge success. Whether you're an expert or a beginner, Zoho Campaigns makes things simple with an easy-to-use drag-and-drop template editor that allows you to design beautiful campaigns.

In this guide, we’re going to discuss how to use the various design elements to create an engaging email campaign. 

Template selection

  1. From the Navigation toolbar, choose  Campaigns  and select  Regular Campaigns .
  2. Click  Create Campaign  in the top-right corner of the screen.
  3. Enter the basic details of your email campaign in the Basic Info page.
  4. Click  Next  in the bottom-right section of the page.
  5. In the content page, select a template one from the three categories provided. 
    1. My templates - This category displays the templates that you have saved in the library for future use. This comes in handy when you have a few templates that you use frequently. All you need to do is pick the template, add content, and send it.
    2. Pre-designed Templates - This category consists of ready-to-use templates to send quick emails. Choose from a wide variety of templates which suit situations ranging from business needs to season greetings. There's also an option to toggle to a Mobile Only view, where it displays only the templates that are well-optimized for mobile phones.
    3. Basic Templates - This category features simple templates which combine blank layouts with our drag and drop components. Simply pick one of these layouts, add your text and images, and send your campaigns.
Apart from these three categories, Zoho Campaigns provides other options to create an email template. You can choose :
  1. HTML Editor - Use your own HTML code.
  2. Text Editor - Add the basic text.
  3. Import/Upload - Import a file from a cloud or upload a file from your computer.
  4. Recently Sent -View a list of recently sent campaigns, from which you can choose one, edit the content, and send it.
add-email-content

Components

The various template editor components are shown below: 


Text  

Add textual content in your campaign with this component. Click the Text component and select the text option you need for your template.

Drag-and- drop the particular component to the canvas of the template wherever you want the text to appear, then start typing within the dotted lines. You can also edit the text under Text Properties on the left.
text properties

Image 

Use this component to add images to your campaign. Choose from three different levels of customization options, depending on what best suits the template.

To add an image: 
  1. Drag-and-drop the component at the desired location.
  2. Click on the image area.
  3. Select Change on the left under Image Properties. Choose your desired image.
  4. Under Image properties on the left, you can choose the image size, add a link for your image, choose to open the link in a new window or same window, select a background color and border style.  
    image properties
Now you can add your image in three ways:
  1. Select an image from My Files
  2. Upload from computer or web URL
  3. Download an image from Unsplash
    select image
My Files 
  1. Select an image available in My Files.
  2. Enter the Title and alternative text.
  3. Click  Insert Image.
Upload From Computer
  1. Click Upload and choose to add image from your computer.
  2. Search and select the image you want.
  3. Enter the Title and alternative text.
  4. Click  Insert Image.
Upload From Web
  1. Click Upload and choose to add image from the web.
  2. Search and select the image you want.
  3. Enter the Image URL.
  4. Enter the Title and alternative text.
  5. Click  Insert Image. 
Download an image from Unsplash
  1. Click Unsplash tab from the image selection dialogue box.
  2. Search and select an image you want to use.
  3. The images author and image ID will be displayed
  4. Enter the Title and alternative text.
  5. Accept the terms of use and privacy policy.
  6. Click Insert Image.
Note : Always provide a public URL while selecting the web URL option. 
To edit an image
  1. Click on the image you want to edit.
  2. Click the Edit option under Image Properties on the left or select the image and click on the Edit icon on the top left.
  3. The image editor opens up. 
  4. Crop, Add and customize text, Add new image to the existing image, Add another image, Add a button to the image, Change image and Customize the canvas.
  5. Click Preview to view how your image looks in the email template.
  6. Click Save and Close. 

To learn more about image editor, click here .

Spacer 

The Spacer component is used to add a blank space between two components. Using this component you can fine tune your template to look exactly the way you require. There are three different height options: 10, 15, and 20 pixels. Drag-and-drop the spacer at the desired location and adjust it accordingly using the Resize icon.  Change the background color and border style under Spacer Properties.

Image and text 

Add images and text in the same section of the template with this component. You can choose from four different layouts and drag-and-drop the chosen layout at the desired location.

Button  

Using this component you can create a call-to-action button that redirects a recipient to a webpage or a landing page. The button component provides three options to choose from, each with a different border radius.  Once you drag-and-drop the component, the Button Properties pop-up will show up. 
Button
Text
  1. Specify the Button Name .
  2. Choose to configure to Web, Email Address, Anchor or phone.
  3. To configure a button for the Web :
    • Enter the web URL 
    • Choose to open the URL in a new window or the same window.
  4. To configure a button to an email address:
    • Enter the email address
    • Enter the subject
  5. To configure a button to an anchor:
    • Select an anchor
    • Choose to open the URL in a new window or the same window
  6. To configure a button to a phone:
    • Enter the phone number
  7. Click  Save . 
    Button
Design
  1. Enter the button name. 
  2. Choose a text color and button color.
  3. Select the button alignment and enter the height and width of the button measured in pixels.
  4. Choose a button shape, border radius and the button's border style.
  5. Choose a background color and border style for the template.
  6. Enter the padding for the top, bottom, right and left of the button.
  7. Click Save .
    Button Properties

Columns  

This component can be used to choose a column-oriented layout for your template. There are five different design options. Drag-and-drop the component to the desired spot and insert the required image and text onto the template.   

Dos and don’ts  

  1. Always select Custom or Fit while adding images in multiple columns.
  2. Never use more than two rows in a column. It may collapse while viewing the mail in Outlook.
  3. Avoid using direct web URLs in multiple column layouts.
  4. Always add text or a button with a hyperlink to the required URL.  
Note : You can resize the width for the columns by choosing the width ratio from the customize toolbar. 

Table

Make use of this component to add tables to your template. It provides three options to choose from - a 3x3 table , a 6x6 table and a customizable table. 
Table  
To make a table, drag and drop the component onto the template and enter your data. In the case of a customizable table, you can specify the table details according to your requirements. You can also change properties such as the width size (percent or pixels), alignment, and header details. 
Set table properties

Divider

Use a divider to section off content within the template to avoid distraction and to make your template more attractive. Choose a style for your divider and drag and drop the component to an appropriate place on your template.
Divider
Under the Divider Properties, choose the divider's alignment, background color, border style, border color, width and padding at the top and bottom.
Divider properties

Boxed Text

Add boxed text to your template to highlight important aspects of your email to your contacts. Drag and drop the component to a desired area of your template. Under Boxed Text Properties, change the line spacing, create an anchor, choose a background color, border style and adjust the paddings for the boxed text.
Boxed properties
Click Edit to set the box properties.
Set box properties

Insert HTML

You can also insert an HTML code to your email template. Drag and drop the component to a desired area of the template. Enter the code and click Apply . 

Widgets

This component allows you to add widgets to your newsletter. You can choose between square and circular widgets. To add widgets to your newsletter:
  1. Drag-and-drop the component at the desired location.
  2. Select the Page URL and Link Text .
    Add widgets
  3. Click  Next .
  4. Customize the widgets according to your requirement.
    Social widgets
  5. Click  Finish .    

Dynamic Content

This component allows you to add a component that helps you to display the relevant content to your subscriber, when they match a particular criteria that you have set previously. Using dynamic content, you can send tailored emails to your subscribers. It allows you to send personalized content to each subscriber based on a specific field value. You can send unique content to each of your subscribers by drafting just one email, based on the data you have collected about them. 
Dynamic types
To add dynamic content to you newsletter:
  1. Drag-and-drop the component at the desired location.
  2. Select a merge tag from the dropdown menu and give a dynamic data to each box.
  3. Click  Done . 
    Dynamic conditions

Attachments 

Attach a file to your newsletter in the form of downloadable links, using the attachment component. You can place the link on an image, a section of text, or a button.

To attach a file:
  1. Select the  Attachment component
  2. Drag-and-drop the object that you want to place the downloadable link on.
  3. Select an attachment from your files or if you want you can upload attachment from your computer or from the cloud. 
    Select attachment
  4. Choose the required file and click  Proceed .
  5. Specify the attachment name and set the expiration date, time and time zone for the attachment.
    Attachment name
  6. Click Apply .  
Note : You can always change the expiration date at a later time. 

Create poll

This component allows you to create and conduct a poll in your newsletter. Polling is useful to engage your subscribers in the campaigns you send out. Here is the different type of polls that you can include in a campaign: 
  1. Rating-based Poll  : Ask a question and let your contacts answer in the form of ratings. 
  2. Response-based Poll  : Let your contacts select the responses you have set for the question in the poll. 
  3. Reaction-based Poll  : You can include reactions to discover what's on the mind of your subscribers. 
Create Poll
To create a rating-based poll:
  1. Drag-and-drop the basic poll component at the desired location.
  2. Enter a question for your contacts to rate.
  3. Select a number of ratings your contacts can give.
  4. Choose the rating type to be in either bullets or numbers.
  5. Specify the answers for each rating.
  6. Click Next .
    rating based poll
  7. Enter a response for contacts who have completed or submitted the poll and if the poll has expired.
  8. If you want the current participant to view other participants' responses, select Yes, otherwise select No.
  9. Set the expiration date of the poll.
  10. Click  Finish.
    poll expire date

To create a response-based poll: 

  1. Drag-and-drop the component at the desired location. 
  2. Enter a question for your contacts to rate. 
  3. Select a number of ratings your contacts can give.
  4. Specify the Negative and Positive responses for the rating.
  5. Click Next .
    response based poll
  6. Enter the responses your contacts will choose in this poll and click Next .
    response based poll
  7. Enter a response for contacts who have completed or submitted the poll and if the poll has expired.
  8. If you want the current participant to view other participants' responses, select Yes, otherwise select No. 
  9. Set the expiration date of the poll. 
  10. Click  Finish .
    poll expire date
To create a reaction-based poll:
  1. Drag-and-drop the component at the desired location. 
  2. Enter a question for your contacts to rate. 
  3. Select the reactions you want your contacts to choose in this poll.
  4. Click Next .
    reaction based poll
  5. Choose the emoji's alignment on the template, choose to display both text and icon or only icon, choose the emoji size and click Next .
    reaction based poll
  6. Enter a response for contacts who have completed or submitted the poll and if the poll has expired.
  7. If you want the current participant to view other participants' responses, select Yes, otherwise select No. 
  8. Set the expiration date of the poll. 
  9. Click   Finish .
    poll expire date
     

Video

With this component you can link your favorite videos from YouTube, Vimeo and Wistia in your email campaigns.
To add new videos to your newsletter:
  1. Drag-and-drop the component at the desired location.
  2. You can choose to add a new video or an existing video merge tag.
    1. If you want to add a new video:
      1. Choose New.
      2. Enter a name for the video.
      3. Choose the source of the video i.e either from Youtube, Vimeo or Wistia.
      4. Enter a valid video URL.
    2. If you want to add an existing video merge tag:
      1. Choose Existing.
      2. Select an existing video tag from the dropdown.
  3. Click  Change Play Button  to customize the play button shown in your video.

  4. Click  Save .

ICS

It's a file format that allows users to store and exchange calendar and schedule information such as events, to-dos, and much more.

To add an ICS component in your content:

  • Select the advanced components in the template editor.
  • Select the ICS component.
  • Choose the component type, either as a widget or as a button that you want to have in your content.
    ICS
  • Enter the details of the event that you want to promote. 
    ICS properties
  • Enter the duration of the event i.e the time of start and end. 
  • Select the time zone based on which the event is scheduled to be held.
  • Click Save .

Design

Customize your email template's layout. Choose an inner color, outer theme, outer color, outer border color, outer border size and specify the template's width.

Toolbar 


  1. Font - Changes the font style of the selected text.
  2. Font Size - Changes the point size of the selected text.
  3. Bold - Makes the selected text bold. 
  4. Italic - Makes the selected text italic. 
  5. Underline  - Underlines the selected text 
  6. Font Color   - Change the color of the selected text.  
  7. Alignment   - Aligns the selected content to the left, to the center, to the right, or justifies it.  
  8. Merge Tags   - Displays a set of predefined Merge Tags. Merge Tags are smart tags that pull data directly from your mailing list into your template. Use these tags to personalize your content.  
  9. Create Link   - Turn a piece of text into a link. 
  10. Remove Link - Remove a link from the text.
  11. Bulleted List   - Displays the selected text in the form of a bulleted list. 
  12. Ordered List   - Displays the selected text in the form of a numbered list. 
  13. Indent/Outdent   - Positions the selected text closer or farther away from the margin by increasing/decreasing the horizontal space. 
  14. Insert Image - Insert an image to the template.
  15. Horizontal Line - Add a line or divider between content in your template.
  16. Special Characters - Add special characters to your content in the template.
  17. Insert HTML - Insert HTML code to the content in your template.
  18. Font Background  - Highlight the selected text with a color of your choice.  
  19. Strikethrough   - Crosses out the selected text.  
  20. Move - Move a component to your desired location.
  21. Settings
    Bookmark - Mark a component as Favorite for future use.
    Clone - Clone a particular component. 
    Delete - Delete that particular component. 
    Move Up/Down - Move up or down through various components in your email template
Select the text to which you want to create a link. Choose the type of link you want to add:
  1. URL
  2. Email
  3. Anchor
  4. Phone
URL
  1. Enter the web URL.
  2. Select the target window.
  3. Specify the link title.
  4. Click  Save .
Email
  1. Enter the email address.
  2. Enter the Subject.
  3. Specify the link title.
  4. Click  Save . 
Phone
  1. Enter the phone number.
  2. Specify the link title.
  3. Click Save. 
Anchor
  1. Select the required anchor from the drop down. (Note: You should have previously anchored the required text) 
  2. Select the target window. 
  3. Specify the link title. 
  4. Click Save. 
To create an anchor:
  1. Select the text or just place the cursor at the required spot.
  2. Click Create Anchor icon in the top ribbon. 
  3. Specify the anchor name.
  4. Click  Save .
    1. Insert Image  - This lets you insert an image within another component.
    2. Horizontal Line  - This adds a horizontal line at the location of your preference. It acts as a divider between two sections of same component.
    3. Special Characters  - This allows you to add special symbols that are not available in the keyboard.
    4. Insert HTML  - This allows you to write your own code to add elements that are not available in our template editor.
    5. Background Color  - This lets you change the background color of that particular component.
    6. Border Properties  - This allows you to add borders to the particular component. You can also specify the style, color and size of these borders.
    7. Table Properties  - This allows you to customize the number of rows, columns, width, alignment and borders of a table.
    8. Column Layout  - This lets you select a column layout for your template. You can choose a 2-column or 3-column layout, depending on your requirement.
    9. 50:50  - This lets you choose the proportion in which you want the columns or images to be displayed. You can choose 50:50, 70:30, 30:70, 60:40, or 40:60 based on your needs.
    10. Image Size  - This helps you resize an image according to your preference. You can choose from options like Banner, Fit, Small, Medium, Original.

Version History

To the top right corner of the template editor, you will find a timestamp icon. This is the Version History. Clicking on it will display the previous versions of your template. Information about each update and edit details are recorded here. Using this feature, you can restore your template to its previous version, if necessary.
To view the different versions of your template: 
  1. Click  Version History  from top of the template editor.
    Version history
  2. All the changes made in the template will be listed down in the left side of the page. You can also see the timestamp of the respective modification.
    Select version
  3. Select a version from the list.
  4. Click  Use this version  at the top-right corner to use that particular version of the template.
Additionally there's UNDO and REDO options available in Template Editor. If you want to change or update your recent edit, you can UNDO those edits. If you have undone some edits but after consideration you feel those edits were appropriate, you can REDO those edits. You can use these options multiple times before saving your template.
undo redo icons

Notes :
  1. When you click  Save and Close , the changes that you have made in your template will be saved as one version. 
  2. When you click  Save , the date and time of that particular edit will be recorded in that version.     

    • Related Articles

    • Image Editor

      Image Editor is an additional feature added to template editor that lets you customize images in your email templates. With Image editor you can change an image or edit an existing image to suit your exact needs while sending email campaigns to your ...

    • Template editor - Troubleshooting Guide

      Designing how the campaign looks is the one of the most important part of email marketing. The Template Editor tool plays a key role in designing effective campaigns. This guide will provide you with an idea of how issues can be solved, as well as ...

    • Create an email campaign

      Email marketing is considered the simple and most effective method to reach out your leads and contacts. The best part is that the return on investment (ROI) is much higher than other marketing channels making it as the most affordable way of ...

    • What can we do to make the campaign content creation process easier?

      When you use the same campaign content repeatedly, you can just save it in the library for future use. This will save you a lot of time because you don't have to keep cloning the campaign every single time.  To save your content to the library:   ...

    • Can I add attachments in my emails?

      You cannot add attachments to your campaign emails. This is to maximize deliverability, as emails with attachments are likely to be marked as spam. As an alternative, Zoho Campaigns allows you to attach a file to your campaigns in the form of ...