Theme features

This article describes additional features used in this theme.

Menu

Menu is available in two variants – classic and overlay. You can change the menu variant using the template settings – tab “Navigation” – option “Mainmenu type”.

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="#" class="big-btn">Join us now, It's free!</a>

TESTIMONIALS

Testimonials are based on the following structure:

<blockquote class="gk-testimonials">
<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="gk-author"> <img src="[pageurl]/wp-content/themes/Msocial/images/demo/avatar1.png" alt="Demo image"> <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 gk-columns class and data-column-count attribute:

<div class="gk-columns" data-column-count="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 widget you can embed a lot of Custom HTML widgets. 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="gk-icon gk-color1"><i class="icon-ICONNAME"></i></a>

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

• gk-color2
• gk-color3
• gk-color4
• gk-fb
• gk-twitter
• gk-gplus

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 text
2. Paste this code to text widget:

    <div class="gk-photo" style="background-image: url('PATH');"></div>

   If you don’t want to use this method, you can always choose Custom CSS class from widget styles and define background-image property from CSS ( you can use override.css file )

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>Your header</h3>

You can also replace class gk-text-bottom with gk-tex-top.

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 widget – every anchor tag which will be placed as a children of the root element will be expanded to cover the whole widget 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 Text widget
2. Please set the widget custom CSS class to gk-wideo
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 widget 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 Text widget the gk-text div CSS class and then you can use the gk-header classes connected with h1, h2 and h3 tags. You can also add to your header element the gk-centered class if you want to center vertically your text – but we recommend it only for the one-line texts.

Example text widget content:

<div class="custom gk-text>
<h1 class="gk-centered"><a href="">GK Grid</a></h1>
</div>