How to create a clickable block

[Peter789]

Hello!

I started making a new product grid

[ruenel]

Hello Katarina,

Thanks for reaching us. What you have in mind may be possible by inserting a button element at the very bottom of each of the columns and then add a custom my-button class to the buttons. Make sure that your button has a transparent background, borders, and text color. With the class, you may use this custom CSS:

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

The button will display on top in the column invisible which will make the whole column clickable. You can also easily edit the button link too. If you have a hard time doing this, kindly provide us access to the site so we can make an example for you.

Best Regards.

[Peter789]

Hello Ruenel,

Thank you for your reply,

I tried it and I am not able to figure it out to work, the button doesn’t change in size and not clickable… I don’t know what I did.

Can you please log in to my website (I will provide all the info bellow) and help me out? I would appreciate it a lot!

[ruenel]

Hi Katarina,

You can do the following steps:

1.) Find the click the column container.

2.) Insert a Button element at the bottom

3.) You must insert my-column class in the column container since you have a very complicated or nested columns.

4.) In your button settings, make sure that the width and height of your button is 100%. The background color and text colors are transparent.

5.)Still in the button settings, find the “Customize” tab an insert my-button class

6.) And lastly, in the Custom CSS of the page, insert the following code:

.my-column {
  position: relative;
}

.my-button {
  position: absolute;
  z-index: 10;
  top: 0;
}

• The position is absolute to the column width and height.
• It starts at the top left corner of the column container.
• The z-index is 10 which is on top of all other elements inside the column.

For your reference, kindly check out the following CSS property links:

• https://www.w3schools.com/cssref/pr_class_position.asp
• https://www.w3schools.com/cssref/pr_pos_top.asp
• https://www.w3schools.com/cssref/pr_pos_left.asp
• https://www.w3schools.com/cssref/pr_pos_z-index.asp

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

[Peter789]

Hello ruenel!

Thank you so much for the help! YOU ARE LEGEND

Much love to Themeco support team!!

[tristup]

Hi Katarina,

We are really glad to help you.

Thanks

[Peter789]

Hello Ruenel!

I new problem appeared, I want to make my shop page like free downloads page.

Please watch the video bellow:

[Peter789]

I also noticed that at the home the clickable button box is not working

[friech]

Hi Katarina,

Where did you place Ruenel’s provided CSS above? I don’t see it anywhere on your page, please add it on Page > CSS.

Same on your shop page, please follow Ruenel’s instruction above thoroughly so the transparent button will be properly layered above the Column.

Thanks,

[Peter789]

You are genius! Thanks It works finally

Much love to themeco support team

Kind regards,
Katarina

[marc_a]

Hi Katarina,

I’ts our pleasure to help you.

Thank you.