Header variations

Header variations (7)

Frontpage version

Description

The above configuration of the Image Show gk_creativity style shows the most important features of this style:

  • Possibility of use images and colors in the slides background
  • Support for the icons in the title and text
  • Animated icons
  • Possibility of defining animations for each slide elements

Configuration

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: Creativity[anim-slide_left]

Text: [anim-slide_right]Get everything you need and create an awesome website

Slide 2

Image: images/demo/desk.jpg

Title: Set your own header picture[anim-slide_right]

Text: [anim-slide_left]Add picture put description over the image

Slide 3

Image: #68b5ff

Title: Add icons to your website[anim-scale]

Text: [anim-opacity][icon-mobile-phone,66,wibrateanim2] [icon-heart,66,pulseanim] [icon-bell,66,flickeranim] [icon-spinner,66,spin]

Read more...

More complex animations

Description

The gk_creativity Image Show style allows you to combine the available animations.

Configuration

To achieve this effect you have to use the following syntax in the title/text:

[anim-ANIMATION_NAME1 ANIMATION_NAME2]

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: First slide

Text: [anim-slide_right scale]You can combine few animations into one effect

Slide 2

Image: #68b5ff

Title: Second slide

Text: [anim-rotate_x_center slide_vertical] Example with slide and rotation

Read more...

Different buttons

Description

The gk_creativity Image Show style allows you to specify different button texts for each slide.

Configuration

To achieve this effect you have to use the following syntax in the Url field:

[YOUR_TEXT]LINK

If the Url field doesn't contain your custom text, then the default text form the language file is used.

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: First slide

Text: For each slide you can set different link text

Url: #gkHeader

Slide 2

Image: images/demo/desk.jpg

Title: Second slide

Text: This slide have different link text

Url: [Different link]#gkHeader

Read more...

Different animation for each slide

Description

The gk_creativity Image Show style allows you to specify different animations for every title and text on the slides.

Configuration

To achieve this effect you have to use the following syntax in the title/text:

[anim-ANIMATION_NAME]

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: First slide[anim-slide_left]

Text: [anim-slide_right]You can specify different animation style for each slide

Slide 2

Image: #81ac8b

Title: Second slide[anim-slide_vertical]

Text: [anim-slide_left]You can make every slide unique

Slide 3

Image: #68b5ff

Title: Third slide[anim-scale]

Text: [anim-opacity]You can set different animation for the title and text

Read more...

Icons in the content

Description

The gk_creativity Image Show style allows you to specify icons in the slide content.

Configuration

To achieve this effect you have to use the following syntax in the title/text:

[icon-ICON_NAME]

or:

[icon-ICON_NAME,SIZE]

or:

[icon-ICON_NAME,ICON_ANIMATION]

or:

[icon-ICON_NAME,SIZE,ICON_ANIMATION]

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: First slide

Text: You can use few icons in the content

Slide 2

Image: #7484ff

Title: Second slide

Text: [anim-opacity][icon-mobile-phone,66,wibrateanim2] [icon-heart,66,pulseanim] [icon-bell,66,flickeranim] [icon-spinner,66,spin]

Slide 3

Image: #7484ff

Title: Third slide

Text: [icon-info] You can combine text with icons

Read more...

Icon as the title

Description

The gk_creativity Image Show style allows you to use the Font Awesome icons in the slide titles.

Configuration

To achieve this effect you have to use the following syntax in the title/text:

[icon-ICON_NAME]

or:

[icon-ICON_NAME,SIZE]

or:

[icon-ICON_NAME,ICON_ANIMATION]

or:

[icon-ICON_NAME,SIZE,ICON_ANIMATION]

In the above example we have used the following settings

Slide 1

Image: #7484ff

Title: [icon-cog,48]

Text: For every slide you can set different icon

Slide 2

Image: #81ac8b

Title: [icon-hand-right,48]

Text: You can use every Font Awesome icon

Slide 3

Image: #68b5ff

Title: [icon-mobile-phone,48,wibrateanim2]

Text: The icons can be animated too...

Read more...
Subscribe to this RSS feed

Log In or Sign Up

Forgot your password? / Forgot your username?