How to create a custom hero section

• Add draggable hero variables

Display a module 'Columns' with two rows. Inside the left column add the following code with Widget/HTML and refresh the page:

<var> draggable-hero </var>

• Add a content

Inside the left column add a module 'Photo'. Inside the right column - any other elements ( heading, text, buttons etc )

• Add a background color

Menu> Design> Background select the background color. In case you wanted to remove the background overlay, in Settings> Edit Head > select a page  and add a body class 'no-hero-overlay'

• Make it tile

Inside the left column find the previous added Widget/HTML with variables and add additional classes:

<var> draggable-hero g-font no-padding has-transparent-header is-matrix has-btm-arrow </var>

Add another Widget/HTML inside the right column with the variables classes and refresh the page

<var> is-tile is--flex is-flex-block is-img-100 white-outline-btn color-white is-fullwidth </var>

In admin mode this section will look like this:

• Notes:
• this guide can be used only for the latest version of Lemberg theme (starting from v3.2).
• More details about the new hero section can be found in this blog post:
• https://www.matrix-themes.com/2021/04/25/hero-image-in-matrix-themes/