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.

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:

• Anncoment 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.

Compliance-Friendly

• Includes options for GDPR and cookie consent notifications.

Integration with Social Proof Widgets

• Combine with social proof notifications to amplify trust and engagement. 

Adding an announcement bar to your  site with WiserNotify is seamless. Sign up for a free plan to explore its features, then log in to your dashboard. Add your  site to generate a unique pixel code for integration.

To add an announcement bar to your  website, create a widget in WiserNotify. Follow these straightforward steps.

1. Create an Announcement Bar

• Log in to the WiserNotify dashboard.
• Navigate to the Create Notification section and select the Announcement Bar template.

• Customize the design by:
  • Adding a compelling message such as “Exclusive Discount! Limited Time Only.”
  • Choosing the appropriate font, colors, and background to align with your branding.
  • Including a clear Call-to-Action (CTA) button like “Shop Now” or “Learn More.”
• Preview the design to ensure it matches your preferences.
• Save the widget design and press Next.

2. Set Display Rules

 

• Configure display settings, such as showing the bar on specific pages or targeting users based on location or behavior.
• Schedule the announcement bar for a particular timeframe if needed.

Here’s a real-life example of how an announcement bar will look 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.

Watch the video below where we guide you through each step visually. This video will help you set up your announcement bar quickly, ensuring you don’t miss any important details!

Steps to Install WiserNotify on Divi

1. Log in to your WiserNotify dashboard. Start with the free plan to explore the platform’s features.
2. Add your Divi site, and copy the unique pixel code provided.
3. Log in to your Divi admin panel.
4. Navigate to Plugins > Add New and search for “WiserNotify.”
5. Install and activate the plugin.
6. 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.

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!