• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
    21. July 2019

    Adding a notification bar - Jimdo creator

    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>

    Edit here your notification bar

    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

    tagPlaceholderTags: col-3

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Common support issues

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Matrix Themes for Agencies
    • Matrix Themes for Web Designers
    • Small Business websites
    • Create a new website
    • Pricing
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-center-nav g-font has-large-header
     
    Navigation styles
     
    size-15 weight-400 snip-nav --line01 is-uppercase
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600 is-uppercase
     
    Heading H2
    weight-400 is-uppercase
     
    Heading H3
    weight-600 is-uppercase
     
    Buttons
    weight-600 is-uppercase
     
    Animations
     

    Note:
    All changes made here will be applied to your entire website.
    is-switcher

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close