How to Hide a Vertical Image for Pinterest

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.0.47″][et_pb_row admin_label=”row” _builder_version=”3.0.48″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Text” _builder_version=”3.13.1″ text_font=”||||||||” text_font_size=”18px” background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

In this post, 10 Reasons No One Is Pinning Your Post and How to Fix That!, one of the solutions that I shared was to include hidden images for Pinterest.

You will want to hide vertical images for Pinterest if you just don’t care for vertical images in your blog posts or if you want to include extra images for your readers to choose from when pinning – which is something that I recommend!

But be sure to read about Issue #2 before you decide not to include a vertical image.

If you don’t know how to include a hidden image, don’t worry – there are two super easy ways to do it!

Note: This post contains affiliate links, which means that if you buy something using one of the links in this article, I may earn a commission, but… It won’t cost you anything extra. Want to learn more about how you can make money blogging with affiliate marketing? ? Read this…

Affiliate Marketing for Bloggers – A Beginner’s Guide.

Option 1 – add html code directly in the text editor to hide the image.

I’ve included screen shots below to show you exactly how to add the necessary html code to hide any image.

First, insert your image as usual. In the text editor, you will see something like this…

In the screen shot below, you can see the image displayed when I preview the post.

Now, to hide the image, go back to the text editor and add the following:

Before the html for the image, add:

< div style=”display:none;” >

*** without the space after < and before > ***

After the html for the image, add:

< /div >

*** again without the space after < and before > ***

You can see the same image inserted in the text editor with the extra code below.

Now, when the post is displayed again, the image is hidden! That’s all there is to it. 🙂

Click on the Pinterest share button and you will see that the hidden image is still available to pin.

Option 2 – add a ‘style’ in your theme’s header scripts.

For this method, add a style called ‘hidden-pinterest’ as shown below.

< style >

.hidden-pinterest {display:none;}

< /style >

*** Just remove the space after < and before > ***

I use Beaver Beaver page builder to edit my posts, so I just click on “Add Content.”

Click on the arrow next to “Basic Modules” to choose the type of content you want to add.

Then click on “Photo,” hold and drag to the row where you want to place the image, The Photo Settings window appears. Click on “Select Photo.”

Select a photo from the media library.

Be sure to edit the Title and the Alt Text.

Click on the Advanced tab at the top of the Photo Settings dialog box.

From the advanced tab, you will need to scroll down until you see the CSS Selectors area.

Type ‘hidden-pinterest’ in the ‘Class” field.

Save and preview. The image is now hidden.

Click on the Pinterest share button and you will see that the hidden image is still available to pin.

Are you already using hidden images in your blog posts for Pinterest? If not, give it try.

If you are, consider adding additional images to ‘test’ which one gets the most pins.

And be sure to read this post to learn about 10 reasons no one is pinning your post and how to fix that!

Did this work for you? If it was helpful, I’d love for you to pin this post! Of if you haven’t tried it yet, pin it to refer to later.

[/et_pb_text][et_pb_image url_new_window=”on” src=”https://www.chantelarnett.com/wp-content/uploads/2017/05/How-to-hide-images-in-blog-posts-for-Pinterest.jpg” _builder_version=”3.13.1″ url=”https://www.pinterest.com/pin/80783387049265713/”][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section]