How to Add A Notification Bar in WordPress

How to Add A Notification Bar in WordPress

To explain your ideas and to showcase some essential messages effectively, you need to make use of all the highly visible areas of your site. Among these great locations, the page header can maximum the effect and ensure the most out of your website. Here, to target this valuable location, we highly recommend you to use the notification bar. In the following, we’d like to tell you how to add a notification bar in WordPress.

In the most cases, the notification bar can be used to showcase the short but critical messages using the colorful and bright strip at the top of your pages. Generally, when people access your pages, most of them will move their eyes to this special bar without feeling intrusive and disruptive. In this case, we sincerely suggest you adding this bar on your site to display the important information.

Method 1 – Leverage the WordPress Notification Bar Plugin

The easiest way to add a notification bar on your WordPress site is by utilizing the WordPress Notification Bar plugin. This plugin helps you create a sticky bar on the top of your pages, which showcases the custom messages or the call to actions. Note that you have the freedom to choose the design and color of this bar totally based on your taste.

Decide the Message of the Notification Bar

After clicking the Settings > Notification Bar button upon the plugin installation and activation, you can decide the information showcased on this bar.

Here, you can choose to enter some words to showcase a textual content only. If you want, you can also add a call-to-action button by entering the label and the target link of this button. Here, you can choose to open this link in a new window or not.

Notification Bar Message

Determine the Overall Style of the Notification Bar

Now, you can decide the background color of this special bar with the color picker. In addition, you can tick the checkbox of Position to make this notification bar a sticky one. This way, when people scroll down, this bar will still stay at the top location all the times.

Notification Bar Style

Note that you can check a preview at the top of the screen. If you feel satisfied, you can tick the Yes checkbox for the Enable option and click the Save Changes button.

Notification Bar Preview

Method 2 – Leverage the WP Notification Bars Plugin

The WP Notification Bars plugin ensures more customization freedom than the first recommendation. With it, you can generate the fully customizable notification bar to market your promotions, show some alerts and display the latest update with the higher click through rate.

Decide the Settings for the New Notification Bar

This plugin allows you to display different notifications bars on different pages. Here, you can generate the new bar by clicking the Notification Bar > Add New button. For the most basic settings, you firstly need to decide whether to hide, to toggle or to close the button showcased on this bar. After that, you can enter the exact pixel value to determine the content width as you want.

In addition, you need to pay attention to the Notification Bar CSS Position part. If you want to have a sticky bar, you should choose the option of Fixed. If you want it to disappear with the scrolling of the pages, you can choose the Absolute option.

Notification Bar General Settings

Set Up the Bar Content

In this step, you should decide the content of this notification bar. By default, you can add the words, a link or a call-to-action button. In this case, you simply need to enter the textual content, provide the label and the URL of the link or the button and choose the link style.

Notification Bar Content

In addition to the default content types, you can also showcase some custom contents, such as the special shortcode.

Change the Appearance of This Special Bar

Next, you should change and modify the appearance of your notification bar. You can try your best to make it match the overall design of all your pages. From this part, you can decide the background color, link color, button color, text color and the font size as you wish.

Notification Bar Style

Choose the Conditions to Display the Notification Bar

Lastly, you need to determine when and where to showcase this effective bar on your WordPress site. Here, you can choose to display it on the specific locations, which include your homepage, the posts and the pages. Or, you can showcase it for people who access your site via the searching results of Google Search Engine or via the Facebook platform.

In addition, you can set a contrary condition of not to display the notification bar based on the above mentioned situations.

Notification Bar Conditions

Note that you can get the live preview of your notification bar whenever you make any changes on it. If you are satisfied, you can give this bar a name for the easier management and publish it.

Method 3 – Use the Hellobar Tool

In addition, we highly recommend you to utilize the online tool of Hellobar. For the proper utilization, you need to enter into its official site and register an account for signup. Note that you can use your Google account for the fast registration. After that, you need to enter your website URL.

Enter URL

In the next screen, you are required to choose the final goal for your hello bar. This tool offers 4 goals for you, which include the promotion of a discount or a sale, the encouragement of the calling made by your mobile visitors, the gathering of your email list and the increase of your Facebook likes. If none of these are your goals, you can choose the last option of Other.

Choose Your Goal

After choosing your wanted goal, you should enter some details for this hello bar, such as what you want this bar to say, what the bar button should say and what URL people can be redirected after clicking the button. Once you have filled out these blanks, you can click the Continue button.

Hello Bar Details

Now, you can have a preview of your website hello bar and make some changes for the style and contents.

Decide the Styles

Note that there are 4 styles available that you can choose, which include Bar, Modal, Slider and Page Takeover. However, as you are going to create the hello bar, in the Style section, you need to choose the Bar option.

After clicking this choice, you can decide the below aspects as you want.

  • Hide or showcase the branding of the Hellobar tool.
  • Allow or disallow the animated entry and exit for the hello bar.
  • Wiggle the button or not.
  • Allow people to hide this bar or not.
  • Allow the webpage to be pushed down and remain the hello bar in place.
  • Choose the placement of the hello bar between the Top location and the Bottom location.
  • Choose the size of the hello bar between the large one and the regular one.
  • Choose the proper timing for the display of the hello bar, along with the proper frequency you prefer.

Bar Settings

Determine the Design & Contents

In this part, you firstly should choose the theme for the hello bar among 10 available options. The selection can be made based on your main color scheme and page design. If you want, you can also make some minor changes for the background color, text color, button color and the button text color.

Choose Color

If you want, you can also change and modify the text content of the hello bar, such as the heading, button text and the font family.

Change Text

Even, this tool allows you to ask the leading question on the hello bar to boost your conversion rate. For this, you can enter the proper questions such as “are you landing for the first time here”, along with the answers you want.

Leading Question

Choose the Target Viewers

In this step, you should choose who can view the hello bar and how often this special bar can be displayed.

Choose the Target Viewers

Now, you only need to click the Save & Publish button

Display the Hello Bar

In fact, this online tool offers a lot of methods for the showcase of the hello bar. Personally, we think you can leverage the coding method.

Here, with the successful creation of the hello bar, this tool will give you an exclusive line of code. You need to copy and paste it.

Next, you can go to your WordPress admin to install the Hello Bar plugin, which allows you to paste that coding stuff into your site easily. For this, you simply need to click the HelloBar button from the admin upon the installation, and then, enter your saved line of code into the blank field. Here, do not forget to choose the display location between header and footer.

Hello Bar Plugin

Now, the generated hello bar can look like as below.

Hello Bar Sample