Adding links to background image in Pro grid cells without breaking layout

[TrendRaider]

Hi,

thanks to your help in this forum and your YouTube channel I build a beautiful grid with your new Pro grid feature which looks like this:

But I need the background-images to be clickable so I used a solution from this forum where you can wrap them in links. I used the following JS with your old standard columns before with great success:

jQuery(".link-trendbox").wrap("<a href='/trendbox/'></a>"); 
jQuery(".link-themenboxen").wrap("<a href='/themenboxen/'></a>"); 
jQuery(".link-geschenkbox").wrap("<a href='/produkt/geschenkbox/'></a>"); 
jQuery(".link-trendprodukte").wrap("<a href='/bestellen/'></a>"); 

But when using this with the brandnew cells it’s causing the layout to display wrong:

Any idea what to do to achieve linked cells/backgrounds without breaking the grid layout?

[ruenel]

Hello Alexander,

Thanks for writing in!

Please be advised that you cannot nest <a> tag. You already inserted a button and then when you place the JS code, it simply wrap the whole column along with the button which is using the <a> tag in another <a> tag. Please remove your JS code and use this alternative method.

• Remove the JS code.
• Swap the button with a text with the same content.
• Insert a button as the last element for each column. You will now have text, text and button element.
• In your new button element, please make it transparent and disable the text setup which means that you button should be empty and not visible to the eyes.
• In the section settings, find the “Customize” tab and insert this inline element css

$el .x-row .x-anchor-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This method should make the entire column as a link without modifying the grid column layout.

We would love to know if this has worked for you. Thank you.

[TrendRaider]

Hi,

I tried this but it’s not working. Maybe I did something wrong, I don’t know.
What now?

[christian]

Hey Alex,

Please try the solutions offered here: Links to whole column with javascript

Hope that helps.