How To Make Columns Clickable In Elementor

By James LePage
 on July 18, 2020
Last modified on January 7th, 2022

How To Make Columns Clickable In Elementor

By James LePage
 on July 18, 2020
Last modified on January 7th, 2022

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 = ""; }); < </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 “” 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.


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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
DK, that's my name
1 year ago

I'm trying the CSS solution and it works great, except for the padding area inside the column...

What to add to the CSS to make the clickable area cover the entire column include padding?

1 year ago

Super helpful. Thanks

Tim -
1 year ago

Thank you for sharing this information. Very helpful.

1 year ago

I'm also trying the CSS solution. The clickability works great, but I have the problem that the content position changes and I don't know, how to solve it.
I want the icon and the text in the center of the column.
Do you have an idea?

Bildschirmfoto 2021-01-25 um 10.36.26.png
1 year ago

I don't understand why this is not part of Elementor settings of column
Like why there is not simple option for image with overfly and icon when hovering it

1 year ago

I can't get the css solution to work for me! I have two clickable links inside a column. What's inside the column are an image (clickable), a team member name (clickable), and a description. However, I can't make the whole column clickable.

11 months ago
Reply to  Kristina

same here. CSS solution doesn't work for me

8 months ago
Reply to  Jennifer

I am just trying out and doesn't work too. Looking at the code I think the reason is because I tried with a headline with a link, and then the <a> is inside the <h2> tag instead of directly under the column <div>. This means that the css code above expands to the size of the headline element only.

Hope this helps others.

Chris K.
Chris K.
1 year ago

+100 Thank you!

2 months ago

Method 2 has an extra '<' before the closing script tag, which needs to be removed in order to get the code to work.

1 month ago

The third solution works ok but we should add "cursor:pointer;" in the class "clickable"

Also on hover it does not show the link, any ideas?

Article By
James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Your Cart is Empty