Skip to content
  • Home
  • Features
    • Matrix Framework
    • Matrix One
    • Plugin Toolkit
    • Matrix Library
  • Templates
  • Support
  • Pricing
  • Home
  • Features
    • Matrix Framework
    • Matrix One
    • Plugin Toolkit
    • Matrix Library
  • Templates
  • Support
  • Pricing
  1. Support
Matrix Academy

Learn Matrix Framework step by step

Free tutorials, guides, and release highlights — everything you need to build faster Jimdo websites. From first setup to Site Health, Page Builder, Style Editor, and agency workflows.

Start Learning Recent Changes
Beginner friendly • Updated regularly • Free to access

Getting Started

Install & configure in 15 min

Beginner

Page Builder Mastery

Sections, widgets & styling

Intermediate

Agency Workflows

Multi-client systems at scale

Advanced

Recent Changes

v1.5.x release notes & fixes

Updated
30+ tutorials
Quick wins inside
30+ Tutorials & walkthroughs
12 Deep-dive implementation guides
1.7.6 Current release highlighted
Weekly Content updates & new guides
Learning Paths

Choose Your Path

Whether you're setting up your first project or scaling an agency, we have the right path for you.

Getting Started

Install Matrix Framework, configure core options, and ship your first enhanced Jimdo page in under 30 minutes. Zero coding required.

Start the path

Page Builder Mastery

Master the visual drag-and-drop builder — sections, widgets, responsive controls, animations, and advanced styling techniques.

Explore builder path

Agency Workflow

Build reusable design systems, manage multiple client projects, lock templates, and deliver professional results at scale.

Open agency path

Upgrade Path

Moving from Matrix One? Follow our structured migration guide to get the modern ES6+ architecture with minimal risk.

Start migrating

Matrix Variables

Apply ready-made layout, spacing, image, and visibility classes from the variable popup without touching CSS.

Learn variables

Plugin Toolkit

Unlock the full block and add-on library with the Pro toolkit. Self-host files and get professional support.

Explore toolkit
Tutorials

Popular Tutorials

Hands-on, step-by-step lessons to get you productive immediately. Start with any one that matches your goal today.

 
Beginner   15 min

Install Matrix Framework from Scratch

Upload files, paste Layout HTML/CSS, disable Jimdo mobile, add MatrixConfig, and install the Style Editor step by step.

  Getting started   Framework Core
Open Installation guide →
 
Beginner New   10 min

Configure MatrixConfig

Turn features on or off from one script in Edit Head — Style Editor, Page Builder, Mega Menu, Safe Mode, performance, and debug.

  Essential   Framework Core
Open Matrix Config guide →
 
Beginner New   10 min

Admin Tools Improved by Matrix

File copy & multi-upload, nav drag & drop, Matrix Hub, custom hero, Custom Module, Site Health, one-page and mega menu.

  Overview   Admin Tools
Open Admin Tools guide →
 
Beginner New   12 min

Configure Global Settings

Set site-wide content width, hero height, Google fonts, and image radius — plus where buttons and nav spacing moved.

  Visual setup   Site-wide
Open Global Settings guide →
 
Beginner New   8 min

Scan Your Site with Site Health

Check SEO, mobile-template issues, and framework hygiene with a score, grouped issues, and one-click fixes.

  Quick win   Diagnostics
Open Site Health →
 
Beginner   5 min

Build a One-Page Navigation

Turn first-level menu items into smooth-scroll anchors and create a complete single-page experience without coding.

  Hands-on   Navigation
Open One-Page guide →
 
Intermediate   12 min

Build Pages with Page Builder

Create sections, resizable columns, widgets, animations, and responsive layouts with the modern visual builder.

  Hands-on   Builder
Open Page Builder guide →
 
Intermediate   12 min

Build Freeform Layouts with Fluid Sections

Drag, resize, and nest widgets with absolute positioning — legacy but still maintained for overlapping creative sections.

  Hands-on   Drag & drop
Open Fluid Sections guide →
 
Beginner   10 min

Customize Your Site with Style Editor

Adjust colors, typography, buttons, navigation, footer, and advanced settings visually across the whole site.

  Visual setup   Styling
Open Style Editor guide →
 
No-code   15 min

Master Matrix Variables

Apply layout, spacing, image styling, background, borders, and visibility classes directly from the variable popup.

  Quick win   Low effort
Explore variables →
 
Beginner   8 min

Repair Broken HTML & Scripts

Repair or remove broken HTML widgets without their scripts crashing the editor.

  Quick win   Bug Fix
Open Safe Mode guide →
 
Beginner   4 min

Enable Mega Menu Navigation

Convert your Jimdo menu into a mega menu with hover dropdowns and mobile toggles — one config flag, no HTML edits.

  Quick win   Navigation
Open Mega Menu guide →
 
Beginner   5 min

Switch Designs with Template Selection

Your starting look isn’t final — open the Style Editor popup anytime and apply a new template in one click. Lock colors or CSS if you want to keep them.

  Visual setup   Switch anytime
Open Template Selection guide →
 
Beginner   6 min

Style Modules with Custom Module

Restyle a single heading, image, button, divider, spacing, or form module from a visual popup — no CSS required.

  Visual setup   Per-module
Open Custom Module guide →
 
Beginner New   8 min

Build Multilingual Navigation

Split the menu by language — first-level items become the language switcher, second-level pages become the main nav.

  Quick win   Navigation
Open Multilingual guide →
 
Beginner New   6 min

Navigate Modules by ID

See every module on the current page, jump to it instantly, and copy its original cc-m-xxxxx ID for links and anchors.

  Quick win   Admin tool
Open Module Navigator guide →
 
Beginner New   18 min

Add Motion One Animations

Global reveals, scroll parallax, sticky cards, animated links and buttons, split text, and slot counters — all built in.

  Visual effects   Motion One
Open Animations guide →
 
Beginner New   12 min

Style Widgets with Helper Classes

Copy utility classes for backgrounds, spacing, typography, borders, and visibility — or open the Helper Classes popup in any HTML module.

  Quick win   No-code
Open Helper Classes guide →
Recent Changes

What's New

Release highlights, bug fixes, and what to update in your workflow. Stay current with the latest improvements.

v1.7.6

Latest
Built on 27/07/2026, 12:08:53

This release adds a Jimdo Module widget that embeds a native Jimdo page module (contact form, product catalog, gallery, map, etc.) into any Page Builder column. Admin shows a lightweight preview; the published page relocates the real module into the column so it keeps working exactly as Jimdo intends. Adds Safe Mode shortcut and Known Issues docs for Chrome fold freeze.


  Added

  • Refresh Hisingen template: purple palette, sticky shrink header with blur, slope footer, Google Sans + Style Editor advanced settings (buttons, nav padding), and new preview image.
  • Introduces the Senja default template (pink theme, diagonal header cut, angular footer wave, Bricolage Grotesque), adds is-swish-top asymmetric footer curve, and expands STYLE-EDITOR-ADVANCED-SETTINGS footer section.
  • Jimdo Navigation drag-and-drop: 3-dot handles in Jimdo’s Edit Navigation panel for fast reordering — brand-blue drop indicator, dragged-row highlight, footer-safe layering. Persists via Jimdo’s native up/down arrows + Save.
  • Files Directory & multi-upload: Custom Layout Files tab — Copy URL, multi-file upload queue, progress overlay, in-place list refresh.
  • Page Builder: New pre-designed sections in the Design Library
  • Site Health: Admin toolbar module scans the current page for SEO, mobile, and framework issues — score, passed checks, grouped issues, and Go to highlighting. Includes framework version check (outdated / mixed-version warnings) with links to updates and the public changelog.
  • New templates — Halmstad & Kalmar: Two additional default templates in Template Selection — Halmstad (purple sidebar consulting layout) and Kalmar (warm orange business layout with overlapping header
  • Animated split text: Attribute-based scroll animations (text-split, words-slide-up, letters-fade-in, etc.) using Motion One + SplitType
  • Animated slot counter: Odometer-style number and text animation with alternate direction/speed, viewport trigger, and iOS Safari reliability fix.
  • Style Editor SEO: aria-hidden="true" on the color-switcher table block so Google crawlers skip the admin configuration markup in page source; persisted on template apply.

  Fixed

  • webpack: load webpack chunks using Jimdo CDN filenames Patch the webpack chunk loader so dynamic imports try Jimdo CDN names first, restore page-builder icon sources that macOS gitignore blocked, and document Jimdo deploy troubleshooting including Firefox-only Font Awesome bbox warnings.
  • config8: double-ID button selectors + :enabled for Jimdo submit specificity
  • Letter-spacing: spacingMap matches 05.helper-classes (0.5/1/1.5px); config-classes tag labels updated
  • Mobile nav: apply is-letterspace-* under .nav-mobile-options
  • Page builder: reset structure popup h3 text-transform/letter-spacing; apply font family/weight on p/li to beat #hs-container p rules
  • webpack (registering `EffectFade`, `EffectFlip`, `EffectCube`, `EffectCoverflow`, `EffectCreative`, `EffectCards` so `data-slider-config` effects work), creative and cards effects, forwarding of `creativeEffect` / `cardsEffect` (and related effect params), self-hosted `

   

Ready to Start Building?

Pick up a tutorial, follow a guide, or jump straight into the docs. Everything you need is one click away.

Browse All Tutorials
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 color-nav
 
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.
Matrix Framework
draggable-logo

Matrix Framework

Build faster, smarter, and more flexible Jimdo websites.

has-right-col-border

Products

Matrix Framework

Matrix One

Matrix Plugin Toolkit

Resources

Support

Matrix Academy

FAQs

Changelog

Community

Showcase

Marketplace

Blog

Archive


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