• Home
    • Blog
    • Contact
  • Home
  • Blog
  • Contact
  1. Zodiac

Documentation

Index


  • 01. Basics

    • Overview

      01

    • Hosting the files

      02

    • Using the custom widgets

      03

    • File upload

      04

    • Font Awesome framework

      05

    • Getting support

      06

  • 02. Initial setup

    • Brand colors

      07

  • 03. Customize

    • Helper classes

      08

    • Inline styles

      09

    • Body classes

      10

    • Play of columns

      11

    • No coding features

      12

    • Matrix Variables

      13

  • 04. Troubleshooting

    • External JS files

      14

    • Your questions

      15

05. UPGRADE

01. Basics

Framework overview

The Zodiac frameworks includes 2 main blocks: Edit Head links and framework menu in Widget/HTML

1. Edit Head links

The Edit Head block includes

 

  • jQuery library
  • JS file of Zodiac framework
  • Font awesome framework
  • CSS styles for brand color setup
bg-grey mid-round add-20 wow animated fadeInUp

 

2. Zodiac framework menu

This block should be added to footer or sidebar of your website in order to be visible in all pages.

 

bg-grey mid-round add-20 wow animated fadeInUp

Hosting the files

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 in your computer and upload them to your file directory. Check the section File upload with further details.

bg-grey  mid-round add-20 wow animated fadeInUp

Using the custom widgets

All 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 Widget/HTML

bg-grey  mid-round add-20 wow animated fadeInUp

File Upload

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?

01  Prepare your own image you'd like to use for parallax or any other widget.

02  In admin mode, navigate Design> Custom Template> Files and upload your image. If you're already installed the Zodiac framework menu on your website, select  direct link Custom layout> Files

03  When you successfully uploaded your image, you will find it in your files list. On mouseover select the Copy Link Address

bg-grey  mid-round add-20 wow animated fadeInUp

04  Paste the link address inside the Widget/HTML changing the demo image URL

bg-grey  mid-round add-20  wow animated fadeInUp

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

Font awesome framework

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:


 <div class="fa fa-diamond fa-4x">
 </div>


 <div class="fa fa-rocket fa-4x">
 </div>

Getting support

Support is available only for Zodiac Pro users.

02. Initial setup

Brand colors

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


<style type="text/css"> /*<![CDATA[*/
.bg-primary { background:#5580ff!important; } .bg-secondary { background:#ff8a73!important; } #cc-inner .j-formnew input[type='submit'],#cc-inner .hs-button { padding:18px 45px; }
/*]]>*/ </style>



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.

03. Customize

Helper classes

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

Inline styles

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>

Body classes

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

bg-grey  mid-round add-20 wow animated fadeInUp

Play of columns

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)

 

01  Add a module Columns to your content with 2 rows (columns). Inside the left column display an image and any content inside the right column

bg-grey  mid-round add-20 wow animated fadeInUp

02  From Zodiac framework menu, select Zodiac Add-ons > Play of columns and choose any widget by clicking the copy button and paste the code inside the right column 

bg-grey mid-round add-20  wow animated fadeInUp

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.

No coding features

No Coding features have the same function like Play of Columns but instead of using a code in Widget/HTML, you add only class names as Alt text to the image. It can be used only with Jimdo modules Photo and Text with Photo

bg-grey  mid-round add-20 wow animated fadeInUp

 

You can easily add fullwidth images, parallax, custom captions and hover effects.

The full list of custom classes and widgets you can find in Zodiac Framework menu> No Coding Features

Matrix variables

Coming soon

04. Troubleshooting

External Js files

Coming soon

05. Upgrade

Upgrade

Upgrade the Zodiac framework with version Pro and get access to all widgets and documentation sections

 

Zodiac Pro

€ 59,00

is-tile-overlay color-white z-bg add-30 mid-round

Full access

Additional custom widgets

Advanced Customizations

No coding widgets

24/7 Support

Professional support via email


Note: Please fill out the fields marked with an asterisk.

has-link-inherit has-link-bounced

  • Can I use the version Pro in multiple websites?

    yes, there's no limitation

  • What kind of support do I get in Pro version?

    By email: all inquiries about errors, bugs, updates and just information

  • How Do I pay?

    Paypal

  • Refund policy

    Full refunds to any unsatisfied customer up to 5 days after the purchase was made.

  • Warranty

    I cannot guarantee that Zodiac framework will function with all 3rd party components, custom code and plugins you might use in default Jimdo template

Any further questions?

You can ask here

Comments: 0
has-link-inherit has-link-bounced

Latest blog posts

Wed

26

Aug

2020

Exploring Puglia

Read More 3 Comments

Fri

24

May

2019

New York, New York

Read More 3 Comments

Thu

11

May

2017

Greater Manchester

Read More 0 Comments
left-footer
footer-blog

Pages

Live preview of custom widgets
Previous version (4.1)
Support
right-footer

hembarevskyy. {Zødiac}

draggable-logo

Privacy Policy | Cookie Policy | Sitemap
Log in Log out | Edit
  • Zodiac
  • Matrix themes
Matrix themes Close
Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace Custom layout
Close