This article describes additional features used in this template.

Menu

Menu is available in two variants - classic and overlay. You can change the menu variant using the template settings - tab "Menu" - option "Menu type". The extended possibilites like columns, groups are available only for the classic menu.

Big buttons

You can create big buttons using the anchor tag and class big-btn. The big buttons looks best when are centered in the paragraph. Example:

<a href="#url" class="big-btn">I'm a really big button!<a>

Testimonials

Testimonials are based on the following structure:

<blockquote class="gkQuote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at dictum mi, et sodales urna. Pellentesque tincidunt mi leo, id cursus quam porta ac ..</p>
<span class="gkAuthor"> <img src="/templates/2013_8/images/demo/avatar1.png" alt="Robert Gavick"> <span><strong>Robert Gavick</strong><a href="http://www.gavick.com">www.gavick.com</a></span></span></blockquote>

If you want to put more testimonials in one line please read about columns in the next paragraph.

Columns

Columns needs main wrapper with gkCols class and data-cols attribute:

<div class="gkCols" data-cols="2">
<div>
First column content
</div>
<div>
Second column content
</div>
</div>

You can create a layout with 2-4 columns using this structure.

Grid elements - Icons

In the GK Grid module you can embed a lot of Custom HTML modules. We have prepared few additional typography elements which will make GK Grid much more powerful for your use cases. First type of this typography elements are icons.

You can embed any Font Awesome icon with your own link using the following structure:

<a href="#url" class="gkIcon gkColor1"><i class="icon-ICONNAME"></i></a>

You can replace class gkColor1 with following classes which will add other background colors for your icons:

• gkColor2
• gkColor3
• gkColor4
• gkFb
• gkTwitter
• gkGplus

Grid elements - Photos

GK Grid is an ideal solution for creating awesome galleries. Creating blocks with images is very simple:

1. Create new Custom HTML module instance
2. In the module options please select the background image
3. Please set the module suffix class to gkPhoto

And that's all! As simple as possible.

Grid elements - Photos with text

If you want to put some text over your image, please create the photo as it was described in the previous paragraph and then please add the following code:

<h3 class="gkTextBottom">Your header</h3>

You can also replace class gkTextBottom with gkTextTop.

You can embed a link inside the header and create new lines using the strong element. If you need a smaller title you can use the h4 element

If you want to create a clickable photo, just create an anchor element inside the Custom HTML module - every anchor tag which will be placed as a children of the root element will be expanded to cover the whole module area.

Grid elements - Videos

Another important media - videos. If you want to put video object to your grid please make following steps:

1. Create new Custom HTML module instance
2. Please set the module suffix class to gkVideo
3. Prepare an embed code of your video - we recommend to use size approximate to size of your block.
4. Paste your video code to the module content.

Please remember that blocks with videos shouldn't be too small and shouldn't change their proportions too much on the tablet and mobile devices.

Grid elements - Text

The last important group of the grid typography elements - text blocks. You have to put in your Custom HTML module the gkText suffix and the you can use the gkHeader classes connected with h1, h2 and h3 tags. You can also add to your header element the gkCentered class if you want to center vertically your text - but we recommend it only for the one-line texts.