• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
  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

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Common support issues

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
  • Matrix Themes for Agencies
  • Matrix Themes for Web Designers
  • Small Business websites
  • Create a new website
  • 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