Common elements

Every header contains an image displayed after loading – this image should have always a CSS class gk-header-bg.

Elements in the header are animated in vertical direction. Elements with class gk-animated are animated from the bottom, elements with classes gk-animated reverse are animated from the top.

For every header the proper CSS class should be defined in the template options under the Frontpage tab. There’s “Class of the header” option which may be used to select proper header.

Header I

To use the first header style on your site, you should place a Text widget  with the following content in the ‘Header’ widget position:

<div class="gk-header1">
<h1 class="gk-animate">Hello!<br />My name<br />is John</h1>
<p class="gk-animate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a class="gk-scroll-down gk-animate reverse" href="#my-works">Scroll Down</a> <img class="gk-header-bg" src="[pageurl]/wp-content/themes/John/images/demo/header/header1.jpg" alt="John S." />
</div>

Header II

To use the second header style, you should use a Text widget  with the following content in the ‘Header’ widget area:

<div class="gk-header2">
<h1 class="gk-animate">Welcome!<br />My name is John</h1>
<p class="gk-animate"><span>I'm multidisciplined freelance designer specialise in rich</span> <span>interactive experiences for web. If you’ve got an exciting</span> <span>project, get in touch with me!</span></p>
<a class="gk-scroll-down gk-animate reverse" href="#my-works">Scroll Down</a> <img class="gk-header-bg" src="[pageurl]/wp-content/themes/John/images/demo/header/header2.jpg" alt="John S." />
</div>

Header III

To utilize the third header style you should use a Text widget  with the following content in the ‘Header’ widget position:

<div class="gk-header3">
<p><img class="gk-animate" src="[pageurl]/wp-content/themes/John/images/demo/header/header_text_image.png" alt="Hello! My name is John" /></p>
<p class="gk-animate"><span>I'm multidisciplined freelance designer specialise in rich</span> <span>interactive experiences for web. If you’ve got an exciting</span> <span>project, get in touch with me!</span></p>
<a class="gk-scroll-down gk-animate reverse" href="#my-works">Scroll Down</a> <img class="gk-header-bg" src="[pageurl]/wp-content/themes/John/images/demo/header/header3.jpg" alt="John S." />
</div>
 

If you’ve installed the quickstart package the First header is used by default, whilst the second and third header are available in the Inactive Widget section of the WordPress dashboard..

If you are going to generate your frontpage from your posts, you can just switch the tag from the first post (Template Options -> Frontpage -> “Tag of the header post” option), to change your header..