Matrix Variables

Overview

Matrix Variables is an admin tool that lets you add pre-built styling tags directly inside any HTML/Widget module placed in a Matrix grid column — no CSS knowledge required. Instead of writing style rules, you click a button, pick a tag from a category, and it's inserted at your cursor position automatically.

• 100+ ready-made tags across 10 categories — colors, spacing, hero effects, animations, forms, images, and more
• Works directly inside Jimdo's HTML/Widget module editor — no external tools
• Safe for non-coders: you only insert tags, never raw CSS
• Live preview — see the effect immediately after saving the module

How it works

Matrix scans your page for HTML modules inside grid columns and adds the Variables button automatically — nothing to configure per module.

1 Quick setup

Matrix Variables is enabled by default. If you've turned it off, or want to confirm it's active, check your configuration.

window.MatrixConfig = {
  features: {
    variableModule: true // Enable Matrix Variables
  }
};

2 Opening the popup

Follow these steps in the Jimdo admin to insert your first Matrix Variable.

What you'll find in the popup

• A Grid / Column toggle at the top (see Grid vs. column tags)
• Category sections, each with clickable tag buttons
• A live badge showing how many tags are currently used in this module
• A Reset All button to clear every tag from the current module

3 Grid vs. column tags

Every tag is inserted as either a <var> or an <ins> element. The toggle at the top of the popup switches which one new clicks insert into.

Selection logic

Matrix Variables applies smart rules per category so you can't accidentally create conflicting styles.

4 Variable reference

All 10 categories, grouped the same way they appear in the popup. Click a category below to jump straight to it, or expand each one for the full tag list.

Common combinations

Tags combine inside the same <var> or <ins> tag, separated by spaces. A few combinations that come up often:

Hero section with a shape divider

<var>draggable-hero color-white has-primary-overlay</var>

Fullscreen hero with scroll arrow

<var> draggable-hero has-fullscreen-hero has-primary-overlay color-white  has-btm-arrow</var>

Animated card

<var>bg-white br15 add-15 motion-fadeInUp</var>

Styled image

<var>img:br15 img:border-2 img:bg-primary img:effect-shadow</var>

Styled contact form

<var>form-white </var>

5 Advanced tab

Next to the tag categories, the popup has an Advanced tab for fine control over the current module's box model — without leaving the popup or writing CSS.

Click Save in the Advanced tab to persist your changes to the module. The button shows inline feedback (Saved / Save failed / Nothing to save) so you always know the result.

Configuration

Matrix Variables is on by default. If you're certain you won't use it, you can turn it off entirely.

window.MatrixConfig = {
  features: {
    variableModule: false // Disable the Matrix Variables popup
  }
};