Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  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

    • Style switcher

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

    • Header

      22

    • Content

      23

    • Footer

      24

  • 06. Troubleshooting

    • Problem with mobile version

      25

    • External JS files

      26

    • Your questions

      27

01. Basics

Custom Layout vs Standard template

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.

bg-darkgray  add-5

 

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.

 

bg-darkgray  add-5

Theme components

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.

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

bg-darkgray  add-5

 

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

File upload

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
bg-darkgray   add-5

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

Font Awesome framework

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>

 

Getting Support

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.

02. Initial Setup

Style Switcher

 

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


Editing with Style Editor

 

Style Editor Components

 

Preset Styles


Brand colors

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

bg-darkgray add-5

03  Setup the secondary dark colors or leave the default ones

bg-darkgray add-5

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

bg-darkgray add-5

Typography

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:

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

Notes:

 

  • In One pager Varmdo you have to use 2 columns. Here you display the logo image inside the left column and the scroll navigation in the right one.

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.

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

bg-darkgray add-5
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

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>

Header Social Links

bg-darkgray add-5

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.

  • The classhs-magiccan be applied also for the buttons in case you wanted to display a button instead of social links.

Split menu

bg-darkgray  add-5

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

One pager

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.

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

 

  • 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

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

bg-darkgray  add-5

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

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>

 

All available options

05. Advanced settings

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.

Header
Content
Footer

06. Troubleshooting

Problem with mobile version

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.

bg-darkgray add-5

02  You removed the viewport tag from Edit Head section.

Just replace the below line to Settings> Edit Head

bg-darkgray add-5

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

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

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
draggable-logo

 

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
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

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

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close