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