• Home
  • About
  • Blog
  • Archive
  • Home
  • About
  • Blog
  • Archive

    Starting from 01.01.2023 the Zodiac framework will be removed. In order to keep using the framework on your website, you should host all source files locally on your own website. You'll have to save all shortcodes and the custom widgets as well.
    The new framework 'Matrix Page Builder' is available here

    Custom widgets

    Buttons Social Icons
    Content teaser Image teaser
    Quote teaser Icon teaser
    Full width Check lists
    J-Parallax J-Parallax 2
    AnimationsAnimations 2

    Fullwidth section

    <div class="is-matrix left-align hs-fullwidth bg-gray cc-clearover">
        <div class="max-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-primary color-white cc-clearover">
        <div class="max-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>
    


    Content teaser

    <!-- *** Matrix Widget callout *** -->
    
    <div class="is-matrix content-teaser is--flex is-flex-block cc-clearover">
        <div class="left-align col-8 add-20 cc-box">
            <h3>
                Make it Stand Out
            </h3>
    
            <p>
                Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
                dolor sagittis lacus.
            </p>
        </div>
    
        <div class="right-align col-4 add-20 cc-box">
            <a class="hs-button mid-round right-align" 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 is--flex is-flex-block cc-clearover">
        <div class="left-align col-8 add-20 cc-box">
            <h3>
                Make it Stand Out
            </h3>
    
            <p>
                Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
                dolor sagittis lacus.
            </p>
        </div>
    
        <div class="right-align col-4 add-20 cc-box">
            <a class="hs-button right-align ghost-white" href="https://www.matrix-themes.com/" target="">learn 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

    <!-- *** quote widget *** -->
    
    <div class="is-matrix content-teaser is--flex is-flex-block cc-clearover">
        <div class="left-align col-12 add-20 cc-box">
            <div class="fa fa-quote-left fa-5x" style="margin-top:-30px;opacity:0.6;">
            </div>
    
            <p>
                Whatever it is, the way you tell your story online can make all the difference
            </p>
    
            <p class="add-top-10 size-13">
                - Quote ( Style 2 )
            </p>
        </div>
    </div>
    <!-- *** end quote widget *** -->
    


    Image Teaser

    
    <!-- snippet 1581 -->
    
    <figure class="snip1581 left-align color-white">
        <img src="https://u.jimcdn.com/e/o/se1eac71488c65a31/userlayout/img/slide04.jpg" alt="matrix-themes" />
        <figcaption>
            <h3>
                Summer
            </h3>
    
            <p >
                Collection
            </p>
        </figcaption>
        <a href="https://www.matrix-themes.com/"></a>
    </figure>
    

    Icon teaser

    <!-- *** Custom Matrix widget fa description *** -->
    
    <div class="is-matrix bg-gray center-align mid-round add-20">
        
            <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>
        
    </div>
    


    Icon teaser 2

    <!-- *** Custom Matrix widget fa description *** -->
    
    <div class="is-matrix bg-dark left-align color-white mid-round add-20">
        
            <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>
        
    </div>
    

    Button default

    
    
    <a class="hs-button" href="https://www.matrix-themes.com/" target="">Custom Button</a>
    


    Button midrounded

    
    
    <a class="hs-button mid-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
    

    Button rounded

    
    
    <a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
    


    Button ghost dark

    
    
    <a class="hs-button ghost-dark" href="https://www.matrix-themes.com/" target="">Custom Button</a>
    

    Button ghost white

    
    
    <a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom Button</a>
    


    Social Icons

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


    Check list

    
    <!-- *** Matrix Widget service icons *** -->
    
    <div class="fa fa-check size-20" style="color:#39be01;">
    </div>
    Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.
    

    Check list 2

    
    <!-- *** Matrix Widget service icons *** -->
    
    <div class="fa fa-check-circle size-20" style="color:#39be01;">
    </div>
    Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.
    


    J-Parallax

    
    <div class="is-fullwidth rel h-100 jarallax is--flex no-padding is-matrix-block">
        <img class="jarallax-img" src="https://u.jimcdn.com/cms/o/s66fcc108ff25abab/userlayout/img/j-parallax.jpg?t=1651309491" alt="Matrix themes" />
        <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 left-align">
                <h3 class="">
                    Make things happen
                </h3>
    
                <p>
                    Look around and catch opportunities everywhere in order to clear your mind and take your abilities to the next level.
                </p>
                <br />
                <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Read more</a>
            </div>
        </div>
    </div>
    

    J-Parallax 2

    
    <div class="is-fullwidth rel h-100 jarallax is--flex no-padding is-matrix-block">
        <img class="jarallax-img" src="https://u.jimcdn.com/cms/o/s66fcc108ff25abab/userlayout/img/j-parallax.jpg?t=1651309491" alt="Matrix themes" />
        <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">
                <h3 class="">
                    Make things happen
                </h3>
    
                <p>
                    Look around and catch opportunities everywhere in order to clear your mind and take your abilities to the next level.
                </p>
                <br />
                <a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Read more</a>
            </div>
        </div>
    </div>
    


    Fade Animations

    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.jtpl-content .j-module').addClass('is-fade');
    // wow
    wow = new WOW(
        {
          boxClass:     'is-fade',
          animateClass: ' animated fadeIn',
          mobile:       true,
          offset:       50
        }
      )
      wow.init();
        
    
    });
    })(jQuery);
    //]]>
    </script>
    <div class="matrix-msg invisible">
        fade animations
    </div>
    

    Slide Animations

    
    <script type="text/javascript">
    //<![CDATA[
         jQuery.noConflict();
    (function($) {
    // Init
    $(document).ready(function() {
    $('.jtpl-content .j-module').addClass('is-slide');
    // wow
    wow = new WOW(
        {
          boxClass:     'is-slide',
          animateClass: ' animated fadeInUp',
          mobile:       true,
          offset:       50
        }
      )
      wow.init();
        
    
    });
    })(jQuery);
    //]]>
    </script>
    <div class="matrix-msg invisible">
        slide animations
    </div>
    

    Interested in Zodiac Pro?

    More than 30 custom widgets with advanced functionality and direct support

    Upgrade now

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-right-nav
    navigation styles
    size-15 weight-400
    content styles
    form-white
    footer styles
    o-form color-white
    Typography
    Heading H1
    weight-600
    Heading H2
    weight-600
    Heading H3
    weight-600
    Buttons
    weight-400
    Animations

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

    is-rounded
    draggable-logo

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