hat
Boomtrain University
BME Guide

Advanced Template Editor

If you’re using the Boomtrain Marketing Engine 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.

Getting Started

To create a new template and start editing, follow these steps:

  1. Log in to your BME account at boomtrain.net. Once logged in, click ‘Campaigns’ in the left menu.
    Screen Shot 2016-01-08 at 1.24.14 PM
  2. In the top right corner, click ‘Compose Message’ to create a new Campaign.
    Screen Shot 2016-01-08 at 1.01.40 PM
  3. 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.
    Screen Shot 2016-05-05 at 10.17.25 AM
  4. You’re now in the BME 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’.
    Screen Shot 2016-05-05 at 11.49.41 AM
  5. 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!
    Screen Shot 2016-01-08 at 1.02.40 PM
    Screen Shot 2016-05-05 at 11.56.20 AM
  6. 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.
    Screen Shot 2016-01-08 at 1.03.18 PM

 

Drag ‘N Drop

Now that we’re in the editor, let’s go over the sections.
Screen Shot 2016-05-05 at 12.00.51 PM

  1. 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.
  2. 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.
  3. Save: Do it early and often.
  4. Actions: You can Preview your email in desktop or mobile view.
  5. Push to Campaign: Sends your template the the campaign editor on BME. Remember to Save before you Push!
  6. 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.
  7. 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.

  1. First, click on the ‘Structure’ tab.Screen Shot 2016-01-08 at 1.20.54 PM
  2. 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.
    Screen Shot 2016-01-08 at 1.21.37 PM
  3. 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.
    Screen Shot 2016-01-08 at 2.11.31 PM

Now we can drag in content blocks to fill these structure. Click on the Content tab.
Screen Shot 2016-01-08 at 1.20.47 PM

  1. Text: Drag the text block from the menu to the body and drop it in the empty structure.
    Screen Shot 2016-01-08 at 1.19.33 PM
     

    • The structure will change to a text block that you can edit.
      Screen Shot 2016-01-08 at 1.12.08 PM
    • 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).
      Screen Shot 2016-01-08 at 1.13.18 PM
    • The contextual menu also changes. You can make specific changes here that will only affect this block.Screen Shot 2016-01-08 at 1.13.03 PM
  2. 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.
    Screen Shot 2016-01-08 at 1.19.42 PM
     

    • The structure block changes to show your new image options.
      Screen Shot 2016-01-08 at 1.12.23 PM

    • Clicking the ‘Browse’ button allows you to choose an image you’ve uploaded, upload a new one, or search the web with ‘Import From’.
      Screen Shot 2016-01-08 at 1.14.01 PM
    • ‘Import From’ allows you to search several social media sites or even your personal mail and storage accounts.
      Screen Shot 2016-01-08 at 1.14.40 PM
    • Once you select your image, it is automatically uploaded in the image block.
    • The contextual menu also changes to present image editing/uploading options.
      Screen Shot 2016-01-08 at 1.15.30 PM
    • You can edit the image with several advanced tools and save a new version of your image.
      Screen Shot 2016-01-08 at 2.31.23 PMScreen Shot 2016-01-08 at 2.31.38 PM
    • You can also turn the image into a link inside the contextual menu.
      Screen Shot 2016-01-08 at 1.15.44 PM
  3. Button: Drag the button block from the menu to the body and drop it in beneath the image block.
    Screen Shot 2016-01-08 at 1.19.57 PM
     

    • 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). Screen Shot 2016-01-08 at 1.18.26 PM
  4. Divider: Drag the divider block from the menu to the body and drop it in beneath the Button block.
    Screen Shot 2016-01-08 at 1.20.05 PM
     

    • There is no option to edit the divider in the body. All changes are made in the contextual menu.
      Screen Shot 2016-01-08 at 1.22.09 PM
  5. Social: Drag the social block from the menu to the body and drop it in beneath the Divider block.
    Screen Shot 2016-01-08 at 1.20.12 PM
     

    • 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.
      Screen Shot 2016-01-08 at 1.16.24 PM
    • You can also change the design of the icons by clicking the icon collection menu.
      Screen Shot 2016-01-08 at 1.16.41 PM
    • Don’t forget to edit the social icons to point to the correct site!
      Screen Shot 2016-01-08 at 1.17.42 PM
  6. HTMLDrag the HTML block from the menu to the body and drop it in beneath the Social block.
    Screen Shot 2016-05-05 at 12.26.15 PM
     

    • 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.
      Screen Shot 2016-05-05 at 12.42.56 PM

If you haven’t already, you can make adjustments to the body. Click the Body tab to see your options.
Screen Shot 2016-01-08 at 1.21.10 PM

  • 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.
    Screen Shot 2016-01-08 at 1.21.22 PM

 

Dynamic Content

Now that you’ve mastered the drag-n-drop editor using static content, it’s time to make your email dynamic! The Boomtrain Machine Learning Engine is in use here, recommending content for your users and adjusting what is shown based on their viewing habits.

Building an email with dynamic content is very similar to using the static blocks, but you’ll only be using text blocks for anything dynamic, including title text, description text, even images! Here’s how it works:

  1. Drag a text block into the section that you want to place dynamic content and click on the text.
  2. Do you remember the arrow that I mentioned earlier? Click it now and then click ‘Merge Tags’.
    Screen Shot 2016-01-08 at 3.14.33 PM
  3. Merge tags will auto create dynamic tags for you to place in your email template. These tags are based on model type, so you may have several tags that you don’t need (Site, Website, etc.). Click the appropriate tag and it will be dropped into your text box.
    Screen Shot 2016-01-08 at 3.14.50 PM
  4. Once you’ve placed the tags to your liking, you must make sure that the recommendation numbers all match for each dynamic section. In the example below, we see a thumbnail, title, and description all with rec_num 1. The next section should have rec_num 2, and so forth.
    Screen Shot 2016-01-08 at 3.12.31 PM

 

You’ve now successfully created an email template using the BME advanced editor! Be sure to save and test your template in Litmus. When you’re ready, click the ‘Push to Campaign’ button to send the template directly into your email campaign on BME. From here, you’ll be able to preview and test your email with real dynamic content before sending your campaign. Congratulations!

Shares
Share This