How and why put hyperlinks on your images?

Having a clickable image in a tyl allows you to boost navigation between your pages by inviting people to discover more content. Here is how to insert a hyperlink on an image and achieve the same result as the one obtained in one of our pages.

Click on the image below to see the page we're talking about 😉

img tyls

Insert an hyperlink on an image

  1. Insert your image into your page.

  2. Click on the image.

  3. Insert the link of the page that should open after clicking on the image.

  4. You can also insert the title / alt attributes, as explained in this article.

  5. Click on "Save".

img tyls

Insert a title on an image

To obtain the image block illustrated above, 3 steps were necessary:

  1. Inserting a title on each image

    👉 To insert a title or simply rework an image, we often use Canva.
    Here, we selected a "Facebook post" format and inserted each image in an empty canvas. A black filter with 40% opacity was added to each image to highlight the white titles.
     
  2. Creating 6 pages related to our 6 images

    👉 You won't insert hyperlinks on your images if you don't have links ... which means the pages must already exist! Therefore, we started by creating 6 pages related to our images so that we could insert an hyperlink on each image.

  3. Choosing the right section layout in tyl.io

    👉 When creating our page, we created 2 sections of 3 images. After inserting the hyperlinks on our images, we went to "Design" to select a section layout displaying 3 images side by side. Choosing another section layout could also work to display clickable images. It is your choice ... ;-)
     

See below a short video summary of this last step ...