1. Slate Knowledge Base
  2. Admissions & Enrollment
  3. Communications & Outreach
  4. Overview

Deliver Designer

Updated
Expand-All  Collapse-All

  Required Permissions

Deliver, Deliver Templates

  Prerequisite Skills

Fundamentals of Liquid Markup, Mobile Responsiveness

Important

Deliver Designer is an Early Access Feature and is not yet a default for all provisioned instances of Slate.

To enable Deliver Designer:

  1. Select Database on the top navigation bar and select Configuration Keys.
  2. In the Database Configuration section, select Early Access Features.
  3. From the list, select Deliver Designer.
  4. Select Save*.

*Changes to configuration keys may take up to 15 minutes to be reflected across all web nodes.

  Summit 2022 Feature

Deliver Designer empowers email marketers to design highly configurable templates from which users can easily deliver email communications in harmony with institutional design standards.

Within a template, designers can create any number of programmable content blocks called components. These components can be locked to prevent editing by other users, and they can include configurable variables that provide a variety of brand-appropriate styling options. Both templates and components can be previewed before sending to ensure that the email renders as desired. 

  Tip

Although any user with the Deliver permission can use Deliver Design in a single message, the Deliver Templates permission allow tech-savvy designers or external consultants to create reusable templates.

 

Components

Before designing a Deliver Template, we should first create several components. Components are the building blocks of a template, and can include a header, a footer, a logo, or a button. Components can be designed with limited customization within defined parameters. For example, a header can be designed to with one of two pre-defined colors.

Components.png

Components are designed to use Liquid markup to control the configurable elements.  It is recommended that users who are designing Deliver Templates are familiar with Fundamental Liquid markup.

 

Example: Creating a Header

To create a new component:

  1. From the main navigation, select Deliver.
  2. At right, select Designer.
  3. At right, select Components.
  4. Click New Component. A pop-up appears.

Navigating_to_Components.png

  1. 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.
  2. Click Save. The component editor window appears. 
  3. Follow along with the following example by clicking Edit Component. 

Component_Configurations.png

In this example, we will create a sample header. The configurable elements of the header will be:

    • Background color
    • Font
    • Text alignment

Click the Source button in the WYSIWYG editor. Paste the following line of HTML between the <body> 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.

Pasting_HTML_between_Body_tags.png

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: Yes
    • 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.

    Configure_Background_Color_Variable.png

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

For reference, the four variable types are:

    • 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

  Tip

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

The second variable we will add is for font:

  1. Again, 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: Yes
    • Type: Select (List)
    • Prompts: In this case, we do not need to override the prompt values since the name of the font is the same as the desired value.
      • Arial
      • Times New Roman
    • Default value: Arial

    Configure_font_face_variable.png

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

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: Yes
    • Type: Text (String)
    • Default value: Slate University

    Configure_header_variable.png

  3. Click Save.

At this point, with all three variables in place, we can click View Preview to display the variables in action:

View_Preview.png

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 end users will likely not have the Deliver Templates permission to allow for full customization of the template, we recommend ensuring that each of the components—as well as the template itself—are mobile-friendly from the start.

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

 

Templates

With unique graphical elements created, we can make a new template to incorporate our various components. These components will, as part of a template, 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.
  2. At right, select Designer.
  3. Click New Template. A pop-up appears.
  4. Configure the following settings:
    • Name: Enter a unique, descriptive name.
    • Status: 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 within the template, if desired.
  5. Click Save.

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

Elements can now be added to the template.  A green bar will display when an element is clicked, and the element can be dragged and dropped in 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. We recommend including some sample text here. Might we suggest: "Lorem ipsum dolor sit amet," or perhaps "rasa maximum est fieri praeterita divisa panem?"
Component
Select from the list of previously-designed graphical elements to add to the template.

New_Row__HTML_Content__Component.png

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

mceclip0.png

Options for editing include:

    • Move Row
    • Edit Row Properties
      • Allow Customization: By default, all rows are locked for customization by end users.  By clicking "Allow," end users will be able to edit the contents of the row.
    • 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 display here.
    • Unsubscribe: For all marketing messaging, Allow Unsubscribe (Default) should be selected, or another Message Group.
    • UTM Tracking: Enter UTM tracking info desired

    mceclip1.png

  4. Click Save.

Note:

Once you click save, a new mailing will be created.  The selected Deliver Designer Templated will be "copied and pasted" from the template itself, meaning that any subsequent changes made to the template or the components within a message will not affect the template or components in this new mailing.

 

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:

mceclip3.png

  • Edit Message: Only elements that "Allow Customization" may be changed at this point.  This will include 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.
    •  

mceclip4.png

Was this article helpful?
0 out of 1 found this helpful