• Home
  • Add-ons
  • Templates
  • Page builder
  • Blog
  • Home
  • Add-ons
  • Templates
  • Page builder
  • Blog
    11. September 2022

    A Complete Guide to Fluid Sections - The New Jimdo Drag & Drop Editor

    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.

    Watch the video

    Youtube content is not displayed due to your cookie settings. Click on the functional YouTube cookies in the cookie banner to agree to load and display content from YouTube.

     

    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.

    • Shortcodes

     

    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.

    • Matrix Add-ons

     

    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.

    • Block elements

     

    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.

    • No coding features
    • Matrix variable tags

    How to activate

    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.

     

    How to Add a fluid section

    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.

    How to edit a fluid section

    - 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.

    Change the image

    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.

    bg-grey  is-100 add-5

    <!-- Example of the image url -->
    <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg?t=1405356750" alt="" / ...

    Change the background color

    - 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).

     

     

    Tile widgets

    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.

    Best practices

     

    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;

    tagPlaceholderTags:

    Resources

    • Overview
    • Default vs Custom template
    • Style Editor
    • Global Updates
    • Theme Updates
    • Common support issues

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Matrix Themes for Agencies
    • Matrix Themes for Web Designers
    • Small Business websites
    • Create a new website
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-right-nav has-large-header g-font m-text-16
     
    Navigation styles
     
    size-16 weight-400 snip-nav
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600
     
    Heading H2
    weight-600
     
    Heading H3
    weight-500
     
    Buttons
    weight-400
     
    Animations
     

    Note:
    All changes made here will be applied to your entire website.
    is-switcher

    Stand out with professional Jimdo website

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