---
title: Design email content
slug: data-platform/docs/legacy-design-email-content
docTags: 
createdAt: 2026-08-10T12:05:18.000Z
---

:::hint{type="info"}
**Note**

Email and SMS channels are legacy features and not offered to new customers.
:::

Learn how to design mobile-friendly email content in Optimizely Data Platform (ODP) to get the highest clickthrough rates. You can [preview the mobile version](docId:13kahrUprjT5Zc6gMLawQ) and send test emails to see the content on your phone.

To design your email for mobile, complete the following:

1. Go to **Activations > Overview**.
2. Open an existing campaign or [create one](docId\:DKxtgWwkAXLkkLOufg8mT). 
3. Edit the **Touchpoint** and open the email template. 
4. Drag and drop the **Responsive Column** from **Elements > Layout** to a row to create mobile responsive columns in the template. Use the **Grouped Column** to fit the columns in a single row.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/INLKL6D0F6IIzlBoU2L1_-20260720-145656.png)

## Design email header

You can customize the header to include your company branding. The default header has a logo and links to primary categories. You can change this to match your own logo and include your own categories or remove the categories entirely. Save different headers with branding for seasonal, promotional, transactional, or content test emails.

To design your header, complete the following:

1. Drag and drop the **Header** from **Elements > Basic Content** in the email template.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/hlDDfC5VqUxhJrRwvsum_-20260720-145656.png)
2. Update the default logo by dropping your brand logo in the header and resizing it. Press Shift when resizing to jump in increments of 10. 

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/K6LaoRvsfDqIjw3ent9Iw-20260720-145657.png)
3. Drag and drop the **Navigation** element. Click on it to select multiple links, or click on the links to add, remove, or update them individually. 

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/QM-pKPZwSUiE97Wx6G5sz-20260720-145657.png)
4. Click the header to update fonts, colors, and text size. Return to this step later to add more advanced styling.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/bdqeOMDfml75DuG7b7YPw-20260720-145656.png)
5. Save the header by clicking **save**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/LEawRvBwVVQlN4gU6JO_6-20260720-145656.png)

## Design email footer

You must include a clear footer in every email to comply with CAN-SPAM. ODP creates a default footer for campaigns that includes the unsubscribe information, company name, and company physical address. 

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/YfU2T8BggPjx41GobD7Pi-20260720-145657.png)

You can update the footer's design. However, it must contain the previously mentioned information to improve the campaign's deliverability.

To design your footer, complete the following:

1. Drag and drop the **Footer** from **Elements > Saved Elements** in the email template.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/1fQI4UFySiO6YjuyM7O8l-20260720-145657.png)
2. Drag and drop the **Social** from **Basic Content** to update the social media links.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/4Flsgl_TdjdhuOFukH0h0-20260720-145656.png)
3. Click the footer to change the fonts, colors, and text size without removing the default information. Return to this step later to add more advanced styling. 
4. Use a [preference center](docId\:JORRWPVj2LAwnVYZc9MPg) to manage more specific preferences and collect user information. Change the main link in your footer to your preference center instead of a direct unsubscribe link.  

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/gXwkhCs4XRtQtj_rdlAwn-20260720-145656.png)
5. Click **save** to replace the existing footer.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/7-qWTTtK_RK5dIcOiHo5o-20260720-145657.png)
6. Click **Section** in the breadcrumb trail to use the footer in future campaigns. 

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/p7nQZjfaFR3nOb36gJtAk-20260720-145657.png)

## Include raw HTML in the design

You can use the **Raw HTML** element to add custom HTML/CSS to the email designer, such as sizing images, integrating with third-party capabilities, or anything requiring specific HTML/CSS.

:::hint{type="info"}
**Note**

Only use this component if you are experienced with HTML for email clients.
:::

To use raw HTML in your template, complete the following:

1. Drag and drop the **Raw HTML** from **Basic Content** and edit it with your custom HTML/CSS.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/IfeQ9cwDNgQaW7Y9MeC-J-20260720-145657.png)
2. Preview or send a test email to view the content.

## Import HTML templates for email

You can import pre-built HTML templates to maintain consistency in your campaigns. Use the **Raw HTML** element to insert the raw HTML in an email template and use liquid customization directly for personalization. 

:::hint{type="info"}
**Note**

You cannot convert HTML templates into Optimizely Engagement Designer templates automatically.
:::

To import an HTML template, complete the following:

1. Go to **Activations > Overview**.
2. Open a campaign or create one. 
3. Edit the **Touchpoint** and open the email.
4. Click **Convert to plain HTML**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/18mgAe7Ds08i02gmD-znP-20260720-145657.png)
5. Click **Source**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Ae4HuOlSB-2HUOL41BVgu-20260720-145657.png)
6. Paste your HTML.
7. Click **Source** again to view the design.