01. Basics
02. Initial setup
05
06
07
08
03. Theme options
09
10
12
13
14
15
04. Customizations
05. Advanced settings
06. Troubleshooting
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)
Other resources
The custom widgets such as Parallax, overlay teaser etc are using the default images that can be changed for your own ones.
<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>
Theme support is available only through the contact form from support page: https://www.matrix-themes.com/support/ or section 'Help' of Matrix admin menu.
- 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.
From November 2021 all Matrix themes come with Advanced Style switcher which allows you to setup the brand colors and background colors of the main template elements without any coding
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)
01 Choose your brand colors at the beginning of CSS
: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);
}
02 Setup the main brand color
03 Setup the secondary dark colors or leave the default ones
04 Setup the global color of the links, text, headings and horizontal line in content section in Menu> Design> Font Settings
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:
01 Add a module 'Columns' to your footer section with only one column
02 Inside the column, add a module 'Widget/HTML' with the following code:
<var>draggable-logo</var>
03 Reload the page to see the column in header section where you can add your logo using the module 'Photo'. Please don't forget to add a link to it of your homepage;)
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 ):
no-hero | hide the hero image |
main-page | make your hero image the same size like in homepage |
no-hero-overlay | remove the hero overlay |
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.
<var> draggable-hero color-white g-font </var>
01 In Matrix Theme menu go to Shortcodes and in Custom Widgets select Social Icons
02 Paste the social icons code to your Footer section and edit it for your preference
03 When you click the save button, the social icons will be displayed in Footer. To move them to the header, just add a class hs-magic and refresh the page.
<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.
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:
/*** you hide the +4 items in the first left aligned menu ***/
.left-align nav ul li:nth-child(n+4) {
display:none;
}
/*** you hide the first 3 items of your menu in the right aligned menu ***/
.right-align nav ul li:nth-child(-n+3) {
display:none;
}
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:
...
<div id="hs-container">
<div class="global-colors brand-bg brand-link has-left-logo large-inner fullwidth-version has-custom-text">
....
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
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.
From November 2021 all Matrix themes come with Advanced Style switcher so the below settings can be found directly in the style editor.
The configuration template line can be found in Design > custom template > HTML
Configuration options
A possibility to add a custom style for some default Jimdo modules.
Available in Enterprise package and you can check the live preview here.
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.
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:
01 Display any content inside of your module 'Columns' ( text, images, contact form or any other element )
02 Inside of the one column, add the module 'Widget/HTML' with the following tag:
<var> hs-fullwidth bg-primary color-white </var>
03 Refresh the page to see your columns wrapped in fullwidth brand background color and white text. You can further customize it for example your buttons or contact form
<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>
The advanced settings include further customizations of the template made directly in HTML. Please note that a minimal wrong code or class can crash the entire website.
There are 3 common issues with the mobile version
01 The default Jimdo mobile version is activated.
Go to Design> Mobile View and deactivate the default mobile version.
02 You removed the viewport tag from Edit Head section.
Just replace the below line to Settings> Edit Head
<meta name="viewport" content="width=device-width, initial-scale=1" />
Note: the latest Matrix themes the viewport tag have directly in HTML
03 You made an error in CSS.
Check the latest changes in CSS made by you.
The common problems with js files or script added in Edit Head section.
Matrix themes (Wednesday, 06 October 2021 10:01)
@Erika no, it's not possible
Erika B. (Wednesday, 06 October 2021 01:38)
Hallo,
thank you for the previous support.
Can you tell me please if it 's possible to get the WHOLE contact page in one color ( not only the header ) , except the contact "window" ( which can stay white ). Have it seen so many times on th internet. And I wonder if it's possible in here.
My theme is New York by the way.
Thank you for you help.
Best Greetings
Matrix themes (Monday, 04 October 2021 09:55)
@Erika https://help.jimdo.com/hc/en-us/articles/115005538586
Erika B. (Monday, 04 October 2021 04:05)
Hallo,
the hero pictures of my website are not responsive on the mobile version/ I see only one part of them. What could be wrong?
Matrix themes (Wednesday, 27 January 2021 22:51)
@Carsten the class lazy should be used for a single module or widget and never for the whole website
Carsten Mueller (Wednesday, 27 January 2021 14:05)
There is LazyLoad installed on our website. Is it working for the whole website, or do we need to add an attribute to every picture to have it function?
Thank you.