How To Design Notification Bar With Elementor & NotificationX

NotificationX allows you to design a stunning Notification Bar with Elementor page builder. With the introduction of Elementor integration, you will have the flexibility to choose and customize beautifully designed ready-made Elemetor templates on your WordPress website for free. You can display your latest sales, discounts, or urgent announcements amazingly on the website to influence your potential customers to buy your products or take your services.  Check out the below guideline to see how to configure the ‘Notification Bar’ using NotificationX and Elementor:

Step 1: Create A Notification Bar #

Go to your WordPress Dashboard and navigate to wp-admin -> NotificationX -> All NotificationX. Then right at the top, click on ‘Add New’. Or you can also simply go to the ‘Add New’ tab from the sidebar. 

notification bar with Elementor

After you are done, you will get redirected to the ‘Source’ Tab page of your NotificationX user interface. 

Give a title and select  ‘Notification Bar’ as your notification type. Your notification source will automatically be chosen to be ‘Press Bar’. Then click on the ‘Next’ button.

Notification bar with ELementor

Step 2: Configure The Design  #

From the ‘Design’ tab, you will find a few pre-built themes to choose from and the ‘Build with Elementor’ option. Simply by click on the button, you will find all the pre-made layouts for your Notification Bar.

Note: Make sure you have Elementor installed into your WordPress website. Or, click on the ‘Install Elementor’ button to proceed.

Notification bar with Elementor

After choosing your preferred template, simply go ahead & hit the ‘Import’ button, as shown above.

Once the design is imported, you will find button on the user interface ‘Edit With Elementor. By clicking on it, you will be redirected to the Elementor editor where you can design and customize the Notification Bar section any way you want with your preferred styling options.

Notification bar with Elementor

If you want, you can add new Elementor widgets and customize the design as per your preference and create a stunning notification bar.

notification bar with Elementor

Besides, Notification Bar comes with two more ready layouts to configure and showcase the GDPR Cookie Consent bar on your Elementor site.  Check out this documentation on GDPR Cookie Consent Bar to know in detail.   

Afterward, hit the ‘Next’ button that will redirect you to the ‘Content’ tab of the Notification Bar alert. Here, you can click on the checkbox to enable an advanced evergreen timer on your notification bar to create more urgency by using FOMO marketing among your users. To learn more, check out this documentation.  

notification bar with Elementor

Next, you will be redirected to the ‘Display’ tab of your Notification Bar configuration process. You can now configure its settings to choose the location of your site where you want to display your notification bar and for whom you want to display the alert. 

notification bar with Elementor

Afterward, simply configure the settings from the ‘Customize’ tab and configure the notification bar’s appearance, timing, and behavior. You can choose the position of where to showcase the notification bar on your WordPress website, whether you want to display the bar on mobile devices, and also select if you want to add a close button. 

notification bar with Elementor

After you have completed step 6, click on the ‘Publish’ button. As a result, the ‘Email Subscription’ will be successfully created. 

notification bar with Elementor

Final Outcome #

By following these mentioned steps and a bit more modifying, this is how your Notification Bar will appear on your WordPress website. For more information on how to configure the notification bar, you can check out this detailed documentation.

notification bar with ELementor

With the help of NotificationX, this is how you can easily create and design stunning Notification Bars with Elementor & increase your conversion in the process.

Getting stuck? If you face any issues or queries, you can contact our Support Team.

Powered by BetterDocs