Search

How to Create a Notification Bar in Elementor

There are a lot of ways to notify your website visitors over a particular content or offer on your website. The most practical way is by creating a notification bar. In Elementor, you can create a notification bar on your WordPress site without installing an extra plugin. You can do so using the popup builder feature of Elementor. This article will show you how.

When creating a popup using Elementor, you can set the position, where it appears (display condition), and how it shows up. By combining those setting options, you can use the Elementor’s popup builder to create a notification bar.

In this article, we will show how to create a notification bar with the following scenario: The popup (notification) will appear after visitors scrolling half of the page they are visiting.

How to Create a Notification Bar in Elementor

Before getting started, make sure that you have upgraded your Elementor to the pro version since the popup builder is only available on Elementor Pro.

Once you are ready, login to your WordPress dashboard and go to Templates -> Popups. Click the Add New button to create a new popup.

Adding a new popup template in Elementor

Give your popup template a name and click the CREATE TEMPLATE button.

Start creating a template by clicking the CREATE TEMPLATE button.

Elementor offers tens of premade popup templates you can choose from. You can choose the one you like and click the Insert button to use it. If you want to create your popup from scratch, simply close the template library. In this article, we use a template.

Inserting a popup template to the Elementor editor.

Open the popup settings by clicking the gear icon on the bottom-left corner on the left panel. On the Layout block under the Settings tab, you can set the width of your popup as well as the height, position, and entrance animation.

Setting the popup width, position, and overlay.

Go to the Style tab to style up your popup. From this tab, you can set the background color of the popup, customize the close button, and set the overlay color.

Options to style up a popup in Elementor.

Go to the Advanced tab to set the margin and the padding. From this tab, you can also make some advanced settings as shown in the image below.

Advanced popup settings panel.

Once done setting the popup, you can start editing the popup content just like when you are creating a page in Elementor. You can add any widget you like such as Countdown, Button, Form, and so on. If you are new to Elementor, you can read this article to learn how to use Elementor.

Once you are done editing the popup content, click the PUBLISH button on the bottom side on the left panel to set the display condition. You can add the display condition by clicking the ADD CONDITION button.

You can display your popup on the entire website or selected page(s) or post(s). Click the NEXT button once you are done setting the display condition.

Adding display condition to call the popup.

As we stated earlier, we will set the popup (notification) to appear after visitors scrolling half of the page they are visiting. Enable the On Scroll option. Set the direction to Down and the Within option to 50 percent. Click the NEXT button.

If you want to set some advanced rules, you can click the NEXT button. Otherwise, you can click the SAVE & CLOSE.

That’s it. You have successfully created a notification bar in Elementor without installing an extra plugin. Save time, save money.

End result.
This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Want to save yearly expense up to $219? why not?

1 thought on “How to Create a Notification Bar in Elementor”

Leave a Comment

Haven’t used Elementor Pro yet?