Make your website sidebar match your blog with this tutorial on how to create and add custom sidebar images. And even better, track how well they perform with the second half of the tutorial on adding custom tracking links and setting up your Google Analytics to show you right away how they’re doing! This post contains affiliate links but only for the products and programs I’m already using.
Why You Should Use Custom Sidebar Images
First off, let’s talk about why you would want to add custom sidebar images. They’re not just pretty, they actually work. We all want people to stay on our site as long as possible and the custom sidebar images do just that.
Before I added custom images, I was just using a widget built into my Foodie Pro theme that would basically pull in the four most recent posts with a particular tag or category on them. It was an okay place holder but no one was clicking on them because they didn’t have captions, the pictures weren’t very descriptive, and the featured images I’d chosen to fit well on my home page really didn’t work as well in square sidebar images.
As soon as I switched to the custom images, my sidebar clicking skyrocketed compared to what it was before. I’ve been tracking my sidebar images since I added them just over a month ago, and I’ve had over 4,000 unique clicks. Now that’s not a huge number, but those are 4,000 extra pageviews from people who were already on my site that looked at another page instead of going elsewhere. And people who click through to multiple pages are way more likely to come back, sign up for your email newsletter, and yada yada.
And if that doesn’t do it for you, they’re still pretty.
Part 1 – How to Create Custom Sidebar Images in PicMonkey
I’m sure you can do this in Photoshop or Canva or any other photo editing software, I just choose to do it in PicMonkey because it takes about three seconds and you’re done.
Step 1 – Open the photo you want to use for the custom image in the PicMonkey edit screen.
Step 2 – Resize your image to the max width you want your custom image to be making sure to keep the “keep proportions” box checked so it doesn’t distort the image. My sidebar is 350 pixels wide, so my custom images are 350 px x 150 px. Choose a size that fits your sidebar well.
Step 3 – Crop your image to the exact size you would like to use.
Step 4 – Add a white overlay to the image by clicking on the little butterfly icon (overlay) in the left toolbar. Select the top geometric option then select a rectangle. Change color 2 to white and drag the overlay to cover your entire image. Fade the image to whatever percentage you think looks best, just try to be consistent across your images. I faded my overlay to 40%.
Step 5 – Add text on top of the overlay by clicking on the Tt icon in the left toolbar. Select the font, color, and size you’d like and put it on top of the image. This is where you can get kind of creative. You can put it in the middle like these ones from Living Better Together or even personalize the text like the ones on Illistyle. Whatever you do, I recommend you make it consistent with the rest of your blog. I just used the pink color from my header and added my favorite font at the bottom of the images.
Step 6 – Save your image and you’re done.
Part 2 – How to Create Custom Tracking Links for Your Sidebar Images
This step is optional, but I find it to be extremely important so you can actually track which sidebar images are working and which ones aren’t. So if you want to track that, then do this before you add the images to your sidebar.
Step 1 – Copy and paste the URLs for the blog posts the sidebar images will direct people to into a separate document. So for the image I created above, I would copy https://www.playpartyplan.com/2014/03/10-fun-and-creative-easter-egg-hunt.html into a separate document.
Step 2 – Once you have all of your blog post URLS, add the following to the end of each URL –
Step 3 – Replace the xxxx value with a campaign name (aka short name) for your post. So for my Easter egg hunt post, my campaign is egghunts, so my URL looks like this
Utm_source, utm_medium, and utm_campaign are three universal tracking codes that tell Google Analytics to track that this person came from your sidebar (source) and specifically from the Easter egg hunt images (campaign).
Step 4 – Create a custom URL for all of the posts that you will be putting into the sidebar and save your document so that you can pull up the URLs when you’re adding the sidebar images to your blog.
Part 3 – How to Add Custom Sidebar Images to Your Blog
Disclaimer: These screenshots are specific to the Genesis Framework and the Foodie Pro theme, but you can easily use them to figure out how to add these in any other WordPress blog or in Blogger by just adding a simple text widget.
Step 1 – Upload all of the custom images you created above to your media library. As you upload each image, grab the image URL from the image section and add them to a separate document so you can access them in just a minute.
Step 2 – Add a new text widget to your sidebar by going to Appearance > Widgets > Primary Sidebar. Or wherever the content is for managing your sidebar. If you’d like a header for your images such as popular posts or reader favorites, add in the title.
Step 3 – Add in the following code for the first image you would like to show up in the sidebar.
<a href=”ENTER-PAGE-URL-HERE“><img src=“ENTER-IMAGE-URL-HERE”></a>
Replace the section that says, ENTER-PAGE-URL-HERE with the full URLs (including the utm_source, etc. tracking variables), making sure to keep the ” at the beginning and end of the HTML. And replace the ENTER-IMAGE-URL-HERE with the full image URL that you grabbed in step 1 above, again making sure to keep the opening and closing “.
Step 4 – Repeat with all of the remaining images you’d like included in the sidebar. I did three in one section of seasonal favorites then added another full text widget with three more a little further down in my sidebar. Do whatever works best for you then save your widget.
Part 4 – How to Create a Custom Sidebar Tracking Report in Google Analytics
If you skipped part 2, creating custom tracking links, then you can’t create a custom tracking report so skip this and complete this section once you add in part 2.
Step 1 – Open Google Analytics. If you’re not familiar with Google Analytics at all, I highly recommend purchasing this eBook that creates custom dashboards for you so you can get a ton of info out of Google Analytics without actually knowing anything about it. Or this book on how to grow your blog has an amazing section full of ways to use Google Analytics for bloggers.
Step 2 – Once in Google Analytics, expand the “Dashboards” tab in the left hand sidebar then click on + New Dashboard. Select blank canvas and name your dashboard. I just named mine sidebar tracking but you can be more creative. Click Create Dashboard.
Step 3 – When your new dashboard opens, it’ll automatically open a new widget screen. Title your widget whatever you want it to be called.
Step 4 – Fill in the add widget screen:
- Select the table button under “Standard” (skip the real-time buttons)
- Under “display the following columns” select page title
- Next to page title, select the page metrics “Pageviews” or “Unique Pageviews” or whatever else you want to see in the report. It’ll show up with your post title and the two other stats that you choose next to it in the table.
- Under those options, go down to filter this data section and select the only show option in the first drop down and medium in the second drop down. Then type in sidebar in the blank space.
Step 5 – Save your widget.
This widget will tell you how many unique pageviews (on up to 10 posts) from people coming from your sidebar. Those custom links you created earlier will be sending over the medium = sidebar and the report will be saying, only display pages that people hit with the sidebar variable in the URL.
If you’d like to see more than 10 posts, you can look under Acquisition > Campaigns > All Campaigns (all in the left sidebar). Once there, click on the secondary dimension at top of the list and choose source. This will show you all campaigns (i.e., posts) as well as their source.
And that’s it. This sounds like a lot but once you understand how it works and have it done it once or twice, it literally only takes a few minutes. I like to look at my results each week and add, replace, or update images based on what’s working and what’s not. Feel free to leave any questions in the comments or let me know if you used this tutorial and it worked for you!