The new options for background image, it's title and advanced settings in Matrix themes
In admin menu navigate Design > Background and click on the plus symbol by choosing the desired type of background. If the background should be used for all
pages, click on Use this background for all pages
For background section you can use an image, slideshow, youtube video or just a background color
In order to make your navigation or hero title well visible on hero image, this section has a black overlay. To remove it, go to Menu> Settings> Edit Head >
select a page and add a body class 'no-hero-overlay'. This option is available only for Jimdo Pro or Business package which allows you to add a custom code or body class
to individual pages
All body classes for hero image
no-hero - remove the hero section
no-hero-overlay - remove the hero overlay
main-page - display the hero section like your homepage style, usually it's fullscreen
1. Add a module 'Columns' to content section
2. Inside one of the columns, add a Widget/HTML with the following code:
<var> draggable-hero color-white g-font </var>
3. Refresh the page to see the module 'columns' appear inside of the hero section. Start to edit it for your own preference.
Use the module 'Spacing' to resize the hero image.
To resize the columns, you'll need to reset the variable code ( or just change 'draggable-hero' for any other name e.g. 'draggable-heros') refresh the page and
change the colomns in content section
In Matrix theme menu> shortcodes you will find a widget 'Hero title' with 3 different styles. You have to use it only if your template doesn't support the
draggable options recently added to all Matrix Themes. You can always request to update your template with the latest release from this page
Recently the hero section has been changed in some of the Matrix themes which gives you more flexibility of customization. For example, the hero title has relative position and displayed
inside of the hero image and not the whole section. So by adding the module 'Spacing' you can visually change the height of the hero image without using coding in CSS
To make a transparent header with absolute position, just add a class 'has-transparent-header' to the code of draggable hero:
<var> draggable-hero color-white g-font has-transparent-header</var>
With the same way you can display a bottom arrow (not clickable):
<var> draggable-hero color-white g-font has-transparent-header has-btm-arrow </var>
In new Lemberg theme, the hero image is fullscreen on the main page (homepage) by default. If you need to make it smaller, add a body class 'has-default-hero'
You can invert the header colors ( navigation and header background) using the global template configuration options in HTML ( Design> Custom Template> HTML tab ). All
you have to do is to add a class 'has-custom-header' and click the save button
The template configuration line in HTML is also useful to add global styles for your website. For example, the body class 'no-hero' can be added here to hide the
background image from all pages. The class 'has-global-hero' by default displays the hero image on all pages with a min height of 40vh.
You can easily display any custom widget on the top of the page by adding a class 'is-header' and 'has-transparent-header'
<div class="is-matrix-slider is-new-slider owl-carousel owl-theme is-fullwidth is-header has-transparent-header">
Example with full width tile widget
<div class="is-header is-matrix bg-dark is-fullwidth has-transparent-header">