Make Column Clickable Elementor Pro + Sections + NO PLUGIN

kaycinho

Make Column Clickable Elementor Pro + Sections + NO PLUGIN

June 17, 2021
, 5:33 pm
, Tutorials, Web design, Web development

Make columns and sections clickable in Elementor Pro (NO PLUGIN)

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

hello, I’m Kaycinho, The Digital Alchemist, and today I’m going to teach you how to create make any column or section clickable within Elementor Pro, WITHOUT additional PLUGINS. Let’s give credit where it’s due: this tutorial is based on the code provided by IDEAS & PIXELS.

Make columns and sections clickable in Elementor Pro

This tutorial is video based of course, but in case you need some time stamps :

0:00 – Make Columns & Section Clickable Elementor Pro (No Plugin)
0:30 – What we’re going to build
1:18 – Credits
1:28 – Pre-requisites
2:28 – Adding the JS Code
3:10 – Create your page
3:56 – Adding the CSS code
4:26 – Where to add the links?
5:17 – Making columns clickable
7:05 – Important! Known issue and workaround
8:18 – Make a section clickable

JS Code

Step 1 – Elementor Clickable

In Wp > Elementor > Custom Code -> create a new document with the following code:

				
					<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	jQuery(document).ready(function() { jQuery("body").on("click", ".click-child", function() { var href = jQuery(this).find("a").attr('href'); window.location = href; }); });
</script>

Step 2 – CSS

While editing any page with Elementor Pro, click on the hamburger icon in the top left of the window, the click on Site Settings > Custom Css and paste the following code:

				
					.pointer {cursor: pointer;}

Step 3 – Adding the css classes

Edit the column or section you wish to make clickable.
Then go to Advanced > Css classes and paste the code below

				
					click-child pointer

Important!

Make sure there is one clickable element in the column or section you wish to make clickable. Bear in mind that if there are several clickable elements (like buttons, linked titles, etc.): only the first link will be taken into account.

Your turn!

So, I hope you got value out of this tutorial as you will now be able to make any section or column clickable within Elementor Pro, without any additional plugins.

If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you a thing!.

Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.

So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!