Page layout

This article describes additional features and tricks used in this template.

One page layout

If you want to achieve the one page layout you should use for the specific page suffix onepage in the template settings. Then all modules on the bottom1-2 will be displayed with the 100% width. Additionally you can use suffix greybg to achieve the grey background in the selected modules.

Menu

For the bottom1 module position we have prepared special feature which adds unique ID for every module using the following schema:

#gkBottom1-X

Where X is a number of the module. Then you can create menu with anchors to the specific blocks of the website.

We recommend to prepare two template instances – one for the frontpage and one for the rest of subpages. Then you can specify differents main menus for every template instance.

Scroll animations

The template contains the animation system based on the scroll event – some page elements can be displayed after scrolling the page to the specific point.

The animation engine uses two types of animation:

• Single animation
• Animation queue

Single animation

You have to add class animate to the element – the class loaded will be added when the user will scroll the page to area with this element.

Animation queue

You have to add class animate_queue to the container with the elements which have class animate_queue_element – then these elements will be animated one after another with delay 100ms.