Single post Featured

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.

Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna.

Theme Shortcodes

The Creative theme offers a lot of theme-dedicated shortcodes. Below we present available theme shortcodes:

Parallax shortcode

This shortcode has been described on a separate page.

Price table

This shortcode has been described on a separate page.

Banner with button

[bannerbtn btnurl="#" btntext="Take a Tour"[
Learn more before you use our products!
[/bannerbtn]

This shortcode has two parameters:

  • btnurl – url of the button
  • btntext – text of the button

Banner header

[bannerheader]
Welcome to Business Portfolio Website <small>Let's take a tour and you'll love this theme</small>
[/bannerheader]

In this shortcode please use the small tag to get the smaller text under the main content.

Testimonial

[testimonial author="Robert Gavick"]
Thank you for the great customer service! I appreciated that you had someone to help me, even though it was 2:45 a.m. where I am.
[/testimonial]

This shortcode have one attribute – author.

Banner center

[bannercenter]
(http://www.gavick.com) http://bannerurl.com
[/bannercenter]

NOTE: the first URL in the brackets is an url of the link, the second URL is a BANNER image URL

NOTE: you can use the [pageurl] shortcode to automatically generate the page URL

WARNING: please remember to use space between the URLs!

Clients

[clients]
(http://www.gavick.com) [pageurl]/wp-content/uploads/2012/08/demo_logo_1.png
(#) [pageurl]/wp-content/uploads/2012/08/demo_logo_2.png
[/clients]

NOTE: the first URL in the brackets is an url of the link, the second URL is a LOGO image URL

NOTE: you can use the [pageurl] shortcode to automatically generate the page URL

WARNING: please remember to use space between the URLs!

Parallax engine

The Creative theme supports our brand new parallax engine which allows you to create awesome parallax effects in the theme headers. The header_top and header_bottom were especially prepared for this case.

The usage of this engine needs basic knowledge in HTML5 and CSS. To create your own parallax effect, you need to do three things:

  1. create the necessary images (please remember about images for tablet and mobile devices)
  2. create the proper Shortcode code
  3. create the proper CSS code for the parallax effect elements.

Let’s start with the Shortcode code – the basic structure with one animated element seems as listed below:

[parallax name="gkp-background" area="200" height="400"]
gkp-circle;Circle;50%,50%;50%,100%
gkp-square;Square;25%,25%;75%,25%
[/parallax]

It will generate following code:

<div class="gk-parallax gkp-background" data-area="200" data-height="400">
	<div class="gk-parallax-wrap">
		<div data-start="50%,50%" data-end="50%,100%">Circle</div>
		<div data-start="25%,25%" data-end="75%,25%">Square</div>
	</div>
	<div>Tablet view</div>
	<div>Mobile view</div>
</div>

As we can see, the Shortcode contains three attributes:

  • name– it is the unique class name for our parallax area
  • area– it is a value in pixels which specifies when the animation starts. 0 means that the animation will start when the top edge of the header is at the top of the browser window. E.g. 400 means that the animation will start when the top edge of the header is 400 pixels from the top of the browser window.
  • height – it is a height of the area which is necessary for us in pixels

The main container contains three other wrappers:

  • gk-parallax-wrap – it contains animated elements
  • gkp-tablet – it should be styled to contain the image for the tablet devices (please remember to set the height value for this wrapper)
  • gkp-mobile – it should be styled to contain the image for the mobile devices (please remember to set the height value for this wrapper)

And now the most interesting part – animated elements – every animated element should be placed in the gk-parallax-wrapcontainer and have gkp-element class. Additionally, you will probably need to add also own class like gkp-circle or gkp-square.

Every animated element is defined using the following syntax:

CLASS_NAME;TEXT;START_POS_X,START_POS_Y;END_POS_X,END_POS_Y

Explanaition for all parts of the syntax:

  • CLASS_NAME – the class name used in the CSS code for the element styling
  • TEXT – the text used to add semantic context for the element
  • START_POS_X and START_POS_Y – the start position coordinates (as percent values)
  • END_POS_X and END_POS_Y – the end position coordinates (as percent values)

Please remember that the coordinates are calculated relatively to the center of the object!

So in the mentioned code, the circle will go to down of the parallax area and the square will go to the right side:

Circle
Square
Tablet view
Mobile view

A few useful information:

  1. You can use negative values to hide the element at the beginning of the animation
  2. The order of the elements in the wrapper is very important – the last element will be at the top of the stack of layers
  3. To get the background image, we recommend to add the own class for the gk-parallax container and use this class with the loaded class, i.e.:
    .loaded.gkp-background-top

    then, the background image will appear after page loading completes.

Built-in Widgets

The Creative theme contains three built-in widgets:

  1. GK Comments – it is a useful widget to show the latest comments at your website:

    GK Comments

    GK Comments

  2. GK Info Widget – widget which can be used to show useful data about your company and social links:

    GK Info Widget

    GK Info Widget

  3. GK Tweets Widget – you can use this widget to show the latest tweets for the specific query. The article about Tweeter keys is here.

    GK Tweets Widget

    GK Tweets Widget

 

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Single post

Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

Drop In Here

Lorem Ipsum DC
Ametconsecte5, Northbloc
3456 Eastern Bldg Ipsumcity
My Country

Call

+ 1800 123 456 8901

Mail

[email protected]
[email protected]

Interesting Stuff

Besides are some interesting links for you! Enjoy your stay :)

FacebookTwitterGoogle+RSSdribbbleVimeo

GK Tweets

Error 89: Invalid or expired token.