Instructions

Intro

SendBox template is the email and newsletter template for modern email clients.

What does it mean?
‍
Usually, emails are based on the table layout. Since Webflow doesn't have tables, we are using a modern way of building email templates based on divs. A lot of companies already use this technique for creating their newsletters, for example, Litmus.

Outlook 2007-2016 is the only email clients left that require tables as HTML structure with their Microsoft Word rendering engines. All of the other email clients and the latest Outlook versions work just fine with divs. Old Outlook versions are used by an extremely low number of users, so don't afraid about that.

The 2019 Email Client Market Share can show us how many people uses each client.

All email clients have some limitations for styling elements.

If you want to make some advanced customization please read customization rules below. If you need just to change colors and text you can jump to the usage section.

Customization rules

All email clients don't support some style properties and layout components. Here you can find most common rules for email design.

Fonts

SendBox template uses safe email font Trebuchet MS. It's important because some email clients don't work with custom fonts and safe fonts will guarantee cross-platform support. You can find the list of safe email fonts below or read more:

Arial
Tahoma
Trebuchet MS
Verdana
Courier
Georgia
Times New Roman
Helvetica

JavaScript

Don't use anything based on JavaScript because it won't work in email. It also means that the usage of Webflow CMS and Collections are not allowed for email. Also, Interactions will not work.

Styles and layout

Don't use:

Float
Negative margins
Absolute, relative and fixed position;
Flexbox and flex layout
Grid layout
Columns layout
SVG images
Media queries*

* Media queries are used in Webflow by clicking device on the top bar. To avoid just make your changes in Desktop breakpoint and don't switch to other.

You can still copy and paste some parts between templates if needed or add some new elements and components.

Usage examples

How to use:

Generally there are 3 ways how to use this template in any email service provider.
‍

This template can be used with any HTML editor. If there is an ability to add HMTL code for your email just follow instruction (Any HTML editor)
Download the archive with the code of SendBox template using Code Export. Then upload it to the email service provider (find the example of Campaign Monitor)
Publish and open template in the new tab. Then just copy-paste it to the reach text editor in email service provider (find the example of GetResponse or Sendinblue)

Any HTML editor

1. Make changes to the template according to your brand styles, publish and open in new tab.

2. Now you are on the email template page. Click ⌘ + A on Mac or Ctrl + A on Windows to select all and then ⌘ + C on Mac or Ctrl + C on Windows to copy all.

3. Now we need online HTML editor. You can use qhmit or html.am. Open online editor and click ⌘ + V on Mac or Ctrl + V on Windows to paste all into the editor.

4. Click Source button to get your HTML code. Done! Now you can copy this html code and paste to any emails with html!

Campaign monitor

1. Make Export Code in your Webflow project, click Prepare ZIP, Download archive and unzip it.

2. In campaign monitor choose import HTML from more options.

HTML page - select email from unzipped archive.
All other image and CSS files in ZIP format (optional) - select here your downloaded ZIP archive.

3. Done! Now you can preview the email or send a test one.

4. Preview

Zapier

1. Get you html code using Any HTML editor instructions, select body type - Html, and just paste html code to the body.

GetResponse

1. While creating newsletter in GetResponse select HTML source editor.

2. In the opened window find and click Show WYSIWYG button in the bottom of the page.

3. Now go to Webflow and open template in new tab.

4. Now you are on the email template page. Click ⌘ + A on Mac or Ctrl + A on Windows to select all and then ⌘ + C on Mac or Ctrl + C on Windows to copy all.

5. Go back to GetResponse editor and click ⌘ + V on Mac or Ctrl + V on Windows to paste all. Done!

6. Now you can preview, send test message or save your template.

Sendinblue

1. While creating newsletter in Sendinblue select Rich text editor.