Alert Box Widget Tutorial

Intro

Premium Addons Alert Box widget for Elementor has been updated to enhance your website’s alert and notification capabilities. This widget simplifies the process of displaying important messages, whether they are promotional offers, privacy notices, or general announcements. It’s designed to be easy to use, requiring no coding skills, with options to show these alerts either every time a page is loaded or just once.

This tutorial will guide you through each step, making it easy to use even if you’re new to WordPress or Elementor.

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: Choose the type of alert box, such as a notification bar.
  • Custom Position: Toggle to enable or disable custom positioning of the alert box.
  • Position: Select where on the screen the alert box will appear.
  • Vertical Offset (%): Adjust how far from the top or bottom of the screen the alert box is placed, as a percentage.
  • Width: Choose the width style of the alert box, such as boxed or full-width.
  • Entrance Animation: Pick an animation for how the alert box appears, like fading in.
  • Z-index: Set the stack order of the alert box, which determines its layering on the page relative to other elements.

• Alert Box Type: Select the kind of alert, such as an ‘Alert Message’.
• Message Type: Choose the category of message between Info, Success, Warner or Danger.
• Skin: Pick a visual style for the alert box from one of the 3 skin options.
• Custom Position: Enable or disable the ability to place the alert box at a custom location on the screen.
• Position: Decide where the alert should appear, such as top-center or bottom-left.
• Vertical Offset (%): Adjust how high or low the alert box sits on the page, as a percentage of the screen height.
• Entrance Animation: Select an animation for the alert box’s appearance.
• Z-index: Set the layering order of the alert box compared to other elements, with a default value of 9999.

Content

Content to Show: This option allows you to decide what to display within the notification bar. You can choose to pull in a pre-designed Elementor template or create your own content using the text editor, providing flexibility in how you convey your message.

• Icon: Choose whether or not an icon should be displayed in the alert box.
• Icon Type: Select the source of the icon, such as ‘Font Awesome Icon’, which is a popular font icon library.
• Draw Icon: Toggle to enable an animation where the icon is drawn.
• Path Thickness: Slider to control the thickness of the icon’s lines in the drawing animation.
• Draw All Paths Together: Toggle to decide if the icon’s paths should be animated at the same time or separately.
• Speed: Input to set how fast the animation runs; a higher value results in a slower animation.
• Loop: Toggle to allow the animation to repeat indefinitely.
• Reverse: Toggle to make the animation run backward.
• Start Point (%): Input to choose where in the icon’s path the animation should begin.
• Only Play on Hover: Toggle to limit the animation to play only when someone hovers over the icon.
• Yoyo Effect: Toggle to make the animation play forwards and then backwards in a loop.
• Vertical Alignment: Controls to set the icon’s alignment vertically within the element.

• Icon: Enable if an icon should be displayed.
• Icon Type: Allows the selection of an icon from the Font Awesome library.
• Draw Icon: Determines whether the icon should be animated.
• Path Thickness: Adjusts the thickness of the icon’s lines if it is an SVG.
• Draw All Paths Together: Determine if all parts of the SVG icon should be animated at once.
• Speed: Controls how fast the icon’s animation plays.
• Loop: When enabled, the icon’s animation will repeat.
• Reverse: Allows the animation to play backwards.
• Start Point (%): Set where in the animation sequence the icon animation should start.
• Only Play on Hover: Enable to have the icon’s animation will only trigger when the user hovers over it with the mouse.
• Yoyo Effect: Play forwards and then backwards in a loop.
• Title: A field to enter the title of the alert box.
• Description: A text editor for adding and formatting the content of the alert box.
• Dismiss Icon: Options for choosing an icon to dismiss the alert box.
• Vertical Alignment: Aligns the content of the alert box vertically.
• Content Alignment: Aligns the content of the alert box.

• Description: This section likely allows the user to add and format text for the description box.
• Show Button: This is a toggle setting that enables or disables the display of a button within the alert box.
• Button: Here, the user can name the button, in this case, “Premium Button,” suggesting a naming feature for the button to be displayed.
• Link Type: This dropdown allows the user to select the type of link that the button will use, with “URL” being the currently selected type.
• Link: Accompanies the Link Type setting, where the actual URL or link path the button should direct to can be specified.
• Button Alignment: This setting appears to control the alignment of the button within the alert box.
• Dismiss Icon: It displays various icons, likely allowing the user to select an icon for dismissing the alert box.
• Vertical Alignment: Controls the vertical alignment of the content within the alert box.
• Content Alignment: Controls the alignment of the overall content within the alert box.

Advanced Settings

• Use Cookies: If enabled, cookies will be used to remember if the visitors have closed the alert.
  • Expiration time: Select how long the cookie will be saved in hours. The default is “1” hour.
• Max Height: Adjust the max height of the bar in pixels, EM or VH.
• Overflow: Select between:
  • Auto
  • Show
  • Scroll

Style

• Bar
• Icon
• Text
• Button

Bar

• Background Type: Select between a solid color or an image for the background.
• Color: Choose a color for the background.
• Image: Option to upload or select an image for the background.
• Border Type: Select the style of the border, with “Default” being the current selection.
• Border Radius: Slider to adjust the roundness of the bar’s corners.
• Box Shadow: Add a shadow effect to the bar.
• Margin: Set the space between the bar and other elements on all four sides (top, right, bottom, left).
• Padding: Configure the space between the border and the inner content of the bar on all four sides (top, right, bottom, left).

Icon

• Size: Adjust the size of the icon using a slider.
• Color: Select the main color of the icon.
• Stroke Color: Choose the color of the icon’s outline.
• After Draw Fill Color: Set the color that fills the icon after an animation.
• Hover Color: Choose the color that the icon changes to when the mouse hovers over it.
• Hover Stroke Color: Select the stroke color for when the icon is hovered over.
• Background Color: Pick a background color for the area behind the icon.
• Border Type: Choose from different border styles for the icon with a dropdown menu.
• Border Radius: Adjust the roundness of the icon’s border.

Text

• Color: Change the text color.
• Typography: Adjust font settings such as font family, size, weight, and style.
• Background Color: Choose a background color for the text area.
• Border Type: Select a border style with options like solid, dashed, or none.
• Border Radius: Modify how rounded the corners of the text area are.
• Shadow: Apply a shadow effect to the text.
• Box Shadow: Add a shadow around the entire text box.
• Margin: Set the space between the text box and other elements.
• Padding: Adjust the space between the text and the borders of its container.

Button

• Color: Set the text color for the button.
• Hover Color: Choose the text color for the button when the mouse is hovered over it.
• Typography: Adjust the font characteristics for the button’s text.
• Background Color: Select a color for the button’s background.
• Hover Background Color: Choose a background color that appears when the button is hovered over.
• Border Type: Pick a style for the button’s border from a dropdown menu (Default is selected).
• Border Radius: Adjust the roundness of the button’s corners.
• Shadow: Apply a shadow effect to the button.
• Margin: Set the external spacing around the button.
• Padding: Adjust the internal spacing between the button’s border and its content.

Dismiss Icon

• Color: This determines the color of the dismiss icon.
• Hover Color: The color the icon will change to when the cursor is hovered over it.
• Typography: Adjusts text properties, which might not be applicable to an icon unless it includes text.
• Background Color: Sets the background color around the icon.
• Hover Background Color: The background color that appears when the icon is hovered over.
• Border Type: Allows selection of the border style around the icon, with “Default” as an option.
• Border Radius: Adjusts how rounded the border corners should be.
• Shadow: Adds a shadow effect to the icon, giving it depth.
• Margin: Controls the space around the icon, separating it from other elements.
• Padding: Sets the space between the border and the icon itself.

Conclusion

We’ve reached the end of our guide on using Premium Addons Alert Box widget for Elementor. With the steps outlined, you should be able to set up alerts on your WordPress site that fit your style and communicate clearly with your visitors. Whether you’re announcing something new or providing important information, the tools you’ve learned will help you do it with ease. Now, it’s your turn to put these insights into action and enhance the way you engage with your audience.

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.