01. Hero section
Design options
Zion theme
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.
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
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 -->
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
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
GET INSPIRED
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-center-nav g-font |
| size-15 weight-400 snip-nav is-uppercase --line01 |
| form-white |
| o-form color-white |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE