If you are an online business owner utilizing Pinterest it is absolutely essential that you know the ins and outs of this platform and how to effectively use it to market your business. Whether you are selling physical goods, online services such as ecourses, or driving traffic to your blog, knowing how to gain the most marketing power from Pinterest is critical.
Pinterest is visual, nothing more nothing less. The key to getting your image noticed in the enormous sea with all of the other visual input is to take up as much screen real estate as possible. In other words, vertical images are key. Noticed I said they are key, not optional or recommended, vertical images are essential if you want any chance of getting repins or website traffic.
All too often, when I am managing Pinterest accounts for my clients, I see bloggers and well known brands pinning horizontal images. These images get passed over resulting in low repin numbers and missed marketing opportunities.
Infographics are also popular on Pinterest but long info graphics take up a lot of real estate on your blog post or website. Infographics are effective marketing tools for brands, professional bloggers and speakers, as well as everyone else that has statistical information about their product or niche that they need to market.
The question was recently raised by one of my Pinterest clients about how to make a vertical image available for pinning from her website when her website style lends itself to horizontal images.
Thankfully, for both her and you there is an easy solution. With a little CSS code you can quickly and easily hide an image on your blog post that is only visible when your readers pin from the blog post.
If you have a WordPress website here is how you can hide an image on your next blog post:
Step 1 – Add the code to your theme’s CSS
CSS is the cascading style sheet and hidden pin images work by changing the way your image is displayed on your blog post. In essence, using this CSS code you are going to add a new style to your theme and then apply the name of your new CSS style to any image you want to hide.
Sounds easy right? Don’t worry, it really is.
First, find your theme’s CSS. For most themes, this is under appearance —> editor. Copy and add the following code to the very bottom of your style sheet. I recommend adding this code to the very bottom of your editor so as to not disturb any other code on your blog. You may also need to add a } to the line before this code so as to not break your site.
/* hide the pinterest image */
Don’t forget to save your CSS update!
Step 2 – Add the long image to your blog post
Now it’s time to add the vertical pin-friendly image to your blog post. Because this image will be hidden, you can add it anywhere on your post. I recommend adding it to the very bottom.
Pinterest pulls images based on date and time ranking from newest to oldest. So naturally the image at the bottom of your post will show up in the pinnable image list first and the first image in your blog post will be shown last.
Step 3 – Apply the CSS code to your hidden image
Once you have added the hidden image to your post it is time to add the hidden image tag to the image.
Click on the image in your visual post editor. This will bring up a menu which includes a variety of options including the option to edit. Click on the pencil, otherwise known as the image editor.
The next popup window will bring up the image details including URL, position, size and a variety of other specifics. In order to apply the name of your hidden image CSS to your image click on advanced options in the lower left corner.
In the advanced image option window locate image CSS style. In this field add hiddenpinimage. Adding this title in the image CSS style field will tie your image to your new CSS code.
Choose update on the image editor then update your blog post.
That is it! You are done!
You have now successfully added a hidden image to your blog post and have an easy work around for creating pintastic vertical images that you do not want shown on your post.
For all subsequent blog posts, simply repeat steps 2 and 3 for any image you want to hide. There is no limit for the number of images you hide on a blog post.
Truly, it is that easy!
If you need a helping creating images, managing your Pinterest account, or even editing the backend of your wordpress blog including add this code to your CSS please contact us.
Don’t forget about our June Pinterest account review and management special! For only $25 you can receive a complete review of your Pinterest blog and learn how to get the most marketing potential out of your Pinterest account. Or save $75 when you purchase 3 months of our pin-friendly Pinterest account management. Learn more!