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
- Publish the web page (e.g. yournewsletter.webflow.io)
- Open the published web page, right-clik → View page source
- Copy the whole page source
- Open the Emogrifier tool ( The Emogrifier merges CSS & HTML into one email-friendly file ) and paste the code in the HTML input box
- Come back to page source, click on the CSS link, copy the entire CSS and past it in Emogrifier CSS input box
- Press the ‘Emogrify!’ button to generate stand-alone HTML with embedded CSS
- 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
- Create a new campaign in Mailchimp
- 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)
