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

To install the same template on one of your websites, simply use a text editor to save the HTML, CSS, and files. The JS file can be downloaded by right-clicking on it and saving it to your computer.

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

More details about the file upload option can be found here

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.

There are six default brand colors that can be customized in the Style Editor. To reset the colors to the default theme colors and styles, please use the preset styles feature.

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

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

    

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

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

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.

All available options

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>

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.