How to Add a CTA Button to an Image
How to Add a CTA Button to an Image
Prompt clicks with buttons in images
Sometimes a CTA button isn't enough by itself. It needs an image to attract attention. Online retailers like REI do a great job combining buttons with stunning images that encourage people to click and learn more. You can create a similar effect in your email templates, too.
Here's how. There are two options: use a Banner block or a Button block.
- FYI If I had to pick one, I'd go with the Banner block. It's more reliable. The Button block option does not always look good on mobile devices or some email clients like Outlook.
Use the Banner block
With this block, place a small image (a faux button) on a larger background image and then add a link to the block.
Open a template and place a Banner block on the canvas. Click the block one time to make it the active layer, go to the side panel, and upload an image.
- tinyEmail loads the background image into the block.
Add a second image
Now add a smaller image that looks like a button. Click the Banner block once, go to the side panel, and scroll down to the Additional picture heading. Switch on the toggle and upload an image.
Placing an image
tinyEmail places the second image on the background image. Drag the second image to a preferred location. The block automatically displays suggested locations.
- Click and drag to resize the image. The block resizes the suggested location rectangles.
Add a link
Now add a link to the Banner block. Click the block once, go to the side panel, and scroll down to the Link heading. Make sure Site is selected. Paste the URL into the field.
Preview and test
Create a campaign with this template and send a test message. In the screenshot below, the mouse changes to a finger. Ta-da! The entire image is a link.
Use the Button block
Here's another option. Place a Button block inside a structure and then add a background image. Add a link to the button; the background image does not get a link.
Not so fast
- Using a background image is not always a good option. Some email clients, like Outlook, may not display background images. In addition, the background image may not be responsive on all mobile devices. The result might be a cropped image.
If you want to give it a try ...
Open a template and place a Button block inside a structure. Click the structure to make it the active layer. Go to the side panel, and switch on the Background Image toggle.
Upload an image from your device. tinyEmail fills the container with the image, but the container height does not change. To correct that layout problem, add Spacer blocks.
Use Spacers
Add Spacers to customize the background image display and position the Button. In this example, I place a Spacer block immediately before and after the Button.
- Depending on the size of your background image, you might not need two Spacers.
Next, customize the height of each Spacer block. Click a block to make it the active layer. Go to the side panel and switch on the Dynamic spacer toggle.
Go back to the Spacer block and adjust its height by pulling the handle up and down.
After adjusting the button position, you might be left with a distorted background image (as shown in the screenshot below). That's an easy fix. Open the Image editor. There's a full suite of tools, including Resize and Crop.
The result is a full-width image and a properly placed button. You may need to tweak the height of each Spacer block before you find the right button position.
Add a link
To add a link to the button, click the Button block, and on the side panel, paste a URL into the Site field.
Preview and test
Create a campaign with this template and send a test message.
Related Articles
How to add text to an image
How to add text to an image Capture the reader's attention I'll show you three ways to place text on an image. Each text overlay option has pros and cons, so choose the one that meets your business requirements. I cover: Banner block Image block Text ...How to Add Video to an Email Template
How to Add Video to an Email Template Increase reader engament There are so many reasons to inject video into your email marketing campaign. Tell a story. Show your brand. Demonstrate social proof. Get clicks. Yes, research suggests that email ...How to Add Accordions to Your Emails
How to Add Accordions to Your Emails Inject interactive content Ready to add a new level of interactivity to your email messages? If yes, then add AMP to your design toolkit. AMP (Accelerated Mobile Page) lets you add interactive components to email ...Add an Unsubscribe Link
Add an Unsubscribe Link Avoid spam problems with a custom link Over time, subscribers leave the list. That's just a part of the business we're in. It's also a good thing because we want to focus resources on solid prospects or folks who love what we ...Add a JSON Web Feed to a Campaign
Add a JSON Web Feed to a Campaign Use the web to inject dynamic content into your messages Here's an exciting feature that offers clever marketers all sorts of product promotion possibilities. You can inject custom content from an outside web feed ...