There are 5 components of Matrix theme:

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

To install the same template on one of your websites, simply use a text editor to save the HTML and CSS.

The CSS components, Font Awesome icons, and JS file can be found in the 'Updates' section of the Matrix themes menu for your convenience. This will make it easy for you to access and implement these components as needed for your website.

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'

To change the custom widgets, including a photo, to your own, please follow these steps:

• Go to Custom Layout and select the Files tab
• Upload your own image by using the upload button.
• Once the file has been successfully uploaded, you will see the name of the file displayed in the list of files.
• Right-click on the file and select "Copy link address."
• Paste the link in the appropriate location within 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>

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>

Log in to your Jimdo website and go to the Matrix Themes admin menu.

Navigate to the Support section (accessible through the provided link during initial installation). You can leave general comments at the bottom of the page for general questions. For specific issues, please use the contact form.

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

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>

Click the "Apply the styles" of the Style editor or if you're using an old template 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">
...

    

All Matrix themes provide an option to add a top header section above the main header, which can include contact information and other content. The methods for achieving this vary depending on the version of the theme you are using in your template.

To add a top header section in the latest version of the Matrix theme:

1. In the Footer (or sidebar), add a new module by selecting Widget/HTML.

2. Insert the following code into the widget:

3. After adding the code, click the "Apply Styles" button in the style editor or simply refresh the page.

Upon refreshing, the content of your widget should now appear at the top of the header.

Even though this widget appears in the top header section, it works similarly to the header social links. You can still edit it in the Footer (or sidebar) from the same position where you originally added it.

To edit the widget, simply hover your mouse over the editor module, and you'll be able to make changes.

You can use helper classes like color-white, link-white, right-align, size-13, etc., directly within the widget code or in the style editor to customize the appearance of the content.

Another, more complex method (which might require additional styling) is to use variables. To do this:

1. Add a Widget/HTML module to the Footer (or sidebar).

2. Insert the following variable tag into the widget:

<var>draggable-top-header</var>

3. After inserting the code, click the "Apply Styles" button in the style editor or refresh the page. You will see your module appear at the top of the header.

This method should be used only if you want to display another Jimdo module, such as a search bar or share buttons, inside the top header section.

If you’re not using the latest release of the Matrix theme, the top header section must be edited directly in the HTML. To do this, go to Design > Custom Template > HTML and make the necessary changes there.

Style 2 

Style 3

This option is available only for the old version of the 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 Mega Menu feature does not require any HTML knowledge and can be easily edited within the Jimdo template.

The functionality of the Mega Menu is as follows:

When you add a sub-level to your main menu, it will be displayed in the form of standard dropdown boxes. However, if you add an additional level (i.e. a 3rd level), it will be displayed in the form of a Mega Menu with 4 equal columns, providing a more organized and user-friendly navigation experience.

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

Please check the official documentation.

***

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

Multilingual themes

The Multilingual themes are using the standard Jimdo navigation (no dropdown) placed in 3 different position where the first level is used only for the language select.

Please make sure that using the multilingual template your navigation structure looks like this:

The latest multilingual Matrix themes don’t automatically display the first level, so you’ll need to add it manually using the Widget/HTML module in the footer section.

There are two options for displaying the language selector, depending on where you prefer it to appear:

1. Display the language selector in the top header section:

2. Display the language selector inside the header:

As you can see from the code, there are various helper classes available to customize the style of the language selector widget. You can always edit the widget in the footer where it was placed, and after reloading the page, you’ll see the changes reflected in the desired section.

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 similar to that of custom body classes in Matrix themes. For instance, you can add the class "no-hero" to the "Edit Head" section in order to hide the hero image on a specific page. However, template configuration applies to the entire website and all pages, providing a more comprehensive level of control.

With the template configuration feature, you have the ability to easily define the background color of your header (white or dark), align your navigation (left, center, or right), and make other stylistic choices without the need to modify CSS code. This simplifies the customization process and allows for a more streamlined user experience.

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-left-nav - left aligned navigation
• has-center-nav - center aligned navigation
• has-right-nav - right aligned navigation
• has-custom-text - custom font for the global text
• has-custom-nav - the last dropdown menu box has custom style

Image Alt classes refer to default customized Jimdo widgets that do not require any programming knowledge to use. Instead, you can utilize the "ALT text" field to manipulate various aspects of your images, such as making them fullwidth, adding parallax effects, and adjusting the border radius value. These features provide a user-friendly and intuitive way to enhance the visual design of your website without needing to write any code.

Matrix Variables are custom tags that are utilized within columns to modify the appearance of the parent module, which is the Columns. These variables allow you to easily add any background color or change the styles of any element that is displayed within the columns. This feature provides a powerful way to easily modify the visual design of your website, without the need for extensive CSS knowledge.

Examples:

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

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

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.