How To Make Entire Elementor Column Clickable

I often see this question asked in the Elementor Facebook Group:

How do I make the whole column clickable, rather than just a link or button?

Here is an example of what is desired. I made a three-column section, with each section having just text in it. No buttons, no links. Just text. I want to have each column be clickable, so that no matter where you click in the column, you’ll head off to the link I specified for that column.

Clickable columns

The answer given is usually the same each time a group member asks how to do this. Someone will say to use a jQuery script, and the script is either provided, or a link to it is. However, it’s not as simple as all that. How do you include the script? Where do you put it?

I thought I’d try it myself, and I documented the process. There may be other ways to do this, but this is how I accomplished the goal.

STEP ONE

Make sure you have these two plugins installed: Code Snippets and jQuery in Posts Pages. (You can do this without using these plugins by editing a child theme, but I prefer this method so it’s the only one I’ll show here).

plugins to have

STEP TWO

Give each column that you want to make clickable a unique ID in the column’s Advanced tab. In this example, we have 3 columns, and I’ve given each an ID of #firstcol, #secondcol, and #thirdcol, respectively. In this example, I want the first column to go to elementor.com when clicked, the second to go to generatepress.com when clicked, and the third to go to wpdesignduo.com when clicked.

CSS ID for column

STEP THREE

Note that most themes already have jQuery enqueued, but GeneratePress does not, so let’s make that happen. (Skip this step if your theme already has jQuery enqueued)

In the Code Snippets admin, add the following as a new snippet.

Title of Snippet:

Add jQuery

Code:

add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
wp_enqueue_script( 'jquery' );
}

Now jQuery is enqueued and ready to go.

add snippet

STEP FOUR

Go to the page’s normal WordPress edit admin dashboard (not the Elementor editor). All these admin screens will now have a new custom field at the bottom, titled jQuery or Javascript. In this new custom field box, add the following code:


jQuery('#firstcol, #secondcol, #thirdcol').css('cursor','pointer');
jQuery('#firstcol').click(function() {window.location="https://elementor.com";});
jQuery('#secondcol').click(function() {window.location="https://generatepress.com";});
jQuery('#thirdcol').click(function() {window.location="https://wpdesignduo.com";});

where to add script

That’s it! Now go load your page and test your clickable columns!

Note: The first line of the script changes the cursor to a hand, so that users will know that the column is clickable when they hover over it. In this script, you’ll want to change #firstcol, #secondcol, and #thirdcol to whatever CSS IDs you gave your columns. You’ll also need to change the window.location URLs to wherever you want each column to link to, of course.

Another Note: Once the script is in place, you may find that clicking on the columns WITHIN the Elementor Editor will cause the columns to seem to disappear. That’s because the clicking is making the script take effect, I assume. But nothing has really disappeared. If you reload the editor, you’ll see them return, and they’ve never disappeared on the front end anyway.

Leave a Reply

Your email address will not be published. Required fields are marked *