Matrix themes - Updates #01

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.

* YTplayer has been removed because of the Cookies options. This plugin is available in section 'Enterprise package' as a standalone plugin.

If you upload this version to your website, you'll need to remove the YTplayer initialization from HTML:

// tubular
   $("#hs-video").YTPlayer();
     $('#hs-video').appendTo($('.matrix-hero'));

This file includes different types of animation for the main menu and the height of animated border line.

/*** additional animated effect for snip-nav menu ***/
.--effect02 a:before {
    width:100%;
    opacity:0;
    transform: scaleX(0);
    transition: all 0.4s ease-in-out 0s;
}

.--effect03 a:before {
    width:100%;
    opacity:0;
}

.--effect04 a:before {
    width: 100%;
    transform: scaleX(0);
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.--line01 a:before {
    height: 1px;
}

.--line02 a:before {
    height: 2px;
}

.--line03 a:before {
    height: 3px;
}

.--line04 a:before {
    height: 4px;
}

.--line05 a:before {
    height: 5px;
}

Open the Style Editor and select the section 'navigation styles'. Add 1 of 4  animation effects and select the height of the line. Click the 'apply' button to see the effect.

This update includes the new helper classes for the hover background of the buttons.

Apply the hover background color for the custom button in Widget/HTML:

<a class="hs-button bg-pink mid-round --hover:bg-red" href="https://www.matrix-themes.com/" target="_blank">Button</a>

<a class="hs-button bg-purple mid-round --hover:bg-red" href="https://www.matrix-themes.com/" target="_blank">Button</a>

The same classes you can apply globally for all buttons of your website including the contact form and default Jimdo module 'button' using the Style Editor:

In Matrix Themes menu > Block Elements you  will find the following new widgets:

• Coming soon
• Social
• Hero

Here I would like to focus on 'Hero' block element that shouldn't be confused with hero Jimdo background.

Currently there are 12 different block hero elements. All of them have to be used inside the module

'widget/HTML' and placed as the first(!) Jimdo module in content area.

Each block elements has a custom class 'has-no-gutter' that removes the spacing between the header and content,- that's why you add 'hero' only as the first module on your page.

Another useful class that can be used in block elements 'hero' is 'has-transparent-header' that allows you to place your hero section 'behind' the header. Your header in this case will have the absolute position with transparent background color.

The hero blocks using the svg wave elements can be customized in order to correctly display the wave element

<!-- Your wave goes here... -->
<svg class="matrix-svg" version="1.1" viewbox="0 0 1440 200" x="0" y="0" xml:space="preserve" fill="#fff">
<path fill="#fff" fill-opacity="1" d="M0,160L1440,32L1440,320L0,320Z">
</path></svg>

In above example the value of the viewbox in red color can be changed in order to move the wave to the top or bottom direction.

The other way to customize the wave element is to hide it for mobile device:

<!-- Your wave goes here... -->
<svg class="matrix-svg hide-mobile" version="1.1" viewbox="0 0 1440 200" x="0" y="0" xml:space="preserve" fill="#fff">
<path fill="#fff" fill-opacity="1" d="M0,160L1440,32L1440,320L0,320Z">
</path></svg>

You can use the following website to generate your own wave element:

https://getwaves.io/

Copy only the middle line:

( from <path fill ..</path> ) and change fill="#0099ff" for "#ffffff".

The latest Matrix Themes come with CSS menu for mobile navigation instead of the Slicknav.js. In multilingual versions the menu of the first <ul> elements is always opened as shown on the screenshot.

Copy the below preset font and paste it to Edit Head section ( in Admin menu> Settings> Edit Head )

To change the preset google font, just change the font name (yellow color) for your own one. You can use the below website to pickup your own google font

Open the Style Editor and add the class 'g-font' for the main elements of your website: