Template List poster2 link read-more

Hi, I would like a little help, I always like to learn, I do it only for passion and to help some friends.
example in this page with filter search for “Dante” (which would be the site where I do a thousand tests): DIARIO | Gianluca.Online

  • The reference design I used is PROJECT24-Demo3 by Gary @Webdeersign

  • Template List: in the Coder (Source), which is under the Coder ribbon, I have inserted the link {{readmore.link}} in Image Fit (Source)

then clicking the image you get to the Detail, everything ok

unfortunately in the part where the ribbon is positioned the link does not work because the ribbon is rightly positioned above.

I tried to insert the read-more link on the ribbon, I tried different ways, editing and deleting, unfortunately I can’t cover the part of the ribbon with the link to get to Detail.

The Ribbon is very useful and I don’t want to delete it, but I would like the whole part of the image (including the upper right part where the ribbon resides) to take me to Detail.

Do you have any idea how I can fix or give a {{readmore.link}} link to the ribbon as well?

Thank you.

fixed with background-image

2 Likes

Glad you figured this out. There are quite a few ways to create links in a grid like this.

Another cool thing to do is to provide a mouse over hover effect on the background image that can show the user that there is a link. E.g you can add one of the many in built Source effects by adding darken on hover effect , s-dark to the class of the Grid Item. Don’t forget to add the Utillity Classes Source stack if you haven’t already.

4 Likes

Small update:

following the tutorial Hide and reveal | Shaking the Habitual Knowledge Base
now it’s perfect

  • on mouseover, the background image darkens
  • the Coder ribbon remains clearly visible even when hovering over
  • above the dark background a button is displayed to make it clear that you can enter details
  • the whole picture brings in details

it’s perfect.

2 Likes