Re: Why hasn't a paragraph/heading styles drop-down ever been included in the EMAIL editor?

Dan_Stevens_ · ‎09-23-2015

Does anyone know why the email editor (even the legacy one) never included a drop-down of paragraph/heading styles? It would make it so much easier to apply a heading, for example, to a string of text (vs. having to search for it in the HTML view and add the tags manually (which may be too complicated for those that don't have HTML knowledge whatsoever)).

I recently posted a related idea here:

Josh_Hill13 · ‎09-23-2015

That'd be a question for the product team. I'm not in need of such a thing because I prefer the font size editor or let the designer code it so we control things better.

Dan_Stevens_ · ‎09-23-2015

That's exactly the point. We don't want our marketers to size text using the font size drop-down. Too much inconsistency there. Instead, we have <p> and <h1>, <h2>, etc. tags defined in the CSS (defined/coded by our designers) to ensure all of our emails are sent with a consistent look and feel. So we'd rather have them select from pre-defined styles.

Justin_Cooperm2 · ‎04-06-2017

Easiest answer is that we're not yet living in a world where many email clients handle css that is in the <head> section of the code. In fact, many will strip it out entirely. So, if you were to simply surround some text with <h1> it may have unintended consequences...some email clients would fall back to some default behavior and potentially style it in a way you may not want. Best practice for email is to inline style everything in the HTML. If you actually add the style property on the rich text <div> you can specify the way you want it in the template and then your marketers will not need to touch anything re: styling.

Justin

Anonymous · ‎04-06-2017

Using Email on Acid I've been testing many email clients. I've successfully styled many things using heading tags and CSS in the <head>. The most popular clients (including mobile) all seem to be styling it correctly, including testing done on real devices in-house as well.

I also did try to add styling to the <div> that surrounds the rich text, but it's not foolproof and I get many questions/concerns from the content creation team regarding difficulty in keeping the styling consistent when they're inserting content.

How about the option to simply inject raw text into whatever HTML tag you want? A pop-up box could show up similar to the rich text box, but there wouldn't be any toolbar since the CSS is styling everything. That way the editor isn't inserting P tags, or any other kind of tag where they shouldn't be. I've tried variables, but I don't like the separation in the UI (it puts them all under a separate 'Global Variables' section). I think this would solve a lot of problems and allow developers to do whatever they want code-wise.

Justin_Cooperm2 · ‎04-06-2017

You can actually make any HTML element a rich-text region in your email using class="mktEditable". If you do this, you can add any inline styles you want to your email and they will be reflected if the user just opens up the rich-text editor and edits the text. We have a setting on the text editor that you can control, which determines whether rich text is surrounded with <p>, <div> or nothing when text is edited. If you choose "none", then whatever a user types in will just be inserted into that rich-text mktEditable element verbatim and the inline styles you've applied to that element will be what the HTML will use.

This is definitely still best practice in the email world. Some clients support CSS but many don't. In our Marketo Starter Templates we use both embedded CSS and inline styling. Check out some handy external resources like Premailer: pre-flight for HTML email, which will also rip out your embedded CSS and throw it on individual elements. In that regard, having h1, h2, etc. defined in embedded CSS is functionally equivalent to just adding the inline styles on the elements you are using in your template.

Justin

Anonymous · ‎04-06-2017

I definitely will try this out! Thanks for the link. That sounds like what I've been looking for. This could solve all the issues.

Is this a global setting? We're still transitioning from Marketo templates to our own branded ones. I don't want the tagless text editor to mess up anything inside Marketo templates.

Anonymous · ‎05-04-2017

Hi Justin,

I'm wondering about the setting to turn off the wrapper for content in the rich text editor.

If I turn this off, will it affect how the default Marketo templates work? We're currently still transitioning to using only our own templates.

Justin_Cooperm2 · ‎05-04-2017

It won't impact template structure at all. It just impacts whether you have <p> and <div> surrounding what you input. This may impact the styling the template is applying to those elements AND spacing that is added

Anonymous · ‎04-06-2017

I would love to see this. The point of having email templates is so that people who don't know how to code can easily create emails without worrying about the design and branding.

I'd also love an editing option that just inserts the raw text. I know there are variables, but those don't seem to appear in the main edit screen. But this would make it super easy for things like having a main email heading (which would be an H1 coded into the template). And the text that the user inserts simply gets placed between the H1 open/close tags, instead of needing the editor to insert any tags itself.