• Home
    • Getting started
    • Support
  • Home
  • Getting started
  • Support

Shortcodes

Fullwidth SectionsContent teaserQuote Widget Image TeaserAwesome Buttons Fa teaser Social icons Service icons

Fullwidth section

<div class="is-matrix left-align hs-fullwidth bg-grey 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 3

<div class="is-matrix hs-fullwidth turquoise 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>

Fullwidth section 2

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


Content teaser

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

<div class="is-matrix content-teaser left-align 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 left-align 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 left-align 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>


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>


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 class="title2 big" style="color:#008eff!important;">
            Summer
        </h3>

        <h3 class="title3">
            Collection
        </h3>
    </figcaption>
    <a href="https://www.matrix-themes.com/"></a>
</figure>


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>


Fa Description

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

<div class="is-matrix bg-grey center-align 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>

Fa Description 2

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

<div class="is-matrix bg-dark center-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>


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>


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.

Interested in Zodiac Pro?

More than 30 custom widgets with advanced functionality and direct support

Upgrade now

Zødiac framework

Current version: 5.5.3

From 10/12/2020 the domain zodiac-framework.com has been moved to a new Jimdo website.

The new website and version (5.0) is available here:

 www.hembarevskyy.com/projects/zodiac/

About | Privacy Policy | Cookie Policy | Sitemap
© 2020 All rights reserved
Log in Log out | Edit
Jimdo

You can do it, too! Sign up for free now at https://www.jimdo.com

  • Scroll to top
Close