• 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 

    Advanced Carousel Widget 

     

    Live Preview
    draggable-hero text-center
    How to add custom widget to your Jimdo website pull-down

    Make it stand out

    Showcase carousel

    Matrix Themes
    Matrix Themes
    Matrix Themes
    Matrix Themes
    Matrix Themes
    
    <style>
    /* <![CDATA[ */
    /*** custom styles for showcase carousel ***/
    .is-showcase .owl-item > div {
      cursor: pointer;
      margin: 5%;
      transition: margin 0.5s ease;
    }
    .is-showcase .owl-item.center > div {
      cursor: auto;
      margin: 0;
    }
    .is-showcase .owl-item:not(.center) > div:hover {
      opacity: 1;
       -webkit-transition: all 100ms linear;
       -o-transition: all 100ms linear;
       -moz-transition: all 100ms linear;
    }
    /*]]>*/
    </style>
    <!-- start carousel --> <div class="is-fullwidth"> <div class="owl-carousel owl-theme is-showcase"> <div> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/alsten-tmp.jpg?t=1589221378" alt="Matrix Themes" /> </div> <div> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/lemberg-tmp.jpg?t=1589221829" alt="Matrix Themes" /> </div> <div> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/altona-new.jpg?t=1595141354" alt="Matrix Themes" /> </div> <div> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/hisingen-mult-tmp.jpg?t=1549189561" alt="Matrix Themes" /> </div> <div> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/tjorn-tmp.jpg?t=1575368647" alt="Matrix Themes" /> </div> </div> </div> <!-- end carousel --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity= "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { var $owl = $('.is-showcase'); $owl.children().each( function( index ) { $(this).attr( 'data-position', index ); // NB: .attr() instead of .data() }); $owl.owlCarousel({ center: true, loop: true, autoplay: true, responsiveClass:true, items: 3, responsive:{ 0:{ items:1, nav:false }, 600:{ items:3, nav:false } } }); // trigger $(document).on('click', '.is-showcase .owl-item>div', function() { var $speed = 300; $owl.trigger('to.owl.carousel', [$(this).data( 'position' ), $speed] ); }); }); })(jQuery); //]]> </script>

    Portfolio carousel

    Nature

    Read more

    Street Photography

    Read more

    Stand out with a professional Jimdo website

    Read more

    Street Photography

    Read more
    
    <style>
    /* <![CDATA[ */
    .is-portfolio .owl-item > div {
      margin: 5px;
    }
        
    .is-portfolio.owl-carousel .owl-dots.disabled {
      display: block;
    }
        
    .is-portfolio .is-new-caption {
      display:block;
      bottom:5px;
      height:auto;
    }
      
    /*]]>*/
    </style>
    <!-- start carousel --> <div class="owl-carousel owl-theme is-portfolio"> <!-- start slide --> <div class="item"> <img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide01.jpg" alt="Matrix themes" /> <div class="is-new-caption"> <div class="max-inner"> <div class="col-9 color-white add-30 cc-box"> <h3> Nature </h3> <a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a> </div> </div> </div> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="Matrix themes" /> <div class="is-new-caption"> <div class="max-inner"> <div class="col-9 color-white add-30 cc-box"> <h3> Street Photography </h3> <a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a> </div> </div> </div> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide-test.jpg?t=1588067569" alt="Matrix themes" /> <div class="is-new-caption"> <div class="max-inner"> <div class="col-6 color-white add-30 cc-box"> <h3> Stand out with a professional Jimdo website </h3> <a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a> </div> </div> </div> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="Matrix themes" /> <div class="is-new-caption"> <div class="max-inner"> <div class="col-9 color-white add-30 cc-box"> <h3> Street Photography </h3> <a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a> </div> </div> </div> </div> <!-- end slide --> </div>
    <!-- end carousel --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity= "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { $('.is-portfolio').owlCarousel({ center: false, items:3, loop:true, margin:10, dots:true, autoplay:true, autoHeight:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:3 } } }); }); })(jQuery); //]]> </script>

    Service carousel

    Service 01

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    read more

    Service 02

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    read more

    Service 03

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    read more

    Service 04

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    read more
    
    <style>
    /* <![CDATA[ */
    .is-service .owl-dots.disabled {
      display:block!important;
    }
        
    .is-service .item {
      margin: 3px;
    padding:20px;
    border-radius:10px;
    background:#f0f0f0; } /*]]>*/ </style> <div class="owl-carousel owl-theme is-service"> <!-- start slide --> <div class="item"> <div class="fa fa-rocket fa-2x"> </div> <h3 class="add-top-10 add-btm-10"> Service 01 </h3> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-rocket fa-2x"> </div> <h3 class="add-top-10 add-btm-10"> Service 02 </h3> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-rocket fa-2x"> </div> <h3 class="add-top-10 add-btm-10"> Service 03 </h3> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-rocket fa-2x"> </div> <h3 class="add-top-10 add-btm-10"> Service 04 </h3> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <a class="weight-500" style="" href="http://www.matrix-themes.com/templates/" target="">read more<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a> </div> <!-- end slide --> </div>
    <!-- end carousel --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity= "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { $('.is-service').owlCarousel({ center: false, items:3, loop:true, margin:10, dots:true, autoplay:true, autoHeight:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:3 } } }); }); })(jQuery); //]]> </script>

    Testimonial carousel

    Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


    - Happy customer

    Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.


    - Happy customer

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    - Happy customer

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    - Happy customer

    
    <style>
    /* <![CDATA[ */
    .is-testimonial.owl-dots.disabled {
       display:block!important;
    }
        
    .is-testimonial .item{
      margin: 3px;
    padding:20px;
    background:transparent;
    border-radius:15px;
    border:1px solid #ccc; } /*]]>*/ </style> <div class="owl-carousel owl-theme is-testimonial"> <!-- start slide --> <div class="item"> <div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;"> </div> <p> Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <br /> <p class="size-12"> - Happy customer </p> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;"> </div> <p> Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. </p> <br /> <p class="size-12"> - Happy customer </p> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;"> </div> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <p class="size-12"> - Happy customer </p> </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="fa fa-quote-left fa-3x" style="opacity:0.3;font-size:40px;"> </div> <p> Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl. </p> <br /> <p class="size-12"> - Happy customer </p> </div> <!-- end slide --> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity= "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { $('.is-testimonial').owlCarousel({ center: false, loop:true, margin:10, dots:true, autoplay:true, autoHeight:true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1000:{ items:3 } } }); }); })(jQuery); //]]> </script>

    Quote carousel

    Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


    - Name 01.

    Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.


    - Name 02.

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    - Name 03.

    Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.


    - Name 04.

    
    <style>
    
    /* <![CDATA[ */
    .is-blockquote.owl-dots.disabled {
      display:block!important;
    }
        
    .is-blockquote .item {
      border-left:5px solid #333;border-radius:0;
      background:#f0f0f0;
      padding:30px;
    }
    /*]]>*/
    </style>
    <div class="owl-carousel owl-theme is-blockquote">
        <!-- start slide -->
        <div class="item">
            <p>
                Praesent adipiscing. In consectetuer turpis ut velit. Nullam cursus lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>
            <br />
    
            <p class="size-12">
                - Name 01.
            </p>
        </div>
        <!-- end slide -->
        <!-- start slide -->
    
        <div class="item">
            <p>
                Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Quisque rutrum. Cras risus ipsum, faucibus ut, ullamcorper id, varius
                ac, leo. Sed fringilla mauris sit amet nibh. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus volutpat, metus eget egestas mollis, lacus lacus
                blandit dui, id egestas quam mauris ut lacus.
            </p>
            <br />
    
            <p class="size-12">
                - Name 02.
            </p>
        </div>
        <!-- end slide -->
        <!-- start slide -->
    
        <div class="item">
            <p>
                Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
            </p>
            <br />
    
            <p class="size-12">
                - Name 03.
            </p>
        </div>
        <!-- end slide -->
        <!-- start slide -->
    
        <div class="item">
            <p>
                Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
            </p>
            <br />
    
            <p class="size-12">
                - Name 04.
            </p>
        </div>
        <!-- end slide -->
    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity=
    "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.is-blockquote').owlCarousel({
        center: false,
        smartSpeed: 500,
        loop:true,
        margin:10,
        dots:true,
        autoplay:true,
        autoHeight:true,
       responsive:{
           0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });
        
    });
    })(jQuery);
    //]]>
    </script>

    Logo carousel

    
    <style>
    /* <![CDATA[ */
    .is-logoslider .owl-item > div {
       margin: 5px;
    }  
    .is-logoslider.owl-carousel .owl-dots.disabled {
      display: block;
    }
    .is-logoslider .is-matrix {
    min-height:100px;
    } .is-logoslider .item img { height:auto; width:80px!important; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } /*]]>*/ </style> <div class="owl-carousel owl-theme is-logoslider"> <!-- start slide --> <div class="item"> <div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;"> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo01.png" alt="Matrix themes" /> </div>
    </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;"> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo02.png" alt="Matrix themes" /> </div>
    </div> <!-- end slide --> <!-- start slide --> <div class="item">
    <div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;"> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo03.png" alt="Matrix themes" /> </div>
    </div> <!-- end slide --> <!-- start slide --> <div class="item"> <div class="is-matrix add-20" style="border:1px solid #f0f0f0; border-radius:5px;"> <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/demo-logo01.png" alt="Matrix themes" /> </div>
    </div> <!-- end slide --> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity= "sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { $('.is-logoslider').owlCarousel({ center: false, items:3, loop:true, margin:10, dots:true, autoplay:true, autoHeight:true, responsive:{ 0:{ items:2 }, 600:{ items:2 }, 1000:{ items:3 } } }); }); })(jQuery); //]]> </script>

    How to add a custom widget to your Jimdo website

    01.

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

    02.

    Choose any custom widget using the copy button.

    03.

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

    04.

    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