Matrix themes: helper classes

The new Matrix themes include a handful of helpful helper classes to add certain behaviors to your elements.You can easily customize the widgets and layout structure of your Jimdo website. Please check all details in this post

The helper classes can be used directly in HTML or in module Widget/HTML.

Using helper classes in HTML will allow you to change the layout structure of your layout without changing CSS. For example, If you're using Bergen default theme and want to change the header background, you need to add helper classes to the section hs-header:

<div class="hs-header bg-white add-bottom-border1">
...

As you can see you change the background of the header by adding also the 1px bottom border. You can also change the color of navigation, it's font, size and weight ( if available ):

<div class="hs-menu nav-dark g-font size-13 weight-600">
...

Would you like to add a sticky effect for your navigation, the whole header or any other element? Simply add fixed class:

<div class="hs-header bg-white add-bottom-border1 fixed">
...

Each Matrix theme contains the global layout sections that can be customized with helper classes. Some of them are disabled by classhidden ( depends on the template you're using ):

• hs-top-header
  
• hs-header
  
• hs-menu
  
• hs-subnav
  
• hs-thirdnav
  
• hs-content
  
• footer-top
  
• hs-footer
  
• footer-btm
  

You can change the backgrounds, color, padding, border and other styles.

Let's take an example of color boxes:

    <div class="hs-description">
        <h3>
            Your custom title
        </h3>
       <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
    </div>

Now we change the background and text color ( the name of the color is available in color picker section )

    <div class="hs-description emerald color-white">
        <h3>
            Your custom title
        </h3>
       <p>
            This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
            use to add content to your website
        </p>
    </div>

There are too many options that can't be explained in just one post;) The full list of helper classes you will find in admin mode clicking the "helper classes" section from Matrix themes menu.

Below just some of the classes that have been added to the latest release of Matrix themes: 

hide-mobile only-mobile only-admin fixed size-16 max-height-60 no-border g-font weight-600 link-whiteno-icon

hide-mobile - for hide the element in mobile version;

only mobile - to display the element only in mobile version;

admin-only - for navigation or any other element displayed only in admin mode;

fixed - for sticky navigation or header;

max-height-60 -  to adapt the logo image

no-icon - to hide shopping cart icon when empty