Advanced Template Editor
If you’re using the ZetaHub for your email campaigns, you have access to the Advanced Template Editor, a very powerful tool that simplifies email creation. You can create and edit both static and dynamic content without any prior HTML or CSS experience.
To create a new template and start editing, follow these steps:
- Log in to your ZetaHub account at boomtrain.net. Once logged in, click ‘Campaigns’ in the left menu.
- In the top right corner, click ‘Compose Message’ to create a new Campaign.
- You can choose to create a Triggered or Broadcast campaign. There’s no difference in the templates, but for our purposes, we’ll select Broadcast.
- You’re now in the ZetaHub campaign editor page. Choose the Email channel, name your campaign, and select your audience. If you have HTML code ready to go, you can paste it in the basic template editor and continue with your campaign creation. Since we want to create a new template using the Advanced Editor, click ‘Templates’.
- Here, you’ll see options to create a template from scratch or choose a pre-made template to customize. The newsletter will give you an idea of the kind of structure you can create in the editor, but you can also make the same layouts starting from scratch. Once you choose the layout, you can name your template, add the pre-header text, and get started!
- If you’ve used the advanced editor to create a template previously, the saved version will be available here to continue editing. Just click the far-left icon to Edit. You can also Preview, Push to Campaign, Rename, Duplicate, or Delete your template.
Drag ‘N Drop
Now that we’re in the editor, let’s go over the sections.
- Body: This is where your email will be built. Drag content blocks here, make adjustments, then customize them in the menu. You can adjust the width of your email body, but more on that later.
- Contextual Menu: This is the menu that you’ll be using to create your template. You can drag-n-drop blocks from here and make adjustments to the block based on its type. The menu options will change based on what block you’re editing.
- Save: Do it early and often.
- Actions: You can Preview your email in desktop or mobile view.
- Push to Campaign: Sends your template the the campaign editor on BME. Remember to Save before you Push!
- Test in Litmus: We’ve partnered with Litmus to provide you realtime views of your email in dozens of layout windows to make sure your template is optimized for mobile, desktop, and browsers of all types.
- Return to Templates: Go back to the template menu.
Now, let’s start building! We’ll go through every item from the contextual menu and the steps needed to edit each block.
- First, click on the ‘Structure’ tab.
- You’ll have several options to choose from for each individual layout. If you want four images across, you can do that. If you need a small block on the left and large on the right, you can do that as well.
- Drag-n-drop the block that you want to use into the Body section. You’ll be able to confirm where the block will drop when you see a thick blue link appear above the correct section. Look for this empty block.
Now we can drag in content blocks to fill these structure. Click on the Content tab.
- Text: Drag the text block from the menu to the body and drop it in the empty structure.
- The structure will change to a text block that you can edit.
- Clicking on the text allows you to make several style changes. The arrow on the right provides even more options, including dynamic content creation (more on that later).
- The contextual menu also changes. You can make specific changes here that will only affect this block.
- Image: Drag the image block from the menu to the body and drop it in beneath the text block. You can choose to drop in a new structure block or place the image directly beneath the text in the same block. Depending on the layout of your content, either option may be needed.
- The structure block changes to show your new image options.
- Clicking the ‘Browse’ button allows you to choose an image you’ve uploaded, upload a new one, or search the web with ‘Import From’.
- ‘Import From’ allows you to search several social media sites or even your personal mail and storage accounts.
- Once you select your image, it is automatically uploaded in the image block.
- The contextual menu also changes to present image editing/uploading options.
- You can edit the image with several advanced tools and save a new version of your image.
- You can also turn the image into a link inside the contextual menu.
- The structure block changes to show your new image options.
- Button: Drag the button block from the menu to the body and drop it in beneath the image block.
- Clicking the button block will only allow you to make font changes. All other changes will take place in the contextual menu. You can change the button color as well as its border radius (how round or sharp the corners are).
- Divider: Drag the divider block from the menu to the body and drop it in beneath the Button block.
- There is no option to edit the divider in the body. All changes are made in the contextual menu.
- Social: Drag the social block from the menu to the body and drop it in beneath the Divider block.
- There is no option to edit the social icons in the body. All changes are made in the contextual menu. You can add, remove, or change the order of your icons.You can also change the design of the icons by clicking the icon collection menu.
Don’t forget to edit the social icons to point to the correct site!
- HTML: Drag the HTML block from the menu to the body and drop it in beneath the Social block.There is no option to edit the HTML block in the body. All changes are made in the contextual menu. You’re given a blank canvas to build your HTML from scratch. Exercise caution! This should be done by an expert who is very comfortable with HTML and CSS. Be sure to save often and preview your template to make sure it still looks good on desktop and mobile.
If you haven’t already, you can make adjustments to the body. Click the Body tab to see your options.
- You can adjust the width of your email. Standard practice for desktop view is between 600 and 640px.
- You can set the default background color for body and background.
- You can also set the default font and link color.