• 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
    25. April 2021

    Hero Image in Matrix Themes

    The new options for background image, it's title and advanced settings in Matrix themes

    Index of content

    Hero section

    How to add a background image
    How to add a title
    The hero options

    How to add a background image

    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

    add-10 bg-grey wow animated fadeInUp

    Hero overlay

    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

     

    add-10 bg-grey wow animated fadeInUp

    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

    How to add a hero title

    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

     

    add-10 bg-grey wow animated fadeInUp

    Notes:

    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

    Custom Hero section in specific templates

    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

    add-10 bg-grey wow animated fadeInUp

    Transparent header

    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>

    Add a bottom arrow

    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>

    Custom hero height for homepage

    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'

    Invert the header colors

    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

    add-10 bg-grey wow animated fadeInUp

    Notes:

    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.

    Display any custom widget instead of background image

    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">
    add-10 bg-grey wow animated fadeInUp

    Example with full width tile widget

    
    <div class="is-header is-matrix bg-dark is-fullwidth has-transparent-header">
    add-10 bg-grey wow animated fadeInUp
    tagPlaceholderTags:

    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