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.
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.
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.
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:
- SiteOrigin Accordion Widget (free)
- Site Origin Premium Bundle Accordion Widget ($29 for 1 yr subscription)
- Livemesh SiteOrigin Accordion Widget (free)
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.
How to add Premium SiteOrigin Accordion Widget ($29)
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)
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