Design email content

Many users view emails on their mobile device instead of a desktop. Design your content for mobile to get the highest clickthrough rates by using the tips in this guide. You can preview the mobile version easily and send test emails to see it directly on your phone.

Drop the Responsive Column element to a new row to create columns that respond on mobile. Use the Grouped Column element to fit the columns on a single row.

Design email header

Customize the header to include your company branding. The default has a logo and links to primary categories; change this to match your own logo and categories, or remove the categories entirely. Save a few different headers with branding for seasons, promotional, transactional, or content tests.

1. Find your header element.

   Pull the Header element into a template so you can change it.

   

2. Change out your logo.

   Begin by branding the header with your logo. Drop in your logo, and size it how you want.

   

   Tip: You can hold down Shift when resizing to jump in increments of 10.

3. Update the navigation links.

   The navigation element makes it easy to add and remove links. To remove navigation links, select the element and delete it. Otherwise, update the text and links to include the appropriate headings and links. 

   

4. Update styling and branding.

   You can update any fonts, colors, or more advanced structure within the header element. Always come back to this step later and add in more advanced styling. 

5. Save your header element.

   After editing the header, save the element for future usage.

   

Design email footer

Every email needs a proper footer for CAN-SPAM compliance. Optimizely Data Platform (ODP) creates a default footer that can be easily added to campaigns to ensure you include:

• Unsubscribe information
• Company name
• Company physical address

You can change the design of the footer to be anything you want, but it must contain this information or it will hurt your deliverability.

This guide explains how to update a Footer element for use in content.

1. Find your footer element.

   You can create a footer by going to Engage > Templates and clicking Create New Template. After you are in a template, drag and drop the Footer element.

   

2. Update your social links.

   Make sure your social links have the correct links in them. You can add and remove the social networks to only include the ones that you want.

   

3. Update design elements.

   You can change design elements (font, color, structure, and so on) as long as you do not remove the unsubscribe information, company name, and address.

4. Link to preference center.

   If you are using a preference center (which you should), you can manage more specific preferences and collect more information about your users. Change the main link of your footer to be a link to your preference center instead of a direct unsubscribe link.

   If you do not see a Preference Center in your selection list, then use this guide to design and publish your preference center.

   

5. Save your footer element.

   Save the footer element to use it in content by selecting the section or sections in the element tree that you want to be your footer, as shown below.

   

   Click Save (icon) and choose to replace the existing footer or to save a new one.

   

Include raw HTML in the design

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

Drag and drop the component into the template, and edit it with your custom HTML/CSS.

Preview or send a test to see the content.

Import HTML templates for email

Although you should use the email designer within Optimizely Data Platform (ODP) to create content to prevent writing custom liquid for personalization, you can import any pre-built templates you have. 

You are able import HTML anywhere the email designer appears.

To import an HTML template:

1. Open the Optimizely Engagement Designer under Activation.
2. Click Convert to plain HTML.
3. Click Source.
4. Paste your HTML.
5. Click Source to see the design.