Documentation

The Zodiac framework includes only one block of links in Edit Head section with the following components:

• jQuery library
• JS file of Zodiac framework
• CSS file of Zodiac framework
• Setup of the Brand colors and default buttons size

The 2 files (CSS and JS) of Zodiac framework are hosted on a demo Jimdo website. If you wish to use your own website, just save 2 files on your computer and upload them to your file directory. Check the section File upload with further details.

The custom widgets of Zodiac framework should be used in module Widget/HTML. All you have to do is just click the copy button of selected widget and paste the code inside the  Widget/HTML

Many custom widgets are using the demo images that you will have to change for your own ones ( overlay teaser, parallax, sliders, tile widget ).

How to add your own images?

Important note:

Jimdo offers 2 types of templates: fullwidth and boxed. If you're using boxed layout or a template with left or right sidebar, the full width sections and parallax require additional class is-boxed. This won't allow you to overlap the content area

Some of the Zodiac widgets are using the icons from Font Awesome framework ( v.4.7) 

Please check the below link with all available icons:

https://fontawesome.com/v4.7.0/icons/

Example of using Font Awesome Icons:

Support is available only for Zodiac Pro users.

The brand colors can be setup in Edit Head ( Settings> Edit Head ):

There are 2 classes bg-primary and bg-secondary ( you can add other classes for your own preference).

Here's an example of using buttons with your brand colors:

<a class="hs-button bg-primary" href="https://www.matrix-themes.com/" target="_blank">Button</a>

In the same section Edit Head you can change the default padding of your  buttons making them smaller or bigger.

Customize the widgets with colors, size and other values with helper classes

<a class="hs-button" href="https://www.matrix-themes.com/" target="_blank">Button</a>

<a class="hs-button bg-pumpkin mid-round size-18" href="https://www.matrix-themes.com/" target="_blank">Button</a>

In our second example we used the following helper classes:

bg-pumpkin -  for background color

mid-round -  for border-radius

size-18 -  for font size

The full list of helper classes and other examples can be found in Zodiac framework menu> Helper classes

If you need to style an element with your values, you can use the inline style. Please pay attention to it's position:

<a class="hs-button" style="background:#00858e;" href="https://www.matrix-themes.com/" target="_blank">Button</a>

You can hide the main image from one of your page using the body class no-hero

This option is available only in Pro or Business Jimdo package

This feature has been taken from Matrix Themes and allows you to alter the design of default Jimdo elements

It's about pre-made js scripts that should be always added inside of the module 'columns'

Available options:

- Tile banner
- Fullwidth Tile banner
- Tile banner with overlay background
- Tile banner with overlay title
- Fullwidth background color
- Animations (doesn't require to be used inside the Columns)

That's all. Sometimes  you need to refresh the page to see the effect.

Animations

Please note that using Animations widget will animate any widget added inside the columns.

This widget doesn't require to be added inside the columns, just use Widget/HTML directly on any page of your content section or Edit Head section to apply the animation to the whole website.

The Matrix variables replace the previous feature 'Play of columns' (you can use the both options anyway) and allow to use the same functions like play of columns but without any js code in Widget/HTML module

How does it work?

1. Add any Jimdo module inside the Columns (one or more columns)

2. Inside of the same module Columns, add Widget/HTML with Matrix variables:

3. Refresh the page to see the effect like this:

Conclusion

as you can see, in my example I used the headings, text and button inside of the one column and then added the variables inside  the same columns. You can use any other class instead of bg-dark available in helper classes section or your brand color as bg-primary

The class color-white can be used for the dark backgrounds

You can also alter the design of default Jimdo buttons with the following variables:

• dark-outline-btn
• white-outline-btn
• mid-round-btn
• round-btn