Template Creator | How to Make an Image a Clickable Link | Marketing Suite

Template Creator | How to Make an Image a Clickable Link | Marketing Suite

A Single Image Element can be transformed into a clickable link. To this image you can add any URL you like and when your customer clicks on the image they will be taken to the website corresponding to that URL. 

I am going to demonstrate how to make a Single Image Element a clickable link for your My Astro Webpage. You are also able to add your My Astro Webpage to your template as a Flyer Link Button, this method I am about to show you is a little more advanced and allows for greater customization on your part since you can directly control what image is clicked on. 

You can add any URL you want, but for this example I am going to use the URL associated with the Offer section of My Astro Webpage. This URL can be located by going to your Actions menu and selecting My Astro Webpage. Then copy the URL to your clipboard. You may want to paste it into a Word Doc or a StickyNote for safekeeping while you are editing your Template. 
The first URL listed under Astro Page Link will take your customers to your Active Astro Offers (if you are not enrolled in any Offers it will take them to your Frequent Buyer Programs), the second URL under Pet Adoption Link will take them to your Adoption Programs and will provide extra info about Sharing the Love.



Warning: Do NOT use the exact URL that I show in this demo. If you do it will not take your customers to your My Astro Webpage, it will take them to our demo account's My Astro Webpage - and that doesn't help anyone. Your page's URL is unique and you must grab it from your Actions > My Astro Web Page.

Start by going to your Marketing Menu and selecting Templates. From here you can either start a NEW Template, EDIT an existing one, or Browse an Astro Template and Import it into your Editor. For more info on the basics of building or editing a template check out these articles

Adding a Single Image Element to a Template

This is a Single Image Element:



You can add a new Single Image Element to a Template by double clicking on the grey button pertaining to it, or you can click and drag that button onto your template.

If you are editing an existing Astro Template then there will most likely already be an image attached to the Single Image Element. In this case you can choose to keep that image and add an additional Single Image Element to turn into a link (that would be the best idea I think), or you can edit that existing image and add your link there- just make sure there is something that indicates to them that they should click on the image.

Changing the Image or Adding a New Image

Click on the Image Element located on your Template (where it says Click to Change) this will take you to the Image Libraries.



We have added a category to the Astro Library (red) that now contains Banner Images that you can use to make your own Offers button. You can also choose to make and upload your own image to the My Library (yellow). In this example we are going to grab one of the pre-made images in the Astro Library.

Click on the Astro Library Button, then use the Image Filters drop-down menu and select Buttons and Banners. Click the Add Filter button to apply the filter to the Library. Then you will see the filter applied up above the drop-down menu. (To remove a filter you can click the X on the filter itself, or click Remove All Filters.)



Click on one of the images in order to choose it. You will then be taken back to this screen where you can make any size adjustments (100%, 75% 50%, 25%) that you wish or apply some padding (this is white space surrounding the image.) Click Save when you are happy.

Personally, I usually leave the banners at 100% and then add the padding while I am editing the Element- more on that next.



Adding the URL to the Image

To add the URL to the image you will need to click on the grey gear icon located at the top right hand corner of the element. 



This will take you to the following screen where you can do things like adjust the Alignment (Right, Left, Center) and add some Padding (blank space surrounding the image) or change the Background color (if you want the space around the image to be a different color than white for instance). (FYI - Foreground doesn't actually change anything on Image Elements, it is only able to change the Text Color on Text Elements)

Here is where you can also paste your URL which makes this image a clickable link for your customers!


All you need to do is paste or type a URL link into the URL field provided. In the example above I added a My Astro Web Page link that corresponds to my Astro Demo Account (I blurred it out since my link will be different from your link, refer to the beginning of this article if you need help locating your link). 

I always recommend clicking the blue Send Preview Button when you are done editing your Template. This will send a preview of your Template to your email address (or any email address you choose) so that you can test all the links. 

If you are curious. Here is the preview of the demo template I just made. It only contains the button, so I personally wouldn't send this to my customers, but it will still give you a good idea of how this Image Elements with URL Links will function.