isotropic-2022
Share
Blog
Search
Menu

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 = "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.

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
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.
Subscribe
Notify of
guest
15 Comments
Oldest
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?

Nico
Nico
1 year ago

Super helpful. Thanks

Tim - Timdehoog.nl
1 year ago

Thank you for sharing this information. Very helpful.

Jakob
Jakob
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
Rubb
Rubb
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

Kristina
Kristina
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.

Jennifer
Jennifer
1 year ago
Reply to  Kristina

same here. CSS solution doesn't work for me

K K
K K
1 year 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!

Evan
Evan
6 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.

Pedro
Pedro
5 months 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?

Yurii
Yurii
26 days ago
Reply to  Pedro

Thank you! This work for me

BCAA
BCAA
3 months ago

How can we make the full div with the hover effect? So the icon, text and url.

iain
iain
3 months ago

I used method 2 but could not get the click to work on mobile. It turned out that a trailing slash (/) after the URL will break things.

Yurii
Yurii
26 days ago

.clickable {
position: relative;
cursor:pointer;
}

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

I managed to use css with the changes provided here by the users.
+I added cursor:pointer; in css style.
+I added a whole link above my code

<a href="https://yoursite.com"</a>

Last edited 26 days ago by Yurii
Article By
James LePage
Contributors/Editors
notloggedin
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.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram