In this brief tutorial we're going to discuss how to make columns clickable in Elementor. In the native builder, there's no option to make columns or sections clickable. In our opinion, this is a major feature that's missing, because it's something widely used when creating websites from scratch. You can easily wrap a <div> in an <a>, making it clickable, as well as all of the content inside.

Having clickable columns could be useful in numerous situations. For example, if one of your columns is acting as a call to action, making the entire thing a link may increase clickthrough rates. If it contains a bunch of text that would be linked to one page, why not make the whole column clickable?

on a mobile site, having a clickable column rather than a link could make it more usable. as you can see, there are many reasons why one would want clickable columns on an Elementor website.

Let's talk about three ways that you can use to implement clickable columns or sections on your element or website. The first way uses a plugin which is lightweight and adds a setting directly within the Elementor editor. The 2nd way uses CSS, meaning that you don't need to install a plugin, but there's no native functionality. The 3rd way incorporates JavaScript allowing a bit more flexibility. All of these methods have their pros and cons which we will discuss below.

Method 1: Plugin That Helps You Make Clickable Columns In Elementor

We really like this method because it adds a setting directly into the Elementor editor. This makes it quick and easy to add linkable columns, and gives you an interface that you are already familiar with. The plugin is called (you guessed it) “Make Column Clickable Elementor”. It has a five star rating and over 30,000 installations. It looks like a lot of people are looking to add this functionality to their Elementor website (we use it ourselves in client sites)!

First, install the plugin from the WordPress plugin repository. You can do this by downloading it onto your computer, or simply searching for it in the plugins screen and installing it that way.

Once the plugin is installed and activated, there's nothing else to change period it automatically adds a link input field on the column settings within the Elementor editor.

You can simply input your link, though there are other advanced features that come with the plug-in. You could dynamically change the link dependent on User data, page data, advanced custom fields, and more. By clicking the settings icon, you can set the link to open in a new tab, add attributes, and more.

If you're looking for a dead simple way to make columns clickable in Elementor, using this plugin Is your best bet. Not only does it instantly add this directly into the editor, but there are advanced features as well.

Method 2: JS That Doesn’t Require A Plugin

This is an easy method that you can use to make a column or section clickable in Elementor. First, drag and drop an HTML element onto the page. Then, paste this code into that element:

<script> document.querySelector("#YOURIDHERE").addEventListener("click", function() {
window.location.href = "https://isotropic.co/blog";
}); <
</script>Code language: HTML, XML (xml)

Finally, customize the code. first, change the CSS identifier to match the Identifier of whatever section you want to make clickable. For example, if we want to make a specific column clickable, go to the Elementor “advanced settings” of that column and specify a unique ID. then, add that ID to the JavaScript, replacing “#YOURIDHERE”.

Then, specify where you want the link to lead (when your user clicks on the clickable column, what website/page will it open?). Do this by replacing the “https://isotropic.co/blog” link with your own.

Finally, test it out on the front end and if everything is working your Elementor column or section will now be clickable.

Method 3: CSS That Doesn’t Require A Plugin

You can also use CSS to make columns, sections, and any other element in your website clickable. To get this to work, your column or section will need to already contain a clickable link. You can do this by adding it via a HTML element, text element, or anything else that uses <a>.

This CSS will then take that link, and create a clickable overlay over the entire section/column.

.clickable {
position: relative;
}

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

To apply this CSS to specific columns or sections, go to advanced settings and set the class to be “clickable”.

You can choose to place this CSS in multiple parts of your WordPress website. If you only wanted to apply to that specific Elementor page, put it in the CSS for the page, under advanced settings. If you want to apply it to your entire website, you can choose to do this by adding it to the core WordPress “customizer” or adding it to the theme stylesheet.

Conclusion

This article should have showed you three ways that you can make a column clickable in any Elementor website. For many, this is a necessary feature that will drastically increase your user experience. For example, if you are making a call to action, or have a bunch of links leading to the same place, making the entire element within your page clickable is a great idea.

If you have any questions about how to implement this code (or the plugin mentioned above) on your Elementor website, reach out in the comments.