• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  1. Support

Docs


  • 01. Basics

    • Custom vs standard template

      01

    • Theme components

      02

    • Using the custom widgets

      03

    • File upload

      04

    • Font Awesome framework

      05

    • Getting support

      06

  • 02. Initial setup

    • Advanced Style editor

      05

    • Brand colors

      06

    • Typography

      07

    • Logo Image

      08

  • 03. Theme options

    • Hero section

      09

    • Hero title

      10

    • Header social links

      12

    • Split menu

      13

    • Megamenu

      14

    • One pager

      15

  • 04. Customizations

    • Helper classes

      16

    • Inline styles

      17

    • Theme configuration

      18

    • Play of columns

      19

    • No coding features

      20

    • Matrix Variables

      21

  • 05. Troubleshooting

    • Problem with mobile version

      22

    • External JS files

      23

    • Your questions

      24

01. Basics

Template components

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.

How to use custom widgets

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'

add-5 has-shadow

File upload

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.
add-5 has-shadow

<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

Font Awesome framework

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>

 

Getting Support

Theme support is available only through the contact form from support page: https://www.matrix-themes.com/support/ or section 'Support' 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.

02. Initial Setup

Advanced Style Editor

 

Starting in November 2021, all Matrix themes include an Advanced Style Editor. This feature will enable users to customize the brand and background colors of the main template elements without the need for any coding.


Style Editor Components

 



Brand colors

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.

 

Preset Styles
add-5 has-shadow
Theme color palette

01

bg-primary

02

bg-primary-light

03

bg-primary-dark

04

bg-secondary

05

bg-secondary-dark

Editing with Style Editor

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

Setup the global color of the links, text, headings and horizontal line in content section in Menu> Design> Font Settings

Typography

add-5 has-shadow

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/

Logo image

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:

Add a module 'Columns' to your footer section with only one column

Inside the column, add a module 'Widget/HTML' with the following code:


<var>draggable-logo</var>
           

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

03. Theme options

Hero section

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.

add-5 has-shadow

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)

Hide/display and changing the size

The hero section cand be edited using the body classes

( Settings> Edit Head and select the page ):

add-5 has-shadow
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

Hero title and content

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>

Resizing the columns: Once a column has been added to the hero section, it may not be possible to resize it or add or remove columns. To work around this, there are two options: 1)Remove the variable tag and refresh the page. You will then be able to edit the columns in the content section. 2)Use the variable tag inside only one column. Within the hero section, add a new module called 'columns' without any limitations. In Matrix themes, it is possible to use columns inside columns.

Header Social Links

add-5 has-shadow

In Matrix Theme menu go to Shortcodes and in Custom Widgets and select Social Icons

Paste the social icons code to your Footer section and edit it for your preference

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 though your social media icons may be displayed in the header, you can edit them in the same position in the footer. You can access the Editor module by hovering your mouse over the icons. To ensure optimal usability, it is recommended to place the Editor module in the last position within the footer. Additionally, the class 'hs-magic' can be applied to buttons as well, in case you wish to display a button instead of social media links"

Split menu

add-5 has-shadow

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

 

Megamenu

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.

One pager

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.


<style>
/*<![CDATA[*/   
.section {
   margin-top: -100px;
   padding-top: 100px;             
} 
 
.section:first-child .section {
   padding-top: 100px;
}
    
@media only screen and (max-width: 1023px){
.section{
   margin-top: 5px;
   padding-top: 5px;              
} 
    
.section:first-child .section {
   padding-top: 5px;
  }
}
/*]]>*/
</style>
<!-- start scroll nav menu --> <div class="hs-menu onepager draggable-header"> <nav> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#service">Service</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </nav> </div> <!-- end scroll nav menu -->

<div class="section" id="home">
    <span>Home</span>
</div>

04. Customization

Helper classes

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.

Inline styles

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>


Theme configurations

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.

 

From November 2021 all Matrix themes come with Advanced Style switcher so the below settings can be found directly in the style editor

add-5 has-shadow

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

 

Play of columns

This feature has been currently replaced by Matrix variables and not available in the recent templates.

Image alt classes

add-5 has-shadow

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

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:

Display any content inside of your module 'Columns' ( text, images, contact form or any other element )

Inside of the one column, add the module 'Widget/HTML' with the following tag:


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

Click the apply Style button of the style editor 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>

 

 

All available options

05. Troubleshooting

Problem with mobile version

There are 3 common issues with the mobile version

The default Jimdo mobile version is activated. Go to Design> Mobile View and deactivate the default mobile version.

add-5 has-shadow

You removed the viewport tag from Edit Head section. Just replace the below line to Settings> Edit Head

add-5 has-shadow

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

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

 

You made an error in CSS. Check the latest changes in CSS made by you.

External Js files

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.

 

Do you have any further questions?

Just ask here!


Comments: 9
  • #9

    stoobz (Thursday, 28 July 2022 22:43)

    Hey hello, I wanted to place a message on top, that I am away on vacation. I put it with the social Media icons into the footer, so that it shows up on top.
    And it works, but only for the desktop-version.
    On my mobile it appears in the footer.

    </style><div class="hs-social left-align new-social small-social size-11 is-circle-border link-bright is-rounded hs-magic">
    <font size="4" color="white"><marquee width="600" height="25">Hallo ihr Lieben - wir machen kurz Sommerferien und sind ab dem 18.8.2022 wieder für euch da ;)</marquee></font> <a href=
    "https://www.pinterest.de/stubenrauchhamburg/" target="_blank" class="fa fa-pinterest fa-2x add-right-5"></a>
    </div>

    <div class="only-mobile">
    <font size="3" color="white"><marquee width="300" height="25">Hallo ihr Lieben - wir machen kurz Sommerferien und sind ab dem 18.8.2022 wieder für euch da ;)</marquee></font>
    </div>

    Can you please tell me what I am missing? THanks alot in advance!!
    Cheers,
    stoobz.

  • #8

    Matrix themes (Friday, 01 July 2022 18:18)

    @Stefan B
    https://www.matrix-themes.com/support/documentation/#link8
    or in Matrix Theme menu >Quick setup

  • #7

    Stefan B. (Friday, 01 July 2022 13:53)

    Hello,

    how can I move my logo so that it appears in the upper left corner of my website and will then appear within the navigation bar?

  • #6

    Matrix themes (Wednesday, 06 October 2021 10:01)

    @Erika no, it's not possible

  • #5

    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

  • #4

    Matrix themes (Monday, 04 October 2021 09:55)

    @Erika https://help.jimdo.com/hc/en-us/articles/115005538586

  • #3

    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?

  • #2

    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

  • #1

    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.

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Helper classes
  • Common support issues
  • Contact

Features

  • Templates
  • Page Builder
  • Add-ons
  • Landing pages
  • Alt Classes
  • Matrix variables

Get inspired

  • Most popular templates
  • Website examples
  • Custom widgets
  • Block Elements
  • Fluid Sections

Quick links

  • Marketplace
  • Pricing
hide-in-doc-page

draggable-logo

Showcase

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
   text color
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
 
has-center-nav g-font has-large-header
 
Navigation styles
 
size-15 weight-400 snip-nav --line01 is-uppercase
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white

 

Typography

Heading H1
weight-600 is-uppercase
 
Heading H2
weight-400 is-uppercase
 
Heading H3
weight-600 is-uppercase
 
Buttons
weight-600 is-uppercase
 
Animations
 

Note:
All changes made here will be applied to your entire website.
is-switcher

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close