---
title: "Create Reusable Deliver Designer Components"
slug: "create-reusable-deliver-designer-components"
description: "Create reusable Deliver Designer components with HTML and Liquid variables. Configure a sample header, set default values, and preview the component."
status: "update"
updated: 2026-10-26T18:51:20Z
published: 2026-10-26T18:51:20Z
canonical: "knowledge.technolutions.net/create-reusable-deliver-designer-components"
---

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

# Create Reusable Deliver Designer Components

Create reusable content for Deliver Designer templates. Add HTML and variables to control the values that mailing authors can change.

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

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?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584206412443.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)

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

## Create a header component

This example creates a header with three values that you can configure:

- Background color
- Font
- Header text

### 1. 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. Select **New Component**. A pop-up appears.

[![Navigating_to_Components.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584388086939.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584388086939.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)

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. Select **Save.** The component editor window appears.
3. Follow along with the following example by selecting **Edit Component.**

[![Component_Configurations.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584436471067.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6584436471067.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)

### 2. Create variables in the source editor

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

### 3. Configure the background color variable

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

1. Select **OK** to close the Source window.
2. Select **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. Select **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.

### 4. Configure the font variable

The second variable we will add is for the **font**:

1. Select **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. Select **Save.** The new variable *Font Face* appears in the list at right.

### 5. Configure the default header text variable

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

1. Select **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. Select **Save**.

### 6. Preview the component

With all three variables in place, we can now select **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?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/6585433753371.png?sv=2026-02-06&spr=https&st=2026-11-09T11%3A20%3A16Z&se=2026-11-09T12%3A20%3A16Z&sr=c&sp=r&sig=nqT70XyFtvQqeWyA9Cz9dsa5auZof8L%2B63IokYdupys%3D)

Create additional components as needed. Then add the components to a Deliver Designer 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).

### Example: Use the header for different messages

Use the header component above for a campus visit invitation or an alumni event announcement. Keep the same HTML structure. Change the variable values for each use of the component.

| Variable | Campus visit invitation | Alumni event announcement |
| --- | --- | --- |
| Header text (`header_text`) | Visit Slate University | Welcome back to Slate University |
| Background color (`background`) | Blue | Green |
| Font (`fontface`) | Arial | Arial |

The Blue and Green options come from the Select variable configured in this example. The header text comes from the Text variable. The component HTML keeps the text centered and white.

Add the component to a template with the instructions in [Build a Deliver Designer Template](/docs/build-a-deliver-designer-template). Set the variable values when you configure the component. Add the event date, location, and registration link in a separate **HTML Content** section.

To let mailing authors change the header values, select **Allow Customization** for the column that contains the component. See [Configure the mailing](/docs/create-a-mailing-from-a-designer-template#configuring-the-mailing) to change those values in a mailing.

## Up next

> [!NOTE]
> ➡️ [Build a Deliver Designer Template](/docs/build-a-deliver-designer-template)