Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  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

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
draggable-logo

 

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
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

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

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close