CSS inlining
BetaThis feature is new and we're actively working to improve it. UpdatedIn the code editor of Design Studio, use the CSS inlining transformer (aka CSS pre-processing) to convert embedded CSS into inline styles. This can help improve page loading times and tells browsers to treat your styles as the most important.
Only use CSS inlining for emails made with standard HTML
Enabling this transformer on emails with our standard components will not work well and will likely lead to unintended styles.
Click Transformers > CSS Inlining then turn on Inline CSS.
Once enabled, you can customize what styling should be converted or preserved. The state of those toggles will be saved if you deactivate and later reactivate the transformer.
CSS inlining does not convert all styles in Design Studio
- It does not convert
<style>
tags withdata-embed
ordata-ignore-inlining
. - It does not download and convert external stylesheets
<link rel="stylesheet" href="....css" />
.
If you want to inline all styles, avoid using these attributes or linking to outside CSS files.