Template Builder is currently in beta. Some functions may not work exactly as expected.

What is the Template Builder

The Template Builder allows Dispatch users to build responsive email templates using drag-and-drop components with little to no HTML coding experience. Templates designed in the Template Builder can be used in all of your email communications inside of Dispatch.

Caveats

The template builder is limited in what it can do because of the constraints of trying to build a responsive email template that works well across a wide-range of email clients on diverse devices. For the best results, it is recommended to use a templating language like MJML or Foundation for Emails - Inky to develop your template and then compile it into responsive HTML. This bakes in all the quirks required to have your email display nicely in the widest range of email clients.

You cannot import an existing template and manipulate it using the template builder.

If you attempt to alter the HTML that is saved in the Code view of a template that has been built using the template builder, you will receive a warning that there is a mismatch between the compiled code of the template builder and the saved code. Instead, edit the code while inside of the template builder using the Edit Code function.

Testing

Regardless if you build your template by hand, with the Template Builder, or use a templating language, you need to test your template to make sure it works across devices and clients. Typically if you are targeting internal communications to Faculty and Staff, making sure your message looks good on Outlook for Windows is important. If you are targeting students, compatibility with mobile devices is far more relevant than Outlook for Windows.

You may send a request to Dispatch Support to have your template tested against a wide variety of email clients and devices.

Main parts

There are three main parts to the Template Builder:

Toolbar

The row of icons at the top that provide commands to the Template Builder.

Managers

The managers that offer configuration of styles, traits, layers, and blocks.

Canvas

The main area where your template and content are created and rendered.

Functions

The Toolbar contains buttons to invoke the major commands of the Template Builder.

Desktop View

Adjusts the canvas to display the template in a responsive mode for a typical desktop computer. 100% the width of the current Canvas.

Tablet View

Adjusts the canvas to display the template in a responsive mode for a typical tablet. Width is 768 pixels.

Phone View

Adjusts the canvas to display the template in a responsive mode for a typical phone. Width is 320 pixels.

View Components

Highlight the borders of the component blocks in the Canvas.

Fullscreen

Expand the Template Builder to the full-width of your browser.

View Code

View the resulting HTML of your template. You cannot edit the HTML through this command.

Toggle Images

Toggle the showing/hiding of images in your template. This is helpful for verifying your message still conveys the expected meaning when email clients don't display images.

Undo

Step back and undo your changes.

Redo

Step back and redo your undone changes.

Clear Canvas

Reset the Canvas back to a blank slate. This cannot be undone.

Edit Code

Edit the HTML before styles and CSS classes are inlined. This is NOT the final output, but rather the skeleton of the template the builder is keeping track of.

Save

Save your template. This will save your work in-progress within the Template Builder as well as replace the Code View of your Template with the fully rendered HTML. Your template is automatically saved every three changes you make.

Style Manager

Show the style properties that can be adjusted for the selected component block or CSS class. See Styling blocks for more information on styling your template.

Trait Manager

Modify the traits of the selected component block. For example, you can add IDs or Titles to the block.

Layer Manager

Show the hierarchy of the layers in your template. This view can aid in selecting hard to click component blocks.

Block Manager

Show the available block components you can drag and drop onto the Canvas to build-up your template.

Component blocks

Component blocks are base elements (sections, text, images, links, etc.) that you can drag and drop onto the Canvas to build out your template. The component blocks in the Template Builder are based on responsive blocks from Foundation for Emails 2.

When you click once on a component block on the canvas, there is a small menu of action items available.

Move up one layer

This action will move you up one layer in the in the Layer Manager. This is useful when you need to select an element to style it when it doesn't have enough defined padding to easily click and select.

Move block

You can move a block while clicking and dragging on this icon.

Duplicate block

This will duplicate a block.

Delete block

This will delete a block.

The available component blocks are:

UI Container - Black/Gold

This is the responsive container for your message. It integrates the UI branding into the header and footer. The header will span the entire width of the document with the UI Logo centered that links to the UI homepage. It incorporates the official UI logo in gold on a black background. The footer contains a row for UI branding and additional content as well as another row for social media icons and links. The default social media links point to the main University of Iowa social media accounts. You can drag the column blocks onto this container.

See Customizing the footer for directions on how to customize the social icons or change the color of the footer rows.

UI Container - Gold/Back

This is the responsive container for your message. It integrates the UI branding into the header and footer. The header will span the entire width of the document with the UI Logo centered that links to the UI homepage. It incorporates the official UI logo in black on a gold background. The footer contains a row for UI branding and additional content as well as another row for social media icons and links. The default social media links point to the main University of Iowa social media accounts. You can drag the column blocks onto this container.

See Customizing the footer for directions on how to customize the social icons or change the color of the footer rows.

1 Col Section

This section contains a single column that span the entire width of the container. It can only be placed inside the container block.

2 Col Section

This section contains two columns that each span 50% of the width of the surrounding container. It can only be placed inside the container block.

3 Col Section

This section contains three columns that each span 33% of the width of the surrounding container. It can only be placed inside the container block.

Text

Your basic block of text. It can only be placed inside of a column. Text can be easily styled by visiting the Typography section of the Style Manager when the block is selected. You can double-click on the text to bring up a very simple inline styling tool that allows you to bold, italicize, underline, strike-through, and create a link.

Image

Images can only be placed inside of columns. Once you drag an image block onto the canvas you will be prompted with the template builder's Asset Manager. From there you can upload new image assets. Any assets that were previously uploaded and associated with the template should also be visible to use.

Once you have images uploaded, double-click on the image to insert into the image block on the canvas. You can click once on the image to highlight it and then you can use the Style Manager's Dimension section to adjust the width and height of the image.

Link

Links can only be placed inside of columns. You specify the URL for the link by clicking once on the link block and then going to the Trait Manager. There you will find fields where you can specify:

Title:

The title of the link that is typically available as a tooltip when a user hovers over the link.

Href:

The URL the user will be taken to when they click the link.

Target:

Which window the link will appear in. This doesn't have much impact in email clients (Outlook, mobile, or web).

Spacer

Spacers can provide more precise height adjustments across email clients. They can be placed anywhere. You can adjust the height of the spacer by clicking once on it to highlight it then going to the Trait Manager and adjusting the height value.

Divider

Dividers break up sections of content with a horizontal line. To style dividers, select the divider and go to the Style Manager. You can adjust the height of the divider by changing the height attribute under Dimensions. You can change the color of the divider by changing background attribute under Decorations.

Button

Buttons are specially styled links that should look decent across email clients and devices. Buttons can be placed inside any column. They behave just like a link so to change the text of the button you double-click on the text. To change the destination of the button, select the link and change the Href trait in the Trait Manager.

Since the buttons are actually a set of nested tables (for support in Outlook for Windows) you can't easily just use the Style Manager to change the styling of the button. Instead, there are some additional CSS classes you can assign to the button to adjust it's display.

• Select the button. This will bring up the block action menu.
• Click the Move Up icon eight (8) times. This will move you up in the Layer Manager to the enclosing table where you can apply the appropriate classes.
• Change over the the Style Manager and you should see that the button and foundation-element classes are already applied.
• Click the Add class button and add one or more of the following classes:

  primary - Blue background with white text (Default)

  primary

  secondary - Grey background with white text

  secondary

  success - Green background with white text

  success

  warning - Yellow background with white text.

  warning

  alert - Red background with white text

  alert

  blackgold - UI yellow with black text.

  blackgold

View In Browser

This block creates a two-column block with a uniquely crafted link in the right column that will allow the recipient to visit the email message in their web browser. You can add a link or text to the left column.

Styling blocks

As you drag and drop component blocks onto your template, they will not be styled. You can select a component block and then click the Style Manager button where you can set properties for: Dimension, Typography, and Decorations.

Assigning classes

Each block automatically gets assigned a unique CSS class when you create it. Through the Style Manager, you can attach or replace CSS classes. For example, if you wanted text blocks to be styled the same way, you would need to remove the default unique class from each block and attach a common class.

• Select the block you want to apply your style to.
• Make the necessary changes to the style properties.
• Remove the default unique class. Add a new class.
• For any other blocks you want to apply that styling to, remove the default unique class and add the custom class by either typing the classname or selecting it from the drop-down (if available).

Dimension

The dimension properties include width and height, max-width and min-height, margin and padding.

Typography

The properties available under typography include: font, font-size, font weight, letter spacing, font color and line height. You can also specify how the text should align (horizontal and vertical), text decoration (none, underline, and strike-through), and text shadow.

Decorations

The decoration properties include: background color, border attributes such as collapse, radius, width, and style, and background image.

Customizing the Footer

The default background color for the UI branding row in the footer is black. You can change the background color by swapping out the CSS class for the row just like you would change the color of a button (see the instructions above on how to select a CSS class of an element). You will need to move up through the layers until you find the element with the CSS class of uifooter-black.

The following classes are supported for the UI branding element in the footer:

• uifooter-black
• uifooter-grey
• uifooter-gold

You can delete the social icons if you don't want them. You can also change the target links for the icons by clicking on the icon and then clicking the up icon to select the wrapping link. Next, change to the Trait Manager and from there you can change the link HREF.

Using your template

When building a template, changes are saved every three changes you make. If you attempt to exit the Template with unsaved changes, you will be prompted to save them. On every save, the full responsive HTML is exported over to the Code View and is made available for Dispatch to consume in your communications.

Tips and Tricks

Because some HTML elements don't have any padding or margins, it can quite difficult to select them to apply styling. Start by viewing the Layer Manager and then selecting the inner element you want to style. That will enable the action panel where you can click the Move up one layer button. You should see your position moving up in the DOM hierarchy. Once you've reached the element you need to style, you can switch back to the Style Manager.