The editor (Marketing > Campaigns > Email/Text Message > Add Scheduled Campaign or Add Always on Campaign > Communication Channel > Email Message > Create the Content) allows you to easily access, design, manage, and save templates. You can also export external HTML code templates and make edits in Zenoti.
Some of the actions you can perform are:
- Upload an image from a URL from your local device or using the image’s external URL
- Export or import templates
- Drag and drop layout editor
- Use CSS/HTML editor
- Choose full-screen edit mode
- Toggle images
Using the Editor Options
Step 1: Select a template layout. To know more about the templates, read: Email Campaign: Select a Template.
You can choose one of the following:
- Basic Layout: Build your campaign using the default templates, Basic Template or Demo Template, that consist of basic elements and sections that you can customize to insert components such as sections, images, links, text, and buttons. Hint: Demo Template helps you understand how different elements and components appear in your template if you are creating a campaign using the email editor.
- Themed Template: Use one of the pre-configured themes such as Encourage a Visit, Thank you, Product Refill, Service Discount, Members specific, and Occasion to customize your campaign.
- Custom Template: Build your own campaign template using the Campaign Editor.
Note: After you create the template, click Save as Custom Template. The template is saved and will be available to you when you access Custom Templates tab in the campaign.
Step 2: Select one of the options on the left side of the top bar to design a template for your device:
- Design an email template for your desktop
- Design an email template for your iPad
- Design an email template for your mobile device
Note: Based on your device selection the orientation of the template changes.
Step 3: Choose the options from the editor to design your template:
4. View Components: Allows you to view the template with or without the cell
border for all of the elements. By default, each cell border appears.
When you click this option, all of the cell borders, except the one you have
selected, are hidden allowing you to conveniently edit one cell at a time. Click
again to see the cell borders for all of the elements.
5. Full Screen: Expand into full-screen edit mode. This allows you better visibility
6. View and Import Code: When you select this option, the Export template window
appears. You can view your template in HTML format. You can do one of the
following using this option:
- Export Template: To export the template, copy the HTML code which appears in the Export template window and paste to any desired location.
- Import Template: To import the template which you have created (outside of Zenoti) into Zenoti, copy and paste your HTML code into the Export template window and then click Import.
The HTML code is imported to Zenoti. To know more read: Import HTML using the editor.
7. Toggle Images: Click to toggle images in your template. This allows you to turn
on or off the images within the template.
8. Undo: Undo an action you have performed.
9. Redo: Redo an action you have performed.
10. Delete: Delete any element in the template.
11. Style Editor: Click to open the following style editor options:
- Classes: Shows to which class your cell belongs to. This is helpful especially if you are editing in HTML or CSS.
- Dimension: Click to expand. You can edit the Height, Width, Margin, and Padding. You can make the necessary changes to the selected elements as required.
- Typography: Click to expand. You can make modifications to the Font and the Text within the cell. You can change the font color, size, or style, align text, shadow the text, or modify spacing.
- Decorations: Click to expand. You can make changes to the background as required.
Hint: To undo or redo an action, use the Undo or Redo buttons from the top bar.
12. Component Settings: Click to add ID and title for each cell element. This allows
you to perform control, navigation, and selection of the layout.
13. Component Map: View the number and position of each component of your
template. You can locate your cell in the Component Map and make changes to
For example, your cell has 1 link, 1 table, and 1 row, in a sequence. Now you want
to add another text cell to it. You can either drag and drop the Text option (from
the right bar) into your cell and this new addition appears in the Component
You can also make changes like hiding using the Hide option that appears on the
left side of the component. To move the component, select the Move option on
the right side.
12. Layout Editor: Click to view or hide the options on the right bar.
Note: When you open the email content editor, the options on the right bar
appear by default.
You can drag and drop these options to each cell. The options allow you to
create template elements such as, Sections, Buttons, Dividers, Text, Images, and Links.
Some Examples on How to Use the Options in the Right Bar
To insert an image:
- Drag and drop the Image option to the appropriate cell location within the template.
- Select the image location from your local device (stored in your system) or enter the URL path for the image in the Select image window that appears.
Note: The URL can be of an image hosted on your site or of the one that you have uploaded in Zenoti Image Gallery
- Click Add image to add the image to the selection.
- Double-click the image to add it to your template.
To insert a link to your image:
1. Drag and drop the Link Block to the required cell.
2. Drag and drop the Image option exactly inside the block within the Link Block.
3. Select the image location from your local device (stored in your system) or enter
the image URL in the Select image window and double click to insert
4. Select the upward arrow icon for the image to select the parent cell.
5. Click the Class Editor icon to open the Component Settings option.
6. Enter the link in the Href field to insert the link for the image.
The link is inserted for the image.
Step 4: Click the cell to make inline changes such as, select the parent cell (to apply any changes to the entire cell), move the cell to a location with the template, duplicate the contents of the cell, or delete the cell, using the respective icons that appear in the top right corner.
Hint: Use any of the available macros to customize your email/text campaign.
You can also include the custom macros in your content. To configure custom macros for your center, navigate to Admin > Centers > Settings > General. You can use custom macros as links to your location, website, or any other information you would like to add to the email content.
Step 5: (Optional) Click Save as Custom Template to save changes and add your template to the Custom Template. You can modify this saved template at a later time.
Step 6: After you are done with the edits, proceed to the final step in creating the
Email campaign: Save and Finish. You can choose the Save and Close option to save the campaign as a draft or use the Send Now option to send out the campaign.
Important: You must save the changes before you close or navigate to another window to avoid losing the changes done for your campaign.