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.
Adding Alert widget
Add a Alert widget to your website. For details, see Add Elements article.
Content tab
- 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.
Style tab
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.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.