Content Controls
Content
The “Content” section allows you to define the nature and substance of your notification bar. Choose the type and style, tailor the message with a title, description, and an optional call-to-action link. Enhance the visual appeal with icons and manage user interaction with a close button.
- Type – Select from a variety of notification types to best match your message’s purpose.
- Style – Choose a predefined style that aligns with your website’s aesthetics.
- Title – Craft a concise, attention-grabbing headline for your notification bar.
- Description – Provide more detail with a compelling follow-up to the title.
- Link Text – Set the text for your call-to-action, prompting users to click for more information.
- Link – Specify the URL you want users to visit; note that this option is available only when “Link Text” is set.
- Icon – Add an icon for visual guidance or additional branding.
- Show Close Button – Decide if users can dismiss the notification, enhancing user experience.
Design Controls
Box
“Box” design controls allow you to adjust the container of your notification bar. Modify width, background, and accent colors to match your site’s theme. Further customize the look with border adjustments and padding settings to fit your preferred spacing.
- Width – Set the width of the notification bar, ensuring it fits seamlessly into your site layout.
- Background – Choose a background color that makes the notification bar pop up yet remain cohesive with your design.
- Accent – Select an accent color for added visual interest and user focus.
- Border – Customize the border’s look by adjusting its width and radius.
- Border Width – Set the thickness of the border to make it subtle or pronounced.
- Border Radius – Define the corner roundness for a softer or more angular appearance.
- Padding – Adjust the space inside the box, around the content, for optimal readability and balance.
- Padding – Set the internal spacing to ensure content has sufficient room to breathe.
Typography
Under “Typography,” fine-tune the text’s appearance in your notification bar. Customize different aspects like the title, description, and link to ensure readability and stylistic consistency with your website.
- Title – Adjust the typography of the title for standout prominence.
- Description – Modify the description’s typography to complement the title while maintaining clarity.
- Link – Set the typography for your call-to-action link, making it enticing yet coherent.
Icon
The “Icon” settings let you control the appearance and placement of icons in your notification bar. Adjusting the size and color can help draw attention and match your site’s visual language.
- Size – Choose a suitable icon size that balances visibility and space efficiency.
- Color – Select an icon color that contrasts well with the background for higher visibility.
Spacing
“Spacing” controls let you manage the area surrounding your notification bar, impacting the overall layout flow. Adjusting the top and bottom margins can help set the bar distinctly apart from other page elements.
- Margin Top – Increase or decrease the space above your notification bar to position it appropriately on the page.
- Margin Bottom – Modify the space below your notification bar to ensure it doesn’t overlap or crowd surrounding content.
