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.
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.