Email editor is DIFFERENT to code output or appearance in clients

General Discussion
1

Your software
My Mautic version is: 5.1.0
My PHP version is: 8.1.29
My Database type and version is: 10.6.18-MariaDB-log

Your problem
My problem is:

I’ve been trying to use the included themes to create just a simple clean newsletter email with my brand styling, colours and fonts, but it’s not ending up clean and doesn’t work - it looks totally different in the email clients than in the preview… I’d really appreciate help or suggestions of where to find a good theme for this… with much thanks to @ricfreire for his initiative to build email templates for the community… is this nevertheless a problem with the editor or just normal with WYSIWYG…?

It would be nice to have a simple way to set the default font for the whole template to something simple and easy to read like Verdana instead of in Cofirme having to edit the font for each individual section. Plus the template default font is still there in the code and messes with the final email client look. Same for things like button colour, and section background colour… The section background and body background colours are not rendering at all like previewed in the final email seen in clients.

I know that’s probably a very very basic code edit… and I’m learning…

But it’s a big difference for users like me between the learning curve for Mautic versus the marketing platforms like Brevo/Intuit/MailerLite or whatever which are relatively easy to work with and the result from their WYSIWYG editors looks exactly like the editor preview… so for a non-coder like me (who’s learning, but it’ll take me time, and I’d like to just send out emails :wink: ! ) I’m wondering if this is a problem with me or the Mautic WYSIWYG editor, please?

Thanks ;)!

1 Like
2

Hiya @mamautic,

First of all, thank you so much for your kind words! I’m thrilled to hear that you liked the email themes I’ve developed!

If you’re working on developing a theme for Mautic using MJML and want your client to edit it within the GrapeJS builder, you’re absolutely right - the editable view and the preview can look quite different. This is completely normal. It’s important to advise your client not to focus too much on the editable version, but always to check the final look using the preview. What truly matters is how the email looks in the preview.

If you’re encountering issues with the way your email renders in the preview or within GrapeJS, it’s likely due to some problematic code, such as unclosed tags or other errors. You can check for these errors on my platform using the MJML Validator!

Developing a Mautic theme in MJML is not just straightforward MJML, you need to understand how the builder works and conduct a lot of testing. When editing a theme in GrapeJS, the builder often automatically adds spaces or elements that shouldn’t be there. You’ll need to keep an eye on this. I recommend copying certain <mj-head> elements from my themes into yours, particularly the paragraph spacing removal, to prevent the builder from inserting unwanted elements.

Creating and developing themes does have a learning curve, but my best advice is to test, test, and test.

I hope this helps!

Best regards,
Ricardo

1 Like