Make whole column a link X theme

Support
#1

Good morning,

I have a set of 3 columns which I want to have a background image and text on top of each:

I would like it so if you click on the text or anywhere in the background it would take you to a new page. Whats the best way to achieve this? Making the text a link is easy enough but what about the background??

Thank you,
Jason

#2

Hello Jason,

Thanks for writing in!

To make the column as a link, please check out this thread:

Hope this helps. Please let us know how it goes.

#3

Thank you for this - I think because there is a lot of columns (which are also rule driven) I feel your method could be prone to human error… However a thought:

I am using the element ‘gap’ a link? as I am using one which pushes the text down and thus takes up most of the space

Thank you!
Jason

#4

Hello @hyperdrive_boom,

The suggested solution in the thread is specific for the site. It will not work for you out of the box and must insert the correct ID and links in the codes to make it work.

A gap element does not have any link to it. It may possible to use a button element instead. You can insert the button element at the very bottom of each of the columns and then add a custom my-button class to the buttons. With the class, you may use this custom css:

.my-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

But this method will no longer allow you to select or highlight the texts inside the columns.

Hope this make sense.

#5

Thank you for this - in the end I created a raw element with a div inside with a link wrapped around a class.

Then the class I can change the padding according to the size of the screen

Thank you!

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.