Matrix themes - Updates #09

This post includes the latest Matrix Themes and Page builder's updates, bug fixes, and the new features and designs.

Now let's see all details regarding the latest Matrix Themes updates

The latest updates include the use of CSS variables for color settings. These variables are available in two sections: inside the 'helper-classes.css' file and the updated 'color settings' section of the CSS layout. 

Using CSS variables allows you to have all custom widgets with your set-up colors without using the "apply the styles" button. So, when you copy any widget from shortcodes and add it to your page, the default colors will automatically be applied to all elements of your website.

CSS variables provide greater flexibility for color settings and enable customization of additional elements on your website.

The latest JS file includes several changes that improve the performance and functionality of Matrix themes:

• removed the universal and simple parallax plugins that did not work correctly on mobile devices. As a result, the "Add-ons" section now only includes the shortcodes of the "Jarallax" and "Enllax" parallax plugins, which are fully compatible with mobile devices.
• removed the "slick-nav.js" plugin as all Matrix themes now use the CSS mobile navigation, similar to the standard Jimdo templates. This change ensures consistency across all themes and simplifies the codebase.
• updated the jQuery library to the latest release and also updated the "scaled text.js" plugin, which will further improve the performance of your website.

Finally, to enhance website speed and performance, some of the Matrix theme features have been replaced from jQuery with plain JS. This change ensures that your website loads faster and performs better, providing a smoother user experience for your visitors.

This bug fix has been included in the latest theme installations. However, if you prefer, you can also apply the fix manually.

To prevent the navigation items from jumping when you set their value larger than the body text size in the style editor, you can simply remove the following lines ( highlighted in red color ) from your main navigation in Design > Custom Templates > CSS:

/* Main nav style */
.hs-menu nav ul li a:link,.hs-menu nav ul li a:visited {
    display: block;
    color:#333;
    line-height:150%;
    margin: 0;
    padding: 10px 20px;
    text-decoration: none!important;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

To add a logo image or display the hero section in Matrix themes, you need to use the <var>draggable-logo</var> and <var>draggable-hero</var> elements inside the "columns" module. With the latest themes, you no longer need to reload the page to see your changes. Simply click the "Apply the Styles" button in the style editor, and your logo will be visible in the header or the background image in the hero section.

Additionally, the hero section now has a resizable option, allowing you to adjust its size to fit your content perfectly. This feature provides greater flexibility in designing your website and ensures a more professional look and feel.

The following changes have been made in order to have the same hero styles and options for all Matrix themes. It means that by default the hero section is deactivated and you can see the background image only when adding <var>draggable-hero</var> inside the columns.

Here are all options:

To achieve this effect in the latest Matrix themes, you can add a slightly larger logo image and include the 'has-sticky-logo' class in the template configurations of the style editor

The updated style editor comes with the other new options such as color text for your buttons and additional classes for the navigation style.

There are additional classes for the main navigation styling:

color-nav - active and hover primary color

color-line -  active and hover primary color line

A revised version of the Matrix Page Builder has been released, which incorporates the latest Matrix Themes updates. Notably, the updated version includes a new style editor that employs CSS variables for enhanced customization capabilities.