• Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog
     
  • Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog

    Design Kits

    Select one of the design kits below and paste the provided code into the Head section of your website (Menu > Settings > Edit Head). Ensure to use the design kit corresponding to your template.

     

    Matrix Themes
    
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Malaga template ***/
    .jtpl-header{-webkit-box-shadow:0 0 18px 1px rgb(0 0 0 / 10%);box-shadow:0 0 18px 1px rgb(0 0 0 / 10%)}.jtpl-section-main{margin:85vh auto 0;max-width:inherit!important}@media only screen and (max-width:745px){.jtpl-section-main{margin:35vh auto 0}.jtpl-background-area{position:absolute;height:45vh}}#content_area,.jtpl-breadcrumb,.jtpl-navigation,.jtpl-topbar-section{max-width:1170px;margin:0 auto}.jtpl-navigation .j-nav-level-1,.jtpl-navigation .j-nav-level-2{box-shadow:none;border:none;min-width:180px;text-align:left}.jtpl-navigation .j-nav-level-2{border-left:none;left:-100%;top:-1px}.jtpl-navigation li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.jtpl-navigation .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation .j-nav-variant-nested a:after,.jtpl-navigation .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation .j-nav-variant-nested a:before{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;z-index:-1;bottom:0;left:0;background-color:currentColor;transform-origin:bottom right;transition:transform .4s cubic-bezier(.86, 0, .07, 1)}.jtpl-navigation .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation .j-nav-variant-nested .current a:before,.jtpl-navigation .j-nav-variant-nested a:hover:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:scaleX(1);transform-origin:bottom left}.jtpl-navigation .j-nav-variant-nested .current a:after,.jtpl-navigation .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-breadcrumb,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-section-aside__inner,.jtpl-sidebar__inner{max-width:1170px}.inner{width:100%;max-width:1170px}#cc-inner .onepager nav ul li a{background:0 0;padding:0;margin:0 15px}#cc-inner .jtpl-mobile-navigation .onepager nav ul li a{padding:7px 0}#cc-inner .jtpl-mobile-navigation .onepager nav ul li a:hover{opacity:.7}/*]]>*/
    </style>

    Malaga  Preview

    Matrix Themes
    
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Rome template ***/
    .jtpl-header__,.jtpl-title{position:relative}.jtpl-navigation .j-nav-level-1{border-bottom:none;box-shadow:none}.jtpl-navigation .j-nav-level-2{left:-100%;box-shadow:none}.jmd-nav__list-item-0:last-child ul.cc-nav-level-1{right:0;left:auto}.jtpl-navigation .j-nav-level-1 .j-nav-has-children:after{content:""}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner .onepager a,.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.j-website-title-content,.jtpl-mobile-navigation a:link,.jtpl-mobile-navigation a:visited,.jtpl-navigation a:link,.jtpl-navigation a:visited{letter-spacing:.1px}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;content:"";width:100%;transform:translateY(calc(100% - 4px));opacity:0;transition:.2s;background-color:currentColor}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:translateY(100%)}.jtpl-navigation__inner .j-nav-variant-nested .current a:after,.jtpl-navigation__inner .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation__inner .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-breadcrumb .jtpl-breadcrumb__navigation{height:auto}.jtpl-breadcrumb{width:100%;top:0}.jtpl-breadcrumb__inner.flex-background-options,.jtpl-breadcrumb__title-navigation-gutter:before{background-color:transparent;height:auto}.j-nav-variant-breadcrumb a:link:after,.j-nav-variant-breadcrumb a:visited:after{content:"\00bb";padding-left:3px}.jtpl-breadcrumb__title-navigation-gutter a:link,.jtpl-breadcrumb__title-navigation-gutter a:visited{padding:5px}.jtpl-breadcrumb__title-navigation-gutter a:link:before,.jtpl-breadcrumb__title-navigation-gutter a:visited:before{content:''}.jtpl-breadcrumb__inner{float:left;margin-left:0;padding:0;width:100%;max-width:1170px;background:0 0}.j-nav-variant-breadcrumb li:only-child{display:none}.jtpl-logo,.jtpl-navigation{padding:10px}.jtpl-title{margin-top:-60px;width:100%}@media (max-width:767px){.j-module .j-website-title-content{font-size:16px!important}#cc-inner .jtpl-background-area,#cc-inner .jtpl-header--image{height:60vh}}.j-website-title-content{max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.jtpl-header__inner{width:100%;max-width:100%;padding:0 10px}.jtpl-background-area,.jtpl-header--image{height:70vh}.jtpl-breadcrumb,.jtpl-content,.jtpl-footer__inner,.jtpl-sidebar__inner{max-width:1170px}@media (min-width:768px){.jtpl-cart .j-cart{top:60px}}/*]]>*/
    </style>

    Rome  Preview


    Matrix Themes
    
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Prague template ***/
    .jtp-sidebar__inner,.jtpl-breadcrumb,.jtpl-content,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-main__inner{max-width:1170px;border-radius:0;box-shadow:none}.jtpl-mobile-navigation__inner .j-nav-current>a:link,.jtpl-mobile-navigation__inner .j-nav-current>a:visited,.jtpl-mobile-navigation__inner .j-nav-parent>a:link,.jtpl-mobile-navigation__inner .j-nav-parent>a:visited,.jtpl-mobile-navigation__inner a:active,.jtpl-mobile-navigation__inner a:focus,.jtpl-navigation__inner .j-nav-current>a:link,.jtpl-navigation__inner .j-nav-current>a:visited,.jtpl-navigation__inner .j-nav-parent>a:link,.jtpl-navigation__inner .j-nav-parent>a:visited,.jtpl-navigation__inner a:active,.jtpl-navigation__inner a:focus{font-weight:inherit}.jtpl-breadcrumb{margin:0 0 10px}.j-website-title-content,.jtpl-navigation{padding:10px 0}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;font-weight:400;margin:3px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:all .35s ease;transition:all .35s ease}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:100%;content:"";background-color:currentColor;transform:scaleX(0);transition:.25s linear}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:scaleX(1)}.jtpl-navigation__inner .j-nav-level-1::before{left:50%;margin-left:0;border-left:none;border-top:none;opacity:0}.jtpl-navigation__inner .j-nav-level-1,.jtpl-navigation__inner .j-nav-level-2{border:none;border-top:none;padding:0}
    /*]]>*/
    </style>

    Prague  Preview

    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
        // Design kit for Miami template
         $(".jtpl-logo").insertBefore($(".jtpl-navigation__inner"));
    });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Miami template ***/
    #cc-inner .jtpl-logo{margin:0 5px;text-align:left}#cc-inner .jtpl-logo a{color:transparent}#cc-inner .jtpl-logo .cc-imagewrapper{display:inline-block;width:auto}.navigation-alignment{text-align:right}@media (max-width:768px){.navigation-alignment{text-align:left}}#cc-inner .jtpl-navigation{position:relative;padding:20px;box-sizing:border-box;height:auto}#cc-inner .jtpl-header{padding:150px 10px;min-height:70vh}#cc-inner .jtpl-navigation__inner{margin-top:0;max-width:unset;border-bottom:none}.jmd-nav__list-item-0:last-child ul.cc-nav-level-1{right:0;left:auto}#cc-inner .jtpl-navigation__inner .j-nav-level-0{margin:0 5px}#cc-inner .jtpl-cart .j-cart{top:65px;left:auto;right:12px}.jtpl-breadcrumb,.jtpl-content__inner,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-sidebar__inner{max-width:1170px}/*]]>*/
    </style>
    

    Miami  Preview


    Matrix Themes
    
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Tokyo template ***/
    .jtpl-navigation li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation .onepager a,.jtpl-navigation li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.j-nav-level-0 .j-nav-current>a:link,.j-nav-level-0 .j-nav-current>a:visited,.j-nav-level-0 .j-nav-parent>a:link,.j-nav-level-0 .j-nav-parent>a:visited,.j-nav-level-0 a:active,.j-nav-level-0 a:focus,.j-nav-level-0 a:hover{border-bottom:none}.jtpl-navigation .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation .j-nav-variant-nested a:after,.jtpl-navigation .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:0%;content:"";background-color:currentColor}.jtpl-navigation .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation .j-nav-variant-nested .current a:before,.jtpl-navigation .j-nav-variant-nested a:hover:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}.jtpl-navigation .j-nav-variant-nested .current a:after,.jtpl-navigation .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-content__inner,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-sidebar__inner,.jtpl-subnavigation .j-nav-level-1,.jtpl-subnavigation .j-nav-level-2,.jtpl-subnavigation .jtpl-subnavigation__inner-nav2,.jtpl-topbar-section{max-width:1170px}.jtpl-subnavigation .j-nav-level-1 li:last-child,.jtpl-subnavigation .j-nav-level-2 li:last-child{margin-right:0}.jtpl-subnavigation .j-nav-level-2 a:link,.jtpl-subnavigation .j-nav-level-2 a:visited{font-size:95%}/*]]>*/
    </style>

    Tokyo  Preview

    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
        // Design kit for Cairo template
       $(".jtpl-logo").insertBefore($(".jtpl-navigation"));
       $(".jtpl-title").insertBefore($(".jtpl-slope"));});
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Cairo template ***/
    #cc-inner .jtpl-title,.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}#cc-inner .jtpl-logo{padding:20px 0;min-height:auto;width:auto;max-width:inherit;display:inline-block}#cc-inner .jtpl-title{float:none;margin:0 auto;padding:170px 10px;min-width:250px;min-height:0;width:100%}#cc-inner .jtpl-navigation{float:right}#cc-inner .j-nav-level-0 .j-nav-current>a:link,#cc-inner .j-nav-level-0 .j-nav-current>a:visited,#cc-inner .j-nav-level-0 .j-nav-parent>a:link,#cc-inner .j-nav-level-0 .j-nav-parent>a:visited,#cc-inner .j-nav-level-0>li,#cc-inner .jtpl-navigation__inner a:link,#cc-inner .jtpl-navigation__inner a:visited{border:none}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}#cc-inner .j-nav-level-1 li,#cc-inner .j-nav-level-2 li{width:auto;min-width:200px}.jtpl-navigation__inner .onepager a,.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested a{padding:5px;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:0%;content:"";background-color:currentColor}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation__inner .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}.jtpl-navigation__inner .j-nav-variant-nested .current a:after,.jtpl-navigation__inner .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .j-nav-level-2{left:-100%!important}.jtpl-breadcrumb,.jtpl-content__inner,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-sidebar__inner,.jtpl-title{max-width:1170px}/*]]>*/
    </style>
    

    Cairo  Preview


    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
       // Design kit for Amsterdam template
       $(".is-hero-block").insertAfter($(".jtpl-title"));
        });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Amsterdam template ***/
    .j-website-title-content,.jtpl-navigation .j-nav-level-0{padding:0}#cc-inner .navigation-alignment{text-align:right}li.jmd-nav__list-item-0{margin:15px 0;padding:0}.jtpl-navigation__inner .onepager a,li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.j-nav-variant-nested *{box-sizing:border-box}.j-nav-variant-nested a{padding:.2em 0;position:relative}.j-nav-variant-nested a:after,.j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:0%;content:"";background-color:currentColor}.j-nav-variant-nested ul li ul a:before{height:0}.j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.j-nav-variant-nested .current a:before,.j-nav-variant-nested a:hover:before,.j-nav-variant-nested ul li.cc-nav-current>a:before,.j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}.j-nav-variant-nested .current a:after,.j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-mobile-navigation .j-nav-current>a:link,.jtpl-mobile-navigation .j-nav-current>a:visited,.jtpl-mobile-navigation .j-nav-parent>a:link,.jtpl-mobile-navigation .j-nav-parent>a:visited,.jtpl-mobile-navigation .jmd-nav__toggle-button{border-left:none}.jtpl-mobile-navigation a:link,.jtpl-mobile-navigation a:visited{border-bottom:none}.jtpl-logo{position:absolute;top:0}#cc-inner .jtpl-logo img{max-width:180px;height:auto;max-height:auto}#cc-inner .jtpl-content{margin:-40px 0}#cc-inner .jtpl-footer__inner,#cc-inner .jtpl-header__inner,#cc-inner .jtpl-navigation .j-nav-level-0,#cc-inner .jtpl-section__gutter{max-width:1170px}#cc-inner .jtpl-header__inner{padding:250px 10px 100px}#cc-inner .jtpl-content,#cc-inner .jtpl-sidebar{float:left;width:100%}#cc-inner .jtpl-footer__inner,#cc-inner .jtpl-sidebar{padding:25px}#cc-inner .j-hr hr{width:100%}#cc-inner .jtpl-footer{border-top:none;border-bottom:non}/*]]>*/
    </style>

    Amsterdam  Preview

    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
        // Design kit for Osaka template
       $(".is-hero-block").insertAfter($(".j-website-title-content"));
    });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Osaka template ***/
    .jtpl-navigation .j-nav-variant-nested .current a:after,.jtpl-navigation .j-nav-variant-nested a:hover:after,.jtpl-topbar-section{max-width:100%}.j-website-title-content{padding:10px}#cc-inner .cc-website-title,#cc-website-title span.j-website-title-content{margin-top:30vh}#cc-inner .jtpl-title{margin:0 auto;width:100%;max-width:1170px;min-height:calc(100vh - 100px)}.jtpl-logo,.jtpl-navigation{padding-left:20px;padding-right:20px}.jtpl-header__mobile-topbar{height:auto}.jtpl-breadcrumbs li:only-child,.jtpl-breadcrumbs+hr{display:none}.jtpl-mobile-navigation .jmd-nav__toggle-button{border-radius:0}.jtpl-section-aside,.jtpl-section-main{max-width:100%;width:100%;box-shadow:none}.jtpl-footer{padding:20px 0}.jtpl-navigation{box-shadow:none;padding:20px}.jmd-nav__list-item-0:last-child ul.cc-nav-level-1{right:0;left:auto}.jtpl-navigation li.jmd-nav__list-item-0>a{background:0 0!important;padding:2px 0!important;margin:5px 20px!important}.jtpl-navigation li.jmd-nav__list-item-1>a,.jtpl-navigation li.jmd-nav__list-item-2>a{padding:10px!important;margin:0!important;border-color:transparent!important}.jtpl-navigation .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation .j-nav-variant-nested a:after,.jtpl-navigation .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation .j-nav-variant-nested a:before{bottom:0;display:block;height:1px;width:0%;content:"";background-color:currentColor}.jtpl-navigation .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation .j-nav-variant-nested .current a:before,.jtpl-navigation .j-nav-variant-nested a:hover:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}#cc-inner .jtpl-navigation .j-nav-level-1{transition:none;transform:none;-ms-transform-origin:0 0;transform-origin:0 0;transform-style:unset}.j-website-title-content:not(:empty):after,.j-website-title-content:not(:empty):before{background:0 0}.jtpl-navigation .j-nav-level-0>li>a:link,.jtpl-navigation .j-nav-level-0>li>a:visited{border-top-width:0}.jtpl-background-area{min-height:100vh;height:auto;position:absolute;width:100%}.jtpl-background-area:after{content:'';display:block;background:rgba(0,0,0,.2);position:absolute;top:0;left:0;margin-bottom:0;width:100%;height:100%}#content_area,.jtpl-breadcrumbs,.jtpl-footer,.jtpl-sidebar{max-width:1170px;width:100%;margin:0 auto}@media (max-width:1169px){.jtpl-logo{float:left!important;margin:0!important;padding:5px;width:auto}#cc-inner .j-website-title-content{text-align:inherit!important}#cc-inner .jtpl-cart .j-cart{left:auto;top:40px;right:0}
    }}/*]]>*/
    </style>
    

    Osaka  Preview


    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
       // Design kit for Amsterdam template
       $(".is-hero-block").insertAfter($(".jtpl-title"));
        });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for New York template ***/
    .jtpl-main{width:100%;max-width:100%}#cc-inner .j-module .j-website-title-content,#cc-inner .j-website-title-content{padding:5px;font-size:16px!important;text-align:right!important}.jtpl-logo{max-height:120px;width:auto;padding:15px}#cc-inner .jtpl-title{margin:0;padding:0}.jtpl-header__mobile-topbar{height:auto}.jtpl-mobile-navigation__topbar{background-color:transparent;border-bottom:none}.navigation-colors .navigation-colors__menu-icon,.navigation-colors .navigation-colors__menu-icon:after,.navigation-colors .navigation-colors__menu-icon:before{border-color:#fff}.jtpl-mobile-navigation{padding-top:0;border-top:50px solid}.jtpl-header_{min-height:65vh}.jtpl-breadcrumbs li:only-child{display:none}.jtpl-mobile-navigation .jmd-nav__toggle-button{border-radius:0}#cc-inner .jtpl-content{padding:20px;margin-bottom:0}.j-hr hr{border-color:inherit}.jtpl-section-aside,.jtpl-section-main{max-width:100%;width:100%;box-shadow:none}.jtpl-footer{padding:20px 0}#cc-inner .jtpl-cart .j-cart{position:fixed;top:50px;right:5px}.jtpl-navigation{margin-bottom:65vh;padding:0;margin-left:10px;margin-right:10px;width:auto}#cc-inner .jtpl-mainnav a:link,#cc-inner .jtpl-mainnav a:visited{border-bottom:2px solid transparent}#cc-inner .jtpl-mainnav .j-nav-current a:link,#cc-inner .jtpl-mainnav .j-nav-current a:visited,#cc-inner .jtpl-mainnav .j-nav-parent a:link,#cc-inner .jtpl-mainnav .j-nav-parent a:visited,#cc-inner .jtpl-mainnav a:active,#cc-inner .jtpl-mainnav a:focus,#cc-inner .jtpl-mainnav a:hover,.jtpl-subnavigation .j-nav-current>a:link,.jtpl-subnavigation .j-nav-current>a:visited,.jtpl-subnavigation .j-nav-parent>a:link,.jtpl-subnavigation .j-nav-parent>a:visited,.jtpl-subnavigation a:active,.jtpl-subnavigation a:focus,.jtpl-subnavigation a:hover{border-bottom:2px solid}.jtpl-mainnav a:link,.jtpl-mainnav a:visited{padding:2px 0;margin:0 20px}.navigation-colors a,.navigation-colors a:link,.navigation-colors a:visited,.navigation-colors li a:active,.navigation-colors li a:focus,.navigation-colors li a:hover,.navigation-colors li.cc-nav-current>a:link,.navigation-colors li.cc-nav-current>a:visited,.navigation-colors li.cc-nav-parent>a:link,.navigation-colors li.cc-nav-parent>a:visited{background-color:transparent}.jtpl-subnavigation{padding:0}.jtpl-subnavigation a:link,.jtpl-subnavigation a:visited{border-bottom:2px solid transparent;margin:0 30px 0 0;padding:0}.jtpl-subnavigation .j-nav-level-1{border-bottom:none}.jtpl-subnavigation li{margin-bottom:0}.jtpl-background-area{min-height:100vh;height:auto;position:absolute;width:100%}.jtpl-background-area:after{content:'';display:block;background:rgba(0,0,0,.2);position:absolute;top:0;left:0;margin-bottom:0;width:100%;height:100%}#content_area,.cc-nav-level-1.j-nav-level-1,.cc-nav-level-2.j-nav-level-2,.jtpl-breadcrumbs,.jtpl-footer,.jtpl-header,.jtpl-sidebar>div{max-width:1170px;width:100%;margin:0 auto}@media (max-width:1169px){.jtpl-logo{float:left!important;margin:0!important;padding:5px;width:auto}#cc-inner .j-website-title-content{text-align:inherit!important}#cc-inner .jtpl-cart .j-cart{left:auto;top:40px;right:0}
    }}/*]]>*/
    </style>
    
    

    New York  Preview

    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
    // Design kit for Barcelona template
       $(".jtpl-title").insertBefore($(".j-nav-variant-nested"));
       $(".jtpl-logo").appendTo($(".jtpl-title"));
        });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Barcelona template ***/
    .jtpl-header__topbar,.jtpl-mobile-fallback .jtpl-logo{display:none}#cc-inner .jtpl-navigation{margin-bottom:65vh!important;display:block}.jtpl-mobile-navigation a:link,.jtpl-mobile-navigation a:visited,.jtpl-navigation__inner,.jtpl-navigation__inner a:link,.jtpl-navigation__inner a:visited{border-bottom:none}#cc-inner .jtpl-cart .j-cart-icon{padding:.2em .9em}.jtpl-logo{padding:0;display:inline-block}#cc-inner .j-website-title-content{font-size:16px!important}.jtpl-content,.jtpl-header,.jtpl-navigation{max-width:100%;width:100%}.jtpl-content{margin-bottom:0}#cc-inner .j-hr hr{border-bottom-color:var(--bg-primary)}.jtpl-section{padding-left:0;padding-right:0}#content_area,.jtpl-breadcrumbs,.jtpl-navigation__inner,.jtpl-sidebar{margin:0 auto;max-width:1170px;width:100%}.jtpl-title{padding:0}#cc-inner .jtpl-title a{padding:5px 25px;background:0 0}.jtpl-background-area{min-height:100vh;height:auto;position:absolute;width:100%}.jtpl-background-area:after{content:'';display:block;background:rgba(0,0,0,.2);position:absolute;top:0;left:0;margin-bottom:0;width:100%;height:100%}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner .onepager a,.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:10px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;content:"";width:100%;transform:translateY(calc(100% - 4px));opacity:0;transition:.2s;background-color:currentColor}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation__inner .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:translateY(100%)}.jtpl-navigation__inner .j-nav-variant-nested .current a:after,.jtpl-navigation__inner .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation__inner .jtpl-navigation .j-nav-level-2{left:-100%!important}@media (min-width:1170px){#cc-inner .jtpl-navigation__inner .j-nav-level-1,#cc-inner .jtpl-navigation__inner .j-nav-level-2{width:auto;min-width:200px;max-width:200px}.jtpl-cart .j-cart{top:10px;right:10px}}@media (max-width:1169px){.jtpl-navigation__inner .j-nav-variant-nested{display:none}} /*]]>*/
    </style>
    
    

    Barcelona  Preview


    Matrix Themes
    
    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();  
    (function($) {  
    // Init 
    $(document).ready(function() {
       // Design kit for Berlin template
       $(".jtpl-title").insertBefore($(".jtpl-logo"));
       $(".jtpl-navigation").appendTo($(".jtpl-header"));
        });
    })(jQuery); 
    //]]>
    </script>
    
    <style>
    /* <![CDATA[ */
    /*** Design kit for Berlin template ***/
    .jtpl-main,.jtpl-navigation__inner .j-nav-variant-nested .current a:after,.jtpl-navigation__inner .j-nav-variant-nested a:hover:after{max-width:100%}.jtpl-main{margin:0 auto}#cc-inner .layout-alignment{padding:0}#cc-inner .jtpl-header{max-width:1170px;width:100%;margin:0 auto;padding:0;box-sizing:border-box;position:relative}#cc-inner .jtpl-header .cc-imagewrapper{text-align:inherit}#cc-inner .jtpl-navigation{margin-bottom:65vh!important;box-sizing:border-box;display:block}.jtpl-mobile-navigation a:link,.jtpl-mobile-navigation a:visited,.jtpl-navigation__inner,.jtpl-navigation__inner a:link,.jtpl-navigation__inner a:visited{border-bottom:none}.jtpl-navigation .j-nav-level-0>li>a:link,.jtpl-navigation .j-nav-level-0>li>a:visited{display:inline-block}#cc-inner .jtpl-cart .j-cart-icon{padding:.2em .9em;margin:60px 10px}.jtpl-logo{padding:10px 0}#cc-inner .j-website-title-content{font-size:16px!important}.jtpl-content,.jtpl-header,.jtpl-navigation{max-width:100%;width:100%}.jtpl-content{margin-bottom:0;padding:20px 0}#cc-inner .j-hr hr{border-bottom-color:var(--bg-primary)}.jtpl-section{padding-left:0;padding-right:0}#content_area{padding:25px 0}#content_area,.jtpl-breadcrumbs,.jtpl-footer>div,.jtpl-navigation,.jtpl-navigation__inner,.jtpl-section-aside>div{margin:0 auto;max-width:1170px;width:100%}.jtpl-title{padding:0;position:absolute;top:0;right:0}#cc-inner .jtpl-title a{padding:5px 25px;background:0 0}.jtpl-background-area{min-height:100vh;height:auto;position:absolute;width:100%}.jtpl-background-area:after{content:'';display:block;background:rgba(0,0,0,.2);position:absolute;top:0;left:0;margin-bottom:0;width:100%;height:100%}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner .onepager a,.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;line-height:110%;margin:10px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:.35s;transition:.35s}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;content:"";width:100%;transform:translateY(calc(100% - 4px));opacity:0;transition:.2s;background-color:currentColor}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation__inner .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:translateY(100%)}#cc-inner .jtpl-navigation__inner .jtpl-navigation .j-nav-level-2{left:-100%!important}@media (min-width:1170px){#cc-inner .jtpl-navigation__inner .j-nav-level-1,#cc-inner .jtpl-navigation__inner .j-nav-level-2{width:auto;min-width:200px;max-width:200px}.jtpl-cart .j-cart{top:10px;right:10px}}/*]]>*/
    </style>
    
    

    Berlin  Preview

    Matrix Themes

    Malaga One Pager  Preview


    Matrix Themes

    Rome with Megamenu   Preview



    The Pro Version of Design Kits is available in section "Add-ons"

    Matrix Themes


    Stand out with professional Jimdo website

    Premium 24/7 Support · Lifetime Updates




    has-right-col-border

    Resources

    • Templates
    • Pre-made Templates
    • Matrix Builder
    • Add-ons
    • Pricing
    • Marketplace

    Documentation

    • Get Started
    • Quick Setup
    • Style Editor
    • Tutorials
    • Updates

    Quick links

    • Made with Matrix
    • Style Guide
    • Shortcodes
    • Jimdo Creator
    • Small Business websites
    • Feedback

    Try Matrix Builder
    draggable-logo

    Global colors
      bg-primary
      bg-primary-light
      bg-primary-dark
      bg-secondary
      bg-secondary-dark
    Template colors
      body
      top-header
      top-header-inner
      header
      header-inner
      navigation-inner
      navigation color
      dropdown background color
      content
    Footer Styles
      background
      text color
      link color
      horizontal line
    Buttons
      style 1
      style 2
      style 3
      text color
    Mobile navigation
      background color
      navigation color
    Other elements
      social icons
      top header border
      header border
      nav inner border
    Template configurations
     
    has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
     
    Top header inner
     
     
     
    Header inner
     
     
     
    Navigation inner
     
     
     
    Navigation styles
     
    snip-nav --line01
     
    Sub-menu (breadcrumbs) styles
     
    size-15
     
    Mobile Navigation styles
     
    size-30
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white white-outline-btn
     
    Footer background image
     
     

     

    Typography

    Heading H1
    weight-400
     
    Heading H2
    weight-400
     
    Heading H3
    weight-400
     
    Buttons
    weight-400
     
     
    Advanced settings
     
    Custom CSS

     

    #cc-inner .my-class {

      color:#f0f0f0;

    }

     


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

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