---
title: "Deliver Designer"
slug: "deliver-designer"
updated: 2026-02-25T23:40:24Z
published: 2026-02-25T23:40:24Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Deliver Designer

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

> [!NOTE]
> 🔑**Required permissions:**[Deliver](/v1/docs/system-permissions#deliver), Deliver Templates

## 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.

![Deliver Designer Structure](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/16721309590683.png)

The arrangement of parts in an email that uses Deliver Designer

## 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.

[![Components.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584206412443.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584206412443.png)

## 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](/v1/docs/fundamental-liquid-markup-and-conditional-logic).

## 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.

[![Navigating_to_Components.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584388086939.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584388086939.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](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584436471067.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584436471067.png)

### 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:

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

The HTML contains merge fields for *background*, *fontface*, and *header_text*. 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.

> [!NOTE]
> 💡 Tip
> 
> When using colors, [HTML color names](https://www.w3schools.com/tags/ref_colornames.asp) 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_text
  - **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:

[![View_Preview.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6585433753371.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6585433753371.png)

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

> [!TIP]
> ⭐ 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](/v1/docs/optimizing-emails-for-mobile-devices-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.

[![New_Row__HTML_Content__Component.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6585905288219.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6585905288219.png)

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.

[![mceclip0.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6576229707163.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6576229707163.png)

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. Deliver Designer templates will only appear if *Email (Deliver Designer)* is selected. If *Email (HTML Editor)* is selected, the existing HTML templates will appear here instead.
  - **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.**A new mailing is created.

The selected Deliver Designer Template content will be copied from the template, meaning that any subsequent changes made to the template or the components in 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](/v1/docs/adding-a-recipient-list).
- **Edit Message Header**: When using a Deliver Designer template, the following information can be edited. This information can be populated using merge fields added to the recipient list:
  - Sender
  - Reply To
  - Recipient
  - CC
  - Subject
  - Preheader
- **Edit Message Body**: 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.
  - Customizing a component within the mailing opens a pop-up form where the value of each variable can be set ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image-59NYMF9Y.png)
- **Send Mailing**: Follow along with our article on [Sending a Mailing](/v1/docs/sending-a-mailing).

## Related

- [Advanced Liquid Markup](/advanced-liquid-markup.md)
- [Getting Started with Liquid Markup](/getting-started-with-liquid-markup.md)
- [Liquid Markup Filters](/liquid-markup-filters.md)