Creating a full-width CTA button for an email.

Academy Study Groups Study Group: Email Marketing
1

Hi all,

We have recently been testing the creation of custom CTA buttons to allow our subscribers to answer a question with the goal of sending them to a specific list based on their choice.

The CTAs themselves seem to be achieving what we want, but we are struggling to make them fit our style guide. We use full-width buttons for our CTAs, but cannot seem to find a way to achieve this with Hubspot.

The option for us to ‘view as full width on mobile’ doesn’t seem to work, and I can’t find a method of activating the ‘Full Width’ option that appears on standard buttons. As a workaround we have been adding padding to the edges of the buttons so that they appear full-width on mobile but, obviously, they then only occupy half the space on desktop.

Any suggestions would be appreciated. :slightly_smiling_face: Thanks!

2

Hi @RMorgan34

Thank you for reaching out.

I want to tag some of our experts here - @Anton @nikodev do you have any thoughts for @RMorgan34 on this?

Thank you!

Best

Tiphaine

3

Hi @RMorgan34,

just to get this right: You would like to use button in your email which is x-pixels wide on desktop and 100% wide on mobile, correct?

From my experience that’s gonna be quite a challenge if you use drag&drop e-mail templates. Reason for this: You don’t have access to the <head>-tag of a drag&drop e-mail where you could place some media queries. Besides that - media queries often get cut of in several clients (i.e GMail).

If you’re using HTML e-mail templates you can create your layout with mjml.io and “hublize” it.

If you’re using drag&drop I recommend to create a custom module with this code-generator here and “hublize” it.

By saying “hublize it” I mean place modules/hubl-functions into the template/custom module so you can put your content into it

Example:

This would be the plain code from the button generator

<div><!--[if mso]>
 <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="8%" stroke="f" fillcolor="#556270">
 <w:anchorlock/>
 <center>
 <![endif]-->
 <a href="http://"
style="background-color:#556270;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Show me the button!</a>
 <!--[if mso]>
 </center>
 </v:roundrect>
<![endif]--></div>

You need at least the link and Button label to be able to edit the button in your mails

a hublized version of this code would look like this:

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

<div><!--[if mso]>
 <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="8%" stroke="f" fillcolor="#556270">
 <w:anchorlock/>
 <center>
 <![endif]-->
 <a href="http:{{ href }}"
style="background-color:#556270;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;"{% if module.link_field.open_in_new_tab %} target="_blank"{% endif %}{% if module.link_field.rel %} rel="{{ module.link_field.rel }}"{% endif %}>{{ module.button_label}}</a>
 <!--[if mso]>
 </center>
 </v:roundrect>
<![endif]--></div>

Link: link (URL would work too but link is more versatile)

Button label: text(not rich-text)

Hope this helps

best,

Anton

4

Thanks Anton - this is incredibly comprehensive and we will attempt to try this out.

Rather than full-width mobile and a specific length on desktop, it was more that we wanted it to appear full width on both (like the standard drag and drop button items in Hubspot) - would there be any changes to the steps above for us to do this? If not, we know the specific dimensions we need it to be on desktop so I think your solution above would still be suitable for us and we will try and test it out. Thanks.

5

Hi @RMorgan34,

to get it full width you can change the width values to 100% - but Outlook doesn’t always understand 100% width. So keep this in mind.

Also: Since drag&drop eMails are 600px wide - the button should not exceed this width including some padding.

Example:
If you have 20px padding left and right the max. width of the button should be 560px (600px - 2x20px)

best,

Anton

6

Hey Anton

How can I center the CTA in my email?