5/5

How To Make Any Section Clickable

In this tutorial I am going to show you an easy & simple way to make any section clickable without the need of other add-ons. This tutorial is for those who would rather not use the CTA widget but would instead like their custom section clickable. Please note for this to work you will need Elementor Pro in order to access the shortcodes for templates.

My Working Environment

Theme: Hello Theme

Elementor Version: Pro

Let’s Begin

Create your custom section and save it as a template.

Copy the shortcode associated with that template and paste it in a text document so you will not need to revisit your backend to retrieve it.

Go the page where you would like to place this clickable section.

Activate the builder and drag an HTML widget onto the page.

HTML Widget

Next we need to add some HTML.


<a class="YOUR CLASS GOES HERE" href="YOUR LINK GOES HERE" target="_blank">
    YOUR SHORTCODE GOES HERE
</a>

The above html will turn your entire section ( Shortcode ) into a clickable link.

Paste your shordcode and don’t panic because the your section didn’t render this is how shortcodes work outside of the shortcode widget. You should see something similar to this :

Save it and your section will now be clickable.

Tip: For best results remember to remove all the padding and margin from the column holding your html widget.

Some Extra Styling

Ideally you would want to add some kind of hover effect to let your visitors know this is clickable so let’s add some CSS.


a.click-me .elementor:hover {
    background: #00000014;
    transition: all 0.3s ease;
}
a.click-me .elementor{
transition: all 0.3s ease;
}
Demo

And there you have it hope you found this tutorial useful.

Enjoy 😀.

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression...

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors...

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to...

Sticky Video On Scroll

Greetings All. You may have seen this effect on some other sites and wonder if...

3 Comments

  • Hi,
    New to website design and I’m having a tough time with this. What shortcode exactly am I supposed to be using with this? I just want to make this section, with a background image slideshow I created, go to my shop page when you click it. I’ve tried just about everything except this and I’m unfortunately lacking in knowledge to make this one work. Please help!

    Reply
    • Hi Erin you need to save your section as a template then in the template area it will give you a shortcode if you have the Pro version.

  • This is a good idea but it will work only for static links. How you would accomplish the same but pulling out the link from an ACF field dynamically?

    Reply

Leave a Reply

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

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.