Create an information banner on WordPress

Create an information banner on WordPress


You need to create an information banner on your WordPress site, at the top or bottom of the page, in order to display the information of your choice? The plugin that I will present to you in this article, WPFront notification bar, allows you to do just that.

Create a banner on WordPress can for example be useful for …

  • Show your readers warnings;
  • Highlight useful information (eg: an entrepreneur who wishes to warn the Internet user that he is on vacation and will ship orders from his online store upon his return);
  • Display a promotional message;
  • Promote your social networks;
  • Notify of upcoming maintenance;
  • Promote an event;
  • Share a promo code for a specified period;
  • Collect email addresses for a newsletter;

Install the WPFront Notification Bar banner plugin

Just go to the menu Extensions> Add WordPress and look for the name of the plugin. Then click Install Now.

WPFront Installer Notification Bar

Once the plugin is activated, you will see a new submenu appear Settings> Notification bar, which allows you to choose the parameters of the WPFront Notification Bar banner plugin, this is what will interest us.


Display a banner on WordPress with the plugin

The plugin, despite its simplicity, offers plenty of options for both simple and extensive customization.

Display of the information banner

To activate the display of the banner, simply check the “Activated” box.

You also have a “Preview mode” box, which allows you to preview the rendering of the banner in WordPress without displaying it to all visitors to the site (in this case, do not check “Activated”, otherwise the bar will also be displayed to visitors). Just click on the given link to access a page where you can preview your banner

As for the box “Debug mode”, it is intended for those who are comfortable with the code: it allows you to view technical notifications and any error messages in the browser console.

You can then choose whether the banner is displayed at the top or at the bottom of your site.

WPFront Notification Bar - Options
WPFront Notification Bar – Options

The options :

  • Fixed in position – By checking this box, the WordPress banner will have a fixed position, i.e. it will always stay in the same place when the visitor scrolls to read the content.
  • Show on scroll – The banner will be displayed when the user scrolls on the page.
  • Scroll offset – This is the height in pixels from which the banner will be displayed when the visitor scrolls. If you put 100 pixels for example, the banner will be displayed from the moment the visitor has descended 100 pixels on the page.
  • Bar height – This is the height of your information banner.
  • Position offset – On some WordPress themes, when the banner is at the top of the page, it is not fully displayed. Entering a pixel value here will shift it down a bit.
  • Show after – Time after which the information banner appears (in seconds). Put 0 so that it is displayed as soon as the page opens.
  • Animation duration – When the banner is displayed after a certain time, this option allows you to define its speed of appearance.
  • Show close button – By checking this box, WPFront Notification Bar displays a small cross at the top of the banner so that the visitor can make it disappear if they wish.
  • Auto close after – Allows the banner to disappear after the time defined here.
  • Show shadow – Allows you to display a shadow behind the banner.
  • Show reopen button – If you allow your visitors to remove the banner, the plugin can display a button to you to reopen it if necessary. It is presented in the form of an arrow but you can define your own image if necessary, by selecting an icon from the WordPress media library in the “Reopen Button Image URL” field.
    WordPress information banner
  • Keep closed – If you check this box, the information bar will remain hidden on all the pages once the visitor has indicated that they want to close it (otherwise, it just closes on the page viewed but reappears when the user switches to another page).
  • Keep closed for – Define a number of days during which Internet users will no longer see the banner reappear if they have closed it. For example, if you put “30” and a visitor closes the banner, their choice will be memorized for 30 days, after which the banner will reappear.
  • Keep the cookie name closed – The plugin uses cookies to remember the fact that a visitor has closed the banner, so that it can then be calculated when to display it again. Here you can intervene on this cookie.
  • Hide on small devices – Checking this box will hide the banner on all devices whose screen size is less than the value defined in the “Small Device Max Width” line.
  • Hide on a small window – Same principle, but this time the criterion is not the size of the device screen but the size of the window. Below the value defined in “Small Window Max Width”, the banner will be hidden.
  • Join to stop – A somewhat mysterious option, in fact, which the plugin creator indicates should be activated as a last resort if there are problems with the display of the banner on WordPress.

Content of the information banner

This is where you can define the content to display in your banner : text, links to your social networks and so on! All you have to do is fill in the “Message text” field, you can indicate both text and HTML code … and even shortcuts. For the shortcuts to work, you just need to check the “Process the short code” box.

Putting text in a WordPress banner
Putting text in a WordPress banner

Aurélie, who maintains the Madame Oreille blog, used this type of banner to insert links to her social networks, in particular with a Facebook “Like” button.

The WordPress banner on Madame Oreille's website
The WordPress banner on Madame Oreille’s website

You can also display a clickable button on the bar. Imagine for example a blogger who publishes a new book, he may well consider placing a button “Buy the book” in the information banner, which redirects to Amazon or to the online bookstore where the book is sold.

Check the “Show button” box to do this, enter the button text of your choice … and choose the action to be performed when clicking on the button:

  • Open a specific URL : you can then check the box “Open URL in a new tab / window” and choose the attributes of the link. By default, it is recommended that external links have theattribute “Noopener”, it is checked by default. You can also choose “noreferrer” (I recommend my article on link attributes for more information) or ” no following ”(If your link is sponsored).
  • Execute JavaScript code, to be entered in the field provided for this purpose.

Clickable button in the information bar

If you want the information banner to close once the person has clicked on the button, check the “Close the bar when the button is clicked” box.

Advanced filters

The plugin also allows you to control even more finely the display of your information banner.

  • The date and time of the start of display and end of display : If you are promoting an event for example or broadcasting a special offer, this is a good way to display it for a limited time.
  • The pages and roles of the users who see the information banner : by default, the banner is displayed on all pages and for all users of your WordPress site. But you can definitely choose to display it only on certain pages, like the first page that visitors see when they arrive on your site (“Only in the landing page”) for example. You can also decide to display it only for unregistered visitors to your site (“Invited Users”) or, conversely, for members (“All logged in users”).

Create a nice information banner

You can customize the information banner in the colors of your site …

Color of the information banner on WordPress
Color of the information banner on WordPress
  • Bar color – Headband background color: choose a single color for a solid effect, two different colors to create a gradient.
  • Message text color : the color of the text of your message displayed in the banner.
  • Button color : the background color of the clickable button if you offer one.
  • Button text color : the color of the text of the clickable button.
  • Reopen button color : the color of the arrow which reopens the banner if it is closed.
  • Close button color : the color of the cross used to close the banner.

Finally, if you are familiar with CSS code, you can even customize the display of the banner directly from the plugin interface, by adding your own CSS code.

How to create a scrolling banner in WordPress?

I have been asked the following question several times: is it possible to create a scrolling banner on WordPress, or use WPFront Notification Bar to scroll the text in the information bar?

The answer is yes, using CSS animations.

Step 1 – Personalize your message

In the “Message text” field of the WordPress banner plugin, you will write your notification… but you will surround it with two pieces of code which will then allow us to customize its appearance.

<div class="ntscrolling"><span>Votre texte</span></div>

Which gives this:

Scrolling text on WordPress
Scrolling text on WordPress

Step 2 – Animate the text

In the “Custom CSS” field at the bottom of the settings, you will add formatting code that will allow the text to come alive.

.ntscrolling {overflow:hidden;}

div.ntscrolling span {position:absolute;width:100%;height:100%;line-height:0;transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);-moz-animation: ntscrolling 25s linear infinite;-webkit-animation: ntscrolling 25s linear infinite;animation:ntscrolling 25s linear infinite;}
@keyframes ntscrolling{0%{transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);}100%{transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);}}
@-moz-keyframes ntscrolling{0%{-moz-transform: translateX(100%);}100%{-moz-transform: translateX(-100%);}}
@-webkit-keyframes ntscrolling{0%{-webkit-transform:translateX(100%);}100%{-webkit-transform:translateX(-100%);}}

Your headband should look like this:

Scrolling banner on WordPress
Scrolling banner on WordPress

The “20s” parameter defines the scrolling speed of the banner text (to decrease for faster scrolling, to increase for slower scrolling). The scrolling is set to be infinite (“infinite”). We ask the text to move horizontally (translateX).

Keep in mind, however, that scrolling text is a bit “out of fashion”, it should be used sparingly!


A versatile plugin for a useful notification bar

The WPFront Notification Bar plugin is a really complete solution to display a banner on WordPress. As I mentioned in the intro, it can be you useful in many situations : promote something, disseminate useful information, etc.

You can also display it when the visitor has spent more than 30 seconds on the page, for example, to encourage them to subscribe to your newsletter.

I know some of you are looking for a information banner concerning cookies. There are more suitable plugins, like Cookie Notice or Cookie Yes.

Instead, WPFront Notification Bar is used to display information.

Any other ideas? Share them in the comments!

Marlene ViancinMarlene

Hello ! Me, it’s Marlène. SEO consultant in life, I share with you advice to create a blog and develop your visibility on the web. If you have a question or want to comment after reading this article, feel free to post a comment!



Source link

Leave a Reply

%d bloggers like this: