Matrix Themes are introducing a new editing experience for Jimdo Creator websites called Fluid Sections. With Fluid sections you have an option to edit custom widgets using the drag
& drop tools, resizing and overlap any element inside the default Jimdo text editor.
Important note!
The fluid sections should not be considered a new and ultimate way to edit your website,- it's just one of the different tools available in Matrix themes.
If you're a new to Jimdo or Matrix themes, please check all available options to edit your website in Matrix themes
Matrix Themes tools
01. Default Jimdo tools
You can edit your website using the default Jimdo tools. This option does't require any coding or external widgets.
02. Shortcodes
Custom widgets that can be used inside the module Widget/HTML. In Matrix Themes admin menu select "Shortcodes" and choose any element using the copy
button and paste it inside the Widget/HTML module of your website. You can use standalone module or widget inside the columns.
03. Matrix Add-ons
The additional custom widgets can be found in section "Matrix Add-ons" and "Enterprise package" including js plugins and advanced animation options.
04. Block elements
The block elements are pre-made and full width Widget/HTML sections including more that one custom element. It can be a cover image, pricing tables, impact phrase etc. The block
elements cannot be used inside the columns.
05. Other tools.
You can also customize your website with so-called no coding tools: by adding a custom class using the ALT text or variable tags.
The fluid sections are available by default in all Matrix Themes installed from 11.09.2022.
If you're using a Matrix Theme installed with the advanced styled editor, you can update your website on your own and activate the fluid section with the following way:
1. In Matrix Themes menu> Updates download the latest js file (matrix-1.9.4.js) and upload it to your own website. Please don't forget
to remove the previous version. After that you should see in your admin menu the 'Fluid sections'.
2. Matrix Themes menu>
Updates make sure to use the latest updates ( sections 04, 05 and 09 )
3. Matrix Themes menu> Quick
setup> setup the brand colors update the Widget/HTML part of the style editor.
To add a fluid section to your website:
1. Click the Matrix Themes admin menu and select 'Fluid sections'.
2. Choose one of the fluid section design clicking the copy button.
3. Paste the code to your page, so add a module 'Text', click the button 'Edit HTML' and inside of popup text area paste your code. Click the save button at the end.
4. Click the 'Apply' button of the Style Editor in the top left corner and start editing your fluid section moving and resizing any elements.
- Editing the text
Double click on the text to start editing it. Click outside of the editing area to activate gain the draggable options.
Each editable element inside the Fluid section has 2 buttons 'copy' and 'delete'.
- Copy button:
Click the copy button to copy the same element. Use the 'apply' button of the style editor everytime when you created a new element and then start editing it.
- Delete button:
Use the delete button to delete completely an element from the fluid section.
Note
Some elements don't have the copy and delete buttons. This is because the height of the whole fluid section depends on the main element that can't be deleted.
To change the images in fluid sections, you need to upload your own image file to your website and paste inside the code your own file urls:
1. Go to Custom Layout and select the tab Files
2. Upload your own image ( max image size 512.00 KB )
3. Once you upload your file ( the name of the file will be displayed in the list files), select it with right mouse over 'copy link address'
and replace the default image url inside the Text module> Edit HTML.
<!-- Example of the image url -->
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg?t=1405356750" alt="" /
...
- Changing the background color
Most of the fluid section has an option to change the background using the default text editor:
- On the top right corner select the circle ( it should be red selected background color );
- Using the button 'Text color' of the text editor, you change it's color;
- Click the style editor button "apply styles" to see the new applied color;
The fluid sections that don't have above option to change the backround color can be customized manually by clicking the 'Edit HTML' button.
<div class="is-matrix-block hs-fullwidth bg-primary cc-clearover" style="background-color: #204829!important;">
...
You have two options:
1. Remove the class 'bg-primary' and manually add your own color in the second highlighted section of inline style.
2. Remove the second highlighted section of inline style and change 'bg-primary' for another helper class (bg-secondary, bg-red, bg-green etc).
Working with the Tile Fluid sections
The fluid sections 23-28 are using the full width image that can be resized for your own preference. In edit mode it's not possible to reach the left/right or top/bottom edge because of the
guidance lines. To reduce the space, you need to edit it manually clicking the Edit HTML button and change the percentage ( e.g. from 0.56564% to 0% and 99.3564% for 100%.)
Tips and suggestions
In case the clicking the Undo button, the fluid elements don't change their initial position, you'll need to click the reload button of the style editor or just refresh the page
and try again.
The fluid elements have an absolute position on the desktop devices and relative for tablet and mobile devices;
The height of the fluid sections are defined by the following elements depending on the specific widget you're using :
- class 'h-100' ( height:100vh;) and 'm-height-auto' for mobile devices;
- class 'h-50' ( height:50vh;) and 'm-height-auto' for mobile devices;
- the main element inside of the fluid section with relative position ( class 'is-rel '). Resizing this element, you can resize the whole height of the fluid section.
The Fluid sections can't be use inside the columns;
If you're adding a fluid section as a hero ( the first module in your content), you can reduce the space between the header and content by adding the class 'has-no-gutter' to
the first line of the fluid section;
To make a transparent header and place the fluid section 'behind' the navigation and logo, add the following class 'has-transparent-header' to the first line of the fluid
section;
Please consider the fluid sections only a part of the editing features provided by Matrix Themes. The Fluid sections can't replace some block elements or other custom widgets;
