• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  1. Support

How to create a custom hero section

The latest version of Lemberg theme (v3.2) offers various ways to display a hero image. This guide shows you some examples with the tile widget

 

bg-grey  mid-round add-5 wow animated fadeInUp
  • 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'

bg-grey  mid-round add-5 wow animated fadeInUp
  • 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:

bg-grey  mid-round add-5 wow animated fadeInUp
has-timeline-list

  • 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/
has-quote-list

Alternative way

There's another way to display a full width tile using just a Widget/HTML.

From section 'Shortcodes' select Tile Widget> Fullwidth tile 3 and add it inside the content section

Change the first line of the code and refresh the page:


<div class="is-matrix is-fullwidth bg-dark is-header has-transparent-header has-btm-arrow">
bg-grey  mid-round add-5  wow animated fadeInUp

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Helper classes
  • Common support issues
  • Contact

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
  • Pricing
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-center-nav g-font has-large-header
 
Navigation styles
 
size-15 weight-400 snip-nav --line01 is-uppercase
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white

 

Typography

Heading H1
weight-600 is-uppercase
 
Heading H2
weight-400 is-uppercase
 
Heading H3
weight-600 is-uppercase
 
Buttons
weight-600 is-uppercase
 
Animations
 

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

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

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