Prior to 3.7, the only way you could use our Pin Board block was to purchase it. However, starting with version 3.7, Pin Board is included as a Core Headway Block! Because of that change, we thought we should introduce this powerful block.
PinBoard is based off of the website, Pinterest. It’s meant to give you an easy way to display your content in a similar way as that website.
Select Pin Board as your block type
So to get started, you first need to add a Pin Board block to your layout. In my example, I’m adding it to my Blog Index.
Change the Block Options
Once you select Pin Board as your block type, the options panel will open automatically. The first section is called Pin Setup.
Block Options: Pin Setup
For purposes of this post, we’re leaving the mode set to default. Then you can change the number of columns you want your pins/posts to display in, the spacing between posts horizontally and vertically.
Here I’m leaving everything default except I’m changing the number of columns to four (4). Pin Board pulls the featured image you have assigned to a post. In my screenshot, Test Post 3 has no featured image so no image displays in the pin.
Then, at the bottom of the first tab of block options, you have the Pagination and ordering options.
Note: If you want pagination to show, you’ll need to turn off “Infinite Scrolling” which is on by default.
Block Options: Text
Here you can change the meta options that display, whether to show post titles, whether post titles will be a link, the position of the pin image and more!
Block Options: Image
Choose whether to show any images, what happens when a visitor clicks the image in the pin and whether your image(s) should be cropped.
Block Options: Effects
Here’s where you’ll find Infinite Scrolling. (Remember: turn this off, if you want to show pagination links). Infinite Scrolling is where a visitor scrolls down to view more pins and the next page of pins automatically loads. The visitor does not have to click on “Page 2” (for example) to load the next page of pins.
Here’s what your visitor will see upon scrolling down
You’ll also find Hover Focus in this area. This effect changes the opacity to all posts a visitor is not hovering over lower while retaining 100% opacity on the post being hovered over.
Block Options: Social
This area lets you show some social tools like a Pinterest “pin it” button, a “tweet” button for Twitter, your Twitter username and more!
The remaining block options are the standard block options. Pin Board is a versatile block that gives you a fresh way to display your content.
It works on all layouts, so try it out! If you run into any issues, please let us know!