• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog

     

    Easy-to-Use & Customizable

    Pop-Up Banner widgets 

     

    draggable-hero text-center

    Wait 10 seconds

    The demo popup banner appears automatically after 10sec and only once when you close it. Use the Incognito browser mode to see it again.

    See Options for popup customization and styles.

    X

    20% off

    New Collection


    Get a discount on all items in your next order


    Shop now

    style01

    X

    20% off

    New Collection


    Get a discount on all items in your next order


    Shop now
    
    <!-- start popup banner style 01 -->
    <div id="newsletter-popup" class="col-6 bg-gray cc-box">
        <a href="#" class="popup-close">X</a>
        <div class="is-matrix bg-grey">
            <div class="is-flex is-flex-block mobile-auto cc-clearover">
                <div class="mobile-auto col-6 m-padding cc-box" style="padding:5%;">
                    <div class="" style="max-width:800px; margin:0 auto;">
                        <h3 class="has-large-text weight-600">
                            20% off
                        </h3>
    
                        <h3 class="">
                            New Collection
                        </h3>
                        <br />
    
                        <p>
                            Get a discount on all items in your next order
                        </p>
                        <br />
                        <!-- ************* default button ************* -->
                         <a class="hs-button" href="https://www.matrix-themes.com/widgets/" target="">Shop now</a>
                    </div>
                </div>
    
                <div class="col-6">
                    <img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/sale-banner.jpg?t=1632988498" />
                </div>
            </div>
        </div>
    </div>
    <!-- end popup banner -->

    style02

    X

    Black Friday Sale!

    Get 30% Discount


    Shop now
    
    <!-- start popup banner style 02 -->
    <div id="newsletter-popup" class="col-6 bg-gray cc-box">
        <a href="#" class="popup-close">X</a>
        <div class="is-matrix is-parallax is--flex rel no-padding" style=
        "background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/sale-banner.jpg?t=1632988498') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
            <div class="hs-overlay opacity-8">
            </div>
    
            <div class="inner color-white m-padding cc-clearover is-anim-block" style="padding:30px 0;">
                <div class="col-10 left-align add-20">
                    <p>
                        Black Friday Sale!
                    </p>
    
                    <h3 style="font-size:40px;font-weight:600; text-transform:uppercase;">
                        Get 30% Discount
                    </h3>
                    <br />
                    <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Shop now</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end popup banner  -->

    style3

    X

    -30% off

    Get an exclusive discount 30%! Your coupon code:


    discount30

    Shop now
    
    <!-- start popup banner style 03 -->
    <div id="newsletter-popup" class="col-6 cc-box">
        <a href="#" class="popup-close">X</a> <!-- *** Matrix Widget overlay teaser *** -->
         <!-- *** Custom Matrix widget fa description *** -->
    
        <div class="is-matrix bg-sun-flower add-20 center-align mid-round">
            <div class="fa fa-gift fa-3x">
            </div>
    
            <h3 class="add-top-10 add-btm-10 weight-600 has-large-text">
                -30% off
            </h3>
    
            <p>
                Get an exclusive discount 30%! Your coupon code:
            </p>
            <br />
    
            <div class="is-matrix add-15" style="border:1px dashed;">
                discount30
            </div>
            <br />
            <a class="hs-button fullwidth-btn bg-dark cc-box mid-round" href="https://www.matrix-themes.com/widgets/" target="">Shop now</a>
        </div>
    </div>
    <!-- end popup banner  -->

    style04

    X

    Thomas from Pinneberg (Germany) recently purchased Lemberg theme

    
    <!-- start popup banner style 04 -->
    <div id="newsletter-popup" class="col-6 cc-box">
        <a href="#" class="popup-close">X</a> <!-- *** Matrix Widget overlay teaser *** -->
         <!-- *** Custom Matrix widget fa description *** -->
    
        <div class="is-matrix bg-white add-30 mid-round">
            <p>
                <span class="weight-600">Thomas</span> from Pinneberg (Germany) recently purchased Lemberg theme
            </p>
        </div>
    </div>
    <!-- end popup banner  -->

    style05

    X

    Important update!


    Coronavirus Covid-19

    Due to Coronavirus restrictions Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Etiam imperdiet imperdiet orci. Praesent turpis. Nullam cursus lacinia erat.

    Stay Safe!

    
    <!-- start popup banner style 05 -->
    <div id="newsletter-popup" class="col-6 cc-box">
        <a href="#" class="popup-close">X</a> <!-- *** Matrix Widget overlay teaser *** -->
         <!-- *** Custom Matrix widget fa description *** -->
    
        <div class="is-matrix bg-red color-white add-20 mid-round">
            <center>
                <div class="fa fa-warning fa-3x">
                </div>
    
                <p>
                    Important update!
                </p>
                <br />
    
                <h3 class="add-top-10 add-btm-10 weight-400 has-large-text">
                    Coronavirus <span class="weight-600">Covid-19</span>
                </h3>
    
                <p>
                    Due to Coronavirus restrictions Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Sed augue ipsum, egestas nec,
                    vestibulum et, malesuada adipiscing, dui. Etiam imperdiet imperdiet orci. Praesent turpis. Nullam cursus lacinia erat.
                </p>
    
                <p class="weight-600">
                    Stay Safe!
                </p>
            </center>
        </div>
    </div>
    <!-- end popup banner  -->

    How to add it

    To display a popup banner, you just add the below code to the Widget/HTML and customize it for your needs:

    
    <style>
        /* <![CDATA[*/
    #newsletter-popup{
      margin: 70px auto;
      position: relative;
      transition: all 1s ease-in-out;
    }
    
    .newsletter-overlay{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: visible;
      opacity: 1;
      z-index: 203006;
      display: none;
    }
    
    #newsletter-popup .popup-close{
      color: #fff;
      height: 30px;
      width: 30px;
      background:#000;
      border-radius:500px;
      position: absolute;
      top: 10px;
      right: 10px;
      text-align: center;
      text-decoration: none;
      line-height: 30px;
      font-weight: bold;
      z-index:1;
    }
    /*]]>*/
    </style><div class="newsletter-overlay">
        <!-- start popup banner -->
     <div id="newsletter-popup" class="col-6 bg-gray cc-box">
            <a href="#" class="popup-close">X</a>
            <div class="is-matrix bg-grey">
                <div class="is-flex is-flex-block mobile-auto cc-clearover">
                    <div class="mobile-auto col-6 m-padding cc-box" style="padding:5%;">
                        <div class="" style="max-width:800px; margin:0 auto;">
                            <h3 class="has-large-text weight-600">
                                20% off
                            </h3>
    
                            <h3 class="">
                                New Collection
                            </h3>
                            <br />
    
                            <p>
                                Get a discount on all items in your next order
                            </p>
                            <br />
                            <!-- ************* default button ************* -->
                             <a class="hs-button" href="https://www.matrix-themes.com/widgets/" target="">Shop now</a>
                        </div>
                    </div>
    
                    <div class="col-6">
                        <img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/sale-banner.jpg?t=1632988498" />
                    </div>
                </div>
            </div>
        </div>
        <!-- end popup banner -->
    </div>
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
    
    // matrix popup banner
    var delay = 10000; //in milleseconds
    
    jQuery(document).ready(function($){
      setTimeout(function(){ showNewsletterPopup(); }, delay);
      
      $('.popup-close').click(function(){
          $('.newsletter-overlay').hide();
          
          //when closed create a cookie to prevent popup to show again on refresh
          setCookie('newsletter-popup', 'popped', 30);
      });
    });
    
    function showNewsletterPopup(){
      if( getCookie('newsletter-popup') == ""){
         $('.newsletter-overlay').show();
         setCookie('newsletter-popup', 'popped', 30);
      }
      else{
        console.log("Newsletter popup blocked.");
      }
    }
    
    
    function setCookie(cname,cvalue,exdays)
    {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires+"; path=/";
    }
    
    function getCookie(cname)
    {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) 
        {
            var c = jQuery.trim(ca[i]);
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
        }
        return "";
    }
    
    });
    })(jQuery); 
    //]]>
    </script>

    Options and styles

    • There are 4 different styles and you can replace the right part of the code between the lines:

    <!-- start popup banner --> and

    <!-- end popup banner -->

    • By default the banner appears after 10seconds. You can easily change it here:

     

    
    // matrix popup banner
    var delay = 10000; //in milleseconds
    
    
    
    • To display the popup banner globally on your site, add the Widget/HTML inside the footer instead of content section

    How to add a custom widget to your Jimdo website

    1. Click the Matrix Themes admin menu and select the 'Shortcodes' section.

     

    2. Choose any custom widget using the copy button.

     

    3. Paste the widget code to your website inside the 'Widget/HTML' module.

     

    4. Customize it by adding your own text and images.

    hs-fullwidth bg-lightgray
    How to add a custom widget to Jimdo website wow animated fadeInUp

    Make your own website

    with built-in tools to grow your business online.

    Select a template
    bg-primary color-white hs-fullwidth

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Helper classes
    • Common support issues
    • Contact

    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
    • 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