Key Features
- Customizable Alert Styles: Add unique icons, titles, and messages for tailored notification boxes.
- Flexible Styling Options: Customize the appearance of each element for a cohesive design.
- User-Friendly Interface: Simple configuration for both Elementor beginners and advanced users.
What’s Needed?
To use the Notice Box Widget, ensure you have the Elementor free version and Vertex Addons for Elementor.
Install and Activate the Notice Box Widget
To activate this widget, please refer to our Widget Activation Guide.
How to Configure the Elementor Notice Box Widget in Elementor
In this guide, you’ll learn how to configure the Content tab to build a complete notice box, followed by detailed steps to enhance the design in the Style tab.
Content Tab
- Icon:
- Select an icon that best represents your message, such as an exclamation mark for alerts or a check mark for confirmations.
- Content:
- Title: Add a concise title that grabs attention. This title should be relevant to your announcement or alert type.
- Text: Provide additional details or explanations in the text field to support the main message.
How to Style the Elementor Notice Box Widget
To give your notice box a professional appearance, the Style tab offers a range of options for each element of the widget. Here’s how you can customize it:
- Box:
- Background Type: Choose a background color or gradient that contrasts with your site’s content for better visibility.
- Color: Select a primary color for the box to fit your site’s theme.
- Border Line Color: Set the border color to frame your notice box with a subtle outline.
- Items Gap: Adjust the spacing between items for a clean layout.
- Padding & Border Radius: Fine-tune the box padding and corners for rounded or square edges.
- Box Shadow: Add shadows to make the box stand out on the page.
- Icon:
- Background Color: Choose a background color for the icon to add contrast.
- Text Color: Set the icon text color to match your design.
- Box Width & Size: Adjust the icon box width and icon size for emphasis.
- Border Type & Radius: Control the icon’s borders to match your design style.
- Title Style:
- Text Color & Typography: Choose font color and typography settings that are both readable and stylish.
- Alignment: Center or align the title as needed for a balanced look.
- Description Style:
- Text Color & Typography: Set colors and typography for the main content to make it easily readable.
- Padding & Alignment: Control spacing and alignment for a polished presentation.
Advanced Tab
The Advanced tab includes settings like positioning, custom CSS, and animation options. This tab follows the standard options available across Vertex widgets, helping you further personalize your Notice Box.
Final Outcome
Once you have configured the settings, your notice box will be ready to display important notifications that align with your site’s design style and purpose.