{"id":3815,"date":"2014-08-22T01:00:22","date_gmt":"2014-08-22T06:00:22","guid":{"rendered":"https:\/\/blog.growthtools.com\/blog\/?p=3815"},"modified":"2014-12-17T16:31:44","modified_gmt":"2014-12-17T22:31:44","slug":"floating-sidebar","status":"publish","type":"post","link":"https:\/\/blog.growthtools.com\/?p=3815","title":{"rendered":"Little Known Way to Increase the Effectiveness of your Sidebar"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Untitled_2_key_19A64917.png\" alt=\"floating sidebar diy marketing hack\" width=\"844\" height=\"483\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Untitled_2_key_19A64917.png\" alt=\"floating sidebar diy marketing hack\" width=\"844\" height=\"483\" \/><\/noscript><\/p>\n<p>Happy Friday!<\/p>\n<p>As you are reading this I am in the air flying to Costa Rica for 10 days of&#8230;nothing.<\/p>\n<p><strong>Me + Wife @ Beach = Happy Time!<\/strong><\/p>\n<p>However, I&#8217;m not leaving you cold turkey. I&#8217;ve written 3 pretty snazzy DIY marketing hacks\u00a0for you to munch on over the\u00a0next week.<\/p>\n<p>They&#8217;ll be hitting your inbox Today, next Tuesday and next Friday.<\/p>\n<p>I plan on checking email and this\u00a0blog exactly ZERO times while I&#8217;m gone. So, if I don&#8217;t respond to your email or comment &#8211; don&#8217;t take it personally.<\/p>\n<p>In fact I&#8217;m taking a page out of <a href=\"https:\/\/michaelhyatt.com\/unplug-on-vacation.html\" target=\"_blank\">Michael Hyatt&#8217;s book<\/a> and setting this as my Gmail autoresponder.<\/p>\n<figure style=\"width: 680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/How_to_Unplug_While_You_Are_on_Vacation_19A6420D.png\" alt=\"\" width=\"680\" height=\"551\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/How_to_Unplug_While_You_Are_on_Vacation_19A6420D.png\" alt=\"\" width=\"680\" height=\"551\" \/><\/noscript><figcaption class=\"wp-caption-text\">My vacation autoresponder<\/figcaption><\/figure>\n<p>In short, if you need me holler at me on September 1st..<\/p>\n<p>Onward!<\/p>\n<p style=\"text-align: center;\">***<\/p>\n<p>On <a href=\"https:\/\/blog.growthtools.com\/blog\/scroll-box\/\" target=\"_blank\">Tuesday<\/a><strong>, <\/strong>Alex Foo asked &#8220;<em>What plugin do you use to have your 2 right side widgets scroll down the page with user?<\/em>&#8221;<\/p>\n<p>Alex is referring to these&#8230;<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Scroll_Box__It_s_Like_a_Popup_Only_Less_Annoying_19A644F4.png\" alt=\"floating sidebar - example\" width=\"1030\" height=\"545\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Scroll_Box__It_s_Like_a_Popup_Only_Less_Annoying_19A644F4.png\" alt=\"floating sidebar - example\" width=\"1030\" height=\"545\" \/><\/noscript><\/p>\n<p>If you&#8217;ve spent much time on this blog, you&#8217;ve probably noticed these before. If not, look to your right&#8230;see them now :).<\/p>\n<p>This is called a floating sidebar widget.<\/p>\n<p>I originally installed them\u00a0back in March of this year after I noticed how much dead space was present on my longer posts. A regular ole&#8217; 500 word blog post doesn&#8217;t have this issue. But, when you write a massive 3,500 word guide\u00a0it&#8217;s very noticeable.<\/p>\n<p>So, I set out to find a fix.<\/p>\n<p>That&#8217;s when I noticed\u00a0<a href=\"https:\/\/Baeldung.com\" target=\"_blank\">Baeldung.com<\/a>\u2018s snazzy floating sidebar.<\/p>\n<figure id=\"attachment_3816\" aria-describedby=\"caption-attachment-3816\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3816 size-full\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/wp-content\/uploads\/2014\/08\/sticky-widget-in-action-1.gif\" alt=\"sticky-widget-in-action (1)\" width=\"450\" height=\"254\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3816 size-full\" src=\"https:\/\/blog.growthtools.com\/wp-content\/uploads\/2014\/08\/sticky-widget-in-action-1.gif\" alt=\"sticky-widget-in-action (1)\" width=\"450\" height=\"254\" \/><\/noscript><figcaption id=\"caption-attachment-3816\" class=\"wp-caption-text\">Baeldung&#8217;s snazzy floating sidear<\/figcaption><\/figure>\n<p>Instead of having a ton of dead space, his subscribe box\u00a0floated along as I scrolled down the page.<\/p>\n<p>I loved his\u00a0implementation so I &#8216;borrowed&#8217; it.<\/p>\n<p>This is what my first version looked like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Pasted_Image_8_21_14__10_24_AM_19A646B1.png\" alt=\"\" width=\"293\" height=\"214\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Pasted_Image_8_21_14__10_24_AM_19A646B1.png\" alt=\"\" width=\"293\" height=\"214\" \/><\/noscript><\/p>\n<p>The floating sidebar\u00a0increased my email\u00a0opt-ins from 0.3% to 0.8%.<\/p>\n<p>A massive jump.<\/p>\n<p>For every 10,000 people that saw it 80 opted in. With the old setup only 30 people opted in.<\/p>\n<p>Then I started tinkering around to see if I could up that percentage even more. Instead of having the form directly visible, I created a image that lead to a landing page. Then I asked for an email address on that page.<\/p>\n<p>This\u00a0is what the variation looked like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Pasted_Image_8_21_14__10_24_AM_19A646C4.png\" alt=\"\" width=\"326\" height=\"431\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Pasted_Image_8_21_14__10_24_AM_19A646C4.png\" alt=\"\" width=\"326\" height=\"431\" \/><\/noscript><\/p>\n<p>This version increased the conversion rate from 0.8% to 1.2%.<\/p>\n<p>Now, for every 10,000 people that see it 12\u00a0opt in.<\/p>\n<p><strong>Recap<\/strong>: Originally 30\u00a0people at of 10,000 opted in to my email list via the sidebar. With a floating sidebar widget 120 people now opt in.<\/p>\n<p>Want to set one up yourself?<\/p>\n<h2 style=\"text-align: center;\">How to setup a floating sidebar widget<\/h2>\n<p>Creating a floating sidebar is fairly straight forward if you use WordPress. There are 3 main steps.<\/p>\n<p>I&#8217;ll walk you through each.<\/p>\n<h3>Step 1: Download and Install the\u00a0&#8220;Sticky Widget&#8221; Plugin<\/h3>\n<p>Fortunately for us there is a free WordPress plugin that makes this super simple.<\/p>\n<p>It&#8217;s called\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/q2w3-fixed-widget\/\" target=\"_blank\">Q2W3 Sticky Widget.<\/a>\u00a0Download and install it.<\/p>\n<p><strong>(Note<\/strong>: This isn&#8217;t my plugin. I didn&#8217;t make it. However, I&#8217;ve used it for the past 5 months without any issues. It has stellar reviews so you should be safe. Use good practices though and always backup your site before installing any new\u00a0plugins.)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/WordPress_\u203a_Q2W3_Fixed_Widget__Sticky_Widget__\u00ab_WordPress_Plugins_19A64BDB.png\" alt=\"\" width=\"784\" height=\"678\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/WordPress_\u203a_Q2W3_Fixed_Widget__Sticky_Widget__\u00ab_WordPress_Plugins_19A64BDB.png\" alt=\"\" width=\"784\" height=\"678\" \/><\/noscript><\/p>\n<h3>Step 2: Design your Sidebar Image<\/h3>\n<p>The next step is to design the image that you will use in your sidebar.<\/p>\n<p>For this I use Keynote.<\/p>\n<p>I made a quick video tutorial\u00a0showing you my exact process.<\/p>\n<p><iframe loading=\"lazy\" class=\"wistia_embed\" src=\"\/\/fast.wistia.net\/embed\/iframe\/gn8qonsczx?videoFoam=true\" name=\"wistia_embed\" width=\"700\" height=\"394\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><script src=\"\/\/fast.wistia.net\/assets\/external\/iframe-api-v1.js\"><\/script><\/p>\n<p>Source: <a href=\"https:\/\/blog.growthtools.com\/blog\/spike\/\" target=\"_blank\">The Spike Formula: How to build a high converting opt-in<\/a><\/p>\n<h3>Step 3: Setup the Widget in WordPress<\/h3>\n<p>Now you just need to plug everything up.<\/p>\n<p>First, log into WordPress.<\/p>\n<p>Then click on Appearance &gt; Widgets<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Add_New_Post_\u2039_Videofruit_\u2014_WordPress_19A64FAB.png\" alt=\"\" width=\"344\" height=\"335\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Add_New_Post_\u2039_Videofruit_\u2014_WordPress_19A64FAB.png\" alt=\"\" width=\"344\" height=\"335\" \/><\/noscript><\/p>\n<p>Now add a new &#8220;Text&#8221; sidebar widget by dragging a &#8220;Text&#8221; form from the Available Widget section to the Sidebar section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Widgets_\u2039_Videofruit_\u2014_WordPress_19A65028.png\" alt=\"\" width=\"1194\" height=\"643\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Widgets_\u2039_Videofruit_\u2014_WordPress_19A65028.png\" alt=\"\" width=\"1194\" height=\"643\" \/><\/noscript><\/p>\n<p>Next, open the new Text widget by clicking it then insert the following piece of code.<\/p>\n<p><strong>&lt;img src=&#8221; LINK TO YOUR IMAGE &#8220;&gt;\u00a0<\/strong><\/p>\n<p>This will insert the image we created in Step 2 into this section.<\/p>\n<p>Lastly, you need to link the image to the landing page you are sending the traffic to.<\/p>\n<p>To do this add the following code around the &lt;img src&#8230;&gt; code you just inserted.<\/p>\n<p><strong>&lt;a href=&#8221; LINK TO THE LANDING PAGE &#8220;&gt;<\/strong> &lt;img src&#8230;&gt;<strong> &lt;\/a&gt;<\/strong><\/p>\n<p>The final product should look like this&#8230;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Widgets_\u2039_Videofruit_\u2014_WordPress_19A650D0.png\" alt=\"\" width=\"458\" height=\"204\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Widgets_\u2039_Videofruit_\u2014_WordPress_19A650D0.png\" alt=\"\" width=\"458\" height=\"204\" \/><\/noscript><\/p>\n<h2 style=\"text-align: center;\">Templates and Source Code to Help You<\/h2>\n<p>That got a little technical but if you follow those 3 steps closely and engineer your opt in call to action around the principles I taught in the <a href=\"https:\/\/blog.growthtools.com\/blog\/spike\" target=\"_blank\">Spike Formula<\/a> you&#8217;ll be golden.<\/p>\n<p>To help you out, I put together a 2\u00a0resources for you:<\/p>\n<p><strong>1. Keynote template<\/strong> of my sidebar opt in design. You can use this as a starting point to create and design your own.<\/p>\n<p><strong>2. Source code<\/strong> for the original\u00a0form opt in box. You can copy and paste this source code to collect email addresses without building a landing page.<\/p>\n<p>Hope this helps!<\/p>\n<p>You can [content_upgrade id=&#8221;7&#8243;]grab both bonuses here.[\/content_upgrade]<\/p>\n<p>[content_upgrade id=&#8221;7&#8243;]<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Untitled_2_key_19A653AE.png\" alt=\"\" width=\"1020\" height=\"630\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Untitled_2_key_19A653AE.png\" alt=\"\" width=\"1020\" height=\"630\" \/><\/noscript>[\/content_upgrade]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy Friday! As you are reading this I am in the air flying to Costa Rica for 10 days of&#8230;nothing&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":3816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-3815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts\/3815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3815"}],"version-history":[{"count":0,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts\/3815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/media\/3816"}],"wp:attachment":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}