Instructions F.A.Q.

Shortcodes

Live preview

Header 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 fullwidth slider
</div>

Fullwidth bg 

<div class="hs-fullwidth bg-grey cc-clearover">
    <div class="inner" style="padding:150px 0;">
        <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>


Fullwidth bg 2 

<div class="hs-fullwidth bg-dark color-white cc-clearover">
    <div class="inner text-right" style="padding:150px 0;">
        <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>

Fullwidth bg 3 

<div class="hs-fullwidth turquoise color-white cc-clearover">
    <div class="inner text-center" style="padding:150px 0;">
        <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>


Header image 

<!-- ************* Fullwidth image ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-primary">
        </div>
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/header-image-1700x378.jpg?t=1540983633" alt="" />
        <div class="carousel-caption animated fadeInLeft">
            <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    Your header title
                </h1>
                <br />
            </div>
        </div>
    </div>
</div>

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

Header image 2 

<!-- ************* Fullwidth image ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay opacity-6">
        </div>
        <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/header-image-1700x378.jpg?t=1540983633" alt="" />
        <div class="carousel-caption animated fadeInLeft">
            <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    Your header title
                </h1>
                <br />
            </div>
        </div>
    </div>
</div>

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


Hero title 

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <h1 class="big color-white weight-500 left-align add-left-0">
            Your Hero Title
        </h1>
    </div>
</div>

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

Hero title 2 

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <h1 class="big color-white weight-500 left-align add-left-0">
            Stand out with a professional website
        </h1>
        <!-- ************* mid-rounded button ************* -->
        <a class="hs-button mid-round left-align" href="http://www.matrix-themes.com/" target="">Read more</a>
    </div>
</div>

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


Hero title 3 

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <h1 class="big color-white weight-500 right-align add-left-0">
            Stand out with a professional website
        </h1>
        <!-- ************* mid-rounded button ************* -->
        <a class="hs-button mid-round right-align" href="http://www.matrix-themes.com/" target="">Read more</a>
    </div>
</div>

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

Hero Title 4 

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <h1 class="big color-white weight-500 center-align add-left-0">
            Stand out with a professional website
        </h1>

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

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


Parallax 

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

    <div class="inner rel color-white m-padding text-center cc-clearover" style="padding:150px 0;">
        <h1 class="">
            This is a parallax 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 bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
    </div>
</div>

Parallax 2 

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

    <div class="inner rel color-white m-padding cc-clearover" style="padding:150px 0;">
        <h1 class="">
            This is a parallax 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 bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
    </div>
</div>


Parallax 3 

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

    <div class="inner rel color-white text-right m-padding cc-clearover" style="padding:150px 0;">
        <h1 class="">
            This is a parallax 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 bg-round" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
    </div>
</div>

Parallax 4 

<div class="hs-fullwidth color-white bg-holder rel" data-width="1200" data-height="800" style=
"background:url(https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175)no-repeat center;">
    <div class="hs-overlay opacity-4">
    </div>

    <div class="inner m-padding text-center cc-clearover" style="padding:150px 0;">
        <!-- add below the content for the parallax image or leave it blank -->

        <h1>
            This a parallax 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 ghost-white bg-round" href="http://www.matrix-themes.com/" target="">Custom button</a> <!-- end parallax content -->
    </div>
</div>


Half fullwidth bg 

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

<div class="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 bg-round" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>

    <div class="mid-box-right bg-primary-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 bg-round" href="http://www.matrix-themes.com/" target="">Custom button</a>
        </div>
    </div>
</div>

Content teaser 

<!-- ************* Default content teaser ************* -->

<div class="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 

<!-- ************* Default content teaser ************* -->

<div class="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 

<!-- ************* Default content teaser ************* -->

<div class="content-teaser turquoise 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 bg-white bg-round flat" href="https://www.matrix-themes.com/" target="">learn more</a>
    </div>
</div>


One Third 

<!-- ************* one third widget ************* -->

<div class="custom-widget bg-primary is-flex is-flex-block">
    <div class="one-third color-white col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 super-big 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 super-big 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 super-big center-align">
                18
            </h1>

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

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

One Third 2 

<!-- ************* one third widget ************* -->

<div class="custom-widget turquoise is-flex is-flex-block">
    <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>


One Third 3 

<!-- ************* one fourth widget ************* -->

<div class="custom-widget bg-primary is-flex is-flex-block">
    <div class="one-fourth color-white col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 super-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 super-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 super-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 super-big center-align">
                7
            </h1>

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

<div class="c">
</div>
<!-- ************* end one fourth widget ************* -->

One Third 4 

<!-- ************* one fourth widget ************* -->

<div class="custom-widget turquoise is-flex is-flex-block">
    <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>
<!-- ************* end one fourth widget ************* -->


Tile widget 

<!-- ************* tile widget with left text ************* -->

<div class="custom-widget bg-primary">
    <div class="hs-right-50">
        <div class="image_wrapper">
            <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" alt="" />
        </div>
    </div>

    <div class="hs-left-50 color-white">
        <div class="gutter-10 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 small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

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

Tile widget 2 

<!-- ************* tile widget with right text ************* -->

<div class="custom-widget bg-primary-dark">
    <div class="hs-left-50">
        <div class="image_wrapper">
            <img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" alt="" />
        </div>
    </div>

    <div class="hs-right-50 color-white">
        <div class="gutter-10 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 small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

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


Overlay teaser 

<!-- ************* Overlay teaser with simple image link ************* -->

<div class="hs-thumbnail">
    <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
    <div class="thumbnail-hover">
        <a href="http://matrix-themes.com/"></a>
    </div>
</div>
<!-- ************* end overlay teaser ************* -->
<!-- ************* start description  ************* -->

<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>
<!-- ************* End description ************* -->

Overlay teaser 2 

<!-- ************* Overlay teaser with simple image link ************* -->

<div class="hs-thumbnail">
    <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
    <div class="thumbnail-hover">
        <a href="http://matrix-themes.com/"></a>
    </div>
</div>
<!-- ************* end overlay teaser ************* -->
<!-- ************* start description  ************* -->

<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>
<!-- ************* End description ************* -->


Quote teaser 

<!-- ************** Quote teaser style2 ************** -->

<center>
    <div class="fa fa-quote-left fa-4x primary-color-dark">
    </div>
    <br />

    <h2 class="no-g-font">
        Vestibulum ac diam sit amet quam vehicula elemeivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
    </h2>

    <p>
        (Elemeivamus)
    </p>
</center>

Quote teaser 2 

<!-- ************* Quote teaser style3 ************* -->

<div id="hs-slider" class="owl-carousel owl-theme no-arrows">
    <div class="item">
        <center>
            <div class="fa fa-quote-left fa-4x">
            </div>
            <br />

            <h2 class="no-g-font">
                Vestibulum ac diam sit amet quam vehicula elemeivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
            </h2>

            <p>
                (Elemeivamus)
            </p>
            <br />
            <br />
        </center>
    </div>

    <div class="item">
        <center>
            <div class="fa fa-quote-left fa-4x">
            </div>
            <br />

            <h2 class="no-g-font">
                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. Vestibulum ac diam
                sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit
                amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh. 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. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing
                elit.
            </h2>

            <p>
                (Consectetur)
            </p>
            <br />
            <br />
        </center>
    </div>

    <div class="item">
        <center>
            <div class="fa fa-quote-left fa-4x">
            </div>
            <br />

            <h2 class="no-g-font">
                Rehicula elemeivamus magna justo, quam vehicula elemeivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
            </h2>

            <p>
                (Elemeivamus)
            </p>
            <br />
            <br />
        </center>
    </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 

<!-- ************* jQuery Toggles ************* -->

<div class="toggle">
    <a class="switch" href="#"></a> You 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>

Toggle 2 

<!-- ************* jQuery Toggles with custom colors ************* -->

<div class="toggle">
    <a class="switch green" href="#"></a> You 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 

<!-- ************* jQuery 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 

<!-- ************* jQuery 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 

<!-- ************** Fa social icons **************** -->

<div class="hs-social left-align 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 

<!-- ************* Sprite Social icons ************* -->

<div class="social cc-clearover">
    <a href="https://twitter.com/matrix_themes/" class="social twitter" target="_blank"></a> <a href="https://www.instagram.com/matrix_themes/" class="social instagram" target="_blank"></a> <a href=
    "https://www.facebook.com/matrix_themes/" class="social facebook" target="_blank"></a>
</div>


Social Icons 3 

<!-- ************* Sprite Social icons ************* -->

<div class="socialcc-clearover">
    <a href="https://twitter.com/matrix_themes/" class="social twitter bg-round" target="_blank"></a> <a href="https://www.instagram.com/matrix_themes/" class="social instagram bg-round" target=
    "_blank"></a> <a href="https://www.facebook.com/matrix_themes/" class="social facebook bg-round" target="_blank"></a>
</div>

Pricing tables 

<!-- ************* pricing table  ************* -->

<div class="hs-description green-sea color-white">
    <center>
        <h1 class="big">
            € 60,00
        </h1>

        <p>
            Professional package
        </p>
    </center>
</div>
<!-- ************* End description ************* -->
<!-- ************* description style 1  ************* -->

<div class="hs-description">
    <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>
        <!-- ************* end Custom links style 1 ************* -->
        <!-- ************* style 2 ************* -->
        <br />
        <a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
    </center>
</div>
<!-- ************* End description ************* -->


Pricing tables 2 

<!-- ************* pricing table  ************* -->

<div class="hs-description green-sea color-white">
    <center>
        <h1 class="big">
            € 60,00
        </h1>

        <p>
            Professional package
        </p>
    </center>
</div>
<!-- ************* End description ************* -->
<!-- ************* description style 1  ************* -->

<div class="hs-description midnight-blue color-white">
    <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>
        <!-- ************* end Custom links style 1 ************* -->
        <!-- ************* style 2 ************* -->
        <br />
        <a class="hs-button bg-white flat bg-round" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
    </center>
</div>
<!-- ************* End description ************* -->

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>

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 

<!-- ************* Fa description widget ************* -->

<div class="hs-description">
    <center>
        <div class="fa fa-diamond fa-4x">
        </div>

        <h3 class="add-top-10">
            your 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>
    </center>
</div>

Fa Description 2 

<!-- ************* Fa description widget ************* -->

<div class="hs-description green-sea color-white">
    <center>
        <div class="fa fa-rocket fa-4x">
        </div>

        <h3 class="add-top-10">
            your 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>
    </center>
</div>


Fa Description 3 

<!-- ************* Fa description widget ************* -->

<div class="hs-description belize-hole color-white slide-up-hover">
    <center>
        <div class="fa fa-rocket fa-4x">
        </div>

        <h3 class="add-top-10">
            block with link
        </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>
    </center>
    <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>

Youtube popup 

lt;!-- ************* 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>


Content slider 

<!-- ************* Content fade slideshow with center caption ************* -->

<div id="hs-slider" 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 text-center add-5">
            <h1 class="color-white">
                It's time for custom design
            </h1>

            <p class="color-white">
                Quisque velit nisi, pretium ut lacinia in, elementum id enim.
            </p>
        </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>

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 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: 15
  • #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!


STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

Zødiac
About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2019 Serhiy Hembarevskyy. All rights reserved
Log in Log out | Edit

Matrix themes

Close
Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace Custom layout