The Alert Widget is designed to prominently display important messages or notifications on your website. It's an excellent tool for highlighting crucial content, sharing urgent updates, or notifying visitors about specific events.
To use the widget in your page drag and drop the Alert Widget onto your canvas.
Customize the content
Type: In the Content tab, under Alert, select the style that fits your message. Options include Info, Success, Warning, and Danger.
Title: Type in a concise title for your alert.
Content: Enter a detailed message.
Dismiss Icon: Decide if you want a dismiss button letting users close the alert. Toggle between Show and Hide to control its visibility.
Icon: If shown, choose the default icon, upload an SVG, or pick from the Icon Library.
Customize the style
Alert Appearance:
- Background Color: Select the background color for the alert box.
- Border Color: Choose the color for the left border.
- Left Border Width: Adjust the width of the left border to suit your design.
Title
- Text Color: Pick the color for the title text.
- Typography: Customize the font style of the title. For detailed options, see our Typography settings.
- Text Shadow: Add a shadow effect to the title text by clicking the 🖋️ icon. Learn more about applying Text Shadows.
Description
- Text Color: Choose the color for the description text.
- Typography: Modify the font style and size of the description text.
- Text Shadow: Add a shadow to the description text using the 🖋️ icon, similar to the title settings.
Dismiss Icon
- Size: Adjust the size of the Dismiss icon as needed.
- Vertical Position: Slide to set the icon's vertical position within the alert box—top, middle, or bottom.
- Horizontal Position: Slide to set the icon's horizontal placement within the alert box—left, center, or right.
- Color: Choose a color for the Dismiss icon for both Normal and Hover mode.
Note:
For Hover you can also set Transition Duration.
These settings empower you to finely tune the Alert Widget, ensuring it fits perfectly with the style and needs of your website. For detailed instructions on working with Advanced settings refer to this article.