Announce Banner Component

A fixed-position announcement banner that appears at the top of the page, perfect for displaying important messages, alerts, or promotions.

Features

• Fixed position at the top of the page

• Customizable text content

• Adjustable font styles

• Configurable background color

• Optional close button

• Smooth show/hide animations

• Configurable display frequency and delay

Usage

1. Drag the AnnouncementBanner component onto your canvas

2. Configure the properties in the right sidebar:

Basic Properties

• Show in editor: Toggle whether the banner is visible in the editor

• Text: The announcement message to display

• Background Color: The background color of the banner

• Text Color: The color of the announcement text

• Show Close Button: Toggle the visibility of the close button

Font Styling

• Font: Customize the font style for the announcement text

  • Font family

  • Font size

  • Font weight

  • Line height

  • Letter spacing

  • Text alignment

Timing Controls

• Frequency to show (hrs): How often the banner should appear (in hours)

• Delay to show (secs): How long to wait before showing the banner (in seconds)

Best Practices

1. Content Length: Keep announcements concise and to the point

   • Recommended: 1-2 lines of text

   • Maximum: 3 lines of text

2. Frequency: Set an appropriate frequency to avoid annoying users

   • For critical alerts: 24 hours

   • For important updates: 12 hours

   • For general announcements: 6 hours

3. Delay: Add a small delay (1-2 seconds) to ensure the page has loaded before showing the banner

4. Colors: Choose colors that ensure good readability

   • Use high contrast between text and background

   • Consider your site's color scheme

   • Test for accessibility (WCAG compliance)

5. Close Button:

   • Enable for non-critical announcements

   • Disable for critical alerts that users must acknowledge