Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    20. December 2020

    December Updates

    Introducing the new feature "Matrix variables", new release of js file, Jimdo parallax, custom captions, new release of Zodiac framework and much more

    01. New Release of Matrix 1.8.2

    In section 'Updates' of Matrix Themes menu you can find a new file 'Matrix-1.8.2.min.js'. 

    You'll need to replace the previous version you're using on your website ( Design> Custom Template> Files )

    What's new in Matrix 1.8.2

    • Updated YTPlayer plugin which caused the problem in MacOs Big Sur.
    • Added parallax-scroll.js ( Currently this plugin has been replaced by other plugins and it's not available in shortcodes. I added it  because if you're using a template with matrix-1.6.js or previous, you don't need to update the js part in HTML )
    • Removed Instagram feed and countdown js files. These 2 plugins can be used as a separate file included in shortcode, so when you update your website with matrix-1.8.2.js, you'll need to update the widget  as well.
    • Added Jimdo parallax ( you can add a parallax image using a standard Jimdo module 'Photo' or 'Text with Photo' )
    • Added Matrix variables ( see details below )

    02. Matrix Variables

    The Matrix variables replace the previous feature 'Play of columns' ( you can use the both ones anyway) and allow to use the same functions like play of columns but without any js code in Widget/HTML module

    How it works

    Matrix variables can be used only inside the module 'Columns' , added in Widget/HTML with the following options:

    01  Draggable logo

    Adding the variables inside of the columns in footer, you can display the logo image with draggable options. You need to use only one column except Hafen theme which comes with 2 columns

    
    <var> draggable-logo </var>

    02  Draggable hero title

    Adding the variables inside of the columns in content section, you display the hero title with any Jimdo module edited directly in hero section

    
    <var> draggable-hero color-white g-font </var>

    03  Wrapping the background color

    You can add the background color to any module 'Columns'

    
    <var> hs-fullwidth bg-primary color-white </var>

    This is a heading

    Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Phasellus accumsan cursus velit. Vivamus laoreet.

     

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. In hac habitasse platea dictumst. Praesent egestas tristique nibh. Nullam quis ante.

    New Button
    hs-fullwidth bg-grey-dark color-white

    04  Apply the global helper classes for specific elements

    You can alter different styles of default Jimdo buttons, contact form etc using the global helper classes in variables

    
    <var> bg-primary color-white add-20 mid-round form-dark white-outline-btn </var>

    Get in touch

    Note: Please fill out the fields marked with an asterisk.

    bg-grey-dark color-white link-white add-20 mid-round form-dark white-outline-btn

    05  Heading's alignment

    You can change the default alignment of headings ( h1, h2, h3 )

    This is a center aligned heading

    center-align

    
    <var> center-align </var>

    06  Hide mobile / only mobile

    You can display the module 'Columns'  and it's elements only for desktop or mobile devices

    This heading and text are hidden in tablet & mobile devices

    Donec id justo. Praesent blandit laoreet nibh. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nullam dictum felis eu pede mollis pretium.

    hide-mobile

    
    <var> hide-mobile </var>
    
    <var> hide-mobile-only </var>
    
    <var> only-mobile </var>

    07  Tile banners

    Display the Tile banners  ( Play of columns ). In this case you use the variables instead of js code

    This is a tile banner

    Ut leo. Duis vel nibh at velit scelerisque suscipit. Maecenas nec odio et ante tincidunt tempus.

    New Button
    is-tile bg-grey-dark color-white white-outline-btn is--flex is-flex-block no-padding

    
    <var> is-tile bg-primary color-white white-outline-btn is--flex is-flex-block no-padding </var>

    08  Animations

    Add the animations to a specific columns of your page

    Animated block

    Fusce convallis metus id felis luctus adipiscing. Nam adipiscing. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nunc nulla. In turpis.

    New Button
    wow animated fadeInUp

    
    <var> wow animated fadeInUp </var>

    09  Custom style for only one column

    You can apply the custom style only for specific column of the module 'Columns'

    This is a heading

    Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Fusce fermentum. Pellentesque dapibus hendrerit tortor. Praesent vestibulum dapibus nibh.

    New Button
    bg-grey-dark color-white add-10 mid-round white-outline-btn

    This is a heading

    Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Fusce fermentum. Pellentesque dapibus hendrerit tortor. Praesent vestibulum dapibus nibh.

    New Button
    bg-grey-dark color-white white-outline-btn add-10 mid-round

    
    <ins> bg-dark color-white add-10 mid-round white-outline-btn </ins>

    03. No coding widgets

    From the previous post you could see the additional widgets that can be added by ALT text classes. Here's the second part including some interesting elements:)

    See full list of no coding features

    Parallax image

    It's about a fullwidth image with fixed position and center aligned caption.

    is-matrix-parallax is-fullwidth has-center-caption has-padding h-100

    is-matrix-parallax is-fullwidth has-center-caption has-padding h-100 has-overlay
    This is a center aligned caption

    Important notes!

    • When you change the parallax adding a new image, you can see the new added image only after refreshing the page.
    • The height of the image is setup by  the classes h-100 h-75 and h-50. You can also use the class h-mobile to get  50vh height on mobile devices. 
    • Add the dark overlay with the class has-overlay
    • Use left, center or right image alignment to get the different style of the text

     

    The parallax image can be used also with module 'Text with Photo'

    is-overlay is-white is-fullwidth has-padding is-matrix-parallax h-100

    Etiam ut purus mattis mauris sodales aliquam. Sed in libero ut nibh placerat accumsan. Vivamus quis mi. Praesent ac massa at ligula laoreet iaculis. Curabitur a felis in nunc fringilla tristique.

    is-overlay is-white is-fullwidth has-padding is-matrix-parallax h-100

    is-overlay is-fullwidth has-padding is-matrix-parallax h-100

    Linked image with hover overlay

    has-hover-icon is-100
    has-hover-icon is-100

    has-hover-icon is-100

    Text with Photo

    is-teaser bg-grey has-hover-icon has-padding

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

    is-teaser bg-dark color-white has-hover-icon has-padding

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae


    is-teaser bg-grey has-hover-icon has-padding

    is-teaser bg-dark color-white has-hover-icon has-padding

    Image with caption

    has-caption-overlay
    December Updates
    has-caption-overlay
    December Updates

    has-caption-overlay

    has-promo-tag
    December Updates with additional custom widgets
    has-promo-tag
    Promotion!

    has-promo-tag

    04. Zodiac framework

    All above widgets are also included in new Zodiac framework v.5.0 and can be found on a new website:

    https://www.hembarevskyy.com/projects/zodiac/

    Since it was a very static website, I moved the domain to my own website, while the old website with version 4.1  you will find here:

    www.zodiac-framework1.jimdo.com

    05. Extra widgets

    Animated counter

    2682

    Happy Customers

    19

    Countries around the world


    
    <!-- *** Custom Matrix widget fa counter *** -->
    <div class="is-matrix bg-primary color-white add-20 center-align">
        <div class="fa fa-thumbs-o-up fa-3x">
        </div>
    
        <div class="counter mobile-big weight-600 add-top-20">
            2682
        </div>
    
        <p class="size-18 weight-600 add-top-10 add-btm-10">
            Happy Customers
        </p>
    </div>
    <!-- *** end Custom Matrix widget fa counter *** --> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { // animated counter $('.counter').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); }); })(jQuery); //]]> </script>

    Note:

    The animation is visible on the page load and has to be added on the top of the content.

    The js part in red color should be used only once. If you add 3 or more boxes in different columns,  use the js only in the first column.

    Animated Overlapped images

    
    <div class="is-matrix">
        <div class="img-overlap is--flex rel">
            <!-- front image -->
    
            <div class="col-5 resp-img" style="left:20%;z-index:1;" data-enllax-ratio=".1" data-enllax-type="foreground">
                <img src="https://u.jimcdn.com/cms/o/sb0c6192bec5153ef/userlayout/img/bg-shop.jpg?t=1608365866" alt="" />
            </div>
            <!-- end front image -->
            <!-- back image -->
    
            <div class="col-10 resp-img right-align">
                <img src="https://u.jimcdn.com/cms/o/sb0c6192bec5153ef/userlayout/img/bg-zodiac.jpg?t=1608365027" alt="" />
            </div>
            <!-- end back image -->
        </div>
    </div>
    tagPlaceholderTags:

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    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-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

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

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close