Fluid Sections

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.

Unlike most Matrix widgets, which are used in the "Widget/HTML" module, Fluid Sections require the "TEXT" module to enable drag-and-drop functionality. One of the most common mistakes Jimdo users make is using the wrong module - while Fluid Sections can technically work in "Widget/HTML," the drag-and-drop options will not be available.

Open the slide menu and select “Fluid Sections.” Then, choose a widget using the Copy button. On your website, add a "Text module" and paste the copied widget code.

It is also possible to add a Fluid Section manually, just like in previous Matrix themes  - by clicking the Edit HTML button and pasting the code into the source code section.

Each Fluid Section has a + icon at the bottom-right corner. By clicking it, a popup will appear allowing you to add new elements or remove all existing ones.

You can also add an empty Fluid Section, where you can freely insert elements according to your preferences.

Each Fluid Section has a round button at the top right. When you select it with your mouse, it will be highlighted with a red background. Click the color picker at the bottom, then select your desired background color. Finally, click the Save button to apply and save the changes.

At the middle bottom of the Fluid Section, you will find the resizing handle. Drag it up or down to adjust the height of the section to your desired size.

Each element within a Fluid Section has additional tools located at the top right:

• Image Icon – Click to open a popup where you can set a new image URL and ALT text.
• + / - Icons – Adjust the border radius.
• Copy Icon – Clone the element.
• Remove Icon – Deletes the element.

Each fluid section code includes the following classes at the beginning:

• has-link-outlined - All links will have an animated underlined style.
• has-link-btn - All links will have a button style.