An Announcement Bar is an easy way to get the word out about a limited time special offer across your entire website. The best part is that you don’t need any additional plugins.
It’s very EZ to put a message on your homepage about that special deal you are having BUT unless the visitor goes to your homepage, that message will be lost. A better way is to put your message somewhere where EVERY visitor will see it. Somewhere where they CAN’T MISS IT! That spot is right at the top of every single page + post on your website and this post will show you how.
As if you need another reason to be using it, I should mention that this method ONLY works in Beaver Builder (the best WP Framework you should be using anyway).
Creating the Announcement Bar only takes a few minutes and looks great across all devices, just follow these animated GIFs!
Setup Your Announcement Bar
The following eight steps will walk you through how to add your announcement bar to your Beaver Builder powered website and even give you some code that includes an animation that will draw eyeballs to your message.
Step 1: Go to Appearance > Customize
This launches the Beaver Builder theme Customizer which includes things like heading styles, footer options, background color, etc…
Step 2: Click on Header > Top Bar Layout
The Top Bar is (as you can imagine) a bar that displays at the top of your entire WordPress (Beaver Builder powered) website. I should mention that if you choose the No Header/Footer page template, that will hide the Top Bar as well.
Step 3: Choose 1 Column and paste in this sample code
You have the option to have your content in one column (centered text) or in two column (one on the left and one on the right). For this exercise just choose 1 Column. The point of the announcement bar is to draw attention to your message, so we’ve included an animated Font Awesome star at the beginning of the announcement to draw attention to that area. Copy and paste the below code into that box:
NOTE: That code was originally created to promote our July 4th special for our Premium Bundles
Step 5: Tweak that sample code
With that sample code in there you’ll want to replace the link, the title and the message.
Step 6: Click the Customizer back arrow and go to Top Bar Style
Now that we’ve got the announcement bar displaying the correct text, now you need to style it so that it stands out in your website.
Step 7: Set your colors
For more websites the best combination will be a red background color and a white text and link color. Your site might need some color other combination.
Step 8: Click the Publish button
If everything looks good click that blue Publish button at the top of the Customizer.
NOTE: If you are using Beaver Themer to design your site header the above method (using the Customizer Top Bar) will not work for you. You’ll need to manually create the top bar look in Beaver Themer.
The End Result
Once you follow the above steps, you should now have a red strip across your entire website with your message. It should look something like this:
Share Your Announcement Bar
If you’ve followed this quick tutorial and created an announcement bar on your website, paste your URL in the comments below and dazzle us.
