Hero Image in Matrix Themes

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.

Tips.

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

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

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