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

Displaying any widget in header

This guide is about how to display any custom widget or default Jimdo module in header ( the area between the header and content )

01. Deactivate the hero section

If your page has an hero section with background image, you can deactivate it by adding a body class 'no-hero'

 

add-5 bg-grey

02. Adding a  custom widget

One of the most common used widget is the image slider that can be displayed on the top of the page instead of the hero section.

So, please check the following steps:

 

  • Select a widget

From the Matrix admin menu ( shortcodes) copy the code of the slider and paste it inside of the content section using the module Widget/HTML

  • Add a custom class

By default the widget will be displayed in content section, in the same area where you added Widget/HTML. To make it appear on the top of the page, simply add a class 'is-header' in the first code line like this:

bg-grey add-5

<div class="is-matrix-slider is-new-slider owl-carousel owl-theme is-fullwidth is-header">

  • Refresh the page

You need to refresh the page to see your slider displayed on the top of the page but keep in mind that it's code can be found and edited in the same position you added to the content section

bg-grey add-5
has-timeline-list

03. Adding a Jimdo module 'Photo'

Display a module "Photo" in content section and  add the class 'is-header is-fullwidth' as Img Alt text. Refresh the page to see the effect.

Note:

This option is available only in the latest Matrix Themes installed from 2021

add-5 bg-grey

04. Display any other Jimdo module with Matrix variables

  • Display a module Columns

Add a module 'Columns' to the content section with only one column

  • Add your widget

Inside of the column, add any Jimdo module that will appear on the top of the header ( e.g. Google Maps, Slider, Gallery etc)

  • Add variables

Inside the same column, add Widget/HTML with the following variables and refresh the page


<var> is-header is-fullwidth </var>
has-timeline-list

Note:

The option with variables is available in Matrix Themes installed from April 2021

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