June 22, 2023

Create Clickable Images with Elementor

Play Video

We have a look at how to create clickable images with Elementor presented by WPLearningLab. By the end of this tutorial, you’ll be able to transform any image into a navigable link, leading your visitors to other parts of your site or even to an external website. This technique is useful for creating intuitive and visually appealing navigation systems, enhancing the overall usability of your website.

How to make Clickable Images with Elementor

  1. Edit a Page with Elementor
    Start by navigating to the page you want to edit. This could be any page that contains an image you want to make clickable. Open the page in the Elementor editor.
    Edit a Page with Elementor
  2. Select the Image
    Find the image you want to make clickable and click on it. This will open the image settings on the left-hand side of the Elementor interface.
    Select the Image
  3. Add a Link Option
    In the image settings, you’ll find a ‘Link’ option. Click on the dropdown menu and choose either ‘Media File’ or ‘Custom URL’. ‘Media File’ will link to a larger version of the image, while ‘Custom URL’ allows you to specify the destination of the link.
    Add a Link Option
  4. Enter the URL
    If you chose ‘Custom URL’, you can now enter the URL you want the image to link to. This can be any URL, whether it’s a page on your own site or an external website.
    Enter the URL
  5. (Optional) Change Link Settings
    Change the link settings if you want the link to open in a new window, add nofollow, or add custom attributes to it.
    Change Link Settings
  6. Update and Preview
    Once you’ve entered the URL, click ‘Update’ and then preview your changes. The image should now be clickable, leading to the URL you specified.

Advantages of Clickable Images

Creating clickable images with Elementor can improve the navigability of your website, providing a more intuitive and visually appealing experience for your visitors. It’s a simple technique that can be used in a variety of ways, from creating image-based menus to showcasing portfolio pieces that link to detailed case studies.

To further enhance your clickable images, consider adding hover effects or animations. Elementor provides a variety of animation options that can make your clickable images even more engaging.

Common Issues

  1. Image Not Clickable
    If the image isn’t clickable after following the steps, double-check the URL you entered. Make sure it’s a valid URL and that it was entered correctly.
  2. Link Opens in the Same Tab
    If you want the link to open in a new tab but it’s opening in the same tab, go back to the image settings and make sure the ‘Open in new window’ option is enabled.

Required Resources

Elementor Logo
Free Options
Credit to WPLearningLab
WPLearningLab is a YouTube channel dedicated to providing comprehensive WordPress tutorials and resources for users of all skill levels. With a focus on simplifying complex concepts, the channel offers valuable insights on themes, plugins, and site optimization, as well as troubleshooting tips and best practices for creating and maintaining a successful WordPress website.
Create Clickable Images with Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.