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.

Elementor Alert Box

Key Features – Elementor Alert Box

• 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.

Button

• Horizontal Position: Choose whether to display the close button after or before the text content.
• Vertical Position: Select the position of the close button within the bar, choose between:
  • Top
  • Middle
  • Bottom
• Overlay Background: Enable or Disable the overlay blur overlay background when the alert box is shown.
• 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.

2. Content

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

• You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
• You can also select an existing Elemntor templates.

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 %.
• Button Text: Add a text to the close button. The default is “x”.
• Link: Set a redirect Link when the user clicks on the button.

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, choose an icon from a list of Font Awesome icons or use Lottie Animations URL.
• Add your text directly in the rich text editor.
• Button Text: Add a text to the close button. The default is “x”.
• Link: Set a redirect Link when the user clicks on the button.
• Alignment: Align the content to the left, center or right.

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

Style

• Bar
• Icon
• Text
• Button

1. Bar

• Background Color: Select a background color and its opacity.
• Overlay Background Color: Select a background color for overly background.
• 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.
• Box Shadow: Add a shadow around the container by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Margin: Margin is the distance between the bar and its 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 %.

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 %.

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 %.

4. Button

• Color: Select a color for the close button.
• Hover Color: Select a color that will be used for the close button when a visitor 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 its 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 %.