How to Make a Column a Link in Elementor

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.

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.

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.