Best SEO and PPC Tool - Extended Free Trial  GO!

How to Make a Column a Link in Elementor

Last modified: June 17, 2022

Cloudways

In this article, we explain how to make a column a link in Elementor. This is not possible in the native builder. This is a major missing part from the WordPress program, but it is possible to do when you have Elementor and can be a great asset when you’re using features from the Element Addon pack.

There are numerous reasons why you might want to have clickable columns within your website. For instance, a column might act as a call to action, and making the entire column clickable will increase accessibility and improve the click-through rate on your website.

It can also improve engagement on a mobile device as a single line of text is harder for them to click through.

There are three ways that you can complete this task, so let’s have a look at all those elements.

Show More

* This button will show the rest of the post and open up an offer from a vendor

Option 1: Plugin

The first option is to add a method that will allow the setting to be optional in the Elementor editor. This is quick and simple, and you can benefit from this if you’re not technically minded. All you need to do is to find the plugin, Make Column Clickable Elementor.

The plugin has lots of installations and a great rating.

What you need to do is install the plugin from the WordPress plugin directory. This is easily done by downloading it to your computer or directly into your WordPress website. You can then activate the plugin.

This will add a link input field on the column settings within the Elementor editor.

Option 2: JavaScript

Another option is to add some JavaScript to your website that will make a column or section clickable within Elementor. The first thing that you would need to do here is to drag and drop an HTML element onto the page that you want to add it to.

Then inside the code element, you need to add this JavaScript option.

<script> document.querySelector("#XXXXXXXXXXX").addEventListener("click", function() {
window.location.href = "https://example.com/blog";
});
</script>

Now you need to customize the code. The first thing that you will need to do is to change the |CSS identifier to match the identifier of the section that you would like to make clickable. This can work for images, videos and more. Replace the XXXXXXXXX section with the unique ID of your section.

You also need to specify exactly where you would like the link to take the user. This is changing the example.com/blog aspect of the coding.

Finally, you can test the code on your page. Ensure that it works exactly how you would like it to work.

Option 3: CSS

Another option is to use CSS to make columns, sections and other elements on your website clickable. For this strategy to work, you need to ensure that the section that you want to be clickable to already be set this way. This means that it is using .

This is the CSS that you will need.

.clickable {
position: relative;
}

.clickable a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

This can be added to your custom CSS option.

Final Word: How to Make a Column a Link in Elementor

Above are the steps on how to make a column a link in Elementor. It is really simple to do and there are three great options for you to try. Each can be completed by someone with little technical knowledge.

Recap:
Save 4 Later
Email liked links to yourself