Design email content

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

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.

   

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. 

   

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. 

   

4. Click the header to update fonts, colors, and text size. Return to this step later to add more advanced styling.
5. Save the header by clicking save.
   

   

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. 

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.

   

2. Drag and drop the Social from Basic Content to update the social media links.

   

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 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.  
5. Click save to replace the existing footer.
6. Click Section in the breadcrumb trail to use the footer in future campaigns. 

   

    

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.

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

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.
5. Click Source.
6. Paste your HTML.
7. Click Source again to view the design.