Page Builder

Overview

The Matrix Page Builder is a modern, jQuery-free page builder built for Jimdo — the core feature of Matrix Framework v1.5.0+. It gives you a professional, toolbar-based interface for creating structured layouts inside a single text module, without drag-and-drop fragility or any coding.

• Flexible sections with unlimited resizable columns (1–8, custom ratios)
• Eight toolbar-managed widgets: Heading, Text, Image, Button, HTML, Divider, Spacer, and Jimdo Module (embed a native Jimdo module)
• Full backgrounds (color, gradient, image, image+overlay), borders, shadows and spacing
• Scroll-triggered entrance animations and per-device visibility controls
• Optional icons on Heading, Text and Button widgets, plus a Design Library of premade sections
• Clean separation of admin and public code — the public page ships lightweight, restored CSS only

1 Getting started

Enable the feature in your Matrix configuration, then add a standalone Page Builder module from the Jimdo module map.

window.MatrixConfig = {
  features: {
    pageBuilder: true // Enable Page Builder
  }
};

2 Sections & columns

Sections are the top-level containers you stack vertically on the page. Each section holds one or more columns, and each column holds your widgets.

Column layouts

• Up to 8 columns per section, each individually resizable by dragging the divider between them
• Columns stack vertically on mobile automatically — no manual breakpoint setup
• Each column can have its own background, padding, and border, independent of the section
• Equal Columns Height (Section → Layout tab) stretches every column to match the tallest one — great for card grids and pricing tables. It's automatically disabled below 768px so mobile keeps natural heights.

Section controls

3 Widget reference

Click the + button inside any column to open the widget toolbar, then pick a widget type. Every widget opens a popup with live-preview fields.

4 Toolbar-based editing

Click any widget, column, or section to select it — its toolbar appears with the actions available for that element. There's no drag-and-drop; every move is a deliberate click.

Widget toolbar

• Move Up / Down reorders the widget within its own column
• Move to Column transfers a widget to a different column — even in a different section
• Copy duplicates the widget, including its icon settings and Advanced styling
• The star (
  ) button opens icon settings on Heading, Text, and Button widgets only

5 Backgrounds & styling

Sections and columns each have an Advanced Settings panel for background, spacing, border, and shadow — accessed from their toolbar.

Background types

Spacing, border & shadow

6 Animation & visibility

Entrance animations

Add a scroll-triggered entrance animation to any section or widget from its Advanced Settings.

Each animation has its own duration and delay controls, and plays once the element scrolls into view.

Device visibility

Every widget, column, and section has a Visibility control in its Advanced tab with three independent toggles:

In the admin editor, hidden elements get a dashed orange outline so you can still find and edit them — on the public site they're fully removed from that device's layout via CSS media queries.

7 Icons

Heading, Text, and Button widgets can each show a Font Awesome icon before or after their content. Click the star () button in the widget's toolbar to open icon settings. (Divider has no icon option — it's styled by width, color, and line style only.)

Click the ? button next to the icon field to browse Font Awesome's full icon set, then copy the name back into the field. Every icon has four settings:

8 Design Library

The Design Library gives you a head start with premade, ready-to-customize sections — browse by category and insert one with a single click.

• Sections are fetched from a CDN and cached locally, so the library still works offline after the first load
• Background colors are automatically recalculated to match your current theme colors when a section is inserted
• Each inserted section gets a unique ID automatically, so adding the same template twice never causes conflicts