Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Make Elementor Columns Clickable The Simple way, Without Plugins

Elementor Clickable Columns
Basic
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

The Elementor Column Click Problem

A fairly common issue that can be solved with some quick code added to the top of any section of your site. 

We’re going to take our movie poster below and turn it into a single clickable column. 

What I put together is an inner-section, with one column with a background image and a background overlay.  

On top of the background are 6 elements; They are 5 headings and an image, but they could have been anything. 

The only thing clickable in this version is the title. 

Famous Moviestar
Famous Moviestar
Famous Moviestar
The true-life story of an Alpaca who overcame unspeakable events and defied the odds, to find his way into becoming the most famous actor in cinema.
From the director of
INCOME TAX - A LOVE STORY

Coming to select theaters 2021

Setting Up Your CSS

The first thing you are going to want to do is set a CSS ID on the column or section that you want to be clickable. This can be anything you want as long as it’s unique and is only used in one location.  We’re going to call our ID alpaca, why not. 

Add The JavaScript

The next thing you have to do is add an HTML widget into your page.

In this case, you will need to stick this widget AFTER the ID is used on the page. 

You will want to set the margin and padding to zero and the background color to the background color of your page just to be safe. 

The JavaScript Stuff

You’re going to put in the following code into the html widget below the actual ID

<script>

document.getElementById(“alpaca”).onclick = function() {myFunction()};
function myFunction() {
window.open(“https://www.whateverpage.com”, “_blank”);
}
</script>

This needs to be placed below the actual ID, because HTML is read from top to bottom. 
 
When the page gets to the script it trys to run it.
 
The problem is the alpaca ID’d column has not been read yet, so the script can’t find it.
 
So, it will return an error saying that it is null, meaning it can’t find an ID named #alpaca. 
 
This is just creating a basic javascript window open function which will create a link on your ID’d column/section/inner section.
 
The “_blank” is optional, that’s if you want it to open in a new window.  If it’s within your site, you’ll want to leave that out, if it’s taking the user to a new site,  leave it in (best practice).
 
Be sure to call the ID that you assigned, we called our “alpaca” but you can call yours anything you want.

The Finished Product

Finally, here is our new Movie poster, complete with headings, background image and overlay, paragraphs and additional images, all in one column ready for clicking.

Famous Moviestar
Famous Moviestar
Famous Moviestar
The true-life story of an Alpaca who overcame unspeakable events and defied the odds, to find his way into becoming the most famous actor in cinema.
From the director of
INCOME TAX - A LOVE STORY

Coming to select theaters 2021

Final Thoughts

This method is great if you have a single column and you know where it’s going. 

If you have posts of some kind, you will need to get a little more advanced. 

Check out the dynamic columns clickable tutorial and you will see each unique post is dynamically created, so you won’t know the URL, or the ID!

Have you used this method? 

Have a better way to solve this? 

Let me know in the comments!

Leave a Reply

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

Related Articles

Basic

14 Column Test

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

RELATED
Basic

14 Column Test

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets