The Mo template offers 3 predefined header structures:

The first header style has been designed for a mobile app showcase, whereas the other two styles have been created specifically for blog pages..

First header style

If you need more space under the header you may choose header1 class from Template Options -> Frontpage settings tab

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="custom  gk-header1">
<div>
<h1 data-scrollreveal="enter top and move 100px wait 0.2s">Beautiful theme for app website</h1>
<p data-scrollreveal="enter top and move 150px wait 0.4s">An effective theme for an effective app. Clear and easy
on the eye; a sublime exhibition of minimalism for your app.</p>
<a href="#" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>
<div class="gk-tablet" data-slides="1" data-scrollreveal="enter bottom and move 50px wait 0.5s">
<div>
<div><img alt="App Screen I" src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_1.jpg" /></div>
</div>
</div>
</div>

You can define your own animations in the data-scrollreveal attributes.

In the above example the gk-tablet element (the stylized tablet image) contains only one slide, but you can add more slides if required – then you can increase the data-slides attribute’s value and the slides will be animated to transition the image shown on the tablet. Additionally you can specify the speed of the animation and the interval between animations using the data-speed and data-interval attributes..

Here is a piece of example code to display the gk-tablet element with 3 slides, an animation speed set to 500ms and the interval between animations equal to 3s:

<div data-slides="3" data-speed="500" data-interval="3000" data-scrollreveal="enter bottom and move 50px wait 0.5s">
<div>
<div><img alt="App Screen I" src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_1.jpg" />
<img alt="App Screen II" src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_2.jpg" />
<img alt="App Screen III" src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_3.jpg" /></div>
</div>
</div>

Second header style

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

<div class="custom  gk-header2">
<div>
<small data-scrollreveal="enter top and move 100px wait 0.5s">Easy transform header</small>
<h1 data-scrollreveal="enter top and move 100px wait 0.7s">Create your own blog</h1>
<a href="#" data-scrollreveal="enter top and move 100px wait 0.9s">Read more</a>
</div>
</div>

It is the simplest header from the ones available. Please remember that you can change the background image by amending the code in the stuff.css file; specifically, in the .custom.gk-header2 CSS class definition. (the Mo/images/header2_bg.jpg file)

You can define your own animations in the data-scrollreveal attributes.

Third header style

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

<div class="custom  gk-header3">
<div>
<div class="gk-avatar"><img src="[pageurl]/wp-content/themes/Mo/images/demo/robert.jpg" border="0" alt="" data-scrollreveal="enter top and move 100px wait 0.5s" /> <a class="gk-fb" href="http://facebook.com/gavickpro" data-scrollreveal="enter top and move 50px wait 1s"><i class="fa fa-facebook"></i></a> <a class="gk-twitter" href="http://twitter.com/gavickpro" data-scrollreveal="enter bottom and move 50px wait 1s"><i class="fa fa-twitter"></i></a></div>
<h1 data-scrollreveal="enter top and move 100px wait 1s">My own website</h1>
<small data-scrollreveal="enter bottom and move 50px wait 1s">Easy transform header</small>
</div>
</div>
 

You can define your own animations in the data-scrollreveal attributes and your own links for the Facebook and Twitter profile

Please remember that you can change the background image in the stuff.css file – specifically, in the .custom.gk-header3 CSS class definition. (the Mo/images/header3_bg.jpg file)

The avatar can be changed directly in the image tag’s src attribute..

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..