With Deliver Designer, you can create highly configurable templates that users can easily build and deliver brand-standard email communications.

🔑 Required Permissions

Deliver, Deliver Templates

☑️ Prerequisite Skills

Fundamentals of Liquid Markup

How it works:

1. Create programmable content blocks called components.

2. In each component, add HTML and variables. Variables are Liquid markup elements that offer a list of styling options.

3. Arrange those components, along with additional HTML, in templates. Users create Deliver mailings with these templates.

Components

Components are the building blocks of a template. They can include a header, a footer, logos, and buttons.

• 🖌️ Components enable users to choose styling options from a list you provide. For example, a header can be designed to offer a selection of one of two colors.

• 🔒 Components can be locked to prevent editing by other users.

• 👀 Templates and components can be previewed to ensure that the email renders as desired. 

• ♻️ Templates and components can be reused to prevent wasted time and duplicate work.

Variables

Components are shells that include HTML and configurable elements called variables.

There are four variable types:

• Text (String): A free text element

• Number (integer): A whole number

• True/False (Boolean): A yes/no value stored as a "1" or "0"

• Select (List): A single-value list of prompts

Variables are controlled by Liquid markup. As such, working in Deliver Designer templates requires a familiarity with the fundamentals of Liquid markup.

Component example: Creating a header

In this example, we'll create a sample header with three styling options that the user can configure:

• Background color

• Font

• Text alignment

Step one: Create a new component.

1. From the main navigation, select Deliver.

2. On the right side of the page, select Designer. The Designer Template page appears.

3. On the right side of the page, select Components. The Components page appears.

4. Click New Component. A pop-up appears.

5. Enter the following configurations:

   • Name: Enter a unique, descriptive name.

   • Description: Enter a description if desired.

   • Status: Active

   • Folder: Keep components organized in a clear folder structure. Select  Other to create a new folder.

6. Click Save. The component editor window appears. 

7. Follow along with the following example by clicking  Edit Component. 

Step two: Create variables in the source editor.

Click the Source button in the WYSIWYG editor. Paste the following line of HTML between the tags:

 <div style="background: {{background}}; font-family: {{fontface}}; text-align: center; color: white; padding: 25px;">
{{header}}
</div>

The HTML contains merge fields for background, fontface, and header. These elements will be populated by creating corresponding variables.
 

Step three: Configure the background color variable.

First, let's create the variable for background color using the Liquid markup variable background.

1. Click OK to close the Source window.

2. Click New Variable at right. A pop-up appears.

3. Configure the following settings:

   • Name: Background Color

   • Liquid markup variable: background

   • Description: Enter an optional description.

   • Required: Select the checkbox

   • Type: Select (List)

   • Prompts: Similar to overriding system prompts on a form, we will add a display name, followed by a caret ^, and then the hex code for the desired background colors:

     • Blue^#00669e

     • Green^#99cc00

   • Default value: Blue.
     

4. Click Save. The new variable Background Color appears in the list at right.

✨ Tip

When using colors, HTML color names can be used along with RGB hex colors.

Step four: Configure the font variable.

The second variable we will add is for the font:

1. Click New Variable from the navigation at right. A pop-up appears.

2. Configure the following settings:

   • Name: Font Face

   • Liquid markup variable: fontface

   • Description: Enter an optional description.

   • Required: Select the checkbox

   • Type: Select (List)

   • Prompts: In this case, we do not need to override the prompt values since the font name is the same as the desired value.

     • Arial

     • Times New Roman

   • Default value: Arial
     

3. Click  Save. The new variable Font Face appears in the list at right.

Step five: Configure the default header text variable.

Finally, we will add the default text for the header:

1. Once more, with feeling, click New Variable from the navigation at right. A pop-up appears.

2. Configure the following settings:

   • Name: Header

   • Liquid markup variable: header

   • Description: Enter an optional description.

   • Required: Select the checkbox

   • Type: Text (String)

   • Default value: Slate University
     
     

3. Click Save.

Step six: Preview the component.

With all three variables in place, we can now click View Preview to display the variables in action:

From here, create additional components as needed. With those, we'll be ready to build a Deliver Template.

⭐ Best Practices

• Think about mobile usability when building each component.

• Since users will likely not have the Deliver Templates permission that allows for full customization of the template, each of the components—as well as the template itself—should be mobile-friendly from the start.

• To read more on optimizing Deliver communications for mobile audiences, check out the article on mobile responsiveness.

Templates

With unique graphical elements created, we can make a new template to incorporate our various components. As part of a template, these components can be used by your marketing team without compromising the desired structure and institutional branding.

To create a new template:

1. From the main navigation, select Deliver. The Deliver page appears.

2. On the right side of the page, select Designer. The Designer Templates page appears.

3. Click  New Template. A pop-up appears.

4. Configure the following settings:

   • Name: Enter a unique, descriptive name.

   • Status: Set to Active.

   • Folder: Keep templates organized by using a clear folder structure. Select  Other to create a new folder.

   • Custom CSS: Enter any custom CSS code if desired.

   • Email Width: Specify an email width if desired.

   • Body Background: Specify the color of the template's background if desired.

   • Table Background: Specify the color of table elements in the template if desired.

5. Click Save. The template summary page appears.

By default, a new template will contain one single blank row.

Elements can now be added to the template. A green bar will appear when an element is selected, and the element can be dragged to the desired location. The three options available for template creation are:

New Row

One of six column configurations can be added to the template.

HTML Content

A blank area where the message content will be added. It might be helpful to include some sample text, such as "Lorem ipsum dolor sit amet" in this area.

Component

Select from the list of previously-designed graphical elements to add to the template.

Once a row has been added to the template, it can be edited or moved by hovering over the row and selecting from the palette on the left side.

Options for editing include:

• Move Row

  • Edit Row Properties

    • Allow Customization: By default, all rows are locked for user customization. Selecting Allow enables content editing of the row for users.

  • Delete Row

Creating a message

Once components and templates have been created, they can now be selected when creating a new message in Deliver.

To create a new message:

1. Select  Deliver from the main navigation.

2. Click New Mailing.

3. Enter the following information:

   • Name: Enter a unique, descriptive internal name.

   • Folder: Place in a folder if desired. Select Other to create a new folder.

   • User: Defaults to logged-in user but can be overridden.

   • Realm: Place in a realm if desired.

   • Method: To use a Deliver Designer template, select Email (Deliver Designer).

   • Template: Select the desired Deliver Designer template. If Email (HTML Editor) is selected, the existing HTML templates will appear here.

   • Unsubscribe: For all marketing messaging, Allow Unsubscribe (Default) should be selected, or another Message Group.

   • UTM Tracking: Enter UTM tracking info desired
     
     

4. Click Save.

Configuring the mailing

• Edit Recipient List: Follow along with our article on Adding a Recipient List.
  

• Edit Envelope: When using a Deliver Designer template, the following information can be edited, including merge fields added to the recipient list:
  
  

• Edit Message: Only elements that "Allow Customization" can be changed at this point. This includes any HTML components, so users creating the mailing can edit the content within the component. Depending on the user's permissions, they will also be able to add additional HTML components or pre-configured components here.
  

• Send Mailing: Follow along with our article on Sending a Mailing.