How to Hide Pinnable Images in your Blog Post

How to Hide Pinnable Images in your Blog Post

HIDING PINNABLE IMAGES IN YOUR BLOG POST

After trying everything, and I mean everything to get my blog posts noticed and shared, I came across the biggest secret in the blogging world. Right when I implemented this strategy, the number of post shares on my site DOUBLED overnight. So what’s the secret?

Hiding pinnable images in your blog post! 

I know it seems a little weird to hide the images that you want people to see and share, but just hear me out. 

Have you ever seen one of those sharing widgets at the bottom/ side of a blog post? If not, just look to the left of your screen right now- see the little sharing icons? If you click them, a bunch of pictures pop up.

Here you’ll see all of the pictures in the post- including the hidden ones. Some of my blog posts have up to 10 pinnable images hidden in them! Imagine if all of those pictures were sprinkled throughout my post- it would just look like a giant ad! Having a ton of images for them to choose from is a huge benefit to you, but you have to do it the right way. Here’s How: 

Create a PInnable Image

If you haven’t set up your Pinterest Business Account yet or don’t know where to get started with Pinterest, check out this article with some basic tips to get the ball rolling. 

The first step is to create some images you think would do well on Pinterest. I would recommend having at least 3-5 for each of your blog posts.This is what Pinterest says about choosing your image: 

“Use high-quality, vertical images that will stand out in people’s feeds. We recommend a 2:3 aspect ratio (ex: 1000 x 1500 pixels). Other ratios may cause your Pin to truncate, or may negatively impact performance.”

All this means, is that your pins should be vertical with their width being 2/3 of their height, or Pinterest may cut off part of the image. 

You will also want to overlay text on the image- something that describes why someone would care about your post, why they should click on your pin. 

I use Canva to create all of my pins. Canva is an incredible and free drag and drop graphic design tool that comes with thousands of templates and pictures. They even have a specific set of templates titled “Pinterest graphics” that you can check out. 

If you don’t love the pictures they have on Canva, you can also use these sites to find free and legal stock images: 

https://unsplash.com/

https://pexels.com/

https://pixabay.com/

now it's time to Hide it in your post

I use Elementor for all of my pages and posts, and I think that’s pretty common among bloggers… so the first two ways I demonstrate this are going to be using the Elementor page builder WordPress plugin. This is also by-far the easiest way to hide your images. 

 

First Option: Insert your picture into your post using elementor. Click on the advanced tab in the image editor and navigate to the box titled “CSS Classes.” enter this code: elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-phone

All done! If you preview your page, your image will be hidden.

Option 2: That seemed easy, right? Well surprisingly there’s actually an even easier way. Go ahead and insert a picture again and then go into the picture editor. Under the advanced tab, navigate to the “responsive” tab. Toggle the little sliders to hide your image on desktop, tablet, and mobile. 

Use a little bit of code

If you don’t use Elementor, this part is for you. The word “code” always scares me away but this is actually pretty easy… promise. 

  1. Upload your image into your WordPress media library. Be sure to add alt text that describes the image, as this is what will auto populate into the description of the pin. 
  2. Insert this image at the very top of your post that you would like to hide it in. 
  3. Click the “text tab” and you will see the code for the image. The code will be at the very top (since thats where you put the image). It will start with
  4. Insert this before your image code:

5. Insert this after your image code:

Now you have one big piece of code that starts and end with div, with your photo sandwiched in between. Switch back to the visual editor, and your photo will be hidden! 

Keep this little bit of code somewhere so that you can copy this process later!



Leave a Reply

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