Pretty Pink Desk

How to add a responsive Pinterest board to your Beaver Builder WordPress blog

SHARE THIS ARTICLE TO:

In this tutorial, I’ll walk you through how to add a responsive Pinterest board to a WordPress blog built on the Beaver Builder Framework. You can embed a Pinterest board directly into any WordPress page, blog post, or widget area. The good thing is that you won’t need a plugin to do this because Pinterest makes it super easy to implement.

For this tutorial, I’ll assume that you are using the Beaver Builder Framework with a child theme. However, you should be able to implement this on most WordPress blogs.

Step 1

Find the Pinterest Board you want to embed and select it

Responsive Pinterest Board Step 1

Step 2

Once you are on the board, select the 3 dots and choose “Create widget”. This will take you to the Pinterest Widget Builder.

Responsive Pinterest Board Step 2

Step 3

On the Pinterest Widget builder page select the “Board” option and choose “Create your own” under the Size dropdown menu.


Responsive Pinterest Board Step 3

Step 4

Change the Board width to whatever your minimum container size is. You can also update the Board height to your preferred settings. In this example, I have my board width set to 1200px and board height to 500px.

Responsive Pinterest Board Step 4

Step 5

Review your preview and copy the first line of code. Keep it handy, as we will need that later.

Responsive Pinterest Board Step 5

Step 6

Navigate to your blog post and open up the text editor and MAKE CERTAIN to switch from the Visual editor to the Text editor first! Paste the following code directly into the text editor and replace the embed code with the one that we copied from Pinterest earlier. Then save and publish the post.

Paste into text editor:

<div class="super-responsive-wrapper">
<div class="board-wrapper">
<!-- Your embed code here -->
</div>
</div>

 

*Make sure to replace the embed code with the one we copied earlier.

Responsive Pinterest Board Step 6

 

WARNING: DO NOT EVER switch back to the Visual Editor for posts where you’ve added the above code. If you do, the editor will strip out your code and it will be lost! If you want to fix this issue, and you feel comfortable editing your functions.php file, you can try this solution. It forces the text editor as the default on specific pages or posts. You’ll need to know the page ID for each post where you want this to work. I tried it out and it solved the problem for me.

Step 7

Add the following custom CSS code:

.super-responsive-wrapper {
width: 100%;
margin: auto;
}

.board-wrapper {
margin: auto;
text-align: center;
}

.board-wrapper span {
overflow: hidden;
max-width: 100%!important;
}

Step 8

Go back to the Pinterest widget builder page and copy the pinit.js code.

Responsive Pinterest Board Step 8

Step 9

Navigate to your customizer and add the code into Code > Footer Code

Responsive Pinterest Board Step 9

Step 10

View your post and test out your responsive Pinterest board!

Responsive Pinterest Board Step 10

Conclusion

If you followed the steps above you should have successfully embedded a responsive Pinterest board into your page or post. A special thanks to Michael Pilsner for providing the code for the responsive portion of this tutorial.


*This post includes affiliate links to my favorite theme framework and page builder, Beaver Builder.

Pinterest Tutorial

SHARE THIS ARTICLE TO:

about-sarah-sidebar

Hi, I'm Sarah!

I’m passionate about creating websites that are stylish, powerful, and consistently exceed online goals.

Let’s work together and create the online presence that your business deserves.

Get on the list

Sign up and learn how to rock your online presence with my latest tips, tricks, and freebies!

!
!
Terms and Conditions checkbox is required.
Something went wrong. Please check your entries and try again.

free e-book

5 Things You Can Fix on Your Website in the Next Week to Improve Your Business

!
!
Terms and Conditions checkbox is required.
Something went wrong. Please check your entries and try again.

Let's Connect On Instagram