Shortcodes

Edit here your slider caption

Quick search

Header Fullwidth slider

<!-- ************* Fullwidth Fade slideshow ************* -->

<div id="hs-slider-fullwidth" class="owl-carousel owl-theme">
    <div class="item">
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/slide01.jpg" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    It's time for custom design
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/slide02.jpg" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    Professional support
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/slide03.jpg" alt="" />
        <div class="carousel-caption bg">
            <h1 class="color-white center-align">
                Fully responsive themes
            </h1>

            <p class="color-white center-align text-center">
                Quisque velit nisi, pretium ut lacinia in, elementum id enim.
            </p>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your header slider
</div>

Content Slider

<!-- ************* Content slider 1 ************* -->

<div id="hs-slider" class="owl-carousel owl-theme">
    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide01.jpg?t=1563893201" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    It's time for custom design
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide02.jpg?t=1563893210" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    Professional support
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide03.jpg?t=1563893217" alt="" />
        <div class="carousel-caption bg">
            <h1 class="color-white center-align">
                Fully responsive themes
            </h1>

            <p class="color-white center-align text-center">
                Quisque velit nisi, pretium ut lacinia in, elementum id enim.
            </p>
        </div>
    </div>
</div>

Content Slider 2

<!-- ************* Content slider 2 ************* -->

<div class="hs-carousel-2 owl-carousel owl-theme">
    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide01.jpg?t=1563893201" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    It's time for custom design
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide02.jpg?t=1563893210" alt="" />
        <div class="carousel-caption">
            <center>
                <h1 class="color-white">
                    Professional support
                </h1>
                <a class="hs-button" href="http://www.matrix-themes.com/purchase">learn more</a>
            </center>
        </div>
    </div>

    <div class="item">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/slide03.jpg?t=1563893217" alt="" />
        <div class="carousel-caption bg">
            <h1 class="color-white center-align">
                Fully responsive themes
            </h1>

            <p class="color-white center-align text-center">
                Quisque velit nisi, pretium ut lacinia in, elementum id enim.
            </p>
        </div>
    </div>
</div>

Fullwidth section

<div class="is-matrix hs-fullwidth bg-grey cc-clearover">
    <div class="inner cc-clearover" style="padding:150px 0;">
        <div class="col-6">
            <h1>
                Your Title
            </h1>

            <p>
                Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
                tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
            </p>
            <br />
            <!-- ************* default button ************* -->
             <a class="hs-button" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

Fullwidth section 2

<div class="is-matrix hs-fullwidth bg-dark color-white cc-clearover">
    <div class="inner cc-clearover" style="padding:150px 0;">
        <div class="col-6 right-align text-right add-10 cc-box">
            <h1>
                Your Title
            </h1>

            <p>
                Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
                tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
            </p>
            <br />
            <!-- ************* default button ************* -->
             <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

Fullwidth section 3

<div class="is-matrix hs-fullwidth turquoise color-white cc-clearover">
    <div class="inner cc-clearover" style="padding:150px 0;">
        <div class="col-6 center-align">
            <h1>
                Your Title
            </h1>

            <p>
                Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
                tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
            </p>
            <br />
            <!-- ************* default button ************* -->
             <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

Header image

<!-- *** Matrix Widget header fullwidth image *** -->

<div id="image-fullwidth">
    <div class="item animated">
        <div class="hs-overlay opacity-6">
        </div>
        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-img.jpg?t=1570628610" alt="" />
        <div class="carousel-caption animated fadeInUp">
            <div class="inner col-6 color-white add-10 cc-box">
                <h1 class="big weight-400">
                    Your header title
                </h1>

                <p>
                    Create a beautiful Jimdo website
                </p>
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your header fullwidth image
</div>

Hero title

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Hero title 2

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6  center-align color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Hero title 3

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6  right-align text-right add-10 cc-box color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Hero Title 4

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white center-align">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>

            <center>
                <!-- ************* mid-rounded button ************* -->
                <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a> <a class="hs-button bg-white small-btn" href="https://www.zodiac-framerwork.com"
                target="">Read more</a>
            </center>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Parallax

<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879') no-repeat center;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
        <div class="col-6 center-align">
            <h1 class="">
                This is a fixed image
            </h1>

            <p>
                The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
        </div>
    </div>
</div>

Parallax 2

<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879') no-repeat center;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
        <div class="col-6">
            <h1 class="">
                This is a fixed image
            </h1>

            <p>
                The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
        </div>
    </div>
</div>

Parallax 3

<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1563355879') no-repeat center;">
    <div class="hs-overlay opacity-8">
    </div>

    <div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
        <div class="col-6 right-align text-right add-10 cc-box">
            <h1 class="">
                This is a fixed image
            </h1>

            <p>
                The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
        </div>
    </div>
</div>

Half fullwidth bg

<!-- *** Matrix Widget half fullwidth section *** -->

<div class="is-matrix half-fullwidth is-flex-block">
    <div class="mid-box-left bg-primary main-equal col-flex">
        <div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
            <h2>
                This is your heading
            </h2>

            <p>
                Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. massa, convallis a pellentesque nec, egestas non nisi.
            </p>
            <br />
            <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>

    <div class="mid-box-right bg-dark equal col-flex">
        <div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
            <h2>
                This is your heading
            </h2>

            <p>
                Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum
                primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada
                feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. P
            </p>
            <br />
            <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

Content teaser

<!-- *** Matrix Widget callout *** -->

<div class="is-matrix content-teaser cc-clearover">
    <div class="hs-left">
        <h2>
            Awesome Jimdo templates for your website
        </h2>

        <p>
            Premium Jimdo Theme coupled with advanced functionality and awesome support
        </p>
    </div>

    <div class="hs-right">
        <a class="hs-button" href="https://www.matrix-themes.com/" target="">learn more</a>
    </div>
</div>

Content teaser 2

<!-- *** Matrix Widget callout *** -->

<div class="is-matrix content-teaser bg-dark color-white cc-clearover">
    <div class="hs-left">
        <h2>
            Awesome Jimdo templates for your website
        </h2>

        <p>
            Premium Jimdo Theme coupled with advanced functionality and awesome support
        </p>
    </div>

    <div class="hs-right">
        <a class="hs-button ghost-white" href="https://www.matrix-themes.com/" target="">learn more</a>
    </div>
</div>

Content teaser 3

<!-- *** Matrix Widget callout *** -->

<div class="is-matrix content-teaser bg-white has-shadow cc-clearover">
    <div class="hs-left">
        <h2>
            Awesome Jimdo templates for your website
        </h2>

        <p>
            Premium Jimdo Theme coupled with advanced functionality and awesome support
        </p>
    </div>

    <div class="hs-right">
        <a class="hs-button" href="https://www.matrix-themes.com/" target="">learn more</a>
    </div>
</div>

Counters

<!-- *** Matrix Widget counters *** -->

<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
    <div class="one-third color-white col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 big big-mobile center-align">
                32
            </h1>

            <p class="hs-center">
                Official Jimdo Experts
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-2 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 big big-mobile center-align">
                52
            </h1>

            <p class="hs-center">
                Freelancers and Web Agencies
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-4 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 big big-mobile center-align">
                18
            </h1>

            <p class="hs-center">
                Countries around the world
            </p>
        </div>
    </div>
</div>

<div class="c">
</div>

Counters 2

<!-- *** Matrix Widget counters *** -->

<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
    <div class="one-third color-white col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-diamond fa-4x">
            </div>

            <p class="hs-center add-top-20">
                Official Jimdo Experts
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-2 col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-cogs fa-4x">
            </div>

            <p class="hs-center add-top-20">
                Freelancers and Web Agencies
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-4 col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-thumbs-up fa-4x">
            </div>

            <p class="hs-center add-top-20">
                Countries around the world
            </p>
        </div>
    </div>
</div>

<div class="c">
</div>

Counters 3

<!-- *** Matrix Widget counters *** -->

<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
    <div class="one-fourth color-white col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 mobile-big center-align">
                32
            </h1>

            <p class="hs-center">
                Jimdo Experts
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-2 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 big mobile-big center-align">
                52
            </h1>

            <p class="hs-center">
                Web Agencies
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-4 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 mobile-big center-align">
                18
            </h1>

            <p class="hs-center">
                Countries
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-6 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 mobile-big center-align">
                7
            </h1>

            <p class="hs-center">
                days support
            </p>
        </div>
    </div>
</div>

<div class="c">
</div>

Counters 4

<!-- *** Matrix Widget counters *** -->

<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
    <div class="one-fourth color-white">
        <div class="gutter-20 center-align">
            <div class="fa fa-group fa-4x">
            </div>

            <p class="hs-center add-top-20">
                Jimdo Experts
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-2 col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-paper-plane fa-4x">
            </div>

            <p class="hs-center add-top-20">
                12 Web Agencies
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-4 col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-check-square-o fa-4x">
            </div>

            <p class="hs-center add-top-20">
                18 Countries
            </p>
        </div>
    </div>

    <div class="one-fourth color-white opacity-6 col-flex">
        <div class="gutter-20 center-align">
            <div class="fa fa-thumbs-up fa-4x">
            </div>

            <p class="hs-center add-top-20">
                Professional support
            </p>
        </div>
    </div>
</div>

<div class="c">
</div>

Tile widget

<!-- *** Matrix Widget tile widget *** -->

<div class="is-matrix bg-primary cc-clearover">
    <div class="hs-right-50">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="hs-left-50 color-white">
        <div class="gutter-20 clearover">
            <h1>
                Your title
            </h1>

            <p>
                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
                Pellentesque in ipsum id orci porta dapibus.
            </p>
            <br />
            <a class="hs-button ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="c">
</div>

Tile widget 2

<!-- *** Matrix Widget tile widget *** -->

<div class="is-matrix bg-grey cc-clearover">
    <div class="hs-left-50">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="hs-right-50">
        <div class="gutter-20 clearover">
            <h1>
                Your title
            </h1>

            <p>
                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
                Pellentesque in ipsum id orci porta dapibus.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="c">
</div>

Overlay teaser

<!-- *** Matrix Widget overlay teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="hs-thumbnail">
        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        <div class="thumbnail-hover">
            <a href="http://matrix-themes.com/"></a>
        </div>
    </div>

    <div class="hs-description">
        <h3>
            Your custom title
        </h3>

        <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
        <br />
        <a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
    </div>
</div>

Overlay teaser 2

<!-- *** Matrix Widget overlay teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="hs-thumbnail">
        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        <div class="thumbnail-hover">
            <a href="http://matrix-themes.com/"></a>
        </div>
    </div>

    <div class="hs-description bg-dark color-white">
        <h3>
            Your custom title
        </h3>

        <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
        <br />
        <a class="hs-button small-btn ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
    </div>
</div>

Overlay teaser 3

<!-- *** Matrix Widget overlay teaser *** -->

<div class="is-matrix rel h-overflow cc-clearover" style="border:1px solid #f0f0f0;">
    <div class="hs-thumbnail">
        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        <div class="thumbnail-hover">
            <a href="http://matrix-themes.com/"></a>
        </div>
    </div>

    <div class="hs-description bg-white">
        <h3>
            Your custom title
        </h3>

        <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
        <br />

        <div class="line slim-line bg-grey is-fullwidth">
        </div>
        <br />
        <a href="https://www.matrix-themes.com/" class="bold-underline uppercase weight-400">Read more</a>
    </div>
</div>

Quote teaser

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="col-6">
        <div class="fa fa-quote-left fa-4x absolute-top-left" style="top:-10px;opacity:0.2;font-size:50px;">
        </div>
        <span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
        <p class="weight-500 size-11 add-top-5">
            ( Quote style 1 )
        </p>
    </div>
</div>

Quote teaser 2

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix col-6 center-align cc-clearover">
    <center>
        <div class="fa fa-quote-left fa-4x" style="top:10px;opacity:0.2;font-size:50px;">
        </div>
        <br />
        <span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
        <p class="weight-500 size-11">
            ( Quote style 2 )
        </p>
    </center>
</div>

Quote teaser 3

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="col-6 right-align text-right">
        <div class="fa fa-quote-left fa-4x absolute-top-right" style="top:-10px;opacity:0.2;font-size:50px;">
        </div>
        <span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
        <p class="weight-500 size-11 add-top-5">
            ( Quote style 3 )
        </p>
    </div>
</div>

Skills widget

<!-- skills small size -->

<div class="skill skill-small">
    <h3>
        <span class="skill_name">Skills small</span>
    </h3>

    <div class="skill_bar">
        <div class="skill_active" style="width: 55%;">
        </div>
        <span>55%</span>
    </div>
</div>

Skills widget 2

<!-- skills big size -->

<div class="skill">
    <h3>
        <span class="skill_name">Skills big</span>
    </h3>

    <div class="skill_bar">
        <div class="skill_active" style="width: 75%;">
        </div>
        <span>75%</span>
    </div>
</div>

Toggle

<!-- *** Matrix Widget toggle *** -->

<div class="toggle weight-500 size-18">
    <a class="switch" href="#"></a> Your toggle title
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>

Tabs

<!-- *** Matrix Widget tabs *** -->

<ul class="tabs-nav">
    <li class="active">
        <a href="#tab1">First</a>
    </li>

    <li>
        <a href="#tab2">Second</a>
    </li>

    <li>
        <a href="#tab3">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab1" class="tab-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab2" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab3" class="tab-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

Tabs 2

<!-- *** Matrix Widget tabs *** -->

<ul class="tabs-nav center-align">
    <li class="active">
        <a href="#tab11">First</a>
    </li>

    <li>
        <a href="#tab22">Second</a>
    </li>

    <li>
        <a href="#tab33">Third</a>
    </li>
</ul>

<div class="tabs-container">
    <div id="tab11" class="tab-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>

    <div id="tab22" class="tab-content">
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.
        </p>
    </div>

    <div id="tab33" class="tab-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
        </p>

        <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

Social Icons 1

<div class="hs-social is--flex new-social small-social hs-left size-11 is-circle-solid-white is-rounded link-dark">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

Social Icons 2

<div class="hs-social is--flex new-social small-social hs-left size-11 is-circle-border link-dark is-rounded">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

Social Icons 3

<div class="hs-social is--flex new-social small-social hs-left size-11 is-circle-border link-dark">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

Social Icons 4

<div class="hs-social is--flex new-social small-social hs-left size-11 is-circle-solid link-white">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

Social Icons 5

<div class="hs-social is--flex new-social small-social hs-left size-11 is-circle-solid is-rounded link-white">
    <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
    "fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>

Pricing tables

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-grey add-30 slide-up-hover h-overflow">
    <h1 class="size-20">
        Professional
    </h1>

    <p>
        This is professional package design
    </p>

    <p class="big mobile-big weight-500">
        €60
    </p>

    <div class="line slim-line bg-white is-fullwidth">
    </div>

    <div class="pricing-items add-top-25 add-btm-25 weight-500">
        <div class="fa fa-check add-top-20">
        </div>
        Branding Design<br />

        <div class="fa fa-check add-top-20">
        </div>
        Theme installation<br />

        <div class="fa fa-check add-top-20">
        </div>
        24/7 Support<br />
    </div>
    <!-- ************* rounded button ************* -->
    <a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-primary color-white add-30 slide-up-hover h-overflow">
    <h1 class="size-20">
        Enterprise
    </h1>

    <p>
        This is enterprise package design
    </p>

    <p class="big mobile-big weight-500">
        €90
    </p>

    <div class="line slim-line bg-white is-fullwidth">
    </div>

    <div class="pricing-items add-top-25 add-btm-25 weight-500">
        <div class="fa fa-check add-top-20">
        </div>
        Branding Design<br />

        <div class="fa fa-check add-top-20">
        </div>
        Theme installation<br />

        <div class="fa fa-check add-top-20">
        </div>
        24/7 Support<br />

        <div class="fa fa-check add-top-20">
        </div>
        Ultimate widgets<br />

        <div class="fa fa-check add-top-20">
        </div>
        Play of columns <span class="opacity-6 add-5">New!</span><br />
    </div>
    <!-- ************* rounded button ************* -->
    <a class="hs-button bg-round ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 2

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
    <div class="is-matrix bg-grey add-20">
        <h1 class="size-20 weight-500">
            Professional
        </h1>

        <div class="pricing-items add-top-25 add-btm-25 weight-500">
            <div class="fa fa-check add-top-20">
            </div>
            Branding Design<br />

            <div class="fa fa-check add-top-20">
            </div>
            Theme installation<br />

            <div class="fa fa-check add-top-20">
            </div>
            24/7 Support<br />
        </div>

        <p class="big mobile-big weight-500">
            €60
        </p>
    </div>
    <br />
    <!-- ************* rounded button ************* -->
     <a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 2

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
    <div class="is-matrix bg-dark color-white add-20">
        <h1 class="size-20 weight-500">
            Professional
        </h1>

        <div class="pricing-items add-top-25 add-btm-25 weight-500">
            <div class="fa fa-check add-top-20">
            </div>
            Branding Design<br />

            <div class="fa fa-check add-top-20">
            </div>
            Theme installation<br />

            <div class="fa fa-check add-top-20">
            </div>
            24/7 Support<br />
        </div>

        <p class="big mobile-big weight-500">
            €60
        </p>
    </div>
    <br />
    <!-- ************* rounded button ************* -->
     <a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 2

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
    <div class="is-matrix bg-primary color-white add-20">
        <h1 class="size-20 weight-500">
            Professional
        </h1>

        <div class="pricing-items add-top-25 add-btm-25 weight-500">
            <div class="fa fa-check add-top-20">
            </div>
            Branding Design<br />

            <div class="fa fa-check add-top-20">
            </div>
            Theme installation<br />

            <div class="fa fa-check add-top-20">
            </div>
            24/7 Support<br />
        </div>

        <p class="big mobile-big weight-500">
            €60
        </p>
    </div>
    <br />
    <!-- ************* rounded button ************* -->
     <a class="hs-button bg-round bg-secondary" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 3

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-grey add-30 mid-round center-align">
    <h1 class="size-20 weight-500">
        Professional
    </h1>

    <p class="add-top-20 add-btm-20">
        This is professional package design
    </p>

    <center>
        <div class="line small-line bg-secondary">
        </div>
    </center>

    <p class="add-top-20 add-btm-20">
        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
    </p>

    <p class="big mobile-big weight-500">
        €60
    </p>
    <!-- ************* rounded button ************* -->
    <a class="hs-button bg-round ghost-dark" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 3

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-dark color-white add-30 mid-round center-align">
    <h1 class="size-20 weight-500">
        Professional
    </h1>

    <p class="add-top-20 add-btm-20">
        This is professional package design
    </p>

    <center>
        <div class="line small-line bg-secondary">
        </div>
    </center>

    <p class="add-top-20 add-btm-20">
        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
    </p>

    <p class="big mobile-big weight-500">
        €60
    </p>
    <!-- ************* rounded button ************* -->
    <a class="hs-button ghost-white bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>

Pricing tables 4

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix add-20 bg-dark color-white">
    <center>
        <h1 class="big mobile-big">
            €60
        </h1>

        <p>
            Professional package
        </p>
    </center>
</div>

<div class="pricing-items add-20 bg-grey add-top-25 add-btm-25 weight-400">
    <center>
        <!-- ************* Custom links style 1 ************* -->

        <div class="links">
            <ul>
                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>
            </ul>
        </div>
        <br />
        <a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Get started</a>
    </center>
</div>

Pricing tables 4

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix add-20 bg-primary color-white">
    <center>
        <h1 class="big mobile-big">
            €60
        </h1>

        <p>
            Professional package
        </p>
    </center>
</div>

<div class="pricing-items add-20 bg-grey add-top-25 add-btm-25 weight-400">
    <center>
        <!-- ************* Custom links style 1 ************* -->

        <div class="links">
            <ul>
                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>

                <li>Lorem ipsum dolor sit amet
                </li>
            </ul>
        </div>
        <br />
        <a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Get started</a>
    </center>
</div>

Pricing tables 5

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix bg-grey add-20 rel">
    <div class="is--flex">
        <div class="left-align add-right-20" style="border-right:1px solid;">
            <h1>
                Basic package
            </h1>

            <p>
                Basic package includes Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras dapibus. Nam pretium turpis et arcu. Nam quam nunc, blandit vel, luctus pulvinar,
                hendrerit id, lorem.
            </p>
        </div>

        <div class="is--right add-10">
            <p class="add-right-10">
                starting from
            </p>

            <p class="big weight-500">
                €60
            </p>
        </div>
    </div>
    <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>

Pricing tables 5

<!-- *** Matrix Widget pricing tables *** -->

<div class="is-matrix rel bg-dark color-white add-20">
    <div class="is--flex">
        <div class="left-align add-right-20" style="border-right:1px solid;">
            <h1>
                professional package
            </h1>

            <p>
                Basic package includes Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras dapibus. Nam pretium turpis et arcu. Nam quam nunc, blandit vel, luctus pulvinar,
                hendrerit id, lorem.
            </p>
        </div>

        <div class="is--right add-10">
            <p class="add-right-10">
                starting from
            </p>

            <p class="big weight-500">
                €60
            </p>
        </div>
    </div>
    <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>

Cloud tags

<!-- ************* Tags widget style 1 ************* -->

<div class="tagcloud cc-clearover">
    <a href="https://www.matrix-themes.com/">Jimdo</a> <a href="https://www.matrix-themes.com/">Matrix</a> <a href="https://www.matrix-themes.com/">Design</a> <a href=
    "https://www.matrix-themes.com/">Responsive</a> <a href="https://www.matrix-themes.com/">jQuery</a> <a href="https://www.matrix-themes.com/">Stockholm</a> <a href=
    "https://www.matrix-themes.com/">templates</a> <a href="https://www.matrix-themes.com/">business</a>
</div>

Cloud tags 2

<!-- ************* Tags widget style 1 ************* -->

<div class="tagcloud has-dark-link cc-clearover">
    <a href="https://www.matrix-themes.com/">Jimdo</a> <a href="https://www.matrix-themes.com/">Matrix</a> <a href="https://www.matrix-themes.com/">Design</a> <a href=
    "https://www.matrix-themes.com/">Responsive</a> <a href="https://www.matrix-themes.com/">jQuery</a> <a href="https://www.matrix-themes.com/">Stockholm</a> <a href=
    "https://www.matrix-themes.com/">templates</a> <a href="https://www.matrix-themes.com/">business</a>
</div>

Cloud tags 2

<!-- ************* Tags widget style 1 ************* -->

<div class="tagcloud has-dark-link cc-clearover">
    <a href="https://www.matrix-themes.com/">Jimdo</a> <a href="https://www.matrix-themes.com/">Matrix</a> <a href="https://www.matrix-themes.com/">Design</a> <a href=
    "https://www.matrix-themes.com/">Responsive</a> <a href="https://www.matrix-themes.com/">jQuery</a> <a href="https://www.matrix-themes.com/">Stockholm</a> <a href=
    "https://www.matrix-themes.com/">templates</a> <a href="https://www.matrix-themes.com/">business</a>
</div>

Styled links

<!-- ************* Styled links style1 ************* -->

<div class="links">
    <ul>
        <li>
            <a href="https://www.matrix-themes.com/">Theme collection</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Responsive Jimdo themes</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Awesome and cool design</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Professional support</a>
        </li>
    </ul>
</div>

Styled links 2

<!-- ************* Styled links style2 ************* -->

<div class="links style2">
    <ul>
        <li>
            <a href="https://www.matrix-themes.com/">Theme collection</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Responsive Jimdo themes</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Awesome and cool design</a>
        </li>

        <li>
            <a href="https://www.matrix-themes.com/">Professional support</a>
        </li>
    </ul>
</div>

Animated links

<a href="https://www.matrix-themes.com/" class="background-slide size-18">Background underline link</a>

Animated links 2

<a href="https://www.matrix-themes.com/" class="bold-underline size-18">Bold underline link</a>

Animated links 3

<a href="https://www.matrix-themes.com/" class="underline-slide size-18">Underline slide link</a>

Animated links 4

<span class="bold-underline">Bold underline title</span>

Animated links 5

<h1>
    <span class="bold-underline">Big Bold underline title</span>
</h1>

Fa Description

<!-- *** Custom Matrix widget fa description *** -->

<div class="is-matrix bg-grey add-20">
    <center>
        <div class="fa fa-paper-plane fa-3x">
        </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>
    </center>
</div>

Fa Description 2

<!-- *** Custom Matrix widget fa description *** -->

<div class="is-matrix bg-dark color-white mid-round add-20">
    <center>
        <div class="fa fa-paper-plane fa-3x">
        </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>
    </center>
</div>

Fa Description 3

<!-- *** Custom Matrix widget fa description *** -->

<div class="is-matrix add-20 has-shadow" style="border:1px solid #f0f0f0;">
    <center>
        <div class="fa fa-paper-plane fa-3x">
        </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>
    </center>
</div>

Fa Description 4

<!-- *** Matrix Widget service icons *** -->

<div class="is-matrix">
    <div class="col-3 left-align">
        <div class="fa fa-paper-plane fa-3x add-10">
        </div>
    </div>

    <div class="col-9 right-align add-5 cc-box">
        <h3>
            Service 04
        </h3>

        <p>
            Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
        </p>
    </div>
</div>

Fa Description 5

<!-- *** Matrix Widget service icons *** -->

<div class="is-matrix bg-dark color-white add-5 mid-round">
    <div class="col-3 left-align">
        <div class="fa fa-paper-plane fa-3x add-10">
        </div>
    </div>

    <div class="col-9 right-align add-5 cc-box">
        <h3>
            Service 05
        </h3>

        <p>
            Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
        </p>
    </div>
</div>

Fa Description 6

<!-- *** Matrix Widget service icons *** -->

<div class="is-matrix is--flex">
    <div class="col-3 left-align">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s78356cf833b98043/userlayout/font/09-responsive-design.svg?t=1572342497" alt="" />
        </div>
    </div>

    <div class="col-9 right-align add-5 cc-box">
        <h3>
            Service 06
        </h3>

        <p>
            Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
        </p>
    </div>
</div>

Youtube popup

<!-- ************* Overlay teaser with Youtube video ************* -->

<div class="hs-thumbnail">
    <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
    <div class="thumbnail-hover">
        <a class="popup-youtube" href="https://www.youtube.com/watch?v=gOJnE4svLuY"></a>
    </div>
</div>
<!-- ************* End Vimeo video ************* -->
<!-- ************* Start description ************* -->

<div class="hs-description has-shadow">
    <h3>
        <a href="http://matrix-themes.com/">This is yout title</a>
    </h3>

    <p>
        This is an example text, simply click to edit or delete it.
    </p>
</div>

Vimeo popup

<!-- ************* Overlay teaser with Vimeo video ************* -->

<div class="hs-thumbnail">
    <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
    <div class="thumbnail-hover">
        <a class="popup-vimeo" href="https://vimeo.com/122314821"></a>
    </div>
</div>
<!-- ************* End Vimeo video ************* -->
<!-- ************* Start description ************* -->

<div class="hs-description has-shadow">
    <h3>
        <a href="http://matrix-themes.com/">This is your title</a>
    </h3>

    <p>
        This is an example text, simply click to edit or delete it.
    </p>
</div>

Google maps popup

<!-- ************* Overlay teaser with Google Maps ************* -->

<div class="hs-thumbnail">
    <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser3.jpg" alt="" />
    <div class="thumbnail-hover">
        <a class="popup-gmaps" href=
        "https://maps.google.it/maps?q=milan+italy&amp;ll=45.465458,9.186502&amp;spn=0.016163,0.038452&amp;hnear=Milan,+Lombardy&amp;gl=it&amp;t=m&amp;z=15&amp;iwloc=A"></a>
    </div>
</div>
<!-- ************* End Google Maps ************* -->
<!-- ************* Start description ************* -->

<div class="hs-description has-shadow">
    <h3>
        <a href="http://matrix-themes.com/">Open Google Map</a>
    </h3>

    <p>
        This is an example text, simply click to edit or delete it.
    </p>
</div>

Modal popup

<!-- ************* modal popup widget ************* -->

<div class="hs-button round link-white center-align popup-with-zoom-anim" href="#small-dialog">
    Modal popup
</div>

<div id="small-dialog" class="zoom-anim-dialog mfp-hide global-colors brand-bg brand-link custom-text">
    <h1>
        Matrix theme
    </h1>

    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt
    </p>
    <br />

    <div class="fa fa-exclamation-triangle fa-lg primary-color">
        <p>
            honcus ut, imperdiet a, venenatis vitae
        </p>
    </div>
</div>
<!-- ************* end modal popup widget ************* -->

Custom line

<div class="line bold-line bg-primary">
</div>

Custom line 2

<div class="line bold-line small-line bg-primary">
</div>

Star rating

<!-- star rating widget -->

<div class="star-rating" title="">
    <div class="back-stars size-20">
        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="fa fa-star" aria-hidden="true">
        </div>

        <div class="front-stars" style="width: 70%">
            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>

            <div class="fa fa-star" aria-hidden="true">
            </div>
        </div>
    </div>
</div>

Default btn


<!-- ************* default button ************* -->
<a class="hs-button" href="http://www.matrix-themes.com/" target="">Default</a>

Midrounded btn


<!-- ************* mid rounded button ************* -->
<a class="hs-button mid-round" href="http://www.matrix-themes.com/" target="">Midrounded</a>

Rounded btn


<!-- ************* rounded button ************* -->
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Rounded</a>

Rounded flat btn


<!-- ************* rounded flat button ************* -->
<a class="hs-button bg-round flat" href="http://www.matrix-themes.com/" target="">Rounded flat</a>

Ghost dark btn


<!-- ************* ghost dark button ************* -->
<a class="hs-button ghost-dark" href="http://www.matrix-themes.com/" target="">Ghost dark</a>

Ghost white btn


<!-- ************* rounded button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Ghost white</a>

Service icons


<!-- *** Matrix Widget service icons *** -->

<div class="fa fa-check" style="color:#3544ee;">
</div>
Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.

Service icons


<!-- *** Matrix Widget service icons *** -->

<div class="fa fa-check-circle" style="color:#3544ee;">
</div>
Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.

Opening hours


<!-- *** Matrix Widget opening hours *** -->

<ul class="hours">
    <li>
        <span>Monday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Tuesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Wednesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Thursday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Friday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            09:00 - 12:30
        </p>
    </li>

    <li>
        <span>Sunday</span>
        <p>
            Closed
        </p>
    </li>
</ul>
<!-- end opening hours widget -->

Opening hours 2


<!-- *** Matrix Widget opening hours *** -->

<ul class="hours bg-primary mid-round color-white add-10">
    <li>
        <span>Monday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Tuesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Wednesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Thursday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Friday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            09:00 - 12:30
        </p>
    </li>

    <li>
        <span>Sunday</span>
        <p>
            Closed
        </p>
    </li>
</ul>
<!-- end opening hours widget -->

Instructions

1. General

Once clicked the copy button, you paste the widget to the module Widget/HTML of your website.

It is important to use the module Widget/HTML because the custom elements here will overwrite the default Jimdo system styles.

Please note that some widgets are not available in preview in edit mode but will be correctly displayed in view mode (fullwidth sections)

2. Customizations

To change the image, you need to upload your own image to Design> Custom> Custom Template> Files. Once uploaded, click the image name which will be opened in a new tab and copy the url of the image from the browser address bar:

Paste it inside the module Widget/HTML replacing the default image of demo site:

...
<div class="hs-thumbnail">
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/tile09.jpg" alt="" />
    </div>
...

To change the background color, you need to to use the helper classes in Widget/HTML.

For Example, if background color is black, replace the class bg-dark for your own brand color:

...
<div class="is-fullwidth bg-dark">
...

...
<div class="is-fullwidth bg-primary">
...

You can use any other color class available in section "select your color" of Matrix menu

...
<div class="is-fullwidth emerald">
...

Tip! if your background color is dark, please don't forget to add the white color for the text:

...
<div class="is-fullwidth red color-white">
...

3. Old page

Here's the link to the old page of shortcodes:

shortcodes

Q & A

Ask your own question here! The answer will be published within 24h

Comments: 23

#23
Serhiy (Tuesday, 05 November 2019 21:59)

@Karlijn the header image should be used in templates that don't support Jimdo Awesome background. For all other templates, it is necessary to use the body class 'no-hero' to hide the jimdo background image to display custom widget "header image" or "header slider"
#22
Karlijn (Tuesday, 05 November 2019 17:31)

HI,

I was wondering if i could add a header image on a second page with the template that i have. I now use a header title but the space is a bit too small and when i add a header image it shows up underneath my normal header.

Thanks Karlyn
#21
Serhiy (Monday, 04 November 2019 12:17)

@Richard all available widgets of Matrix themes can be found in section "shortcodes" and "enterprise package"
#20
Richard (Monday, 04 November 2019 11:44)

Hello Serhiy,
I saw a nice presentation on another website to present their team: https://www.jujotech.com/team-copy/
Is it possible to get something similar in our template shortcodes?
#19
Serhiy (Tuesday, 24 September 2019 23:55)

@Aicha Soro in your template the logo is left-aligned and right-aligned navigation. There's no option to change the position of logo image
#18
Aicha Soro (Tuesday, 24 September 2019 22:41)

Hi,
in my theme the logo( Lemberg theme) is on the side but I would like to put my logo in the middle.
how can I do it ?
#17
Serhiy (Monday, 05 August 2019 13:38)

@Martin please check the section play of columns
#16
Martin Braun (Monday, 05 August 2019 13:30)

Hello :-)
Question for "Overlay Teaser":
Is it possible by clicking the picture to enlarge this one to have a detailed view instead of link to another page?
Would be great :-)
Best regards,
Martin
#15
Serhiy (Sunday, 12 May 2019 14:29)

@Karlijn
<a class="hs-button popup-youtube" href="https://www.youtube.com/watch?v=gOJnE4svLuY"></a>
#14
Karlijn (Sunday, 12 May 2019 12:05)

Hi,

Is it possible to put a youtube popup behind the read more button in a header?
#13
Serhiy (Monday, 15 April 2019 10:15)

@Frederic you can change the rocket icon for any other from this page:
https://fontawesome.com/v4.7.0/icons/
Just change in widget/HTML the fa-rocket class for another name
#12
Frederic Deppe (Sunday, 14 April 2019 17:56)

How can I change the logo from FA DESCRIPTION form the rocket to a catsup logo?
Thank you, Frederic
#11
Serhiy (Saturday, 23 February 2019 13:02)

@Peter add the body class 'no-hero' for a specific page and then display the header image
#10
Peter Litke (Saturday, 23 February 2019)

Hi,
how can I get the "HEADER SLIDER" form the Shortcodes menue all the way to the top
(next to the navigation menue) and get rid of the top-background picture ?

Thank you, Peter
#9
Serhiy (Wednesday, 30 January 2019 12:09)

@Weiss the star ratings widget is not available in template version you're using.
#8
Weiss (Wednesday, 30 January 2019 12:05)

how does that work with the star rating, when I insert that, only black stars and the double come
#7
karlijn (Thursday, 06 December 2018 13:01)

Fixed it thanks!
#6
Serhiy (Thursday, 06 December 2018 11:23)

@Karlijn in your page you're using multiply wrapping sections with 'color-dark' class. Each section should have an unique ID like explained in documentation so your content slider is wrapped in class "color-dark". Still have a doubt in it? Just place the same content slider in any other page without wrapping section and you will see the white color in caption.
#5
Karlijn (Thursday, 06 December 2018 11:14)

I changed it to color-white in the wrapping html but doesn't change the text.
#4
Serhiy (Wednesday, 05 December 2018 14:15)

@Karlijn you wrapped the slider in fullwidth section with the class ' color-dark'
#3
Karlijn (Wednesday, 05 December 2018 13:59)

Hi,
When I add the content slider my text is black instead of white so not really readable. How do I get it white. It still says color-white in the html/widget
Thanks
#2
Serhiy (Tuesday, 06 November 2018 16:47)

@David you didn't add your website url so I can't see what happened. However, the important updates regarding the parallax widget are available in section "updates"
#1
David (Tuesday, 06 November 2018 16:10)

Hello,
what happend with parralax-images? They don't move anymore and they are very blurred.
Thaks for your help!