The custom layout can be activated in Design> Custom Template and then clicking the save button in HTML or CSS tab. You can switch from custom layout to default Jimdo template and vice versa at any time without loosing any of your content.

Please note that in custom layout you won't find the Style tab and the option to use the style tool. This is the main difference between custom and standard template.

There are 3 components of custom layout:

1. HTML ( Design> Custom Template> HTML )

2. CSS ( Design> Custom Template> CSS )

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

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 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'

If you're using the Enterprise package, you will find the additional widgets in sections Enterprise widgets > jQuery plugins and Ultimate Widgets

Starting from the version 1.8.7 you can also find a new section 'Block Elements' with more than 50 predefined full width sections.

Widget Index (available in admin menu)

• Shortcodes ( The main custom widgets )
• Block Elements ( Block elements with fullwidth preset sections )
• Enterprise package ( Additional custom widgets & plugins )
• Matrix Add-ons (Customizable widgets )

Other resources

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

The custom widgets such as Parallax, overlay teaser etc are using the default images that can be changed for your own ones.

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 (v.4.7).

Please check the below link with all available icons:

https://fontawesome.com/v4.7.0/icons/ 

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

 <div class="fa fa-diamond 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-diamond" 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-diamond" 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.

Based on js plugin tubular.js, you can display a youtube video inside hero section by adding the below code in Widget/HTML

Please note that video starts after a couple of seconds, so it's important to setup a default Jimdo image in Design>Background. This image will see your website visitors on tablet &mobile devices as video is activated only on desktop devices.

<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.

Please check this section dedicated to One Pager layout

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

A possibility to add a custom style for some default Jimdo modules.

Available in Enterprise package and you can check the live preview here.

• This feature has been recently replaced by Matrix variables

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.