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. 

This article will demonstrate how to make a Single Image Element a clickable link for your My Astro Webpage. You can also add your My Astro Webpage to your template as a Flyer Link Button. The method shown in this article is a little more advanced but allows for more customization since you can directly control what image is clicked on. 

Where to Find your My Astro Web Page URL Links

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. 
Info
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
Warning: Do NOT use the exact URL that I show in this demo.  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 most likely there is already 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%) or apply some padding (white space surrounding the image.) Click Save when you are happy.

Idea
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 only changes 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 Refer to the beginning of this article if you need help locating your My Astro Web Page link

We recommend always clicking the blue Send Preview Button when you are done editing your Template. This will send a preview of your Template to an email of your choice. You can then see the email exactly how it will send, proofread, and test any links. 

Here is the preview of the demo template from above. It contains only the banner button, so I wouldn't send this to my customers, but it demonstrates the functionality of the button.