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 Engagement and select Email campaigns.
   
2. Click Create new in the top-right corner and select Regular campaign.
   
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, there are 3 categories of templates. Select one from the three categories.
   

The template you select will be the foundation of your email campaign. We have split our templates into three different categories:

• 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.
  
  
• 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.
  
  
• 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 MarketingHub also gives you other options, such as:

• HTML Editor - Use your own HTML code.
  
• Text Editor - Add the basic text.
  
• Import/Upload - Import a file from a cloud or upload a file from your computer.
  
• Recently Sent - View a list of recently sent campaigns, from which you can choose one, edit the content, and send it. 
  

Components

The template editor components can be classified into two broad categories:

• Basic
  
• Advanced
  

Basic components

• Text - Add textual content in your campaign with this component. Clicking the Text component will provide you with three options:
  

1. Heading
   
2. Subheading
   
3. Paragraph
   

You can choose any of these options that best suits your needs. All you need to do is drag-and- drop the particular component wherever you want the text to appear, then start typing within the dotted lines.

• 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 from the menu.
   

Now you can add your image in two ways:

1. Select an image from library or upload from your computer.
   
2. Enter the alternative text and click Save.
   

Image URL

1. Enter the Image URL 
   
2. Enter the alternative text and click Save
   

Note:

• Always provide a public URL while selecting the web URL option.
  

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

Note:

• You can also customize and change the background color of the spacer.
  

• 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 choosen layout at the desired location.
  

Note:

• Use the alignment from the customize toolbar to align the image to the left or right side of the component.
  

• 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. It has four tabs with different options, one of which can be used for the button.

URL

1. Specify the Button Name.
   
2. Enter the web URL.
   
3. Optionally, select a personalization option from the dropdown to track website visits.
   
4. Select the target window.
   
5. Click Save.
   

Email

1. Specify the Button Name.
   
2. Enter the email address.
   
3. Enter the Subject.
   
4. Click Save.
   

Anchor

1. Specify the Button Name.
   
2. Select the required anchor from the drop down. The required text must be anchored to complete this step.
   
3. Select the target window.
   
4. Click Save.   
   

Phone

1. Specify the Button Name.
   
2. Enter the Phone number.
   
3. Click Save.
   

• Columns - This component can be used to choose a column-oriented layout for your template. There are five different design options. All you've need do is to drag-and-drop the component at the desired spot and insert the required image and text.
  

Dos and don’ts

• Always select Custom or Fit while adding images in multiple columns.
  
• Never use more than two rows in a column. It may collapse while viewing the mail in Outlook.
  
• Avoid using direct web URLs in multiple column layouts.
  
• 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.
  

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.

Note:

• Tables are not responsive while viewing the email template.
  

• Background - This component allows you to choose a background color for your template from a wide palette of colors. You can choose an inner color and an outer color or an outer theme for your template. 
  

Advanced components

• 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. Enter the Page URL and Link Text.
   
3. Click Next.
   
4. Customize the widgets according to your requirement.
   
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 leads. 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 leads by drafting just one email, based on the data you have colleted about them.

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.
   

• 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. Click Add Document.

4. Select From Computer, if you want to upload the file from your computer or From Cloud, if you want to import it from cloud.

5. Choose the required file and click Proceed.

6. Specify the attachment name and set the expiration date of the attachment.

7. Click Done.

This component allows you to create and conduct a poll in your newsletter. It also provides two poll customization options wherein, you can choose between a numbered list and a bulleted list.

1. Drag-and-drop the component at the desired location.
   
2. Specify the poll details and click Next.
   
3. Optionally, you can edit the default response messages.
   
4. If you want the current participant to view the other participants' responses select Yes, otherwise select No.
   
5. Set the expiration date of the poll.
   
6. Click Finish.
   

• Poll Properties
  

You can create and add a poll to your campaign. Polling is useful to engage your leads in the campaigns you send out.

Here is the different type of polls that you can include in a campaign:

1. Basic:Ask a question and provide options for the leads to answer.
   
2. Rating:Let the leads answer in the form of rating.
   
3. Reactions:You can include reactions to discover what's on the mind of your leads.
   

• Video
  

With this component you can link your favorite videos from YouTube and Vimeo in your email campaigns.

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.
   
   • 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 Youtube or Vimeo.
        
     4. Enter a valid video URL.
        
   • 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.
   

Toolbar

• Font - Changes the font style of the selected text.
  
• Font Size - Changes the point size of the selected text.
  
• Bold - Makes the selected text bold. 
  
• Italic - Makes the selected text italic. 
  
• Underline - Underlines the selected text 
  
• Strikethrough - Crosses out the selected text. 
  
• Font Color - Change the color of the selected text. 
  
• Font Background - Highlight the selected text with a color of your choice.  
  
• Align - Aligns the selected content to the left, to the center, to the right, or justifies it. 
  
• 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. 
  
• Bulleted List - Displays the selected text in the form of a bulleted list.
  
• Ordered List - Displays the selected text in the form of a numbered list.
  
• Indent/Outdent - Positions the selected text closer or farther away from the margin by increasing/decreasing the horizontal space.
  
• Create Link - Turn a piece of text into a link.
  

To create a link, select the required text and click the Create Link icon on the top ribbon. The Link pop-up will appear featuring four tabs with different options, one of which can be used for the link:

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.
   

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.
   

Phone

1. Enter the phone number.
   
2. Specify the link title.
   
3. Click Save.
   

• Unlink - This reverts the link into normal text. All you've got to do is select the link and click Unlink icon.
  
• Create Anchor - This allows you to bring the user to a different section of the same page. It's more like creating a URL within the same page.
  

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.
   

• Insert Image - This lets you insert an image within another component.
  
• Horizontal Line - This adds a horizontal line at the location of your preference. It acts as a divider between two sections of same component.
  
• Special Characters - This allows you to add special symbols that are not available in the keyboard.
  
• Insert HTML - This allows you to write your own code to add elements that are not available in our template editor.
  
• Background Color - This lets you change the background color of that particular component.
  
• Border Properties - This allows you to add borders to the particular component. You can also specify the style, color and size of these borders.
  
• Table Properties - This allows you to customize the number of rows, columns, width, alignment and borders of a table.
  
• 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.
  
• 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.
  
• 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.
   

   
   

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.
   

   
   

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.
   

   
   

Note:

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

Component Customization Tools

When you click on a particular component in your template, you can see a small toolbar. This consists of a set of tools that can be used to customize that component.

• Move - This tool allows you to move the component to your desired location.
  

1. Insert Image - This tool allows you to insert
   
2. Clone - This tool allows you to clone the component.
   
3. Swap - This tool allows you to swap two elements of the component.
   
4. Move Up - This tool allows you to move the component one component above.
   

• Move Down - This tool allows you to move the component one component below.
  
• Delete - This tools allows you to delete that particular component.