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…

Announcement Bar

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.

Announcement Bar

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:

Announcement Bar

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.

Announcement Bar

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.

Announcement Bar

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.

Announcement Bar

Step 8: Click the Publish button

If everything looks good click that blue Publish button at the top of the Customizer.

Announcement Bar

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: