Summary
If your campaign text or styling looks different on the sent email compared to how it looks in the ActiveCampaign drag-and-drop designer, it is most likely due to styling or HTML that has been pasted in from an outside source.
Resolution
Best recommendation:
-
Ensure the pasted text does not include additional formatting
When you paste the text into the designer, make sure that it is plain text and does not have any hidden elements. To do this, paste the content into a plain text editor, then paste the content from the plain text editor into a new text block in your campaign. If you are using the Classic Designer, make sure to save your work before testing. The Email Designer will save changes automatically.
Other items to consider:
-
Turn off Grammarly browser extension
If you wrote your text directly in the text block, make sure that you turn off any extensions that may markup or edit text before typing. The Grammarly browser extension will interact with the text block and add markup that may show up as styling issues in the email once sent. -
Only use web safe fonts
If your font style is different when sent to the inbox, check that the font being used is supported by the email client (Gmail, Outlook, Yahoo, etc.). It is best practice to only use web safe fonts as they are usually accepted by all email clients. -
Remove CSS variables
CSS variables are valid for use in a web page but they are not supported by most major email clients, specifically Gmail and Outlook. They typically start with two dashes (--example) and may be inlined into HTML elements. The ActiveCampaign Customer Experience Team is not able to help implement or troubleshoot any code. If you need assistance with this step, we recommend working with your developer or an ActiveCampaign Certified Consultant.
We also recommend testing your email before sending it to your list for every campaign. In this instance, it is best to send a test version of your message to a few email clients (Gmail, Outlook, Yahoo, etc.) to make sure the formatting looks correct upon sending.
Cause
When content is pasted into the drag-and-drop designer from a website, word editor, or the Grammarly browser extension, it brings in styles and nested HTML that the designer is not able to completely flush out. Even though the email appears correct in the designer, once sent, those hidden styles or nested HTML are rendered by the email client (Gmail, Outlook, Yahoo, etc.) and can be exposed. Note that each email client has a different way of rendering the email code and could show different results.
If this does not solve the issue for you, reach out to our Customer Experience Team and we’ll be happy to look into this further with you.