Shortcodes

Animated hover CSS3 effects for images

These shortcodes allows you to display an image and its description with animated CSS3 effect.
Note: If you would like to add your own text into the image description, just modify the shortcode below or edit an existing shortcode of the demo template.

Parameters

title
subtitle
effect : saddie / goliath / julia / marley
background : URL to image with http://
fontcolor : color value (HEX)
width : size in PX
height : size in PX
link : URL with http://
target : _self / _blank

Example 1

[code][anibox effect=”sadie” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title Alternative” subtitle=”Lorem ipsum dolor sit amet.”][/code]

[anibox effect=”sadie” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title 1″ subtitle=”Lorem ipsum dolor sit amet.”]

Example 2

[code][anibox effect=”goliath” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title Alternative” subtitle=”Lorem ipsum dolor sit amet.”][/code]

[anibox effect=”goliath” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title 2″ subtitle=”Lorem ipsum dolor sit amet.”]

Example 3

[code][anibox effect=”julia” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title Alternative” subtitle=”Lorem ipsum dolor sit amet.”][/code]

[anibox effect=”julia” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title 3″ subtitle=”Lorem ipsum dolor sit amet.”]

Example 4

[code][anibox effect=”marley” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title Alternative” subtitle=”Lorem ipsum dolor sit amet.”][/code]

[anibox effect=”marley” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title 4″ subtitle=”Lorem ipsum dolor sit amet.”]

Testimonial

Parameters

title
subtitle
class : custom css class (eg. right)

[code]

[i]Nunc at pellentesque…[/i]

[/code]

Nunc at pellentesque massa, a euismod nisl. Sed quam diam, ultrices ac enim a, cursus gravida lorem. Etiam non suscipit massa. Proin condimentum tristique augue ac varius. Maecenas feugiat ex vitae massa viverra tincidunt et sed tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

[code style=”min-height: 117px;”]

[i]Nunc at pellentesque…[/i]

[/code]

Video Gallery

Parameters

id : ID of video
web : youtube / vimeo
fs : 1 / 0
size : 1 – 12 (grid)

[code][row][pevideo id=”Hq8SzbapPkA” web=”youtube” fs=”1″ size=”4″][pevideo id=”74195893″ web=”vimeo” fs=”1″ size=”4″][pevideo id=”_XwrAefrCxc” web=”youtube” fs=”0″ size=”4″][/row][row][pevideo id=”dtncYXTbjOk” web=”youtube” fs=”1″ size=”6″][pevideo id=”hIhXtoyN_6A” web=”youtube” fs=”1″ size=”6″][/row][/code]

[row][pevideo id=”Hq8SzbapPkA” web=”youtube” fs=”1″ size=”4″][pevideo id=”74195893″ web=”vimeo” fs=”1″ size=”4″][pevideo id=”_XwrAefrCxc” web=”youtube” fs=”0″ size=”4″][/row][row][pevideo id=”dtncYXTbjOk” web=”youtube” fs=”1″ size=”6″][pevideo id=”hIhXtoyN_6A” web=”youtube” fs=”1″ size=”6″][/row]

Image Gallery

Parameters

orderby : none / ID / author / title / date / modified / parent / rand / comment_count / menu_order / post__in
order : ASC / DESC
id : image ID
columns : 1 – 12 (grid)
size : full / medium / thumbnail (image size)
link : URL with http://
modal : enable / disable

[code][pegallery modal=”enable” size=”full” columns=”3″ ids=”2172, 2173, 2174, 2175, 2176, 2177″ orderby=”rand”][/code]

[pegallery modal=”enable” size=”full” columns=”3″ ids=”2172, 2173, 2174, 2175, 2176, 2177″ orderby=”rand”]

Accordion

This shortcode allows you to display accordion panels inside posts or widgets.
Note: Remember to always set the accordion title, and if you want that one of the accordions to be open on page load then enter the status attribute to “active”.

Parameters

title
status : active

[code][accordion][accordion_content title=”Accordion 1″ status=”active”] [i]Ut lectus felis…[/i] [/accordion_content][accordion_content title=”Accordion 2″] [i]Ut lectus felis…[/i] [/accordion_content][accordion_content title=”Accordion 3″] [i]Ut lectus felis…[/i] [/accordion_content][/accordion][/code]

[accordion][accordion_content title=”Accordion 1″ status=”active”]Ut lectus felis, facilisis nec erat at, pretium pellentesque lectus. Donec sit amet nibh est. Morbi augue libero, pretium vitae nulla ac, malesuada ultricies neque. Donec eget neque erat. Nam dictum justo sit amet placerat consectetur. Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula. Fusce eu risus sit amet metus sagittis volutpat vehicula porttitor elit. Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat. [/accordion_content][accordion_content title=”Accordion 2″]Ut lectus felis, facilisis nec erat at, pretium pellentesque lectus. Donec sit amet nibh est. Morbi augue libero, pretium vitae nulla ac, malesuada ultricies neque. Donec eget neque erat. Nam dictum justo sit amet placerat consectetur. Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula. Fusce eu risus sit amet metus sagittis volutpat vehicula porttitor elit. Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat. [/accordion_content][accordion_content title=”Accordion 3″]Ut lectus felis, facilisis nec erat at, pretium pellentesque lectus. Donec sit amet nibh est. Morbi augue libero, pretium vitae nulla ac, malesuada ultricies neque. Donec eget neque erat. Nam dictum justo sit amet placerat consectetur. Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula. Fusce eu risus sit amet metus sagittis volutpat vehicula porttitor elit. Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat. [/accordion_content][/accordion]

Tabs

This shortcode allows you to display tabs inside posts or widgets.
Note: Remember to always set the tab title, and if you want than one of the tabs to be open on page load then enter the status attribute to “active”.

Parameters

class : custom css class

title
status : active

[code]

[i]Sed fringilla purus…[/i]

[i]Maecenas laoreet, ligula…[/i]

[i]Pellentesque sodales elit…[/i]

[/code]

Sed fringilla purus sed mi scelerisque scelerisque. Donec vel enim ligula. Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor. In mattis velit ut nunc luctus ultrices. Nunc aliquet risus eget lorem dignissim, id imperdiet nulla ultricies. Sed euismod bibendum dui, vel faucibus quam tempor at. Etiam sagittis massa in urna sagittis, non viverra nibh placerat.

Maecenas laoreet, ligula vel scelerisque ultricies, lorem urna luctus odio, eget convallis urna erat quis justo. Morbi vel placerat nisl, ut tempor odio. Sed lacinia purus sit amet lorem dictum tincidunt. Nunc placerat egestas vehicula.

Pellentesque sodales elit id pellentesque convallis. Sed sit amet lacinia augue. Nunc sit amet sapien neque. Donec neque neque, hendrerit et gravida eget, aliquam quis urna.

[code]

[i]Sed fringilla purus…[/i]

[i]Maecenas laoreet, ligula…[/i]

[i]Pellentesque sodales elit…[/i]

[/code]

Pellentesque sodales elit id pellentesque convallis. Sed sit amet lacinia augue. Nunc sit amet sapien neque. Donec neque neque, hendrerit et gravida eget, aliquam quis urna.

Grid

This shortcode allows you to display columns inside posts or widgets. Note: It is needed to use the col short inside row shortcode. As well you can choose class suffix for different screens by using screen attribute, default is “md”.

Parameters

title
margin : true / false
size : 1 – 12 (grid)
screen : xs / sm / md / lg (grid)

[code][row][col size=”6″ screen=”sm”] [i]1/2 Phasellus vulputate ac…[/i] [/col][col size=”6″ screen=”sm”] [i]1/2 Phasellus vulputate ac…[/i] [/col][/row][row][col size=”4″ screen=”sm”] [i]1/3 Phasellus vulputate ac…[/i] [/col][col size=”4″ screen=”sm”] [i]1/3 Phasellus vulputate ac…[/i] [/col][col size=”4″ screen=”sm”] [i]1/3 Phasellus vulputate ac…[/i] [/col][/row][row][col size=”3″ screen=”sm”] [i]1/4 Phasellus vulputate ac…[/i] [/col][col size=”3″ screen=”sm”] [i]1/4 Phasellus vulputate ac…[/i] [/col][col size=”3″ screen=”sm”] [i]1/4 Phasellus vulputate ac…[/i] [/col][col size=”3″ screen=”sm”] [i]1/4 Phasellus vulputate ac…[/i] [/col][/row][/code]

[row][col size=”6″ screen=”sm”]1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”6″ screen=”sm”]1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][/row][row][col size=”4″ screen=”sm”]1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”4″ screen=”sm”]1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”4″ screen=”sm”]1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][/row][row][col size=”3″ screen=”sm”]1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”3″ screen=”sm”]1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”3″ screen=”sm”]1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][col size=”3″ screen=”sm”]1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.[/col][/row]

Table

This shortcode allows you to display Pricing Table.

Parameters

width : table width in PX or %
size : cell(s) width in PX or % (coma separated)
head : true / false (table heading display)
fixed : true / false (table fixed layout)
center : true / false (table text align center)

Google Map

This shortcode allows you to display Google Map.

Parameters

address
latitude : number
longitutde : number
width: PX or %
height: PX or %
enablescrollwheel: true / false
disablecontrols: ture / false
zoom : 0 – 23
tooltip : disable / tooltip text

[code][map address=”New York City”][/code]

[map address=”New York City”]

Headline

This shortcode allows you to display headline with effect.

Parameters

subtitle
class : custom css class
style : custom css styles

[code][headline subtitle=”reliability, experience, effectiveness”] [i]Lorem ipsum dolor sit amet:[/i] [/headline][/code]

[headline subtitle=”reliability, experience, effectiveness”]Lorem ipsum dolor sit amet:[/headline]

Icontext

This shortcode allows you to display text with Font Awesome icon and link.

Parameters

title
icon : font Awesome class
link : URL with http://

[code][icontext link=”#” title=”Lorem ipsum dolor sit amet” icon=”fa-coffee”] [i]Lorem ipsum dolor…[/i] [/icontext][/code]

[icontext link=”#” title=”Lorem ipsum dolor sit amet” icon=”fa-coffee”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.[/icontext]

This shortcode allows you to display text readmore button.

Parameters

icon : font Awesome class
link : URL with http://
type : large

[code][readmore link=”#” icon=”fa-arrow-right”] [i]Lorem ipsum dolor[/i] [/readmore][/code]

[readmore link=”#” icon=”fa-arrow-right”]Lorem ipsum dolor[/readmore]

Pricing

This shortcode allows you to display pricing table.

Parameters

img : URL to image with http://
title
price
before_price
after_price
sub
button_name
url : URL with http://
highlight : true / false
class : custom css class

[code]

LOREM

Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet

$49

Join Now

[/code]

LOREM

Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet

$49

Join Now

Font Awesome

This shortcode allows you to display Font Awesome icon.

Parameters

class : font Awesome class

[code][fa] [i]fa-user fa-3x[/i] [/fa][/code]

[fa]fa-user fa-3x[/fa]

Counter

This shortcode allows you to display counters.

Parameters

icon : font Awesome class
size : font size
number
unit
link : URL with http://
title

[code][counter number=”24″ unit=”K” title=”COFFEES”][/code]

[counter number=”24″ unit=”K” title=”COFFEES”]

Animated hover CSS3 effects for images

Testimonial

Video Gallery

Image Gallery

Accordion

Tabs

Grid

Table

Google Map

Headline

Icontext

Readmore

Pricing

LOREM

LOREM

Font Awesome

Counter

Right

Right

Right