You can use the Notification Bar to display a custom message above your site. This is a great way to announce a sale, promotion, working hours, or scheduled site maintenance.
The notification Bar can appear on every page of your site or only in specific page.
It can't be customized with text, background color and link.
How to add it
Make sure you're using Enterprise or Advanced package of Matrix theme.
1. In your admin menu, go to enterprise package and select the widget.
2) The last step is to add the code inside the module Widget/HTML.
You add it inside the content of your site to display only in specific page or in footer to make it visible in all pages
<div class="notification-box cc-box">
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery-sticky-alert@0.1.6/jquery.stickyalert.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$(".notification-box").insertBefore($(".hs-top-header"));
$('.notification-box').stickyalert({
barColor: '#d62118', // alert background color
barFontColor: '#fff', // text font color
barFontSize: '0.9rem', // text font size
barText: 'Check the new Jimdo templates!', // the text to display, linked with barTextLink
barTextLink: 'https://www.matrix-themes.com/templates/', // url for anchor
cookieRememberDays: '2', // in days
displayDelay: '3000' // in milliseconds, 3 second default
});
});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
Edit here your notification bar
</div>
Notes:
The notification bar works fine with all templates with relative position of the header. For Some specific templates, you need to add different section where it will appear, for example instead of .hs-top-header you add .hs-footer
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-center-nav g-font |
| size-15 weight-400 snip-nav is-uppercase --line01 |
| form-white |
| o-form color-white |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE