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.

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;
}

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

Enjoy 😀.