Grid GK5 is very useful if you need to display thumbnails of your articles - combine it with News Show Pro GK5 new portal mode - Grid Title overlay.
Please remember about useful crop options and image filters available in the newest version of News Show Pro GK5 - it will be useful if you need to adjust your images for the Grid GK5 layout.
The above module shows the amazing possibilities of our new Grid GK5 module. You can mix a lot of kind of content inside this module:
Please remember that you can also create your own types of content. In general blocks needs only few basic things:
GK JomSocial Feed is a module prepared especially for this template and our brand-new Grid GK5 module. We recommend to use this module only inside the Grid GK5 module.
The module is very simple to configure:
Content type - specifies if the module will search for status updates or photos.
Data source - specifies if the module will search in all JomSocial activities or only in the feed of one specific user.
User ID - if the data source option is set for one specified user in this option you can specify which user will it be.
Offset - you can select using this option second, third, fourth etc. status from the feeds.
Depending of the selected content type you have to configure module layout on the status settings or in the photo settings:
Show avatar - you can enable/disable showing the avatar which will take 50% of the module width.
Avatar position - you can specify the position of the avatar
Show read more - you can enable/disable showing the read more button under the status text. Then the status text won't contain a link to the author profile.
Show username - you can enable/disable showing of the status author username.
Read more text - specifies a text used in the read more button. If blank, then the phrase from the language file will be used.
Text limit (chars) - specifies how many chars can contain the longest status text.
Image type - you can select quality of the image used in the module.
Text position and color - you can specify the position and color of the text (useful for some photos).
Show text - you can enable/disable showing of the status text.
Text limit (chars) - specifies how many chars can contain the longest status text.
Additionally in the advanced options you can disable usage of the default CSS file of the module - we recommend to disable the default CSS in the MSocial template.
Grid GK5 can be used as a great form of presenting your articles or works. You can combine this module with static Custom HTML modules using gkPhoto suffix or use the new portal mode in our amazing News Show Pro GK5 module - Grid Title Overlay.
We recommend to use News Show Pro GK5 module in the grid elements if you want to achieve automatically updating grid elements.
This article describes additional features used in this template.
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.
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 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 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.
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:
GK Grid is an ideal solution for creating awesome galleries. Creating blocks with images is very simple:
And that's all! As simple as possible.
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.
Another important media - videos. If you want to put video object to your grid please make following steps:
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.
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.
