Elementor Alert Box Widget Tutorial

Elementor Alert Box widget in Premium Addons Pro plugin for Elementor is the perfect widget to create popup, notification bar, info box or message box in Elementor. It can be used for promotional offers, privacy notices, or general announcements.

Whether you’re unfamiliar with WordPress or Elementor, this article will walk you through to show you how you can use the Elementor Alert Box widget as notification bar or alert message.

Click here to check Premium Alert Box Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Alert Box

Key Features – Elementor Alert Box

• General Settings
• Content
• Advanced Settings

General Settings

• Alert Box Type: Select the type of alert box to be notification bar or alert message.
  • Custom Position: Switch to allow or turn off custom positioning of the alert box.
  • Position: Choose where on the screen the alert box will show.
  • Vertical Offset (%): As a percentage, change how far from the top or bottom of the screen the alert box is positioned.
  • Width: Select the alert box width style, such as boxed or full-width.
  • Entrance Animation: Choose an animation for how the alert box shows, say fading in.
  • Z-index: Set the stack order of the alert box using z-index to control its page stacking in relation to other components.

• Alert Box Type: Choose the type of alert, for example, an ‘Alert Message’.
• Message Type: Select the message type from Info, Success, Warning or Danger.
• Skin: From among the three skin choices, choose a visual style for the alert box.
• Custom Position: Allow or disallow placing the alert box at a custom location on the screen.
• Position: Decide where the warning should show, such top-center or bottom-left.
• Vertical Offset (%): As a percentage of the screen height, change how high or low the alert box sits on the page.
• Entrance Animation: Choose an animation for the alert box’s entrance.
• Z-index: With a default value of 9999, set the layering order of the alert box in relation to other elements.

Content

• Content to Show: This choice lets you choose what to show in the notification bar. Providing freedom in how you express your message, you may either bring in a pre-designed Elementor template or use the text editor to produce your own material.
• Icon: Choose whether or not an icon should be displayed in the alert box.
• Icon Type: Choose the icon’s type, including ‘Font Awesome Icon’, a well-known font icon library.
• Draw Icon: Switch to allow an animation in which the icon is drawn.
• Path Thickness: Slider to adjust the thickness of the lines in the drawing animation of the icon.
• Draw All Paths Together: Toggle to determine whether the icon’s routes should be animated all paths together or separately.
• Speed: Input to determine how quickly the animation goes; a higher number produces a slower animation.
• Loop: Switch to let the animation run endlessly.
• Reverse: Toggle to run the animation backward.
• Start Point (%): Enter to select where in the path of the icon the animation should start.
• Only Play on Hover: Toggle to restrict the animation to run only when the icon is hovered upon.
• Yoyo Effect: Toggle to loop the animation forward and backward.
• Vertical Alignment: Settings to vertically align the icon inside the component.

• Icon: Activate if an icon is meant to show.
• Icon Type: Lets you choose an icon from the Font Awesome collection.
• Draw Icon: Specifies if the icon should be animated.
• Path Thickness: Changes the line thickness of the icon’s SVG.
• Draw All Paths Together: Decide whether all SVG icon components should animate simultaneously.
• Speed: Controls how quickly the animation of the icon plays.
• Loop: The icon’s animation will repeat when it is active.
• Reverse: Lets the animation run backward.
• Start Point (%): Specify where in the animation sequence the icon animation should begin.
• Only Play on Hover: Enable the icon’s animation to only activate when the user hovers over it with the mouse.
• Yoyo Effect: In a loop, play forward and then backward.
• Title: A field to fill in the alert box title.
• Description: A text editor for formatting and adding the material of the alert box.
• Dismiss Icon: Options for selecting an icon to close the alert window.
• Vertical Alignment: Vertically aligns the alert box’s contents.
• Content Alignment: Matches the alert box’s material.

• Description: This part probably lets the user format and add text for the description box.
• Show Button: A toggle option called Show Button lets you show or hide a button inside the alert box.
• Button: The user may call the button here “Premium Button,” implying a naming option for the button to show.
• Link Type: With “URL” being the presently chosen kind, this dropdown lets the user choose the kind of link the button will utilize.
• Link: Accompanies the Link Type setting, where the actual URL or link path the button should point to can be defined.
• Button Alignment: This option seems to govern the button’s alignment inside the alert box.
• Dismiss Icon: It shows many symbols, probably letting the user choose one to close the alert box.
• Vertical Alignment: Sets the vertical alignment of the alert box’s contents.
• Content Alignment: Manages the alert box’s general content alignment.

Advanced Settings

• Use Cookies: Cookies will track if the alert has been closed by visitors and prevent it from showing again for the current visitor when he visits the page again.
  • Expiration time: Select in hours how long the cookie will be stored. The default is one hour.
• Max Height: Change the bar’s maximum height in pixels, EM or VH.
• Overflow: Select between:
  • Auto
  • Show
  • Scroll

Style

• Bar
• Icon
• Text
• Button

Bar

• Background Type: Choose the background from a picture or a solid color.
• Color: Choose a color for the background.
• Image: Choice to upload or pick a picture.
• Border Type: Choose the border type; “Default” is now selected.
• Border Radius: Slider to change the roundness of the bar’s corners.
• Box Shadow: Apply a shadow effect to the bar.
• Margin: On all four sides—top, right, bottom, left—set the distance between the bar and other items.
• Padding: Set the space on all four sides—top, right, bottom, left—between the border and the inner content of the bar.

Icon

• Size: Using a slider, change the icon size.
• Color: Choose the icon’s primary color.
• Stroke Color: Select the color of the outline of the icon.
• After Draw Fill Color: Set the color that fills the icon following an animation after draw fill color.
• Hover Color: Select the color the icon changes to during mouse hover.
• Hover Stroke Color: Choose the stroke color for when the icon is hovered upon.
• Background Color: Choose a background color for the region behind the icon.
• Border Type: Select from several border styles for the icon.
• Border Radius: Change the roundness of the border of the icon.

Text

• Color: Alter the color of the text.
• Typography: Change font family, size, weight, and style among other parameters.
• Background Color: Choose a background color for the text area.
• Border Type: Choose a border style using choices such as solid, dashed, or none.
• Border Radius: Change the roundness of the text area’s corners.
• Shadow: Add a shadow to the text.
• Box Shadow: Surround the whole text box with a shadow.
• Margin: Specify the distance separating the text box from other components.
• Padding: Change the distance between the text and the edges of its container to set padding.

Button

• Color: Choose the button’s text color.
• Hover Color: Select the button’s text color during mouse hover.
• Typography: Change the font features for the text of the button.
• Background Color: Choose a color for the button’s background.
• Hover Background Color: Select a backdrop color that shows when the button is hovered over.
• Border Type: From a dropdown option, choose a style for the button’s border (Default is selected).
• Border Radius: Change the roundness of the button’s corners.
• Shadow: Give the button a shadow effect.
• Margin: Specify the outside spacing surrounding the button.
• Padding: Change the internal distance between the content of the button and its border.

Dismiss Icon

• Color: This specifies the hue of the dismiss icon.
• Hover Color: The color the icon will change to during cursor hover.
• Typography: Changes text characteristics, which may not apply to an icon unless it has text.
• Background Color: Establishes the background color surrounding the icon.
• Hover Background Color: The background color seen when the icon is hovered over.
• Border Type: Lets you choose the border style surrounding the icon; “Default” is one choice.
• Border Radius: Adjusts how rounded the border corners should be.
• Shadow: Gives the icon depth by means of a shadow effect.
• Margin: Regulates the area surrounding the icon, therefore isolating it from other components.
• Padding: Defines the distance between the icon itself and the border.

Conclusion

The Premium Alert Box widget for Elementor allows you to create responsive message box, popup, notification bar or alert message on your Elementor website to enhance user engagement. It has the option to use browser cookies to remember the user choice to make sure that it doesn’t show again for the website visitor once it’s closed.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.