Custom HTML Elements

Columns in the content


We have to used in a few places a simple mechanism of the columns in the content. You can create 2,3,4,5 or even 6-column layout in the single widget using the following structure:

<div class="gk-columns" data-column-count="5">
// … column content

Amount of columns is specified in the data-column-count attribute and should be in range 1-6.

Grid Photos


If you want to put a photo which will have an overlay for the whole image, you can use the gk-avatar class in text widget.

The necessary structure is following

[code]<a class=”gk-avatar” href=”[pageurl]/profile_url” style=”background-image: url(‘[pageurl]/wp-content/uploads/avatars/your_image.jpg’);”>

<span><em>Gary Hall</em></span>


If you want to add only photos (without overlay) use this syntax:


<div class=”gk-photo” style=”background-image: url(‘PATH’);”></div>


Titles and Subtitles


Sometimes you need to create a longer title with subtitles. You can use the following syntax in widget title:

[code]Widget title __second line subtitle__[/code]

Please remember to choose widget styles: bigtitle or subtitle.