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

Testimonial

Parameters

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

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]

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]

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][/code]

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][/code] [code][/code]

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]

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)

[code] [table width=”100%” head=”true”] [i]Your title | ipsum | dolor | sit
content | lorem | ipsum | dolor
sit | amet | consectetur | adipiscing
tempus | lacinia | scelerisque | porttitor
laoreet | ultricies | diam | eget
arcu | molestie | dapibus | sollicitudin[/i] [/table] [/code]

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]

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]

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]

Readmore

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]

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][pricing title=”LOREM” price=”49″ before_price=”$” subtitle=”Lorem ipsum” button_name=”buy now!” button_url=”#” ] Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet
[/pricing][/code]

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]

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]