The Variable Module is a powerful admin tool that provides an intuitive interface for adding Matrix variables to HTML modules in the Jimdo editor. It offers a comprehensive system with 100+ pre-defined variables across 10 categories, smart tag management, and seamless CodeMirror integration for professional web development.
To access the variable module, click the Matrix Variable button within the HTML/Widget module inserted inside the column.
Switch between `<var>` (grid-wide) and `<ins>` (column-specific) tags
In the Matrix Variables popup, you’ll find different classes organized by sections. Please note that in some sections, custom classes can only be used once. This means that when you click a different tag, the previously active one will be automatically deactivated.
Image Styling
In this section, you’ll find new classes (not available in previous Matrix themes) that apply specifically to images. These include options for border radius, border color, aspect ratio, image filters, and more.
Visibility classes
The Visibility Classes module provides responsive element visibility control for Jimdo websites. It allows you to hide elements on specific devices (desktop, tablet, mobile) while still showing visual feedback in admin mode.
Unlike the older Matrix theme classes (e.g.,hide-mobile,hide-desktop), which rely on media queries to hide or display elements at different device sizes, these classes actually remove elements from the DOM. This makes them especially useful for hiding and removing large gallery files or other heavy elements directly from the DOM.
Note
The Matrix Variables popup can be disabled through the configuration settings in the <head>. To do this, set the following option:
```javascript
var MatrixConfig = {
features: {
variableModule: false, // Disable variable module
// ... other features
}
};
```
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 is-uppercase size-13 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white mid-round-btn | |
| Footer styles | |
| o-form color-white white-outline-btn mid-round-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.