For a certain reason, you might want to add a link to a column in Elementor. For instance, you are designing a call-to-action on a page and want all elements on the column associated with the call-to-action point to the same link. Instead of adding the links to each element one by one, it would a great idea to add the link to the column. Unfortunately, Elementor has no default option to add a link to a column (or section). Link can only be added to a widget.
If you want to add a link to a column in Elementor, there are at least two ways to do so. First, you can use an Add-on. Second, you can use custom CSS. This article will show you the second method. If you prefer to use an add-on, one of the add-ons that you can use is Happy Addons. The add-on comes with a wrapper link feature to allow you to add a link to both column and section.
Adding a Link to a Column in Elementor without Add-on
To be able to apply this method, you need to use Elementor Pro as the custom CSS feature is only available on the pro version. Once you are ready, select a column where you want to add the column to and edit it.

Go to the Advanced tab on the settings panel and add the CSS class clickable
to the CSS Classes field under the Advanced settings block.

Next, open the Custom CSS block and paste the following CSS snippet.

The CSS snippet.
.clickable { position: relative; } .clickable a:after { content: ""; display: block !IMPORTANT; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
In order to make the CSS above work, you need to have at least one clickable widget within the column. You can use any widget. From Image, Text, Heading, Button, to HTML widget. If you want to use a Heading widget, for instance, you can simply add the link to the Link field.

The CSS above works by taking the available link on the column and creating a clickable overlay over the entire column.
7 thoughts on “How to Add a Link to a Column in Elementor (without Add-on)”
I’ve tried it and it doesn’t work
This doesn’t work at all
Looks like we’re all having the same problem. This tutorial doesn’t work…
I added an icon box element inside the column, then added this custom CSS. I confirm that this worked. Thank you for the tutorial.
Yup, not working
I can confirm that this does not work (!)
It’s not working. I did the custom CSS and added the link to a text within the column. For some reason, the text is the only clickable element within the column. Any suggestions? Were any changes that needed to be made to the code after adding the link to a component?