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

In 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

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

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

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

The 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-blue, color-red, color-green, color-yellow, color-grey

Features list

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-color1, icon-color2, icon-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

The 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 is a widget from Wysija (MailPoet Newsletters) plugin with it’s aesthetics adjusted to fit the MO theme.

moApp Template