How to use several links in one image

You've probably seen emails that have a single image with various "hotspots" that link to different pages. This post will explain how to achieve a similar result with Remarkety's responsive template editor.

tl;dr - Split your large image into equally sized sub-images and create a grid of adjacent images, each linking to a different page.

Note: The editor does not support "image maps" due to lack of universal support, issues with resizing and autoscaling, and other factors that would make this feature do more harm than good. 

Split the image into equal-width parts

Here's an example. Say we have a single image, and we want to add two different links to it ("https://www.store.com/teal.html" and "https://www.store.com/pink.html"). Here's the image we received from our designer (actually, from Moose Photos from Pexels):

We need to ask our designed to split the image into two, each of them having exactly the same width (this is important). You may not need your designer for this, there are some free online tools available.

So we now have 2 same-width images:

and:

If we have a more complex image such as this one (Photo by Jeffrey Czum from Pexels):

We can split it into rows with different column counts, as long as the images (columns) in each row have the same width, ie:

Create the grid in the template editor

In your template, create a new row by:

1. Clicking the "Rows" tab

2. Choosing "Empty" from the row type drop-down

3. Choosing the appropriate grid for your new row (evenly-spaced 2, 3 or 4 item row) and dragging it into the template.

Add your images

Select the "Content" tab, and drag an "Image" block into each column. Click "Browse" on each block to upload and use the correct image.

After adding the images, set the different URL for each image by clicking on it, and setting the URL in the "Action" section:

Modify the row settings

Now take a moment and think about how you want these images to show up on mobile. In this specific example, you may actually want the images to "stack" on top of each other on mobile, since it's a very symmetric photo. However in the house example, you definitely do not want the different sections changing places.

The way to control this, is using the "Do not stack on mobile" setting. Click on the image row, somewhere in the area without content to enable the "Row Properties" tab, and:

1. Make sure the "Do not stack on mobile" is activated, and

2. Make sure that the "left" and "right" padding is 0, to avoid whitespace between your images. Note: if your image contains multiple rows, you probably want to set the Top and Right padding to 0 as well.

That's it, you're all set! You have a completely compliant, mobile-friendly template with multiple links on a single (virtual) image.