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.
Find your header element
Pull the Header element into a template so you can change it.
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.
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.
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.
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.
Find your footer element
You can create a footer by going to Engage > Templates and clicking Create New Template. Once you are in a template, drag and drop the Footer element.
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.
Update design elements
You can also change any design elements (font, color, structure, and so on) as long as you do not remove the unsubscribe information, company name, and address.
Link to preference center
If you are using a preference center (which Optimizely highly recommends), 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.
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 the 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 we always recommend using 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. Please note the following information:
- You cannot convert HTML templates into Optimizely Engagement Designer templates automatically.
- Use the Raw HTML component to insert raw HTML into a designed email.
- Use liquid directly to use personalization.
Use the following steps to import an HTML template:
- Open the Optimizely Engagement Designer under Campaigns.
- Click Convert to plain HTML.
- Click Source.
- Paste your HTML.
- Click Source to see the design.
<%= heading %>