How to make a whole section or container into a clickable link

Support
#1

Ever wanted to make an entire section or column or bar or container into a link? After searching the forums for how to do this, the go-to response from themeco support seems to be that it is not in the scope of their support and would require custom development. I did a little more digging and found a VERY simple solution:

Add this to your page or header JS:

jQuery("#your-ID-1").wrap("<a href='http://www.yourlinkhere.com'></a>");

Then apply that ID to your section or column or bar or container.

No custom development needed.
I hope someone finds this useful when they’re searching like I did.
Themeco support, I hope that you can also offer this to folks who are asking about this in the future.

1 Like
#2

Hello @threeoten,

Thanks for posting in!

Your JS code might likely work with sections and rows only. Please do not add it in a column because it will just break the column layouts.

You might also be interested in this thread:

#3

Ah, good to know. That was an assumption on my part, I never actually tried it with columns. But it worked great on a Bar element in my header!

#4

It’s true that this code may break your columns but I just used it on 4 equal columns in 1 row and was able to correct the broken layout by finding the class for each column and adding width: 100% to the page’s CSS. So for example,

.e9-18.x-col {width: 100%;}
.e9-21.x-col {width: 100%;}
.e9-24.x-col {width: 100%;}
.e9-27.x-col {width: 100%;}

Columns size correctly at each break point.

#5

Hi @Tech4Eleven,

Instead of dynamically generated classes, you should use the following code in the Element CSS section of each column:

$el {width: 100%;}

Because those classes can change anytime when the layout is slightly changed and your CSS will break. Cheers!

#6

ah. thanks!

#7

You are most welcome!

#8

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