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

Fluid Sections

Framework Core

Fluid sections are custom Matrix Framework widgets with drag-and-drop functionality and resizing features, allowing you to edit without any coding. You can change the background color, update or replace images, delete elements, adjust the border radius, and more - all without touching a single line of code.

Info: Fluid Sections is now a legacy feature in the Matrix Framework, replaced by the Page Builder starting from the version 1.5.0. jQuery and jQuery UI are directly imported in `src/fluidModule.js` and bundled in the `fluid-module.matrix.js` chunk, keeping the main bundle jQuery-free while maintaining backward compatibility for users who need this feature.

Getting Started

Enable Fluid Sections in your MatrixConfig:

Settings> Edit Head

window.MatrixConfig = {
  features: {
    fluidModule: true,  // Enable fluid sections
  }
};

Once enabled in the MatrixConfig options and after uploading the JS file to your website, you will see a new module called “Fluid Section” in the Jimdo toolbar map.

 

     
www.matrix-framework.com

Note: The Fluid Section module can only be used as a standalone module and will not appear if you try to add it inside columns.

Nested Elements

Nested elements allow you to create hierarchical layouts where child elements are constrained within their parent's boundaries.

How it works:

 

1. Open Element Settings: Click the settings button on any element

2. Click Plus Button: Click the plus button in the popup header

3. Select Widget: Choose a widget type

4. Element is Added: The new element is appended as a child of the current element

browser-frame

Mobile Order

All elements use absolute positioning for free placement on the desktop screen, while on mobile they use relative positioning. Using the “Mobile Order” option in the element’s Settings popup allows you to change the order in which widgets appear on mobile devices.

browser-frame

If you have encountered any bugs, errors, or unexpected behavior in the Fluid Sections, please leave a comment below.

Comments: 3
  • #3

    Support team (Saturday, 04 April 2026 12:41)

    Hello Stefan,
    Thank you very much for your detailed bug report — it is really appreciated �

    1) Image resize issue
    The image resizing problem occurred only in Matrix One, and it has now been fixed.

    2) Rounded setting (text fields)
    The border-radius issue for the text widget was present both in the Framework and the Toolkit as well, and this has also been resolved.

    How to update
    To apply the fixes, please:
    - Download the latest fluid-section js file file from Update Sections
    - Upload and replace the file on your website

    Important note:
    On your website I noticed that an old JavaScript file from Matrix Themes is still present inside the Style Editor. This file should be removed, as it may cause conflicts.
    I also recommend running the Template Updates from the Style Editor to make sure all components are fully synchronized.

  • #2

    Stefan (Saturday, 04 April 2026 11:22)

    The "Rounded" setting for text fields does nothing. You can set the slider to any value - it is not applied nor saved

  • #1

    Stefan (Saturday, 04 April 2026 11:17)

    Image can not be resized after changing image url.

    Steps to reproduce (occurred in Firefox)
    - Create a new fluid section (leave all settings on default)
    - add an image
    - change the image url
    - try to resize the image by clicking and holding the image border (resize dots). for me it is not working. only after adding the image (clicking on plus icon) and only if I did not change the image url I can initially resize the image.

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

Products

Matrix Framework

Matrix One

Matrix Plugin Toolkit

Resources

Support

Changelog

Showcase

Marketplace

Community

Blog

Archive

GitHub



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