Since doing the April 2015Ā income report with our Pinterest āstudyā where we found that, on average, long Pinterest imagesĀ got 70% more repins that short Pinterest images, weāve gotten so many requests for a tutorial on creating these long Pinterest-style images and how to hide them in a post. These requests combined with my desire to teach and feeling really cool that I know SOMETHING about code led me to recordĀ a few video tutorials. š¹
So here we go!
Why Hide a Pinterest Image?
Okay, so just a quick recap ā why do these long Pinterest images matter? Even if we donāt personally like them (hi!) or know that they might not always be effective or relevant based on how Pinterest could make display changes that are out of our control ā still, in my opinion, itās important to know how to create and use these types of images because right now we see them being highly effective.
- They stand out in the feed.
- They stand out in search results. Look at the image above ā where do your eyes go first? there are two Pinch of Yum images in that window, but the one with the orange box of text stands out a lot more than the original āshort image.ā
- They give your existing content a new āface.ā They allow you to share and show off the same awesome content in more than one way.
- They can help you create a branded look and feel.
- Right now, according to our experiment looking at about 500 images and accounts with a total combined following of almost nineĀ million users, long text-based imagesĀ are getting 70% more repins than traditional images.
So yes, I think for right now, they do matter.
Letās jump intoĀ the good stuff now, shall we?
š»š»š»š»š»š»š»
How To Make a Custom Pinterest Image
Video here! š
How to make a Long Pinterest Image in Photoshop (8 MINS):
And general overview screenshots here š in case you donāt want to hear my voice talking about Photoshop. Itās cool. I can deal.
This tutorial is not the end-all-be-all of Photoshopās capabilities ā itās just showing you how we create our Pinch of Yum long image style, which, obviously, includes the colored rectangle, text, andĀ dotted line frame.
Photoshop is incredibly versatile, much more so than a site like Canva or PicMonkey (which are also good places to start! but not nearly as flexible), soĀ Iād encourage you to use this āstyleā as a starting point if you need something to get you going, and then keep playing until you find something that feels perfectly tailored toĀ your brand!
How To Hide a Pinterest Image On a Blog Post
UPDATE: At Pinch of Yum, we no longer use the method below to hide our long pins on posts. We now use Tasty Pins from our WP Tasty team.Ā We found that because we were doing it so often, we wanted an automated and reliable way to hide the images instead of having to deal with the code below. Learn more here!
Now for the coding magic!
Video here! š
I will just add that there are several ways to do this ā all of it, from creating the images to hiding them ā and if you would like to share something that you know of that works really well right down there in the comments, Iād be super pumped.
Because we are smarter than I! A rising tide lifts all ships! šŖ
I am SUCH an elementary school teacher right now.
If youāre interested in learning more about some of the ways that you can monetize a food blog, we encourage you to download this free ebook,Ā ā 16 Ways to Monetize Your Food Blog,ā from our sister site, Food Blogger Pro!
Answers To Questions
Question: Why would you want to hide a Pinterest image?
Answer:Ā Sometimes bloggers want to have the long images as an option for pinning, but they donāt like the way the long, text-heavy images look in a post.
I feel this way for sure ā it doesnāt really fit my style of blog content to all of a sudden throw an image in the post that is a collage with text. Itās too long, too big, and awkward looking. WhenĀ all my other images are text-free single photos, it just doesnāt make sense with the āflowā of my posts to throw a long one in there.
But that is definitely dependent on the individual blogger. Some people may find that fits their style, and as a result,Ā theyĀ can just display all the images as normal.
Question: How do you get the pin it button option where people can choose the image?
Answer: There are two different buttons ā one goes over the images and one goes at the top of the post. The one at the top of the post gives you the option to choose whichever image you want to pin before jumping over to Pinterest.
Our button is custom, but you can get the same functionality where users can choose their image with this WordPress plugin (Pin It Button Pro).
Great tutorials, Lindsay!
Thanks Mary!
I just started creating the longer images, and I was trying to sneak them at the end, but thanks for saving me from being obnoxious! I will try this right away!
Glad it was helpful, Quelcy!
I love these posts! So helpful. Ever since my husband and I read about the long version versus short imagines, weāve been going the long route with success! That was great advice.
Anything I can learn about code is fireworks wonderful to me =) And thanks for answering my questions (you too, Bjorkās mom) in one of your previous posts regarding random questions. So awesome =)
Oh my gosh, too cute! Iāll have to check the comments on that one ā I didnāt see that!
Iām confused ā why would you want to hide the image???
Hi Anne! We hide them so they donāt just hang out awkwardly at the end of the post. They donāt really fit the overall feel of the posts since they have text on them and theyāre super long.
Oh my gosh, itās like you read my mind or something with this post! I am JUST about to implement this on my site, so this tutorial is so helpful. I had create a template within InDesign (for some reason, I find it more intuitive than PS), but I hadnāt though of creating the template within LR! Thanks Lindsay!!!
InDesign?! Girl! That is intense. Way to go!
Thanks for sharing this great tip! I have been blogging for years but did not know about the āhide image divā. I have a question though: When I click on the PinIt button on the images on my blog, it does not open to a window where you choose which image to pin, it just goes straight to Pinterest. Is that dependent on the type of Pin button you use, or is it browser specific? (I use Chrome most of the time)
Hey Cattie! Yes ā I think itās the type of button ā I linked a pin it button that should work for this at the end of the post! š
Yes, thatās definitely it ā I use a different plugin. Thank you so much!
Oh my gosh, itās like you were reading my mind, thank you for the tutorial, perfect!
So glad to hear that Debra!
I have the same issue as Cattie. When I click on the Pin It button it goes directly to the photo that I clicked on, it doesnāt give choices. I also use Chrome.
Thanks for the awesome tutorial Lindsay!
Hey Linda! I think itās the issue with the button ā check out Pin It Pro (linked at the end of the post)!
Hi Lindsay ā¦ Iām not a blogger but couldnāt resist reading the whole article which was very interesting. And, it appears your numbers do not support what Iām about to say. While longer images do get my attention on Pinterest I almost always go to the website to pin in a single image because Iām not really concerned with repining and the longer images crowd my feed. Just a user perspective (:
I would have to agree! š But our numbers, for now, are showing that most still engage with the long ones!
The div style tag is probably one of the most important codes in HTML. You can use it to style anything even with bootstrap coding! Iām going to stop using picmonkey and make my images in Photoshop now.
DOOO IT! So much customization!
really great tutorial, lindsay!
Thanks Adrian!
This is so incredibly helpful. Thank you thank you! I am personally not a fan of the super long Pinterest images, but create them as you said ā for another way to share and catch peopleās eye on Pinterest. I use Pixlr online to create long images with text overlay, as I donāt have access to Photoshop right now. So glad to have a way to hide them from my posts now š
Yep ā exactly. I am not familiar with Pixlr! Iāll have to check it!
I was JUST wondering about this the other day. Super helpful ā thank you for sharing!
So glad!
Be careful with this, Lindsay. Google has a tendency to see display:none in your CSS and assume that youāre up to some SEO trickery, which can raise red flags and cause your site to lose some credibility in the search engineās eyes. So while this is helpful when it comes to creating Pinterest posts, it can hurt you elsewhere.
Iād recommend keeping an eye on your Google traffic to see if you spot any negative effect over time.
Good call Candace! I had not heard of this before you mentioned it, but I did some reading and video-watching and it looks like we are in the clear ā seems like the general consensus is that unless you are actually stuffing the ādisplay:none:ā with links, keywords, etc., itās a piece of code used commonly enough that itās not a big deal. BUT. Really good to be aware of and definitely caused us to take a second look, so weāll keep an eye on it! Thank you!
Hi Lindsay!! Thank you so much for posting these video tutorials I have been wanting to try and make my own but wasnāt sure how to get started. You definitely answered my question! Keep these posts coming, I LOVE them š
Thanks Jenna! š
i started doing this a while back but then someone else told me it was a no no for google. That they put you on the ban list. haha or something like that. Do you know if this is true?
Well, I sure hope weāre not on the ban list! haha! Seriously, though, we did some reading and video watching on the subject, and checked our analytics since we started doing this, and it seems like the general feeling is that if what youāre doing is on the up-and-up (not link stuffing, keyword stuffing, etc.) you will be okay. Our analytics for referral traffic from Google havenāt changed much since we started implementing this. But really good for us to know and watch!
Thank you so much for this post, Lindsay. This is something Iāve been wondering about lately as Iām starting my own blog (with lots of help from Food Blogger Pro). This tutorial was perfect and helps me a lot.
Iām so glad, Joy!
This is so incredibly helpful- thank you!! I was on your blog about 1 week ago realizing that somehow you achieved this miracle of miracles on your blog and now I know how you did it! Much appreciated because I also personally think the long pins make blog posts look tacky.
Thanks Sarah! Glad to hear that it was helpful!
I canāt believe you posted this today! Literally earlier this morning I was wondering how people weāre hiding their Pinterest images on their blogs. I was going to say something to my code-man (husband) tonight, and then you posted this! I took a pic of the code and sent it his direction. Thanks for sharing!
Code man! yes! š I love it.
Are you super-kidding me?? I just listened to you on SPI and had to check you out. I am totally trying this (both creating the longer posts, AND hiding it on my blog). Thanks!
Thanks Amy! š Glad that you stopped by!
Hi Lindsay,
Thank you so much for a great post! I have just started my Japanese food and food photography blog and am learning a lot from your blog. TY TY TY!! I donāt have photoshop or lightroom and from your previous post, I was thinking to purchase lightroom as it sounds easier than photoshop. Is this only able to do with photoshop? or lightroom do same?
I havenāt found a way to put text and shapes on an image in LR the same way you can do with PS. But there are so many free softwares ā I think LR is easier for a lot of people to learn, so I would start with that. Although I think now you can get a Creative Cloud membership for something like $10 for both softwares!
Thank you Lindsay.
Iāve actually found recently the display:none trick isnāt working well anymoreā¦ some pinit buttons/bookmarklets are catching on to the trick and now only show visible images. Iāve had to use some other css like absolute positioning and the like to āhideā the image without actually hiding it. And knowing pinterest theyāll probably change that soon too, ha!
Weird. Ali told me it hasnāt been working on her site (which maybe you know about). š Do you know anything about the Google question ā whether or not the display:none harms a siteās SEO? And yes ā agreeing on Pinterest changing! always changing, always changing. š
Iām not an SEO expert but I know people have been trying to game google for a long time, using text thatās the same color as the background or hiding text in various ways, methods that Google isnāt oblivious to and will penalize if they discover it. So I canāt imagine itād help your SEO. But the absolute/negative positing could be seen as the same thing, so it may not be any better in that respect. Who knows!
Also ā Iād love to know what that GORGEOUS script font is you used in the mojito collage? Iām digging brush fonts these days and canāt seem to get enough of them. š
Itās called Brushy! Weāre using it as inspo for our redesign which is in the works now! š Thereās the alphabet, which is what I use, which is not a font, though, itās like literally each letter is a PSD file which makes it a beast to use in these images. Thereās also Brushy mini font which does type in like a normal font would, but not as cool looking in terms of the transparency and stuff.
Great info Lindsay! I use picmonkey to create mine but didnāt know how to hide them. This is great!
Thanks Julie! Glad to hear that!
such a helpful post!! def going to be putting this to use š
Thanks Rachel! š