Table Of Contents

How to use Notification widget for Elementor

The Notification widget for Elementor is one of the fundamental add-ons that show popup/fixed notification on the user screen. It is an easy-to-use widget, designed by Element Pack. Let’s have a look at how you can use it in different modes.

Inserting widget

inserting Notification widget for Elementor

From the widget menu, search for the Notification widget and drag-drop it inside your page.

Inside the Notification widget

2 1 - BdThemes

Notification widget generally puts a notification box on-screen on your visiting page. The text box is compact in size and has several specific text colors to deliver certain messages.

12 2 - BdThemes

Such as, on the default settings, if you go to the Style tab, you can select from 4 different color styles for the text.

Now, let’s see how many functions this widget shows.

Content tab

Content tab basically holds all the basic settings of the widget. It is so that you can determine what notification delivery method you want to take. This part of the settings allows you to design you notification as you like.

0 - BdThemes

The only section Notification under the Content tab has the main settings for the notification. The menu Type has two options inside; Fixed & Popup.

Note: Selecting Fixed will stick the notification on the actual widget position. Selecting Popup will give out the option to make the notification appear on certain places on the screen.

3 2 - BdThemes

The menu Event has four options; Page Onload, Onclick, Onhover, and In time delay. Each one functions separately. Let’s see in detail.

In Time Delay

4 1 - BdThemes

Let’s select the In Time Delay option from the Event. You will get a scroll bar option to set a time delay for the notification. After inserting a specific time, the notification will appear on the page after the execution of the specified time.

Page Onload

5 1 - BdThemes

The Page Onload option makes the notification appear instantly after opening the page. You can put any text on the text field to show as the notification message. Do not forget that you can adjust its position.

6 1 - BdThemes

Selecting Fixed from the Type option will stick the notification on the original position.


7 1 - BdThemes

The Onclick settings makes the notification appear upon click. Now here is a trick that you can deploy on your website.

Note: This trick is a built-in function of the Notification widget.

8 1 - BdThemes

Drag and drop an image widget along with the Notification widget.

9 1 - BdThemes

Select any image and go to its Advanced tab. There, insert a CSS ID for the image widget and copy it.

10 1 - BdThemes

Now, place the CSS ID inside the Trigger Selector field. Put # before the CSS ID in this case.

1 11 1 - BdThemes

Note: There are options for adjusting the position and content width of the notification down below.

Now, hit save and view it in preview mode.

13 1 - BdThemes

Now, upon click on the image, the notification will pop up. The notification box is placed in the bottom center of the settings.

The OnHover option has the same settings as the OnClick option. Just that, it will make the notification message appear upon hover for the alerts widget.

Video Assist

Well, this is how the Notification widget by Bdthemes works. Feel free to watch the video for more visual information. Check out the Demo page here.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.