The latest updates of Matrix Themes including the new features, bug fixes and much more.
You will also find some further customizations of custom widgets with the live examples.
01. JS
The Matrix Themes admin menu stopped working in the latest versions of Firefox browser when you're able to open the admin menu but can't select any element from the iframe. The problem occurs with the fixed position and it's parent div with transform property.
All you have to do is delete the previous version of Matrix js file and upload a new one.
How does the new menu work?
When you click the button to open the Zodiac admin menu, the top bar of Jimdo menu disappears. Closing the Zodiac menu, it will appear again.
02. Style editor updates
The new Style Editor design allows you to edit the module 'Columns' inside the other columns and having the edit tools visible now, you can move the elements inside the editor to the top or bottom, remove or add the new ones.
The variables is-switcher have been added to the second Widget/HTML module, together to the JS code, so the new style editor components are only 2 modules,- 'Tables' with the color palettes and 'Widget/HTML' with JS code and variable tag.
Three buttons on the top left of the page are:
1. Open/close the style editor.
2. Apply the new styles of the editor.
3. Refresh the page ( iframe) useful when you're using the variable tags to see the changes.
03. Helper classes
Updated helper classes of Matrix Themes. You will find some new classes for the global text and headings.
Global text size for mobile
m-text-11
m-text-12
...
m-text-20
In Design> Font settings you can setup the global text and heading size. In the style editor you can add the additional classes to make the global text smaller only for mobile devices
Global headings size for mobile
m-size-11
m-size-12
m-size-13
...
m-size-20
m-size-25
m-size-30
m-size-35
m-size-40
m-size-45
m-size-50
m-size-55
m-size-60
04. J parallax
The image parallax has been always been a "pain" for cross browser compatibility as it might work very well in Chrome and incorrect in Safari browser. In admin menu> Matrix Add-ons you will find a new parallax widget 'J-Parallax' that works fine in all browsers and mobile devices.
It's available in two versions - left and center aligned caption.
Make things happen
Look around and catch opportunities everywhere in order to clear your mind and take your abilities to the next level.
Read more
The new widget doesn't require any update of Matrix Theme as it has inline CSS and CDN js file
<style>
/*<![CDATA[*/
.jarallax{position:relative;z-index:0}.jarallax>.jarallax-img{position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;z-index:-1}
/*]]>*/
</style>
<script src="https://unpkg.com/jarallax@2.0"></script>
You can edit the speed transition of your parallax widget
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// j-parallax
$('.jarallax').jarallax({
speed: 0.2,
});
});
})(jQuery);
//]]>
</script>
Full widget shortcode
<style>
/*<![CDATA[*/
.jarallax{position:relative;z-index:0}.jarallax>.jarallax-img{position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;z-index:-1}
/*]]>*/
</style><script src="https://unpkg.com/jarallax@2.0"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// j-parallax
$('.jarallax').jarallax({
speed: 0.2,
});
});
})(jQuery);
//]]>
</script>
<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 ghost-white" href="https://www.matrix-themes.com/" target="_top">Read more</a>
</div>
</div>
</div>
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white white-outline-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
Write a comment