Alert Box Widget Tutorial

Intro

Premium Alert Box Elementor Widget is a good way to show important notifications, announcements, and alerts. You can use this off-grid widget to display dismissable special offers or GDPR and privacy notifications. You can make the notification appear each time the user opens a page, or appear once only. To create your Alert Box, you can select an Elementor template or add content directly in the text editor.

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.

Key Features

  • Bar
  • Content
  • Advanced Settings

1. Bar

  • Position: Select the position of the bar, choose between:
    • Top: At the very top of the page.
    • Bottom: At the bottom of the page.
    • Middle: In the middle of the page.
    • Custom: When the custom position is selected, you can adjust the Vertical Offset in %. The default is “10%”.
  • Width: Select the width of the bar, choose between:
    • Boxed
    • Full width
  • Direction: Choose between Right to Left, or Left to Right.
Close Button
  • Horizontal Position: Choose whether to display the close button after or before the text content.
  • Vertical Position: Select the close buttons position within the bar, choose between:
    • Top
    • Middle
    • Bottom

Z-index: Adjusting the z-index can help you show the alert box above the rest of the page content. You can test and preview this directly in the editor.

Alert Box Bar Settings

2. Content

Content to Show: Select an Elementor template, or add content by using the rich text editor.

If Elementor page template is selected, the following options become available:

  • Content: Select the page template.
  • Content Width (%): Adjust the width of the template using %.
  • Close Button Text: Add a text to the close button. The default is “x”.

If the text editor is selected, the following options become available:

  • Icon: Enable or disable an icon
    • Select or upload a custom image via the media library, or choose and icon from a list of Font Awesome icons.
  • Add your text directly in the rich text editor.
  • Close Button Text: Add a text to the close button.
  • Alignment: Align the content to the left, center, or right.
Alert Box Content Type: Text Editor or Elementor Template

3. 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.
  • Responsive Controls: This option will hide the alert below a specific screen size. When enabled, the following options are available:
    • Hide on Tablets.
    • Hide on Mobiles.
  • Height: Adjust the height of the bar in pixels, em or vh.
  • Overflow: Select between:
    • Auto
    • Show
    • Scroll
Alert Box Advanced Settings

Style

  • Bar
  • Icon
  • Text
  • Close

1. Bar

  • Background Color: Select a background color and its opacity.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the bar. You can adjust the border-radius in pixels, % or em.
  • Margin: Margin is the distance between the bar and it’s original position. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the content in the bar, and the edge of the bar. Increasing the padding will make the bar larger. Adjust the padding in pixels, em or %.
Alert Box Bar Styling Options

2. Icon

  • Color: Select a color for the icon.
  • Hover Color: Select a color that will be used for the icon when a visitor hovers over it.
  • Size: Adjust the icon size using pixels or em.
  • Background Color: Select a background color behind the icon.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the icon:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius -Increasing the border-radius will add circular corners to the container around the icon. You can adjust the border-radius in pixels, % or em.
  • Shadow -Add a shadow behind the icon. Adjust the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Margin: Margin is the space between the icon and the rest of the content. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the icon and the edge of the icon’s container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
Alert Box’s Icon Customization Options

3. Text

  • Color: Select a color for the text.
  • Typography: Adjust the font settings as you need.
  • Background Color: Select a background color that is used behind the text.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the text:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the container around the text. You can adjust the border-radius in pixels, % or em.
  • Shadow: Add a shadow behind the text. Select from the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Box Shadow: Add a shadow around the text’s container. Adjust the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the text and the rest of the content. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the text and the edge of the text’s container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
Text Customization Options

4. Close

  • Color: Select a color for the close button.
  • Hover Color: Select a color that will be used for the close button when a visitors hovers over it.
  • Typography.
  • Background Color: Select a background color behind the button.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the text:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the container around the close button. You can adjust the border radius in pixels, % or em.
  • Shadow: Add a shadow behind the text. Adjust the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Margin: Margin is the space between the close button and the rest of the content. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the button and the edge of it’s container. Increasing the padding will make the background larger. This is recommended for mobile controls, so that visitors can easily target and click the close button. Adjust the padding in pixels, em or %.
Close Button Styling Options

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.