Theme features

This article describes additional features and tricks used in this theme.

One page layout

If you want to achieve the one page layout you should enable it in the basic theme settings. Then all widgets on the bottom1-2 widget areas will be displayed with the 100% width. Additionally you can use style grey background to achieve the grey background in the selected widgets.

Scroll animations

This theme contains the animation system based on the scroll event – some page elements can be displayed after scrolling the page to the specific point.

The animation engine uses two types of animation:

Single animation
Animation queue

Single animation

You have to add class animate to the element – the class loaded will be added when the user will scroll the page to area with this element.

Animation queue

You have to add class animate_queue to the container with the elements which have class animate_queue_element – then these elements will be animated one after another with delay 100ms.

Team element

The team feature uses the figure and figcaption elements – it uses the data-* attributes to store the social media links:

<div class="gk-team col4 animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/about/1.jpg" alt="Tim Berners">
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/about/2.jpg" alt="Julia Morena">
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/about/3.jpg" alt="Eddy Doe">
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/about/4.jpg" alt="Robert Frost">
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>

Using the col1-col4 classes you can specify the amount of columns.

The social icons overlays are generated automatically.

Quote element

You can create big quote text using the h1,h2 or h3 element and the gk-quote class:

<h2 class="gk-quote">“We bring a personal and effective approach to every project we work on, which is why our clients love us and why they keep coming back.”</h2>

Testominal element

The testimonials are using the blockquote element with gk-testimonial class. If you want to create more columns please use classes col1-col4:

<blockquote class="gk-testimonial col2 animate">
   <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/testimonials/1.jpg" alt="Johanna Carrey">
   <p>“Your themes are absolutely amazing! Very user friendly and the best part is compatibility with mobile devices.” <cite>Johanna Carrey</cite></p>
</blockquote>
<blockquote class="gk-testimonial col2 animate">
   <img src="https://demo.gavick.com/wordpress/creativity/wp-content/themes/Creativity/images/demo/testimonials/2.jpg" alt="Paul Braddy">
   <p>“Want to extend my deepest appreciation for all your help and support! You and your team are awesome.” <cite>Paul Braddy</cite></p>
</blockquote>

Contact form shortcode

The contact form area uses two elements: shortcode and custom HTML code.

The contact form shortcode have the following syntax:

[contactform name="yes" email="yes" title="yes" captcha="yes" mailto="[email protected]"]

As you can see the shortcode uses few parameters:

name – specifies if the name field is displayed
email – specifies if the e-mail field is displayed
title – specifies if the title field is displayed
captcha – specifies if the captcha is displayed – it will work only if the reCAPTCHA keys are provided in the theme advanced settings.
mailto – specifies the e-mail where the messages will be send. If not specified then script will use the administrator e-mail.

The custom HTML code is following:

<div class="gk-contact-form" data-cols="2">
[contactform name="yes" email="yes" captcha="yes"]

<div><h3>Creativity</h3><address><p>31 Columbus Circle, 12th Floor</p>
<p>New York, NY 10000</p>
<p>Phone : 876.543.321</p>
<p>Fax : 212.212.12</p></address><p class="gk-contact-footer">We are open Monday from 8 a.m. to 8 p.m.  </p><p class="gk-contact-social-icons"><a href="https://facebook.com/gavickpro" class="gk-contact-fb-icon" target="_blank">Facebook</a><a href="https://twitter.com/gavickpro" class="gk-contact-twitter-icon" target="_blank">Twitter</a><a href="https://plus.google.com/+gavickpro" class="gk-contact-gplus-icon" target="_blank">G+</a><a href="#linkedin" class="gk-contact-linkedin-icon" target="_blank">Linkedin</a><a href="http://pinterest.com/robertgavick/" class="gk-contact-pinterest-icon" target="_blank">Pinterest</a><a href="http://www.gavick.com/magazine/?format=feed&type=rss" class="gk-contact-rss-icon" target="_blank">RSS</a></p>
</div>
</div>

The second column contains the address and social data. Of course you can specify only one column, then please specify the data-cols attribute to 1