BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Alert / Notice Box Free

How to set up and style the Alert / Notice Box widget in Elementor.

Alert / Notice Box shows a short message with a matching icon and color: info, success, warning, error or note. Visitors can close it, and the widget can remember that choice for the session or for a number of days.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag the Alert / Notice Box widget onto the page.

  2. In Alert, choose the Type and Look, then type the Title and Message.

  3. Add Link Text and a Link if the message needs one.

  4. In Icon, keep Matches the type or choose Custom or None.

  5. In Close Button, keep Show Close Button on and choose what happens After Closing.

  6. Fine tune colors in the Style tab.

Content options

Alert

Option What it does
Type Info, Success, Warning, Error or Note. Sets the default icon and color.
Look Soft, Soft with Side Bar, Outline or Solid.
Title A short title above the message.
Title Tag The HTML tag of the title.
Message The message text.
Link Text Text of an optional link after the message.
Link Where the link goes.

Icon

Option What it does
Icon Matches the type, Custom or None.
Custom Icon Your own icon when Icon is Custom.
Position Icon on the left or on top.

Close Button

Option What it does
Show Close Button Lets visitors close the message.
After Closing Show again on every page load, hide until the browser is closed, or hide for a number of days.
Days How many days the message stays hidden after closing.
Bright Addons Pro

Like this free widget? Get 70+ more with Pro

Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Box

    accent color, background color, padding, border radius, side bar or outline width and shadow.

  • Icon

    color, size and space next to the icon.

  • Title and Message

    colors, typography, spacing and link color.

  • Close Button

    color, hover background and size.

Tips

  • The closed state is saved in the visitor's own browser, so it does not need cookies on your server and works on cached pages.

  • The editor always shows the message, even if you closed it on the live page.

  • Set Accent Color once to restyle the whole box in your brand color.

Questions and answers

Will a closed message show again?

That depends on After Closing: on every page load, after the browser is closed, or after the number of Days you set.

Can I hide the close button?

Yes. Switch off Show Close Button and the message always stays visible.

Can I use my own icon?

Yes. Set Icon to Custom and pick one under Custom Icon, or choose None for no icon.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides