Xpro Elementor Addons offer a variety of widgets for every purpose, allowing developers to create an appealing website. Another amazing offering from Xpro is the Alert Box widget for Elementor, which is widely used by websites to deliver alert messages. The premium widget is simple to use, and you can quickly create an alert message box.
Elementor Alert Box by Xpro is commonly used to inform website visitors of an essential message. This box can also be used for other messages such as promotional offers, ads, and so on. Notifications can be displayed in six different layouts, each with its own color linked with the message.
How to Install Xpro Alert Box widget for Elementor
Requirements
You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Alert Box Widget is ‘Enabled’, so you can find it in the Elementor editor.
To enable the widget, simply follow these steps:
Step 1
Click on the Xpro Addons option available on the WordPress Dashboard Menu.
Step 2
From the Xpro Addons Dashboard, click on the Widgets Tab, find the Alert Box widget, and finally, toggle the button ON to enable it.
How to Use Xpro Alert Box Widget for Elementor
Display the alert message in one of six different layouts. Each layout can be utilized to convey a particular message. Using the available choices, customize the display widget. Include or exclude the close button from the display. Let’s go over how to use Alert Box with Elementor in more detail.
Step 1
Click on the Xpro Addons – Pro section available in the Elementor Editor.
Step 2
From the Xpro Addons section, find and simply drag and drop the Alert Box widget on your desired page location.
The default view of the widget will look like this after you drag and drop it into the screen.
Content Section
How to Change the Layout
The layout option allows you six different layouts to select from. Each layout can be used for different purposes. Select the layout based on your message.
How to Add Content to the Xpro Alert Box widget
Write a title and description in their respective field. The words will appear on the screen as you write them.
Enable the option to include a close button or not.
How to Style the Xpro Alert Box for Elementor
Although the layout for the alert box comes with a background color, you can still color the background of your choice. You can also include a border if you want and change its width, radius, and color as well. Make a shadow for the box and adjust its position and appearance.
How to Style the Content in the Xpro Alert Box Widget
For the title in the Alert Box, you can style its typography from where you can change its font, size, word spacing, and letter spacing, add an underline, and many more customizations.
Color the title and set its margin.
For the description, apply the same customization choices as you used for the title. Set the margin, style the typography, and color the text.
How to Style Dismiss Button in Xpro Alert Box widget
If you have enabled the option to include dismiss button then you can style it as well. Adjust the size of the close button icon and its background. Color the icon and background for normal and hover state.
Make a border for the close button and adjust its width, radius, and color as well. You can also make a shadow box for the dismiss button if you want.
Best Alert Box Widget for Elementor
This was all from our Alert Box widget by Xpro Elementor. We hope you completely understand the functionality and feature usage of this easy-to-use Xpro Elementor widget. Make full use of this widget to create a beautiful Alert Box and convey your message. Check our premium Elementor Info Box widget to create an attractive Information box on your website.
Xpro Elementor Addons offer a wide range of widgets, Elementor theme builders, and templates that help designers develop an attractive site. Check our 50+ free Elementor widgets which are enough to create a professional WordPress website.