Streaming live at 10am (PST)

[TUTORIAL] Design a Mailchimp newsletter with Webflow

Hi everyone,

I’m sharing with you how I design newsletter in Webflow for Mailchimp campaigns:

1. Design it in Webflow

  • I recommend to keep it one column
  • Replace .svg images by .png
  • For each text element, set the font style attributes explicitly (size, font, etc). Do not trust inheritage from parent elements.

2. Publish and convert to HTML with Emogrifier

  1. Publish the web page (e.g. yournewsletter.webflow.io)
  2. Open the published web page, right-clik -> View page source
  3. Copy the whole page source
  4. Open the Emogrifier tool ( https://www.myintervals.com/emogrifier.php ) and paste the code in the HTML input box
  5. Come back to page source, click on the CSS link, copy the entire CSS and past it in Emogrifier CSS input box
  6. Press the ‘Emogrify!’ button to generate stand-alone HTML with embedded CSS
  7. Copy the generated HTML code in a local .html file and open it with Notepad++ or your preferred editor

3. Insert the HTML code in Mailchimp

  1. Create a new campaign in Mailchimp
  2. Drag one Code element for each element of the newsletter. Copy/paste the code of the element from your HTML file (tip: Notepad++ has a plugin called HTML Tag which allows to select a whole div from start to end tag)

2 Likes

What a lovely way to use Webflow!