Elementor Pro, Tips & Tricks
2/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 😀.

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Related Posts

**Responses and Solutions to comments are handled on Sundays & Mondays.

2 Responses

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

    0
    0
    1. 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.

      0
      0

Leave a Reply

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

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.
Request A Tutorial

Have a request I would love to hear about.