Introducing the new feature "Matrix variables", new release of js file, Jimdo parallax, custom captions, new release of Zodiac framework and much more
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
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>
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.
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>
05 Heading's alignment
You can change the default alignment of headings ( h1, h2, h3 )
<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
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.
<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
Ut leo. Duis vel nibh at velit scelerisque suscipit. Maecenas nec odio et ante tincidunt tempus.
<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
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.
<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'
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.
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.
<ins> bg-dark color-white add-10 mid-round white-outline-btn </ins>
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:)
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
The parallax image can be used also with module 'Text with Photo'
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
has-hover-icon is-100
Text with Photo
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
has-promo-tag
All above widgets are also included in new Zodiac framework v.5.0 and can be found on a new website:
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:
Animated counter
Happy Customers
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>