Plugins for creating a notification panel in WordPress. Plugins for creating a notification panel in WordPress Pull-out sidebar for wordpress
Using the plugin – WPFront Notification Bar, you can add a notification bar to your website, at the top or bottom of your WordPress site. The panel can display any text and a button with a link to any page; you can add HTML code. You can customize your colors for the notification panel; you can choose the location of the panel, at the top or bottom of the site. You can lock the panel so that when you scroll the page, the panel is always visible on the screen. You can select on which pages the panel will be displayed and on which it will not, etc.
You can install the plugin directly from the WordPress admin panel. Go to the tab: Plugins – Add new, enter the name of the plugin in the search form, press Enter, install and activate the plugin.
After installing and activating the plugin, go to the page: WPFront – Notification Bar to configure the plugin.
Display
– Enabled, check the box here to enable the notification panel.
– Position, select where the panel will be displayed, Top – at the top, Bottom – at the bottom.
– Fixed at Position, if you check this box, the panel will always be visible on the screen, even when scrolling the page.
– Display on Scroll, if you check this box, the panel will appear when you scroll the page.
– Scroll Offset, here you can specify how many pixels the page should be scrolled before the notification panel appears.
– Bar Height, you can specify the height of the bar here in pixels.
– Position Offset, here you can set the distance from the top of the site to the panel.
– Display After, you can set the time after which the panel will appear, does not work for the function – Display on Scroll.
– Animation Duration, you can set the duration of the animation when the panel moves onto the screen.
– Display Close Button, check the box to show the button with a cross to close the panel.
– Auto Close After, you can specify after how many seconds the panel will close automatically, does not work for the function – Display on Scroll.
– Display Shadow, show the shadow for the panel.
– Display Reopen Button, if you check the box, then after closing the panel, a button to open the panel will be displayed in the corner of the screen.
– Keep Closed, if you check the box, then when you close the panel on one page, the panel will no longer be displayed on other pages.
– Keep Closed For, here you can specify how many days the panel will not be shown for the user who closed the panel.
Content
– Message Text, enter the text here that will be displayed in the notification, you can add HTML code.
– Process Shortcode, check the box so that you can add shortcodes to notifications.
– Display Button, check the box to display the button in the panel.
– Button Text, enter the text for the button here.
– Button Action, enter the link for the button here. Open URL in new tab/window – the link will open in a new window. No follow link – the link will not be indexed.
– Close Bar on Button Click, close the bar by pressing the button.
Filter
– Start Date & Time, you can specify the date and time when the panel will begin to be displayed.
– End Date & Time, you can specify the date and time when the panel closes.
– Display on Pages, select on which pages the panel will be shown. All pages – on all pages. Include in following pages – mark the pages on which the panel will be shown. Exclude in following pages – exclude pages.
– Display for User Roles, here you can select for which user roles the panel will be shown. All users – for everyone, All logged in users – only for authorized users, Guest users – only for guests, For following user roles – check the roles.
Color
– Bar Color, select colors for the bar.
– Message Text Color, specify a color for the text in the panel.
– Button Color, select colors for the button, you can specify two colors to display a gradient.
– Button Text Color, color for the text in the button.
– Reopen Button Color, color for the button to open the panel.
– Close Button Color, select colors for the close button of the panel.
– Custom CSS, you can set your own CSS styles for the panel, but this is not necessary.
At the end save your changes.
Notification bar at the top or bottom of your WordPress site updated: July 25, 2018 by: Ilya Zhuravlev
Surely you have often come across on website pages retractable panels of various types and locations that speak at the top, bottom, right or left fully automatically, at a given time interval, or activated by clicking. As a rule, such panels contain some additional information, some important and some not so important, that is hidden from the user’s eyes for the time being. For example, subscription forms, social network widgets, links, tags, contact information, etc., etc., in short, anything.
There are a huge number of ready-made solutions for implementing sliding panels in javascript, modules and plugins for various CMSs, individual jQuery plugins, but very few that caught my eye were completely working methods in pure CSS.
I’ve been wanting to do something like this for a long time, the mechanism for using hidden checkboxes is well known and understandable, but somehow I never got around to it. And so, having stumbled upon one in the dusty storerooms of CodePen, I decided to experiment and produce my own version of a retractable top panel in pure CSS, quite working, slightly modified and adapted for our brother, and this is what happened)).
We looked at the example, compared it with the original, and now, who needs it, let’s figure out together how this whole thing works. I remind you once again, no js, only pristine html and the “magic” of css will do all the work.
HTML Layout
It consists of three main elements: a basic container, a block with content and a button to open/close the panel.
As you can see, the panel design contains a type=" " flag, which is hidden and inactive by default. Using a tag
