Installation

Matrix One

This guide will assist you in installing a new custom layout on your website from scratch and also in re-installing the new version if you're currently using an older template.

 

Important requirements

Following these guidelines will help you smoothly install the Matrix One, and only after that, you can start working on further customization or adding your own code to the template.

Note: Please save the links or custom code you have in the head section. If you have any custom code in the Head (in the admin menu > settings > Edit Head), please remove them and save them in any text editor. You can add them once you have installed the Matrix Framework on your site.

Upload all source files to your website

If you are already using an old Matrix template, simply go to its admin menu, select the 'Updates' section, and download all source files. Then upload all of them to your website in the file directory

(In Admin mode > Menu > Design > Custom Template > Files). So, it should look like the screenshot below:

browser-frame

To quickly summarize, the files you need to upload to your website are:

  • CSS components (7 files)
  • JS files
  • Unzip the folder and upload the 8 files one by one to your website. It is suggested to upload the font files before the other files.

Add HTML and CSS. On the same page under 'Updates', navigate to Source files and select Layout. Then, copy the HTML and CSS code and paste it into your website (Design > Custom Template > HTML/CSS). Finally, click the save button at the bottom of the page to confirm the changes.

browser-frame


Deactivate the default Jimdo mobile version

browser-frame

Setup the global typography styles.

browser-frame

Add Config Options in Head to activate Matrix features

Settings > Edit Head 
<script type="text/javascript">
//<![CDATA[
// Matrix Configuration Settings
var MatrixConfig = {
  features: {
    matrixAdmin: true,
    matrixModule: true,
    variableModule: true,
    onePage: false,
    fluidModule: true,
    moduleNavigator: true,
    megaMenu: false,
    multilingualPage: false,
    helperClassesModule: true,
    styleEditor: true,
    templateSelection: false
  }
};
  
  //]]>    
</script>
browser-frame

Install the Matrix Style Editor

Copy the code below and paste it into the Edit HTML section of the “Tables” module located in the footer. This step is essential to ensure that the Style Editor is available across all pages of your website.

Matrix Themes 


<div class="admin-only mid-round add-10 color-white color-switcher" data-template-name="lemberg" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;" data-template="lemberg">
<div class="cc-map-additional-devider"><span>Gobal colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color1" style="background-color: #1b2cc1;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">bg-primary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color2" style="background-color: #e8ecfc;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">bg-primary-light</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color3" style="background-color: #030717;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">bg-primary-dark</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color4" style="background-color: #dda4ff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">bg-secondary</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color5" style="background-color: #3b28cc;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">bg-secondary-dark</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Template colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color6" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">body</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color7" style="background-color: #1b2cc1;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">top-header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color7b" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">top-header-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color8" style="background-color: #ffffff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">header</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8b" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">header-inner</td>
</tr>
<tr class="" style="height: 32px;">
<td class="color-select color8c" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">navigation-inner</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color18" style="background-color: #030717;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">navigation color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color19" style="background-color: #e8ecfc;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">dropdown background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color9" style="background-color: #ffffff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">content</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Footer Styles</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color10" style="background-color: #030717;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">background</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color11" style="background-color: #ffffff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">text color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color12" style="background-color: #a1a8e7;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">link color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color13" style="background-color: #09143d;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">horizontal line</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span>Buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color14" style="background-color: #1b2cc1;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">style 1</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color15" style="background-color: #1b2cc1;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">style 2</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color16" style="background-color: #1b2cc1;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">style 3</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color22" style="background-color: #ffffff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<div class="cc-map-additional-devider"><span>Mobile navigation</span></div>
<table align="" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);" width="100%" height="0%" cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr style="height: 32px;">
<td class="color-select color20" style="background-color: #e8ecfc;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">background color</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color21" style="background-color: #030717;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">navigation color</td>
</tr>
</tbody>
</table>
<div class="cc-map-additional-devider"><span>Other elements</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px;">
<td class="color-select color17" style="background-color: #ffffff;" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">social icons</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color23" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">top header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color24" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">header border</td>
</tr>
<tr style="height: 32px;">
<td class="color-select color25" style="background-color: rgba(0, 0, 0, 0);" contenteditable="false">&nbsp;</td>
<td class="class-name" contenteditable="false">nav inner border</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-map-additional-devider"><span>Template configurations</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable" style="line-height: 18.2px;">
<tbody>
<tr>
<td class="cc-config config col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">has-right-nav has-sticky-logo has-large-header primary-font</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Top header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Header inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Navigation inner</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config1c col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config2 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-15 weight-400 snip-nav --line01</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Sub-menu (breadcrumbs) styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-15</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Mobile Navigation styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3b col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">size-30</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Content styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config3 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">form-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Footer styles</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">o-form color-white</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider"><span>Footer background image</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-config config4a col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">&nbsp;</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p class="cc-map-additional-devider">Typography</p>
</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span>Heading H1</span></td>
</tr>
<tr>
<td class="cc-config config5 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span>Heading H2</span></td>
</tr>
<tr>
<td class="cc-config config6 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span>Heading H3</span></td>
</tr>
<tr>
<td class="cc-config config7 col-6" style="background-color: #2e2e2e; border: 1px solid #2e2e2e; padding: 3px; box-sizing: border-box; border-radius: 3px; width: 100%; min-height: 32px; color: #888888;" contenteditable="true"><span style="color: #888888;">weight-400</span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span>Buttons</span></td>
</tr>
<tr>
<td class="cc-config config8 col-6" contenteditable="true">weight-400</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="cc-map-additional-devider">Advanced settings</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="add-left-10 is-brandon-font"><span>Custom CSS</span></td>
</tr>
<tr>
<td class="cc-config cc-css config10 col-6" contenteditable="true">
<p>#cc-inner .my-class {</p>
<p>color:#f0f0f0;</p>
<p>}</p>

</td>
</tr>
</tbody>
</table>
<div class="c"><strong><br /> Note:</strong> All changes made here will be applied to your entire website.</div>
</div>

Once you have pasted the code into the Source Code popup, click the Save button. After a few seconds, the module will disappear. At the top of the page, open the Matrix Toolbar and click the Style Editor button to view your table inside the Style Editor popup. Finally, click Save to confirm the installation.

 

browser-frame

Troubleshooting

Please add the comment below to describe the problem.

Comments: 0
Get started
Gobal colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
  footer border
 
Template configurations
 
has-sticky-logo has-large-header primary-font has-center-nav has-header-blur no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
size-15 weight-400
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form has-thin-border has-border-style-solid has-border-top has-footer-border-color
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Body text (p, table, td)
 
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

#cc-inner .my-class {

color:#f0f0f0;

}

/* MATRIX-CUSTOM-MODULES-START */

#cc-m-7792741551 h1, #cc-m-7792741551 h2, #cc-m-7792741551 h3 {font-size:20px !important;}

#cc-m-7792741851 h1, #cc-m-7792741851 h2, #cc-m-7792741851 h3 {font-size:20px !important;}

#cc-m-7792930551 h1, #cc-m-7792930551 h2, #cc-m-7792930551 h3 {font-size:20px !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-weight:600 !important;}

#cc-m-12388126494 h1, #cc-m-12388126494 h2, #cc-m-12388126494 h3 {font-size:40px !important;}

/* MATRIX-CUSTOM-MODULES-END */

/* MATRIX-GLOBAL-SETTINGS-START */

:root {

--content-width: 1170px;

--special-pages-content-width: 900px;

}

/* HAMBURGER-BAR-START */

:root { --hamburger-btn-background: transparent; --hamburger-btn-bg: transparent; --hamburger-btn-bg-active: transparent; }

/* HAMBURGER-BAR-END */

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link,

#cc-inner input.cc-checkout-btn,

#cc-inner a.cc-shop-addtocard {

padding: 14px 35px !important;

border-radius: 8px;

}

/* MOBILE-FULLWIDTH-BUTTONS-START */

@media only screen and (width <= 746px) {

#cc-inner #hs-container .j-formnew input[type='submit'],

#cc-inner #hs-container input.submitUser,

#cc-inner .hs-button,

#cc-inner .j-calltoaction-link {

width: 100% !important;

margin: 5px auto 0 auto;

box-sizing: border-box;

text-align: center !important;

}

}

/* MOBILE-FULLWIDTH-BUTTONS-END */

/* MATRIX-GLOBAL-SETTINGS-END */


Note: All changes made here will be applied to your entire website.
draggable-logo

Build faster, smarter, and more flexible Jimdo websites.

has-right-col-border

Community

Blog

Archive

GitHub



About | Privacy Policy | Cookie Policy | Sitemap | Withdraw contract
Created with Jimdo
Log in Log out | Edit