Have you ever been scrolling through Pinterest and seen multiple images for the same blog post? As a newer blogger, are you confused as to how people are doing this when they only had one vertical image in their post? I was too, until I figured out the secret to having pinnable images on my posts without having all of them take up space in my post. Let’s do this!
Disclaimer: This tutorial is created for users utilizing WordPress. The same concept will theoretically work on another platform if this code is implemented there. I only use WordPress, so use of this information on any other platform is solely the responsibility of the user/reader.
*This post may contain affiliate links. Please see my Disclosures Page for more information.*
What is a “pinnable” image?
Let’s start here. On Pinterest, the recommended image size is 735px by 1102px. You can make them longer to make them more eye appealing, however. I tend to make my Pinterest images 735px by 1400-1450px. Those size pins seem to drive the most traffic for me. The image above is 735px by 1450px.
A pinnable image is an image of at least 735px by 1102px to be considered a “vertical image” on Pinterest. If you are apart of any group boards on Pinterest, many require that your pins are vertical images.
I use PicMonkey and Canva in order to create my pins. I like using Canva for my actual design of the pin, but I really like PicMonkey for editing my images before placing them on my pin’s template. They are both excellent tools for creating your images for your blog posts.
So what’s the secret?
Now on to the reason you really came here. How to create those multiple pinnable images in your blog posts without having a thousand giant images embedded in your post.
After I’ve created my pins, I go to my blog post and have one image as a pinnable image that will be visible in the blog post. Once I’ve put my visible pin on my post, I then put my images I want “hidden” at the bottom of my post while in the “Visual” tab.
Some people find it easier to put their hidden images at the top of their post so that they are easier to find when in “Text” mode. Whatever works for you.
Now for the fun part. Click on the “Text” tab right next to the “Visual” tab on your post. Find the text of your image and add the following code in front of the text: <div style=”display: none;”>
At the end of the image text, add the following code there: </div>
The code should now look something like this:
Once you have put in all your code for the images you want hidden, click back to the “Visual” tab and check to make sure your hidden images have “disappeared”. Ta-da! That’s it! Hit Publish or Update and you’re done.
Now when users come to your site and try to pin from your post, these “hidden” images will appear in their images to save screen.
I hope you found this tutorial helpful! Happy Pinning!!