How to Add a Site-Wide Announcement Bar and Top Notification Using Elementor Custom Code

Do you know how to use it?Elementor Want to add a prominent announcement banner at the top of your website? Elementor's Custom Code feature offers a secure, flexible solution that requires no theme file modifications, enabling the banner to load consistently across your entire site. This article will walk you through the process step by step, from scratch, demonstrating how to use Custom Code to add a fully functional, visually appealing top notification.

I. Why Use Elementor Custom Code to Create Announcement Banners?

Compared to plugins or manually modifying theme files, Custom Code is more beginner-friendly and offers greater security and stability. It provides the following advantages:

• Works with any theme and won't become obsolete due to theme updates
• Can be loaded site-wide in one go, eliminating the need for repeated page editing
• Supports HTML, CSS, and JavaScript, with high customizability
• Control display conditions, such as showing only on the homepage
• Lightweight and resource-efficient, outperforming the installation of additional plugins

Extremely useful for scenarios such as marketing campaigns, holiday promotions, and logistics announcements.

II. How Site-Wide Announcements Work

Announcement items typically consist of three parts:

• HTML block as announcement content
• CSS Controls Style and Fixed Positioning
• Inject it via Custom Code to display it at the top of every page.

You only need to write it once, and Elementor will automatically load it sitewide.

III. Preparing to Create Custom Code

You need:

• Installed Elementor(The free version is sufficient)
• Backend administrator privileges
• Clearly define announcement text, such as "Free shipping on orders over $X" or "New arrivals now available"

No programming knowledge is required at all—just copy the code.

4. How to Add Announcements Using Custom Code?

4.1 Access the Custom Code page

In the backend, open the following in sequence: Elementor → Custom Code → Add New. Enter a name, such as "Site-Wide Announcement Bar."

4.2 Setting the Code Placement Location

Select in Location:Body End (Recommended)This approach won't affect page loading speed and makes it easier to implement the sticky header effect.

4.3 Adding Announcement HTML Structure

Paste the following content into the code editor:

<div class="site-announcement-bar">
  <span>🎉 Free shipping on all items for a limited time—sale now on!</span>
  <a href="/en/shop/" class="notice-btn">View Now</a>
</div>

This is a simple structure suitable for displaying events, announcements, or jump links.

4.4 Adding CSS Styles

To keep the announcement bar pinned to the top, apply the following styles to the element above: HTML Put together:

.site-announcement-bar {   position: fixed;   top: 0;   left: 0;   width: 100%;
  background: #155111; color: #ffff; padding: 10px 0; text-align: center; font-size: 15px; z-index: 9999; } .site-announcement-bar .notice-btn { margin-left: 12px;
  padding: 6px 14px; background: #f4c21d; color: #000; border-radius: 4px; text-decoration: none; font-weight: bold; }

It displays a top notification bar with black background and white text, featuring yellow buttons for a clear and eye-catching visual effect.

V. Add a Close Button to Announcement Items (Optional)

To allow users to manually close the announcement bar, add the following content.

5.1 Add Close Button HTML

×

Place this button inside the announcement bar.

VI. Avoid content being obscured by announcement bars

Announcement bars pinned to the top may cover page content. Consider adding the following style:

body { padding-top: 50px; }

Adjust the number according to the height of the announcement bar.

VII. Method for Displaying Announcement Items Only on Specific Pages

If you don't want the announcement bar to appear on all pages, you can set conditions:Elementor Custom Code → Conditions

Select:

• Entire Site
• Front Page
• Singular (single article page)

This allows for more precise configuration targeting events, holidays, and product collections.

VIII. Solutions to Common Issues

1. Announcement items not displaying?

Verifiable:

• Has Custom Code been published?
• Is the loading position selected correctly (Body End is the most stable)
• Are any styles overridden by the theme?

2. Poor mobile styling?

Optimize fonts and layouts with media queries:

@media(max-width: 768px){   .site-announcement-bar{     font-size: 13px;     padding: 8px 0;   } }

3. Want to make the announcement bar more eye-catching?

Can be added:

• Gradient background
• Scrolling text effect
• Countdown Module
• Activity icon

Simply adjust the CSS to enhance the visual appearance.

IX. Summary

Elementor Custom Code This is a powerful yet lightweight tool that lets you create a site-wide announcement banner with just a few lines of HTML and CSS. No need to modify theme files or install extra plugins—it's perfect for e-commerce sites, content platforms, and marketing pages. Follow the steps in this article to quickly build your own website notification system, freely design its style and display area, and ensure users see critical content at a glance!

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off