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

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

Example 2

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

Example 3

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

Example 4

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

Testimonial

Parameters

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

[testimonial class="right" title="bill gates" subtitle="famous visionary"] Nunc at pellentesque... [/testimonial]

[testimonial title="steven tyler" subtitle="famous singer"] Nunc at pellentesque... [/testimonial]

Video Gallery

Parameters

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

[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

[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

[accordion][accordion_content title="Accordion 1" status="active"] Ut lectus felis... [/accordion_content][accordion_content title="Accordion 2"] Ut lectus felis... [/accordion_content][accordion_content title="Accordion 3"] Ut lectus felis... [/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

[tabs][tab title="Tab 1" status="active"] Sed fringilla purus... [/tab][tab title="Tab 2"] Maecenas laoreet, ligula... [/tab][tab title="Tab 3"] Pellentesque sodales elit... [/tab][/tabs]

[tabs class="pe-clean"][tab title="Tab 1" status="active"] Sed fringilla purus... [/tab][tab title="Tab 2"] Maecenas laoreet, ligula... [/tab][tab title="Tab 3"] Pellentesque sodales elit... [/tab][/tabs]

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)

[row][col size="6" screen="sm"] 1/2 Phasellus vulputate ac... [/col][col size="6" screen="sm"] 1/2 Phasellus vulputate ac... [/col][/row][row][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][col size="4" screen="sm"] 1/3 Phasellus vulputate ac... [/col][/row][row][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4 Phasellus vulputate ac... [/col][col size="3" screen="sm"] 1/4  Phasellus vulputate ac... [/col][/row]

Table

This shortcode allows you to display Pricing Table.

Parameters

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

[table width="100{cde30a75998ac870c3c4aa0d520fda04ba1dd7099a6e30934e1e16f7b1bf77c8}" head="true"]
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
[/table]

Google Map

This shortcode allows you to display Google Map.

Parameters

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

[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

[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://

[icontext link="#" title="Lorem ipsum dolor sit amet" icon="fa-coffee"] Lorem ipsum dolor... [/icontext]

Readmore

This shortcode allows you to display text readmore button.

Parameters

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

[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

[pricing img="http://placehold.it/480x360" title="LOREM" price="49" before_price="$" sub="PER ONE HOUR" button_name="buy now!" url="#" ]
Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet
[/pricing]

LOREM

$49PER ONE HOUR

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

buy now!

Font Awesome

This shortcode allows you to display Font Awesome icon.

Parameters

• class : font Awesome class

[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

[counter number="24" unit="K" title="COFFEES"]