Close this search box.

How To Add An Announcement Bar In WordPress 2024? [Complete Guide]

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

This whole article is dedicated to How To Add An Announcement Bar In WordPress. Because website users leave within 15 seconds, crucial information must be displayed prominently.

Your WordPress site’s aesthetic could benefit from an announcement bar. This feature highlights new sales and promotions to increase income and traffic.

This post will discuss how announcement bars can improve your website. How to add this functionality to your WordPress site in three steps. Let’s go!

Website Announcement Bars: Why You Need Them?

Because of their high visibility and ability to instruct users, notification bars are very effective.

If you don’t have them, your customers will have to manually search for the page that details your offer or sale. Users may not appreciate the additional effort this demands.

Using this function, you can always inform your target demographic of the latest developments. The prominent placement of these notification bars towards the page’s top ensures that they are seen by most readers.

Visitors may learn about discounts and other promotions with ease as they see your announcement bar.

Instead of using announcement bars, many websites now use pop-up windows, which may be just as, if not more annoying to visitors. Most pop-ups are full-screen affairs that completely obscure the visitor’s previous view.

While this may be true, an announcement bar will not prevent anybody from seeing your material. Your site visitors may keep that message in mind while they explore the rest of your website.

Sticking an announcement bar at the top of the page ensures that visitors will always see it, even if they scroll down the page.

In addition, the appearance of the announcement bar may be altered to your liking. As a result, your website may seem more polished, original, and interesting to visitors.

If you use a page builder like Beaver Builder, you can add a custom announcement bar to your site that matches your brand’s aesthetic and draws in more visitors.

How To Add An Announcement Bar In WordPress? 3 Steps

It’s time to learn how to add announcement bars to WordPress.

How To Add An Announcement Bar In WordPress

In this tutorial, Beaver Themer is used. How to add an announcement bar to WordPress? Here is the step-by-step tutorial:

Step 1: Create a Theme Layout

  • Create your first announcement bar after installing both plugins.
  • Launch Beaver Builder > Themer Layouts > New. New Themer layout.
  • First, name your layout. Assume “Announcement Bar”.
  • Type Themer Layout. Choose Part from the Layout menu.
  • Add Themer Layout then Save Changes. Continue to the next stage.

Step 2: Layout Setup

After saving, the Edit Themer Layout page appears. You can set placement and visibility limits for your content here.

Choose where the announcement bar displays and who can see it. Customize location and visibility rules. Don’t get caught up in the nitty-gr

To move the layout, go to Position. The announcement bar should be at the top. It will be clearer. Before Header: The notification bar should reach every website visitor.

Go to Location and select Entire Site. Then publish your edits. Get started now.

Step 3: Announcement Bar Makeover

Once you’ve set up the layout, you can alter the look. Click Launch Beaver Builder on the Edit Themer Layout page. Enable the builder. Next, add a text editor module.

On the General tab, write the announcement bar’s text. You can also connect. For example, you can link to your online store to promote sales.

The Style tab lets you change the text font, alignment, and line height. You can also use text-shadow, spacing, and caps. You can also alter the margins in Advanced. A thin announcement bar requires 0 top and bottom margins.

Your announcement can also be animated. Use motion effects to showcase your offer. Save your changes. Change your row. The wrench icon on the announcement bar.

You may modify fonts, links, and backgrounds under the Style tab. Set the announcement bar to full width.

For advanced settings, select Advanced. Leverage the text editor module’s bottom padding to zero. Each device’s introduction bar can be customized.

Click on the device symbol in each field. So you may adjust the message for each device. Custom options for desktop, tablet, or mobile are device-specific.

Change any new animation in the same tab. You can also set a delay. When finished, click Done and Publish. Your site now has a top announcement bar!

Quick Links:

Conclusion: How To Add An Announcement Bar In WordPress?

An announcement bar on your homepage may help attract more visitors. When selling or offering free delivery, you can use announcement bars to engage with your clients.

Do you need help designing a custom notification bar for your WordPress site? We’d love to hear your feedback about the space.


Jitendra Vaswani is the founder of SchemaNinja WordPress Plugin, prior to SchemaNinja he is the founder of many internet marketing blogs, and He is a successful online marketer & award-winning digital marketing consultant. He has been featured on HuffingtonPost, BusinessWorld, YourStory, Payoneer, Lifehacker & other leading publications as a successful blogger & digital marketer. Jitendra Vaswani is also a frequent speaker & having 8+ yrs experience of in the Digital Marketing field. Check out his portfolio( Find him on Twitter, & Facebook.