One of the most important features in getting pins, besides rich pins, in a “vertical Pinterest image.” Many bloggers are stuffing a big, long image at the bottom of their posts so that they’ll have such an image, readily available. It looks —kind of ugly, at best. Here’s how to insert that vertical pin into your post — without having this eyesore. We do this by creating a HIDDEN image! Credit where it is due: the information for this post comes from this stellar tutorial from Blog Savvy Marketing. I’m trying it out here for you, so you can see every step of the way.
The “Vertical Pin”
The reputed “ideal size” is 735 by 1102 pixels. The 735 width is the maximum width allowed by Pinterest. Use that size as a featured image seems too much but we see it all the time in blogs, as bloggers try to figure out how to do Pinterest. A height of 1102 can be hard to fill. Tailwind pinners tend to create GIANT WORDS that sort of begin to hit your eye like like silent screaming. 🙂 My personal style is to create a fun image. A bit corny and homemade looking, perhaps, but that is my intention.
Here’s my first attempt at a “pinnable” graphic.
I have the “branding” at the top of the graphic–my site URL. This is considered best practices in putting together a vertical pin. I put together two images which I hope look alright. Using up all of this real estate on an image can be a challenge. I used Crello for this with images from Pixabay. I uploaded the images and then used the text and frame from Crello to create the title and the branding element (the URL) at the top.
Next, Edit the Image!
You need to add the Title and the “Alt” text and the description for the image. This is a critical step as this will provide the pin with the title of your blog post and the description for your pin!
Go to the Upload Screen where you upload your pictures and graphics.
Click on the image you want to edit. The “edit” button appears AFTER you choose a picture.
Next, hit the edit button. You’ll be taken to a graphic editor with a window for changing the Title and adding the Alt Text. The tutorial said that the Alt Text will ensure that anyone who pins your post will get this pin and it will auto-populate the description field. (I’m still not sure how that works.)
How to make the image “hide”
First, upload the image you’ve created and put it at the bottom of your blog post. It’s much easier to find that way.
Next, we’ll be using the HTML or Text Editor to add a tiny bit of code. It’s easy, don’t worry!
If you’re not used to fooling with the “Text” or “HTML” tabs of the WordPress editor, now is the time to figure this out.
At the top of your screen, you’ll see two tabs.
This is what those tabs look like in the “blue” (Jetpack) WP editor:
You need to choose the HTML tab.
If you’re using the “black” WP editor, the same tab is called “Text.” It looks like this:
When looking at the text or HTML version of your blog post, you’ll need to find the “container” for the image. HTML containers begin with the “less than” character or angle bracket.
We’re looking for the image source or IMG SRC container for the picture we want to hide.
Here’s the HTML Code for the image above:
Right before this container, you add this a “division” where you will set the visibility to “none.” You turn visibility off by putting this bit of code RIGHT BEFORE the IMG SRC container.
< div style=”display:none;” >
Then, AFTER the IMG SRC container, you end the division with the code:
< /div >
Here’s the final code for the hidden picture/kitty image:
And that’s all there is to it. No big secret!
But hopefully useful. 🙂 I’m going to have to experiment with this some more to wrap my head around it.
I still have questions
How is it that this image is chosen as a pin — if it’s hidden? I’m still experimenting and working this out. I’m writing a companion piece to this about rich pins and hidden pins and Tailwind (oh my!) which I hope to get out next week. Til then, I thought my readers might like to give this a try–or let me in on your own experiences in the comments!
More soon. Thanks for dropping by. ~ Lola