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. Templates
  2. Zion

01. Hero section

Design options

Zion theme

draggable-hero

The hero section in Zion theme can be displayed by adding the variables in Widget/HTML inside the content section.

Here are the steps:

 

1. Add a module 'Columns' and inside of it display a Widget/HTML with the following variables:

<var>draggable-hero color-white g-font</var>

 

2. Refresh the page to see your columns inside of the hero section ( Menu> Design> Background ). This is a draggable custom section where you can add any element . Use the module 'Spacing' to make it bigger or smaller.

 

bg-lightgray add-5

Some tips & suggestions

- The hero section can be displayed as fullscreen if you add a body class main-page.

In admin menu navigate Settings> Edit Head section> Select a page 

- By adding a module 'Spacing' inside the hero section might  look good on desktop devices and too big on mobile.

There's an option to hide the hero section on mobile devices by adding the class hide-mobile to the variables

 


<var>draggable-hero color-white g-font hide-mobile</var>

- It is possible to display the hero section globally on all pages. In this case the variables should be placed inside the columns of the footer section.

The global hero section and it's content will be displayed the same on all pages.

02. Header styles

The header background by default has white background with dark navigation. You can setup your own background color of the header directly in HTML:


<div class="hs-header bg-white has-nav-inverted__ cc-clearover">

For the dark background use bg-dark or your own class and activated white color for the navigation


<div class="hs-header bg-dark has-nav-inverted cc-clearover">

Transparent header

bg-lightgray add-5

To make a transparent header, you need to add the additional classes to the first line of custom widget.

For example, select any pre-made block from Matrix Themes menu> Block elements.

In my example, it's fullwidth Tile widget. If add it as the first Jimdo module of the content section, it will be displayed right below the header ( without any space between the widget and header). Now we add the class  has-transparent-header and has-no-gutter then refresh the page. Our widget will be displayed like this:


<div class="is-matrix-block is-fullwidth bg-white has-transparent-header has-no-gutter">

For the white navigation color,  you need to use the class has-nav-inverted


<div class="is-matrix-block is-fullwidth bg-white has-transparent-header has-no-gutter has-nav-inverted">

Top Header section

The Zion theme supports the top header section which can be activated directly in HTML.

Select Custom Layout> HTML and find the following line:


<div class="hs-top-header bg-primary hidden">

All you have to do is to remove the class hidden and click the save button at the bottom of the page.

Edit this section for your own preference by adding your own contact information or just any message text that will be visible on every page of your website


<div class="hs-top-header bg-primary">
      <div class="max-inner cc-clearover">
            <div class="right-align mobile-left add-10 size-12 color-white link-white">
                <div class="fa fa-mobile">
                </div>
        (+46) 432‑582-02,  
     <div class="fa fa-envelope add-left-10">
     </div>
     <a href="mailto:office@mail.se">  office@mail.se</a>
     </div>
<!-- end hs-right -->
   </div>
<!-- end inner -->
 </div>
<!-- end hs-top-header -->
bg-lightgray add-5

03. Navigation styles

The default style of the template is using the right aligned navigation. You can make it center or left aligned with the following classes directly in HTML:

  • has-center-nav
  • has-left-nav
  • has-right-nav


<div class="global-colors brand-bg brand-link has-push-layout has-custom-text has-custom-blog has-custom-nav has-right-nav">

04. Breadcrumb menu


bg-lightgray add-5

 

By default, the breadcrumb menu in Zion is deactivated in order to use cover images or any other fullwidth sections just below the header.

Anyway, it is possible to activate it by adding a body class has-subnav in Edit Head > select  a page or globally in HTML:


<div class="global-colors brand-bg brand-link has-push-layout has-subnav has-custom-text has-custom-blog has-custom-nav has-right-nav">

Do you have any questions?

For any questions and other options in Zion theme, please leave your comment below

 

Comments: 0

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
  • Zion
  • Alsten
  • Lemberg
  • Bergen
  • Hafen
  • Altona
  • Enkel
  • Horten
  • Hisingen
  • Agen
  • Tjörn
  • Halmstad
  • Öland
  • Scroll to top
Close