November Updates of Matrix Themes including the latest bug fixes, tips, CSS custom elements, theme options and much, much more!

You can find the latest updates of Ultimate Widgets (starting from 14/11/2020) which include some new elements shown in this post.

How to update the Ultimate widgets, please check the following page

Added the class anim-up-down which can be used for every custom widget or Jimdo module.

Added the class has-mask-hero which can be used  in Matrix Themes to create landing pages.

For specific pages, you can add a body class has-mask-hero in order to get your hero section with absolute position, so your content  will be displayed on the top of the page

has-mask-hero can be used with other body classes:

• has-global-hero - display hero section
• main-page -  display hero section like in homepage
• hide-subnav - hide sub-menu ( 3rd level )
• has-preload - display preload section
• has-slope - add specific form to the hero section

Regarding the last class has-slope,- in the latest themes I used the svg waves generated by the website www.getwaves.io

Once copied the svg code, you paste it  directly to HTML folder. You'll have to modify 2 values ( 1) the background color which should be white #ffffff

2) position to reduce the bottom gap

The class slope-separator in CSS has to be with this style ( you change/add it if you have different values)

.slope-separator {
    position: absolute;
    top: auto;
    bottom: -10px;
    width:100%;
    display:none;
}

.has-slope .slope-separator{
   display:block;
}

It has 3 different styles: yellow, purple and default color. It based on wow animation framework. To activate the animation on mobile devices, please make sure in your wow js code you have this value

// wow
wow = new WOW(
    {
      boxClass:     'wow',
      animateClass: 'animated',
      mobile:       true,
      offset:       100
    }
  )
  wow.init();

From the previous post you could find to make a custom image shape using the button ALT text, so here are the complete classes:

is-mid-rounded

is-rounded

is-custom

• You will find the class is-eq which is important to make a perfect center aligned logo in specific template, so the left and right header sections are equal;
• Updated the code for draggable features and tutorials. The previous version didn't work in Firefox and Safari browsers. I'd like to thank my partners from Switzerland for having reported the bug;)
• Ultimate widgets and Play of columns widgets. To display the previous style of overlay teaser, you need to add a body class has-play-of-columns

This is the most important update that allows you to have additional widgets with default Jimdo modules. Please check the section "Updates" of Matrix theme menu about the correct way to update it.

How it works and what you can do

After having updating the js code on your website and the latest CSS updates of Ultimate widgets, you can add a custom class to Jimdo module "Photo" and "Text with Photo" using the ALT text exactly the same way like explained in previous section about custom shapes.

Let's see some examples with Photo:

Example 1

is-custom anim-up-down

Example 2

bg-grey  mid-round add-20 has-shadow wow animated fadeInUp

Example 3

is-fullwidth has-overlay has-padding

Example 4 (module "Text with photo").

*Note: After having added the new class, you'll need to reload the page to see effect

is-overlay

is-overlay is-white

is-overlay  is-fullwidth has-padding

is-overlay is-white is-fullwidth has-padding

is-teaser bg-grey has-shadow has-padding

is-teaser bg-dark color-white has-shadow has-padding

The latest Ultimate Widgets updates allows you to add the same widgets style ( e.g. Text with photo) without using Play of Columns feature. It means that even if you add the module "Text with Photo" inside the columns, it will have the default Jimdo style. To display it like overlay widget, you'll need to add a body class has-play-of-columns

Based on the customer's feedback, I could see that many users still need the default style Text with Photo module inside of the columns.

For example, you'd like to display inside the columns an image (icon) with the text