Need Help Making Button Module Editable in Email Editor

[LK8]

Hi there,

I'm currently facing an issue with a custom button module in the email editor. While the button appears correctly in the Design Manager and functions well in previews, it looks like it removes the styling when you drop the module into the email.

What I've Tried:

1. I've created a simple button module with editable fields for the text and the link using standard HTML and inline CSS.
2. I've ensured that the fields are set to editable in the module’s settings.

Would anybody know how to fix this?

Here's the script:

{# Module styles #}

{% require_css %}
<style>
.button-wrapper {
text-align: {{ module.styles.alignment_field }};
}

.button {
background-color: {{ module.styles.background_color.color }};
border: {{ module.styles.border_field }};
border-radius: {{ module.styles.radius }}px;
color: {{ module.styles.font_field.color }};
font-family: {{ module.styles.font_field.font }};
font-size: {{ module.styles.font_field.size }}{{ module.styles.font_field.size_unit }};
{{ module.styles.font_field.style }};
text-align: {{ module.styles.textalignment_field }};
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
</style>
{% end_require_css %}

{% set href = module.button_link.url.href %}
{% if module.button_link.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
{% set rel = [] %}
{% if module.button_link.no_follow %}
{% do rel.append("nofollow") %}
{% endif %}
{% if module.button_link.open_in_new_tab %}
{% do rel.append("noopener") %}
{% endif %}

{# Button #}

<div class="button-wrapper">
<a href="{% if href and href|trim %}{{ href|escape_url }}{% else %}#{% endif %}"
id="hs-button" {# Adding ID for HubSpot recognition #}
class="button"
{% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
{% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
>
{{ module.button_text }}
</a>
</div>

[CSteinbach · Accepted solution]

I recently ran into an extremely similar issue involving CTA buttons on landing pages. I checked and checked my css to find nothing amiss... however, the LP editor was automatically applying a H2 tag onto my button module (thus making it all caps instead of sentance case). Check to see if there's a preset style on the module?

[LK8]

Thanks so much @CSteinbach for your suggestion about checking for preset styles on the module. It got me to really look at the HTML code and updated the script and it worked!

[briannester]

Hey Liz,

So, if I'm understnaidng this correctly, you are setting defualt values in the style fields in the design manager, but once you drop the module into an email it doens't render those defualts?

[LK8]

Thank you so much for your feedback @briannester ! I'm happy to say I found a solution 🙂

Design Manager Preview & Drag & Drop Editor Issue
Using inline styles and a table-based layout worked, also looking at the hubspot modules that were working and using that as a guide helped. It also wasn't looking right when sending test emails to outlook but updating the script like this made it appear correct  and it's still looking fine across the other email clients.

The only other issue I had was that the text alignment wasn't functioning in the email drag & drop editor but I've taken this out as we're unlikely going to use it.

I've updated the script to this...

{% require_css %}
<style>
.button-wrapper {
text-align: center;
background-color: {{ module.background_colour.color }};
}
</style>
{% end_require_css %}

{% set font_family = module.styles.font_field.font|escape_attr %}
{% set font_style = module.styles.font_field.style|escape_attr %}
{% set font_color = module.styles.font_field.color|escape_attr %}
{% set font_size = module.styles.font_field.size|escape_attr %}
{% set font_size_unit = module.styles.font_field.size_unit|escape_attr %}
{% set href = module.button_link.url.href %}
{% if module.button_link.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
{% set rel = [] %}
{% if module.button_link.no_follow %}
{% do rel.append("nofollow") %}
{% endif %}
{% if module.button_link.open_in_new_tab %}
{% do rel.append("noopener") %}
{% endif %}

<div class="button-wrapper" style="background-color: {{ module.background_colour.color }};">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin: auto;">
<tr>
<td align="center" valign="middle" bgcolor="{{ module.styles.background_color.color }}" style="border-collapse:collapse; mso-line-height-rule:exactly; font-family: {{ font_family }}; font-size: {{ font_size }}{{ font_size_unit }}; color: {{ font_color }}; word-break:break-word; border-radius: {{ module.styles.radius }}px; cursor:auto; background-color: {{ module.styles.background_color.color }}; padding:10px 20px;">
<a href="{% if href and href|trim %}{{ href|escape_url }}{% else %}#{% endif %}"
id="hs-button"
class="button"
{% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
{% if rel %}rel="{{ rel|join(' ') }}"{% endif %}
style="color: {{ font_color }}; font-size: {{ font_size }}{{ font_size_unit }}; font-family: {{ font_family }}; {{ font_style }}; text-transform: none; text-decoration: none; display: block; mso-line-height-rule: exactly; padding: 10px 20px; background-color: {{ module.styles.background_color.color }}; border-radius: {{ module.styles.radius }}px;">
<strong style="color: {{ font_color }}; font-weight: bold; text-decoration: none; font-style: normal;">{{ module.button_text }}</strong>
</a>
</td>
</tr>
</table>
</div>