JS Animated. How to add “pin it” button

This tutorial will show you how to add Pin it button in Responsive Website Templates.

If you want to build a button yourself, first decide which kind of Pin It button you want to add. There are 3 types to choose from:

• Image hover: When somebody hovers over any image on the page, the Pin It button shows up;

• Any image: If somebody clicks this button, they can Pin any image on the site. This is pretty easy to make;

• One image: This is a Pin It button for a single image/element on your page, and requires more technical coding.

Let’s learn how to build the last type – One image:

1. Go to the widget builder.

2. Select One image in the Button type section.

3. Customize the size, shape or image for your button.

4. Add the URL for the webpages that have the element you want to create a Pin It button for (this can be your homepage or any other page on your site). You can also write a description for your element/image:

   

5. Preview your button by hovering over the sample image. You can also click the Pin It button to see how it works.

6. Once you are satisfied with the button, copy the code under the Copy the code section and paste in the necessary file (in our case, it is index.html file) next to a desired element of the page:

   

7. The last step is to include pinit.js once (and only once) per page. Paste the code just above the closing /body tag of each page, where you want the button to show up on your site:

   

8. Save changes and visit the website.

Feel free to check the detailed video tutorial below: