What is an announcement bar in Divi?

An announcement bar is a notification strip placed at the top or bottom of your Divi-powered website to display important messages, promotions, or updates to visitors.

Does Divi have a built-in feature for announcement bars?

No, Divi does not have a dedicated announcement bar feature, but it’s easy to create one using Divi’s built-in modules or theme builder.

Can I customize the design of the announcement bar?

Yes, Divi provides extensive customization options, allowing you to adjust colors, fonts, backgrounds, animations, and responsiveness for the announcement bar.

Can I add links or buttons to the announcement bar?

Yes, you can add clickable links or buttons using Divi’s Button Module or by embedding links within a Text Module .

Is the announcement bar mobile-friendly?

Yes, Divi is fully responsive, and you can customize the announcement bar’s layout for mobile, tablet, and desktop views in the settings.

Add a Sticky Divi Announcement Bar to Any Page

An announcement bar is a great way to showcase key updates, promotions, or events prominently on your Divi-powered website.

Whether running a sale, sharing news, or driving traffic to specific pages, an announcement bar captures visitors’ attention without interrupting their browsing experience.

The Divi theme’s flexible builder and advanced customization options make it easy to create and style an announcement bar that matches your site’s design.

This guide walks you through the steps to add and optimize an announcement bar in Divi.

Types of Announcement Bars

Here are some common use cases for announcement bars on Divi websites:

Promotional Bars

Highlight discounts or special offers to increase sales.

Example: “Get 20% off your first order—Use Code: SAVE20.”

Urgency Bars

Encourage quick action with time-sensitive deals.

Example: “Flash Sale Ends in 2 Hours—Shop Now!”

Event Announcements

Promote upcoming webinars, launches, or workshops.

Example: “Join our free webinar on January 25th—Register now!”

Policy Updates

Inform users about changes to terms, privacy policies, or schedules.

Example: “Our refund policy has been updated—Learn more.”

Shipping Announcements

Highlight free shipping or delivery thresholds.

Example: “Free shipping on orders over $50!”

Add Announcement Bar to Divi

Adding an announcement bar to your Divi website is incredibly easy and requires no coding knowledge.

Many platforms offer plugins and tools with simple drag-and-drop interfaces to create and customize announcement bars effortlessly. Create Announcement Bars the Easy Way with WiserNotify.

Using WiserNotify, you can quickly add an announcement bar to your Divi website to grab visitors’ attention and share essential updates, promotions, or calls to action.

wisernotify-homepage

With advanced features like A/B testing and analytics, WiserNotify allows you to create visually engaging and highly targeted announcement bars that boost user engagement and drive conversions. Key features include:

Type of Widgets:

Announcement bar widgets
Recent activity notifications
Reviews and ratings widgets
Countdown timer widgets
Form submission notifications
Inline widgets
Exit-intent pop-ups
Live visitor count widgets

Customizable Design

Adjust colors, fonts, and styles to align with your brand.

Real-Time Updates

Automatically display live or dynamic data like visitor counts or recent
activities.

Targeted Messaging

Personalize bars for specific audiences or user segments.

Urgency and Scarcity Elements

Include countdown timers or stock alerts to drive quick action.

A/B Testing

Experiment with different designs and messages to optimize performance.

Multi-Language Support

Customize announcement bars in various languages for global reach.

Behavioral Triggers

Show bars based on user behavior like exit intent or time spent on a page.

Policy Notices

Use the bar for policy notices too, such as a shipping cut-off, a holiday closure, or a terms update.

Integration with Social Proof Widgets

Combine with social proof notifications to amplify trust and engagement.

Adding an announcement bar to your site with WiserNotify takes a few minutes. Start the 7-day free trial, log in to your dashboard, and add your site to get its pixel code.

To add an announcement bar to your website, create the widget in WiserNotify and follow these steps.

1. Create an Announcement Bar

Log in to the WiserNotify dashboard.
Go to Widgets and pick the Announcement Bar.
Write the message, such as “Free shipping this week” or “Sale ends Sunday.”
Match the font, colors, and background to your brand.
Add a clear button, like “Shop Now” or “Learn More.”
Preview the bar, save it, and press Next.

2. Set Display Rules

Set the display rules: which pages show the bar, and whether it targets visitors by location or behavior.
Schedule it for a date range if the offer has an end date.

Here’s a real-life example of how an announcement bar looks on a website.

3. Preview and Activate

Preview the announcement bar to ensure it looks and functions correctly.
Publish the bar to make it live on your website.

The video below walks through each step on screen.

Steps to Install WiserNotify on Divi

Log in to your WiserNotify dashboard. Start with the free plan to explore the platform’s features.
Add your Divi site, and copy the unique pixel code provided.
Log in to your Divi admin panel.
Navigate to Plugins > Add New and search for “WiserNotify.”
Install and activate the plugin.
Paste the copied pixel code into the WiserNotify plugin settings.

Using WiserNotify, you can easily create and manage announcement bars on your Divi website. This ensures that your key messages reach your audience effectively and drive the desired actions.

The same plugin route works if you build with Elementor instead. Our guide shows how to add an announcement bar in Elementor step by step, including the sticky-header fix.

How to Add an Announcement Bar to Divi: Other Ways

1. Log in to Your WordPress Dashboard

Navigate to the page you want to edit and click Edit with Divi Builder.

2. Add a New Section for the Announcement Bar

Add a Regular Section at the top of your page.
Choose a One-Column Layout.

3. Insert a Text Module

Add a Text Module to the column.
Enter your announcement message, such as “Limited Time Offer: Free Shipping on All Orders Over $50!”

4. Style the Announcement Bar

Open the Design tab:
Set a Background Color (e.g., yellow for visibility).
Adjust the Typography (font size, alignment, and text color).
Add padding and spacing to ensure the text is well-positioned.

5. Add a Button or Link (Optional)

Add a Button Module beneath the text if your announcement includes a call-to-action (CTA).
Customize the button’s text, link, and style.

6. Make the Bar Sticky

Open the Section Settings and navigate to the Advanced tab.
Set the Position to Sticky so the announcement bar stays visible as users scroll.

7. Save and Publish

Save your changes and preview the page to ensure the announcement bar looks as expected.

Related: How to Add an Announcement Bar to Your Website

Best Practices for Announcement Bars

Position at the Top

Place the bar where it’s immediately visible to users.

Use High-Contrast Colors

Choose colors that stand out but align with your branding.

Include a CTA

Add actionable links or buttons to drive engagement.

Optimize for Mobile

Test the bar’s appearance on mobile devices to ensure responsiveness.

Update Regularly

Keep the bar’s content fresh and relevant.

Common Mistakes to Avoid

Keep your message concise and easy to read.

Test the bar on different devices to ensure usability.

Remove expired announcements promptly to maintain credibility.

Ensure the announcement bar matches your website’s overall design.

Always include a call-to-action to guide visitors.

Conclusion

Adding an announcement bar to your Divi website is a simple and effective way to communicate key updates, promotions, or events.

Whether you use Divi’s Visual Builder, Theme Builder, or custom code, the platform’s flexibility allows you to create an announcement bar that suits your needs.

Follow the steps outlined in this guide to enhance your website’s user experience and drive conversions today!