Announcement Bar Widget

Announcement Bar Widget

Last updated 05.27.25

The new Announcement Bar widget is a plug and play component designed to add a full-width communications bar that can be place anywhere on the page to share key or urgent announcements. Similar to the Bottom Bar Widget in appearance and properties.

  • Solid color background the full-width of the page
  • Text area
  • Zero to two buttons in various styles and colors

Add Announcement Bar Widget to the page

  1. Select where on the page you would like the widget to appear. 
  2. Click on the blue plus add widget icon   
  3. Select the Announcement Bar widget from the widget pop up 
  4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

How to delete the Announcement Bar Widget

Hover over the Announcement Bar widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Announcement Bar Widget

Hover over the Announcement Bar widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Background ColorSelect the solid background color of the bottom bar. Select from these options:
Default (None)
Primary
Primary Color - Light
Primary Color - Dark
Secondary
Secondary - Light
Secondary - Dark
Gradient
White
Light Gray
Medium Gray
Dark Gray
Black
Custom (enter color in hex format – ex. #2c6090)

Message ContentText entry box for a concise message to appear in all caps on the bottom bar. Any additional styling to the text would require assistance from the Atlas development team.
Button AlignmentButtons appear on the right side of the bar. The button alignment moves them slightly to the left, right or center of the right side. Select from:
Center
Right 
Left 
Additional CSS ClassCode provided by the Atlas development team to achieve custom effects
Button Properties: Number of ButtonsThe widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display.  Anything other than 0 the Button and the below properties will display  
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
Default - a rectangular shape with a solid-color fill
Round - a pill shape with a solid-color fill
Radius - a rectangle with slightly rounded corners with a solid-color fill
Hollow - a rectangular outline shape with a transparent fill
Expanded - an extra-wide rectangular shape with a solid-color fill
Disabled - a rectangular shape faded back to denote that it is disabled
Clear - a transparent button with only text visible
 [Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
Default (None)
Primary
Primary Color - Light
Primary Color - Dark
Secondary
Secondary - Light
Secondary - Dark
Gradient
White
Light Gray
Medium Gray
Dark Gray
Black
Custom (enter color in hex format – ex. #2c6090)
[Button] Target Below are the targets to choose from:
Default – this will open in the same tab of the browser and is typically used to move around within your site
Blank – this will open in a new tab of the browser and is typically used for links that leave your site
[Button] Target URL Select Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.

Examples

Announcement Bar Widget quis nostrud exercitation ullamco laboris nisi ut aliquip.

Announcement Bar Widget 

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit

Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.ex ea commodo consequat