There are 5 components of custom layout:

1. HTML ( Design> Custom Template> HTML )

2. CSS ( Design> Custom Template> CSS )

3. CSS components ( Design> Custom template> Files)

• 04.custom-widgets.css
• 05.helper-classes.css
• 06.media-queries.css
• 07.admin-menu.css
• 08.libraries.css
• 09.updates.css
• 10.style-editor.css

4. Font Awesome icons ( Design> Custom template> Files)

5. JS file ( Design> Custom Template> Files )

• matrix-xxx.js

If you need install the same template on one of your website, just use a simple Text Editor to save HTML, CSS and Files. The JS file can be downloaded using the right mouse click and saving the file on your computer.

The CSS components, Font Awesome icons and JS file are available in section 'Updates' of Matrix themes menu

The custom widgets of Matrix Themes are available in section 'Shortcodes'. You can select any widget using the copy button and paste the code inside 'Widget/HTML'

Widget Index (available in admin menu)

• Shortcodes ( The main custom widgets )
• Block Elements ( Block elements with fullwidth preset sections )
• Add-ons (Additional widgets and js plugins)

Other resources

• Matrix variables
• No coding features
• Styling list
• Hero image

The custom widgets including a photo can be changed for your own one.

1. Go to Custom Layout and select the tab Files 
2. Upload your own image
3. Once you upload your file ( the name of the file will be displayed in the list files), select it  with right mouse over "copy link address" and paste it inside the Widget/HTML

<div class="is-matrix cc-clearover">
    <div class="hs-thumbnail">
        <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg?t=1405356750" alt="" /
    </div>  
</div>

More details about the file upload can be found in this page:

https://www.matrix-themes.com/support/help/hosting-the-files/

The Matrix Themes and some of the custom widgets are using the Font Awesome framework .

Please check the below link with all available icons:

https://fontawesome.com/icons 

Check the following example of a widget using an icon from Font Awesome framework:

 <div class="fa fa-gem fa-4x">
 </div>

Icon size

To make the icons bigger, you can use the classes

fa-lx, fa-2x, fa-3x, fa-4x, fa-5x

The other method is using the inline style:

 <div class="fa fa-gem" style="font-size:30px;>
 </div>

Color setup

The same way with inline style you can change the color of the icon

 <div class="fa fa-gem" style="color:#ad1313;">
 </div>

- If you sent an email asking for support from purchase page, directly or using the previous support request and haven't received any answer,  your email might go to my spam folder instead of Inbox.

- If you sent an email from support page but still waiting for the answer, probably the email your added in form wasn't correct. Please try again. Thank you.

For a quick initial color setup, please visit the section 'Quick Setup' of Matrix Themes menu

How to setup the brand color in Matrix Theme using the CSS (No Style Editor)

:root {
    --bg-primary: #61a598;
    --bg-secondary: #D09E6E; 
    --bg-primary-dark:#1E2022;
    --bg-secondary-dark:#121314;
    --brand-gradient: linear-gradient(to right,var(--bg-primary), var(--bg-secondary));
}

.brand-gradient {
    background-image: var(--brand-gradient);
}

Each Matrix Theme includes one Google font. To change the default theme font, please check the section Quick Setup in Matrix Themes menu.

You can also find more details about the typography options here:

https://www.matrix-themes.com/2015/04/17/matrix-themes-typography-options/

The logo image in the latest Matrix Themes can be changed with drag&drop tools, exactly the same way like in any default Jimdo template.

If you can't see the option to change the logo or you deleted the logo area by mistake, here's a detailed tutorial about how to restore it step by step:

<var>draggable-logo</var>
           

The hero section in Matrix Themes is edited in Design> Background . You can choose a simple image, slideshow, video or background color for each page of your website.

Useful links and tutorials:

https://support.jimdo.com/design/backgrounds/ (English)

https://de.jimdo.com/magazin/das-richtige-hintergrundbild/ ( Deutsch)

https://de.jimdo.com/magazin/hintergrundbilder-fur-eure-unterseiten/ ( Deutsch)

The hero section cand be edited using the body classes

( Settings> Edit Head and select the page ):

To display the hero title (and the whole hero section) you need to add the module 'columns' inside the content section and inside of it add a module Widget/HTML with the following tag: <var>draggable-hero color-white g-font </var>

Refresh the page and start editing your columns directly inside the hero.

<div class="hs-magic hs-social is--flex new-social small-social hs-left size-11 is-circle-solid-white is-rounded link-dark">
...

    

Please note that even if your social icons will be displayed in header, you can edit them in the same position in footer. You can find the Editor module on mouseover, so it is suggested to place it in the last position inside of footer.

• The classhs-magiccan be applied also for the buttons in case you wanted to display a button instead of social links.

This option is available only for Oland theme where you have a center aligned logo with the main navigation divided into 2 parts. The first three items of menu are placed on the left and the items from +4 - are right aligned. To change this value, you need to modify the following part in CSS:

The Oland theme has also an option to use a left logo with right aligned navigation.

Go to custom layout> HTML and add the class has-left-logo in global configuration line:

The megamenu doesn't require any HTML and you can edit your navigation like any other Jimdo template.

How it works

When you add one sub-level to your main menu, it will be displayed like standard dropdown boxes.

Adding another level to it (3rd level), it will be displayed like megamenu with 4 equal columns.

From April 2022 Matrix themes come with a new feature 'Landing pages',- a possibility to make any template to onepager.

Please check the official documentation.

***

For the previous onepager Matrix theme 'Varmdo', please check this section with the detailed documentation.

The helper classes are CSS Classes that used in Matrix themes to alter the global styles of custom widgets and elements

Default style of the widget 'Button'

<a class="hs-button" href="https://www.matrix-themes.com/" target="_blank">Button</a>

Default style of the widget 'Button' with additional helper classes:

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

In our second example we used the following helper classes:

bg-pumpkin -  for background color

mid-round -  for border-radius

size-18 -  for font size

• The helper classes can be applied for any widgets in order to display different styles with padding, margin, colors etc
• For more details and full list of helper classes used in Matrix Themes, please check this post.

When the default CSS styles and helper classes are not enough for your website, you can use the inline styles directly in Widget/HTML:

<div class="is-matrix bg-grey add-20" style="background:#bdcf0f1;padding:3px;border-radius:6px;">
  <center>
     <div class="fa fa-paper-plane fa-3x">
     </div>
     <h3 class="add-top-10 add-btm-10">
    Service 01
     </h3>
        <p>
      Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
        </p>
  </center>
</div>

The template configuration is very similar to custom body classes you're using in Matrix themes. For example, you can add the body classno-hero to Edit Head section in order to hide the hero image in specific page, while the template configuration applies to the whole site and all pages.

With template configuration you can define whether your header has white or dark background, decide left, center or right aligned navigation and much more without changing the CSS.

The configuration template line can be found in Design > custom template > HTML

Configuration options

• brand-bg - the template is using brand background color you set up in CSS
• brand-link - the brand color link you set up in CSS
• has-play-of-columns - customized style for module ' text with photo'
• has-custom-header - the alternative background color for the header
• has-left-nav - left aligned navigation
• has-center-nav - center aligned navigation
• has-right-nav - right aligned navigation
• has-preload - supports page preload plugin
• has-slope - slope element for the hero image
• has-custom-text - custom font for the global text
• has-custom-nav - the last dropdown menu box has custom style

No Coding features are custom widgets that don't require any code, you use the ALT text field to make your images fullwidth, parallax, different border radius value etc.

All available options

Matrix Variables are custom tags used inside the columns to alter the whole parent module Columns. You can add any background color or change the styles of any element that will be displayed inside the columns.

Matrix Variable are also replace the previous added options draggable-header and draggable-hero

Examples:

<var> hs-fullwidth bg-primary color-white </var>

<var> hs-fullwidth bg-primary color-white white-outline-btn o-form </var>

So, how it works? In Matrix Themes all Columns modules are wrapped by the classes matrix-section and using the var tag you add any style to it. 

Obviously, you need to know all helper classes or at least the most used ones;)

As it's wrote before, there are some variables that replace the draggable options:

<var> draggable-logo </var> and <var> draggable-hero</var>

All available options

There are 3 common issues with the mobile version

<meta name="viewport" content="width=device-width, initial-scale=1" />

Note: the latest Matrix themes  the viewport tag have directly in HTML

The common problems with js files  or script added in Edit Head section.

• Adding any external script to Edit Head, you don't need to include a jQuery library which is already added in js file 'matrix.js' 
• If you add a js file to the folder Files ( custom template> Files), make sure you're adding a minified version.