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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to…

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive. So we are going to go over just how easy it is to implement outline text in Elementor. Let’s Begin…

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 *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?