Last updated: June 12, 2024
Available with any of the following subscriptions, except where noted:
Marketing Hub
Professional
,
Enterprise
|
Content Hub
Professional
,
Enterprise
|
| Legacy Marketing Hub Basic |
Adjust the size of your CTA (legacy) using the built-in sizing options and custom CSS. When uploading your image for an image CTA, you may want to take into account retina optimization.
To further customize your CTA, learn how to add custom styles to your CTA (legacy) with CSS. If you're adding your CTA to an email or template, learn how to center your CTA (legacy).
Edit your CTA (legacy) size
You can manually adjust the size of your CTA or use custom CSS to automatically fill width of the CTA's container or module. If you are embedding an i mage CTA on your non-HubSpot site , you may need to apply additional CSS declarations (such as width: 100%;) within your stylesheet to make the image CTA responsive.To edit the size of your button CTA:
- In your HubSpot account, navigate to Marketing > CTAs.
- In the top left, click the dropdown menu and select CTAs (Legacy).
- Hover over a CTA and click the Actions > Edit.
- In the slide-in panel, click Advanced options.
- To manually resize your custom CTA:
- Clear the Fit to text checkbox. This will remove the automatic resizing applied.
- In the Button padding section, enter your size values for the button width and button height fields.
- Click Next >.
- Click Save. Then, click Finish.
- To have your custom CTA fill the entire width of its container or module:
- Clear the Size automatically checkbox.
- In the Custom CSS field, enter your custom CSS.
- Set the width to width: 100%;
- Click Next >.
- Click Save. Then, click Finish.
What is retina optimization?
Retina optimization makes your CTA's image more crisp when viewed on your site pages and in emails if your recipients view the CTA in modern versions of Apple Mail and iOS mail; this is not supported by Outlook or webmail services like Gmail.
Retina optimization is supported when you upload an image that is at least two times the size necessary for the CTA, similarly to how retina support works for all images across the internet. Please also note the following:
- If you're creating a CTA that will be 400px by 100px, the uploaded image would need to be 800px by 200px to support an @2x pixel density display.
- CTAs support adding up to a 4x version. For example, if you're creating a CTA that will be 400px by 100px, you can uploading a 1600px by 400px image.
- The CTA will automatically be rendered on your website with a srcset attribute serving the 1x, 2x, 3x and 4x version where available.
- If the image is uploaded at the size the CTA will be rendered at, it will not have retina support. For example, if a 400px by 100px image is uploaded for a 400px by 100px CTA
