Artículos

Header variations

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]

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

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

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

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