Contact
Menu
Menu

How to protect your images on WordPress (without Plugins)

Insight / WordPress / Elementor

How to protect your images on WordPress (without Plugins)

Protect your images in two easy steps (WordPress plugin)

If you’re tired of finding your hard-worked photos/images floating around the web without your permission, this guide is your new best friend. Let’s dive into a simple, yet effective way to protect your images – and guess what? You won’t need any additional plugins!

Think of your images as digital gold; they’re not just pixels, but a part of your digital identity. Whether it’s a stunning photograph, a piece of unique artwork, or a branded graphic, these images are your intellectual property. Protecting them isn’t just about preventing theft; it’s about maintaining your brand’s integrity and value.

Step 1: Paste the CSS snippet to “Custom CSS” section:

CSS is like your website’s guardian angel. We’ll start by adding a dash of CSS to disable the context menu on images. This trick keeps the ‘right-click-and-save’ folks at bay. 

				
					img {
    /* A mix of browser-specific commands to disable image selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Add the CSS to “Custom CSS” section:
  1. Go to your WordPress Dashboard.
  2. Open the Elementor editor for the page you want to edit.
  3. Click on the hamburger icon in the top left corner of the Elementor panel.
  4. Go to “Site Settings” > “Custom CSS”.
  5. Paste the CSS code into the Custom CSS box.
  6. Click “Update” to save your changes.
Easy, right? Now, let’s amp up the security.

Step 2: JavaScript to the Rescue

By adding a JavaScript, we  block the right-click attempts:

				
					document.addEventListener('contextmenu', event => event.preventDefault());

Place this in an “HTML” widget in Elementor, and voilà – your images just got a lot safer.

User Experience Considerations: Disabling right-click can affect the user experience on your website, as it restricts normal browser functionality. Consider this aspect before implementing such measures.

Before You Go…

  • Testing: Always test your website after these changes. It’s like checking the locks on your doors!
  • The Smart Ones: Some tech-savvy visitors might still slip through, but this will stop most.
  • Think of Your Visitors: Disabling right-click can be a bit of a nuisance for your genuine audience, so weigh the pros and cons.
  • Stay Updated: Keep your Elementor and WordPress updated for the best performance and security.
 

Wrapping Up

There you have it – a straightforward, plugin-free way to protect your WordPress images using Elementor Pro. It’s a digital world where your content deserves the best defense.

Need a WordPress developer? From fortifying your images to crafting a bespoke WordPress themes and plugins. Let’s turn your vision into a secure, stunning reality, contact me for any WordPress projects!

Close