Although the phrase conversion optimization is bordering on being an overused buzz word, it's still extremely important to get your website visitors to do what you're needing them to do. If they aren't buying your products or contacting you about your services, your efforts and time can be diminished very fast. A great way to ensure the people on your website are doing what you need them to do is to have different sidebars on different pages so the content stays relevant to your reader.
This tutorial will show you how to have different sidebars on different pages so you can increase your conversion rate.
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
You should not neglect the content in your sidebar
Often we exhaust most of our energy designing the content of our pages and then slap in a sidebar on the side without any thought.
Sidebars are extremely important in most cases as they offer information relevant to what the user is currently reading. For example, if you're running a blog, the sidebar is a great way to get your users clicking into another post and staying on your website. Also, if you're looking to monetize your blog, a great way to do this is to add sidebar ads that are always in front of your users. More ad exposure means more possible clicks and thus more money!
Monetizing is a topic we could talk lightyears about, but for this post, we'll use a different example of when it is necessary to have different sidebars on different pages.
An example of when you should conditionally change the content of your sidebar and have different sidebars on different pages
Let's say you've just started to monetize your How to run your first Web Design business blog as you're getting a reasonable amount of traffic. You add three ads into the sidebar of each page:
- Web hosting: You add an ad to InMotion Hosting because you know they're great web hosts and you want to let others know.
- Theme Junkie: You add a link to the Theme Junkie lifetime license because you want to show your readers the cool eCommerce templates
- TidioChat: You add a link to TidioChat as you recommend it for Live chat.
Now, the above are by default showing on every page that you have a sidebar on.
Later on down the track, you write a lesson on How to build a website with Beaver Builder and these above ads just aren't as relevant to the people who are reading your course. Irrelevant ads means that your monetizing strategies aren't going to go as planned and you'll likely be wasting this important sidebar space. You need to optimize your conversions by swapping these irrelevant ads with relevant ads.
Building on this example, say you want to change the sidebar ads to include these relevant ads below:
- Beaver Builder: Of course! To follow the lessons your users are going to need to install Beaver Builder.
- UABB: At the end of the course you mention that if people are struggling with designing websites that they can use the UABB addon for Beaver Builder to not have to design.
But you only want these to replace the standard ads on this course.
How to conditionally change your sidebars in WordPress
Step 1: Install the plugin WooSidebars
WooSidebars is the plugin we'll be using to have different sidebars on different pages. It's amazing. We've used it for about 3 years now and have never had a problem. If you missed yesterday's post where we discussed what to look for before installing plugins or addons for WordPress (we discuss this half way down yesterday's post), you'll understand that we're very picky about what we install in our websites. The authors of this WooSidebars plugin are Woothemes who make WooCommerce and are now owned by Automattic (Automattic are the main developers behind WordPress) so you know it's good plugin. Furthermore, WooSidebars has been around since around 2013 (as per the changelog) and was was also updated 3 weeks ago from today, so it's actively developed.
Enough about why you should use this plugin, let's discuss how you can use this plugin to have different sidebars on different pages.
The first step is to install the plugin.
Install the WooSidebars plugin like any other WordPress plugin, either by logging into your WordPress dashboard and going to Plugins > Add New and searching for WooSidebars, or downloading it from the plugin repository directly by clicking here.
Step 2: Create your new sidebar
NOTE: A larger topic and one that we cannot fully cover in this post is the fact that, in WordPress lingo, a Widget Area and Sidebar are the same thing. But a sidebar is NOT just the thin column to the side of your main content. In WordPress, a sidebar (or Widget Area) is actually just a section on your website that you can add widgets into. For example, if your footer has 4 areas for you to add widgets into, you have 4 Widget Areas for the footer, or you could also say you have 4 sidebars in your footer. So, where the below screenshots say Widget Area, we are setting up the sidebar.
Next, go to your WordPress dashboard and navigate to Appearance > Widget Areas.
And then click to Add New to add a new Widget Area.
Next, set up your Widget Area. Running with the example of changing the sidebar on the How to build a website with Beaver Builder, we set up the Widget Area as per below.
Things you need to note about the above screenshot:
- Widget Area title: Give your widget area a Title. This is only used by you or whoever will be managing the website, so make the title meaningful but don't stress too much. You can always change this at any time.
- Sidebar To Replace: On the right side of the screenshot you can see that we have nominated to replace the Primary Sidebar widget area content with our new sidebar that we're creating here.
- Conditions: This is where you nominate the conditions where your sidebar will be used to replace an existing sidebar. In the above screenshot, you can see that in the Post Types tab we have elected to use this new sidebar on Each Individual BeyondBeaver Lesson post. NOTE: "BeyondBeaver Lesson" is our custom post type that we're using for Lessons.
To summarize the above into easy-to-follow words, the above screenshot shows that our new sidebar (aka widget area) named "Sidebar - How to build a Beaver Builder website" will replace the Primary Sidebar area on each individual BeyondBeaver Lesson single post.
Step 3: Add content into your new sidebar
To add content into this new sidebar named "Sidebar - How to build a Beaver Builder website" we will go to Appearance > Widgets and you can see our new widget area there, as per the screenshot below.
Let's add in our InMotion Hosting banner code, as per below.
And click Save.
Step 4: Preview the changes and see the plugin in action!
Now, we're all done! Go to your standard WordPress blog page and view the sidebar there. Ours is as per below.
Then, navigate to where you've added the new sidebar (we've added the new sidebar on our BeyondBeaver Lessons, so we preview one of these lessons) and your sidebar will have changed. See how below we're showing our InMotion Hosting banner code instead of the Blog Categories and archive?
We've successfully conditionally changed our sidebar and worked to improve our conversion rate.
Putting it all together
Conversion optimization is extremely important and not only necessary to do when you're looking at monetizing your blog. You should always be working on increasing the conversion rate on your website and an easy way to do this is to show your visitors content relevant to them and what they're reading.
The same sidebar on each page will generally NOT be the best way to use a sidebar. Start planning out what is relevant to the content on the page and use WooSidebar to conditionally change the content in sidebar of each page.
Another common reason you may need to have different sidebars on different pages
We sometimes add a short contact form into the footer of each page so the user on the website can easily contact our clients.
But having a sidebar in the footer is redundant on the Contact page.
Because you have a contact form in the content area of the page AND also in the footer.
To overcome this, we use WooSidebars to create a new Widget Area called Contact Page Footer. Then, we use the Conditions available in WooSidebars when setting up the Widget Area to replace this footer contact form ONLY on the Contact us page with something else (maybe a snippet from their about page).
WooSidebars will help you optimize your conversions by showing relevant information AND also allow you to prevent duplicating content on a page (like this contact form example).
Wrapping it up
Thank you and we hope you enjoyed this article.
Please share examples in the comments below of where you think conditionally replacing Widget Areas may be appropriate.