How to Hide Pin-able Images in a Wordpress Blog Post Without Code

How to Hide Pin-able Images in a WordPress Blog Post Without Code

Pinterest is now one of the top marketing resources for bloggers (think visual search engine). Creating quality, eye-catching,  Pin-able images should be a priority for every blogger aspiring to grow their blog. 

Images which are optimized for Pinterest are tall and vertical. They also take up a lot of space and may appear odd in your blog post. Pinterest prefers vertical images, as they are easier to view and more eye-catching than horizontal Pins. Many Tailwind Tribes even require that submitted Pins be vertical. tailwind

Pin-able Images

Let's say you created a post but don’t want to include your vertical Pin directly in your post? Or you want to include additional Pin-able image options for your readers. Then you will need to find a way to hide these Pinterest images within your blog post, yet make them appear with the "Pin It" button. 

Ideally, an invisible image will only appear If you click the Pin It button on the page you hide your image. Upon clicking the Pin button you will be able to view Pin-able images that are not present in your post. Kinda magical, isn't it? 

Here is an example from my post FabFItFun Winter 2017 Box Add-Ons + Spoilers Schedule + Promo Code post. If you scroll to the way bottom of the post, you will find the hidden Accordion Widget which hides my Pin-able image for the post. 

I've googled and googled "How to Hide Pin-able Image in Blog Post" etc.. and have come across numerous posts, with tutorials on how to hide images in a blog post. Every single post I've read explains how to copy and paste a hidden image code to hide your pin image, such as: 

ex. <div style=”display:none;”>PASTE IMG CODE HERE</div>.

While that may work for some, I have not had one bit of success with any code I've tried. The other day it suddenly dawned on me that the easiest way for me to add a "hidden Pin-able" image, would involve adding an Accordion Widget at the bottom of my post. 

How to Hide Pin-able Images in a WordPress Blog Post Without Code

Accordion Widget = No Code Method 

One option is to use the Accordion widget as part of  SiteOrigin's free Widget Bundle. You will first need to download  PageBuilder Editor by SiteOrigin It is a free download (Dashboard > Plugins >Add New Plugin > Search by Name). From there you can also download SiteOrigin's free Widget Bundle.

Site Origin Accordion Widget Styles

You also have the option to purchase a Premium Package directly from SiteOrigin, then upload to WordPress (fancier Accordion plus other add-ons, improved existing features and added functionality) for $29 (single, use annual subscription).  This is my preferred option. 

Site Origin Premium Accordion Widget

Livemesh Accordion Widget

Another free Accordion Widget I use is  Livemesh SiteOrigin Accordion Widget . (Dashboard > Plugins >Add New Plugin > Search by Name). This Widget also requires the free SiteOrigin Widgets Bundle Plugin. The free Accordion Widget lets you add standard TinyMCE text content, but in the Premium Add-on Bundle (costs $39) , you can create accordion content using a layout field (complex widgets and Page Builder style layouts).

Below I have included tutorials below for the following Accordion Widgets:

Since I have the Premium SiteOrigin Widget Bundle (fancier accordion), I am only able to provide a step-by-step tutorial on how to set up your Accordion with the Premium Plan. I did include the link to the Free Version documentation, and demo video which explains. Mostly similar, with a few differences. 

I know it seems there are a ton of steps to set up an Accordion Widget, but I promise that once you've done it a couple times, you will memorize all the steps and be able to create one quickly. 

Happy Blogging!

Nicole 

How to add Premium SiteOrigin Accordion Widget ($29)

Read More

In WordPress Visual Editor select "Page Builder" tab

Next select add a new row 

Set row layout to 1

Next on the right hand side of page, click on design tab (under row styles).
Change background color, border color and background image to white. 

From post screen select "Add Widget"

From main Page Builder editor screen, under Widgets Bundle heading select SiteOrigin Accordion

Hover to right side of widget and click  edit

Click PANELS,  then click ADD

Next click on DESIGN  tab 

Under DESIGN select HEADINGS

Next change BACKGROUND and BACKGROUND HOVER COLOR to  WHITE
Change TITLE and TITLE HOVER color to BLACK
Change BORDER and BORDER HOVER color to WHITE

With HEADINGS tab still OPEN, scroll down to OPEN and CLOSE icons.
Make sure display open/close icon box is checked.
Next either leave + or - as default or change icon (I recommend leaving as is).

Next click PANELS, then change BACKGROUND,  FONT and BORDER COLOR to WHITE

Then to the far right of screen, open DESIGN tab. Change BACKGROUND and BORDER COLOR  to WHITE

Now it's time to preview your widget.
Make sure all panels are closed, then scroll to the way bottom left and click on preview. 

The black plus sign to the right of the screen is the open icon. Click to open

Now add the image, or pin you wish to hide.
Here is an example from my post FabFItFun Winter 2017 Box Add-Ons + Spoilers Schedule + Promo Code post.
Once you add your image, click on the icon to close the panel.

You will now see the accordion widget is completely invisible except for the minus sign.
Once you finish your post, (or if adding to the post) from the Page Builder Editor screen, move the entire row to the way bottom of your post.
Your accordion widget will discreetly appear  at the end of the post.

 

How to add SiteOrigin (Standard) Accordion Widget (Free)

How to add Livemesh SiteOrigin (Standard) Accordion Widget (Free)

Read More

First download SiteOrigin Page Builder and free SiteOrigin Widgets Bundle free plugins under Add New Plugin

Next start a new post, then select Page Builder Editor tab. 

Next click ADD a ROW

AFTER adding a  NEW ROW, click on ADD WIDGET

From the Widgets menu click on LIVEMESH SITEORIGIN WIDGETS, then select LIVEMESH ACCORDION

Next hover to bottom right corner of widget and click on EDIT 

Change Accordion style to 1 or 3 styles
I prefer Style 2

Next click on Add (under PANEL tab)

Next, to the right of the screen (under WIDGET STYLES) open the DESIGN tab.
Change the color to white in all areas with red arrows 

With accordion panel open, click on ADD MEDIA and upload the image you wish to hide. 

Now click on PREVIEW to make sure everything looks right. 

To OPEN ACCORDION, click on the little white square in bottom right hand corner.

Click on white square again to CLOSE ACCORDION

How to Hide Pin-able Images in a WordPress Blog Post Without Code

Leave a Reply

%d bloggers like this: