How to Create a Notification Bar in Elementor

Updated: May 22, 2021

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 (read: Elementor Free vs 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.

Give your popup template a name and click 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.

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.

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.

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.

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.

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.

Originally posted on: May 5, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

One thought on “How to Create a Notification Bar in Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.