Hello bar alternative

6 Easy Steps To Build A Hello Bar Alternative With Genesis Framework

Hello Bar or Hellobar is a website notification bar which is said to be a great way to direct traffic and promote your website’s most important content.

So, what is a Hello Bar?

Hello Bar is a web notification bar which appears at the top of the screen. As of now, Hello Bar is free for all but words from the support team is that it will become a premium service soon.

Hello Bar is a simple website notification bar (some call it web toolbar) which displays important messages, content URL’s or simply asking your visitors to sign up for you newsletter. Yes, that’s the bar you are probably seeing on the top of your screen right now.

While this is a very powerful advertising tool, it could be pretty ‘nasty’ to deal with especially when you have a Content Delivery Network running on the background or having minify setting turned on. Plus, I am using CloudFlare custom page rules which made my Hello Bar not working at all.

Even though I decided not to use Hello Bar for that matter, I am still very interested to build something and thus, Google had just became my good friend (as always).

I came across this article and I said, “Hey, let’s make it happen!”

Yes, I am talking about building my own Hello Bar from scratch with the help of some tools I had in my inventory; Genesis Framework and Genesis Extender plugin.

In this tutorial, I will show you how you can actually build your own and custom-made Hello Bar alternative from scratch under 10 minutes.

How to build your own, custom-made Hello Bar alternative?

Basically, this is a 6-steps tutorial and no fuss, follow these steps and you should be rocking with your shiny Hello Bar in a few minutes time.

We will be doing these:

  • Creating a conditional rule (more after this)
  • Creating a custom widget area
  • Using genesis hooks to customize the widget created
  • Tag the conditionals to control the display of the Hello Bar alternative
  • Adding the text into the widget area
  • Style your Hello Bar laternative to make it looks prettier

Step 1 – Creating a conditional rule using Genesis Extender plugin

How to use conditionals on Genesis Extender plugin

This would require Genesis Extender plugin and you can get a copy here (with 30-days money back guarantee).

Genesis > Extender Custom > Conditionals > Examples

Click on ‘Examples’ and select the location you want the website notification bar to be visible. Here are some of the common legends you could use:

  • All pages except front page – Is NOT Front Page
  • Front page only – Is Front Page
  • On posts only – Is Single Post
  • On pages only – Is Page

Once done, click on the Save Changes button.

Step 2 – Create a widget area for Hello Bar

Creating a custom widget area

In this step, you would need to create a new widget area for your website notification bar and Genesis Extender plugin makes it all look so easy.

Genesis > Extender Custom > Widget Areas

For the name, any name to label the widget area is fine. I used genesisbar as the name for my widget area. Remember to save the setting once it is done.

Step 3 – Using Genesis Hooks to select the widget area

Setting up Genesis Hook

On the same page, head over to ‘Hooks’ and using the drop down button, choose genesis_before.

Leave the rest of the settings as default and press save.

Step 4 – Tagging using conditionals

Setting up conditionals on Genesis Extender plugin

Head over to conditionals option and select the conditional tag you did earlier. Ensure the right conditional is checked and press save.

Once completing this step, you have completed creating a widget area for your custom Hello Bar alternative.

Step 5 – Setting up the widget area with text widget

Using widget text for hellobar alternatives

You would be able to see genesisbar column in the widget section. The next step is to create a text widget area and paste this code in it:

<div id=”genesisbar-pusher”></div>
<div id=”genesisbar-wrapper”>
<div id=”genesisbar-container”>
Check out this link. <a href=”http://example.com”>Check it out</a></div>
</div>

All you need is to change the ‘check out this link’, ‘check it out’ and the link of the call-to-action button.

Step 6 – Styling your custom-made Hello Bar

By now, your website notification bar should be in place but the styling should be very weird. At times, your site might look broken.

Access your theme’s style.css file using FTP or sFTP and paste this code in it:

#genesisbar-pusher {
height: 33px;
}

#genesisbar-wrapper {
position:fixed;
width: 100%;
top: 0px;
left: 0px;
background-color: #eb593c;
color: white;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: Georgia;
border-bottom: 3px solid #fff;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;

}

#genesisbar-container a {
background-color: #4a4844;
color: #fff;
text-decoration: none;
line-height: 30px;
padding: 2px 8px;
border-radius: 3px;
margin-left: 7px;
font-size: 12px;
}

#genesisbar-container a:hover {
background-color: #61645c;
}

To disable the code on mobile devices, add this code to your style.css after doing the above:

/*hide on small screens*/
@media only screen and (max-width: 760px) {
body #genesisbar-wrapper,
body #genesisbar-pusher {
display: none !important;
}

If you have no idea how to access your style.css through FTP, there is another alternative which is using Genesis Extender plugin itself.

In order to do so, here’s what you need to do:

Genesis > Extender Custom > Enable ‘Activate Front-end CSS Builder’ > Click To View Front-end

Once the page is open, click on Show/Hide CSS Builder which is the on the top right of the page. You will then see a sidebar pop-ing out from the left.

Scroll down the sidebar and you will see Custom CSS Editor and click on ‘Pop-out’ link.

Paste the codes above and you press save. Refresh the page and styling is done.

Hellobar alternative
This is what it looks like after creating the widget and notification bar. Looks identical to the original HelloBar?

Your Hello Bar alternative is ready!

While this is a perfectly a good Hello Bar clone, there are one downside which the analytics part. Using the original Hello Bar, you are able to check on the analytics report such as the click-through-rates (CTR) but with this self coding, you do not have the luxury of such.

Moving forward, I feel Genesis Extender plugin is a great tool for any bloggers who are interested in custom theme customization and in this tutorial, it just prove how easy it is to use to create a custom blog feature under 5 minutes.

Download Genesis Extender plugin

I hope you find this tutorial useful and tell me what you think.

20 thoughts on “6 Easy Steps To Build A Hello Bar Alternative With Genesis Framework”

  1. Thanks for the post Reginald. you make it look so easy!

    I’ve been looking at Genesis and have played around with it, but it seems so daunting. While it’s very powerful, the problem for me is harnessing that power and getting it work like I need. Plus I really need to get better with CSS. Maybe I just need to dig in huh?

    Thanks for the extender plug-in link., Gotta check it out. 🙂

    1. Hi Ron,

      Thanks for dropping by and commenting. Haha! Yes it is easy (really!)

      Genesis for starters is really tough. I had zero knowledge but I took some time with those try an error. At the end, I slowly learn my way and now, I know my way around (plus minus).

      CSS is crazy stuff but Genesis Extender makes it so easy for me to use it. Glad you find this useful!

      *p/s If you use my aff link, thanks for that mate.

      Take care and talk to you soon.

  2. I’m deeply fascinated by your writing style.though i don’t youse Genesis, i must say you have got a clear way and style of presenting.
    A suggestion-it would be good to have the codes encased in pretty print etc so that the users could easily focus on codes and copy them without haste
    Regards
    Anz Joy

  3. Hey Reginald its my first visit here and will surely gonna connect with this blog in 2014 🙂 A Great post I can say.

    Although it looks tough for me but step by step tutorial will help me to get this. Surely with plugin 😀

    I have seen in many posts that you can even hide Hello Bar name from the left and thus can remove credits easily. Do you think that would be good or I should give credits ? (do reply asap 😉 )

    A great post indeed hope you have more plans for the upcoming year. My wishes are with you

    1. Hi Ummeed,

      Thanks for commenting mate. It really depends how you see it. For me, it is very easy as long as you have Genesis Extender. Of course, if you know CSS and stuffs, you can just ditch it.

      In regards of giving credit, I always believe it is best to give credit. Why would we want to hide the credit from? The developers had done great to build it and thus, giving back ‘something’ to them is a good thing indeed.

      Hope this helps.

  4. Hey Reginald,

    Displaying a hello bar could be very useful,, it could be useful in promoting content, providing visitors a way to sign up for the newsletter and in promoting affiliate programs.. Overall, it could be useful in notifying visitors about anything happening on your blog.

    I have seen hello bars on many blogs and it seems that there are many benefits..

    I’m looking forward to add it on my blog, need to promote an affiliate program 😛 Thanks for the guide 🙂

    -Siraj

    1. Hello Siraj,

      Glad you find this useful mate. There are many more plugins that does a better job than Hello Bar (honestly speaking) but it really doesn’t matter since Hello Bar works just fine. Self requirement I would say?

      I have split effect / impact using this and thus, it really depends on your requirements 🙂

      Thanks for dropping by mate!

  5. Hello Reginald,

    Just checking out your blog.

    Good tutorial! I am going to use a similar technique to implement Vertical Share Buttons on my website in the near future.

    Take Care,
    Dani

  6. Hi Reginald,

    I think I understood the essence. What I really want is not a Hello Barr at the top of the screen. I want a kind of Hello bar that raises slowly and smoothly from the bottom of the screen (remains at the bottom of the screen) and where you can opt in.

    More important. I would like to understand the essence of Genesis framework. I mean the basis of the “philosophy”.

    What is Genesis framework? How can you use it? is it enough to buy only the framework or you have to buy a child theme? Can you create your won child theme using only Genesis framework?

    What is the role of plugins in the framework? I see there are some kind of dedicated plugins for Genesis. Why should I use it and when?

    Do you have a post where you talk about all these?

    1. Hi Silviu,

      Thanks for dropping a comment and Happy New Year!

      Now, I don’t have any codes on that yet but let me see what I can work out for ya during my free time. Need to crack my brain on that. Haha. Of course, the easiest alternative is using Foo Bar which you can get a for less than $20. If you are interested, check the CommentLuv link for the mailing list part. You might something that works for ya. (hint: OptinMonster has the footer floating bar thingy).

      Genesis Framework is a theme. Basically, framework is the base of a ‘customized’ WordPress theme. So, Genesis Framework + Genesis child theme = One WordPress theme.

      To use Genesis, you need to install Genesis Framework without activating it. Then install and activate the child theme. So yes, Genesis Framework is like a base or backbone.

      Dedicated plugins for Genesis are mostly done by the developers at Genesis. Not all plugins are done well and therefore, Genesis created some of the popular plugins which will 100% work any Genesis themes.

      You can build your own Genesis child theme if you want and have the knowledge. I don’t have much knowledge so I uses Dynamik Website Builder to build it.

      I also written a review about it here if you are interested.

      Hope this helps!

  7. Very nice article Reggy,
    As usual you provide such a great tutorial.
    I have never researched about Genesis before, i’m impressed about its power and what it can do. Absolutely try it myself, all steps are really easy to follow up.
    thanks for your sharing Buddy, and happy new year, looking forward for your new post.

    Stephan

    1. Hey Stephan,

      Happy New Year! Glad you find this useful!

      Well Genesis is great and I am loving it. It just makes everything much easier. At least, for me since I had used it for years now.

      Take care and talk to you soon.

  8. Hi,
    Just wanting to try for my own technology blog to get direct traffic. I was looking such a plug in and now will use Genesis extender plugin.
    I love the worthwhile information which you discussed in your post. I’ll bookmark your blog and investigate yet again listed here recurrently.I’m quite convinced I will be taught quite a bit of recent stuff perfect right here! Thanks for sharing

  9. I love Keith Davis’ site, I follow his tutorials and his recommendations on themes all of the time. However I’ve not managed to do much with the Genesis Extender Plugin which is really rather annoying. I’m currently using the Epik theme (and loving it), and there’s an option for two menus, I may just make one of them float down the page as the reader scrolls (it’s easier to code than using the plugin ;)).

    As for tracking could you not set up a custom link to follow or a goal in GA? I use WP Subscribers, set up a custom optin form and use that to track opens / clicks / optins etc. Alternatively a custom webform just for the bar? Although it looks like you’re back with the Hello Bar 🙂

    1. Hi Sarah,

      Sorry for the late reply. Been away on a trip. I love Keith’s tutorials too! Lovely indeed.

      I have Genesis Extender Plugin for sometime now and I only use it to the max recently. Epik is lovely my dear Sarah. Really wish it was included in the Pro package. Will get it next month once everything is cool down here.

      Honestly, I have yet to utilize the GA goals yet on my blog. Consider me lazy 🙂 And yes, I revert back to Hello Bar (original) as I had some hard time configuring the alternative one to be mobile responsive. Haha!

Leave a Comment