Close

April 18, 2017

How to Create a Website Screenshot

Website Screenshot - Feature Image - ProductiveMotherhood.life

Have you ever wondered where a link on a page will take you, but you don’t want to click on it to find out? Well, this is where a website screenshot comes in! You can easily add a screenshot as a tooltip so, whenever a reader hovers over it with their mouse, the screenshot of the destination website will appear.

Today, I’m going to walk you through the process of installing and using website screenshots. If you’re unfamiliar with tooltips or haven’t used them on your blog yet, I encourage you to read my tutorial How to Add Tooltips to Your Blog. It is possible to simply place the screenshot in your post or page, but using them as tooltips makes your website look more professional.

 

 

Install Website Screenshot Plugin

  1. When you’re logged in to your WordPress dashboard, hover over the ‘Plugins’ menu then click on ‘Add New’ in the sub-menu that pops up.
  2. On the ‘Add Plugins’ page, type “browser shots” in the search bar.
    ProductiveMotherhood.life Website Screenshot Example 1
  3. Click “Install Now” on the first option “Browser Shots”.
    ProductiveMotherhood.life Website Screenshot Example 2
  4. Once installed, click on “Activate”. After activating, the page will redirect to the main “Plugins” page.
    ProductiveMotherhood.life Website Screenshot Example 3

 

 

Create a Website Screenshot

Now that the plugin has been installed and activated, you’ll see a new button in your post/page editor in WordPress.

Note: If you use your affiliate link for the screenshot, it may not work correctly. Often the link is unable to load. BUT, you can work around this hiccup by using the basic website link for the screenshot while using your affiliate link as the actual, clickable link! It’s a beautiful, helpful way to make your website user friendly.

  1. Begin by opening either a new post/page or an existing one.
  2. In the editor you now have a “Browser Shots” button. Click on the button and the “Browser Shots” box will appear.
    ProductiveMotherhood.life Website Screenshot Example 4
  3. You’ll notice there are two separate URL input boxes. One box is for the screenshot which will be displayed. The other box is for the URL to where you actually want to direct people. For example, if I create a website screenshot for SendOwl, I’d use the normal “https://www.sendowl.com” URL in the “Image URL” box. I would then use my affiliate link in the “Image URL Link” box. This way, when people click on the screenshot, it sends them through my affiliate link.
    ProductiveMotherhood.life Website Screenshot Example 5
  4. Next, you can adjust the dimensions of the website screenshot. I’ll leave it on default for this tutorial. You may also include a caption under the screenshot, if you would like.
  5. The next box, “Image Alt Text” is also optional, but it is highly recommended. For SEO purposes, you should always include alt text with your images. Not to mention, it can be helpful for your readers in the event the image won’t load.
  6. The last option to consider is the “Open Link in New Window?” checkbox. Checking this box is also recommended so that viewers are not directed away from your site. If you do not select this box, the page will redirect from your site to the link site when the link is clicked. Your goal is to keep people on your site, not to send them away.
  7. Now, just click the “Ok” button and your website screenshot is ready for your readers!

Here’s an example of a website screenshot:

SendOwl website browser shot.

This is a caption for my website screenshot.

 

Optionally, Use the Screenshot as a Tooltip

If you don’t already have experience with tooltips, go ahead and read my post How to Add Tooltips to Your Blog. You can create the screenshot right in the tooltip editor! It’s super easy and once you’ve created it, the website screenshot tooltip will appear throughout your site every time the keyword is used!

That’s it! You’re done! You now have an awesome website screenshot on your post or page!

Do you have any questions or comments? Let me know, I’d be happy to help!

 

 

Website Screenshots - Pinnable Image 1 - ProductiveMotherhood.life

Leave a Reply

Enjoying my blog? Please spread the word :)

error: Content is protected!!