Bottom Bar Widget
Bottom Bar WidgetLast updated 11.02.22
The new Bottom Bar widget is a plug and play component designed to add a bottom bar that automatically “sticks” to the bottom of the browser window, keeping whatever key message continuously visible.
- Solid color background the full-width of the page
- Text area
- Zero to two buttons in various styles and colors
Add Bottom 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 Bottom 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.
Bottom Bar Widget Properties
5. In the Bottom Bar properties pop up, adjust various settings including text content, background color, number of buttons (1-2), button text, button style and button color.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.
How to delete the Bottom Bar Widget
Hover over the Bottom Bar widget until it displays the properties and trash icons and click on the trash icon to delete.
How to reposition the Bottom Bar Widget
Hover over the Bottom Bar widget until it displays the grab icon on the left. Simply drag and drop in a new location.
Bottom Bar Widget Properties
|Visible||Checking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.|
|Background Color||Select the solid background color of the bottom bar. Select from these options:|
|Message Content||Text 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 Alignment||Buttons 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:|
|Additional CSS Class||Code provided by the Atlas development team to achieve custom effects|
|Button Properties: Number of Buttons||The 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] Text||Enter 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] Style||Select 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:|
|[Button] Color||Select 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:|
|[Button] Target||Below are the targets to choose from: |
|[Button] Target URL||The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.|
Check the checkbox to access the Pages Application or to select a page in the site or a document. (Media files from the Media Library Application can be selected by unchecking this checkbox).
See bottom of the browser window for example