Email Marketing Tool

jdv123
Contributor

Email code editing

SOLVE

Is there a way to edit code on the fly? For example: in the Marketo email editor there's a button on the top right that lets you open up the code and then see the results of any edits after saving. 

 

I ask because I'm getting this warning when publishing emails: 

  1. Style tags aren't supported by most email clients. Try using inline styles instead.

and I've been getting some weird bugs when editing & checking rendering. 

 

Thanks! 

0 Upvotes
1 Accepted solution
karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Email code editing

SOLVE

Hi @jdv123,

 

It's pretty much like this notice says: While you can edit the source code of some elements within the email editor, you might be breaking some of HubSpot's built-in compatibility and responsivity across email clients.

 

That and the fact that style tags aren't supported by most email clients. This means that when you design an email, you can't rely on <style> tags (used for defining CSS rules) to consistently style your email. Many email clients, such as Outlook or Gmail, either strip out or ignore <style> tags due to security and compatibility concerns. Instead, you should use inline styles, where you directly apply CSS styles to individual HTML elements using the style attribute.

 

Using a <style> tag (not recommended for email):

<style>
  p { color: blue; font-size: 16px; }
</style>
<p>This text is blue and 16px.</p>

 

Using inline styles (recommended for email):

<p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>

 

If you want full control over email elements or the entire email, you would code modules or templates:

https://knowledge.hubspot.com/design-manager/create-and-edit-modules

https://knowledge.hubspot.com/design-manager/build-a-custom-coded-template

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

View solution in original post

2 Replies 2
karstenkoehler
Solution
Hall of Famer | Partner
Hall of Famer | Partner

Email code editing

SOLVE

Hi @jdv123,

 

It's pretty much like this notice says: While you can edit the source code of some elements within the email editor, you might be breaking some of HubSpot's built-in compatibility and responsivity across email clients.

 

That and the fact that style tags aren't supported by most email clients. This means that when you design an email, you can't rely on <style> tags (used for defining CSS rules) to consistently style your email. Many email clients, such as Outlook or Gmail, either strip out or ignore <style> tags due to security and compatibility concerns. Instead, you should use inline styles, where you directly apply CSS styles to individual HTML elements using the style attribute.

 

Using a <style> tag (not recommended for email):

<style>
  p { color: blue; font-size: 16px; }
</style>
<p>This text is blue and 16px.</p>

 

Using inline styles (recommended for email):

<p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>

 

If you want full control over email elements or the entire email, you would code modules or templates:

https://knowledge.hubspot.com/design-manager/create-and-edit-modules

https://knowledge.hubspot.com/design-manager/build-a-custom-coded-template

 

Best regards!

Karsten Köhler
HubSpot Freelancer | RevOps & CRM Consultant | Community Hall of Famer

Beratungstermin mit Karsten vereinbaren

 

Did my post help answer your query? Help the community by marking it as a solution.

jdv123
Contributor

Email code editing

SOLVE

AH! This helped put the pieces together, thanks a ton as usual @karstenkoehler !

0 Upvotes