Frontpage elements

The frontpage is based on the text widgets or, if you are using Template Frontpage, on the posts. This page contains a description for the elements not described on the Widget Styles page.

The described HTML examples don’t contain the data-scrollreveal attributes used for the animation effects

Points list and columns

frontpage_1In order to create the list with styled bulletpoints, you should use the following structure:

<div class="gk-point">
<h4>Responsive layout</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper tellus sit amet nibh fringilla aliquet sit amet in leo. </p>
</div>

For columns, you need a main wrapper of the gk-columns class and a 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-5 columns using this structure.

Image on the right side

frontpage_2

 

If you want to place image on the right side, you should use the image-right widget style and wrap the whole content except the image with the div container..

 

Big buttons and big icons

frontpage_3

In order to create big buttons or icons you have to add the following CSS classes to the link / icon element: gk-big-btn or gk-big-icon.

Image on the left side

frontpage_4

If you want to place image on the left side, you should use the image-left widget style and wrap the whole content except the image with a div container.

If you want to put an image on the bottom edge of the container as in the above screenshot, please add the to-bottom CSS class to the image.

List

frontpage_5The list with large numbers uses the following syntax:

<ol class="gk-list>
<li class="color-X">Games <strong>28%</strong></li>
...
</ol>

Where CSS class color-X can be one of the following CSS classes: color-bluecolor-redcolor-greencolor-yellowcolor-grey

Features list

frontpage_6

 

Every feature with an icon uses the following syntax:

<div class="gk-feature>
<i class="icon-headset icon-color1"></i>
<h3>Live Chat!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper tellus sit amet nibh fringilla aliquet sit amet in leo. </p>
</div>

For icon colors you can use the following CSS classes: icon-color1icon-color2icon-color3

The full list of the icons from the Pixellove iconset:

  • icon-rss
  • icon-book
  • icon-box
  • icon-calendar
  • icon-camera
  • icon-certificate
  • icon-chart
  • icon-chat
  • icon-devices
  • icon-email
  • icon-folder
  • icon-headset
  • icon-hits
  • icon-loop
  • icon-marker
  • icon-pin
  • icon-rating
  • icon-rocket
  • icon-tag
  • icon-timer
  • icon-user
  • icon-video
  • icon-zoom

Testimonials

frontpage_7The structure of the single testimonial is following:

<blockquote>
<p>@gavickpro is really inspiring; inspiration helps to design better websites and graphics!</p>
<img src="[pageurl]/wp-content/themes/Mo/images/demo/testimonial_avatar_2.jpg" alt="" /><strong>Piotr Gavick</strong><a href="#">@piotrgavick</a>
</blockquote>

Newsletter

frontpage_8

Newsletter is a widget from Wysija (MailPoet Newsletters) plugin with it’s aesthetics adjusted to fit the MO theme.