Register

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" width="480" height="360" fontcolor="#000000" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]
Example Title

Example Title

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 Title

Example Title

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 Title

Example Title

Lorem ipsum dolor sit amet.

#

Example 4

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

Example Title

Lorem ipsum dolor sit amet.

#

Testimonial

Parameters

  • title
  • subtitle
  • class : custom css class (eg. right)
[testimonial class="right" title="bill gates" subtitle="famous visionary"]Your custom text here[/testimonial]
Pellentesque venenatis magna sit amet nibh vestibulum posuere. Sed vitae risus aliquam, suscipit magna quis, vestibulum erat. Etiam commodo nisi sed urna aliquam vehicula. In sagittis dui dui, non ultrices ex blandit vel. Donec sit amet sem elit. Fusce efficitur porttitor lorem ac dictum. Curabitur eleifend sapien nulla, ac auctor ex pretium ac.
bill gates
famous visionary
[testimonial title="steven tyler" subtitle="famous singer"]Your custom text here[/testimonial]
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.
steven tyler
famous singer

Video Gallery

Parameters

  • id : ID of video
  • web : youtube / vimeo
  • fs : 1 / 0
  • size : 1 – 12 (grid)
[row][pe_video id="Hq8SzbapPkA" web="youtube" fs="1" size="4"][pe_video id="74195893" web="vimeo" fs="1" size="4"][pe_video id="ixduuC4fH3E" web="youtube" fs="0" size="4"][/row][row][pe_video id="xAsF-LgqKrE" web="youtube" fs="1" size="6"][pe_video id="73847928" web="vimeo" 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
  • ids : image ID
  • columns : 1 – 12 (grid)
  • size : full / medium / thumbnail (image size)
  • link : URL with http://
  • modal : enable / disable
[gallery modal="enable" size="full" columns="3" ids="1878, 1879, 1880, 1875, 1876, 1877" 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"]Some text here that will be included in accordion[/accordion_content][accordion_content title="Accordion 2"]Some text here that will be included in accordion[/accordion_content][accordion_content title="Accordion 3"]Some text here that will be included in accordion[/accordion_content][/accordion]
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.

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 Name 1" status="active"]Some text here that will be included in tab content[/tab][tab title="Tab Name 2"]Some text here that will be included in tab content[/tab][tab title="Tab Name 3"]Some text here that will be included in tab content[/tab][/tabs]
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. 
[tabs class="pe-clean"][tab title="Tab Name 1" status="active"]Some text here that will be included in tab content[/tab][tab title="Tab Name 2"]Some text here that will be included in tab content[/tab][tab title="Tab Name 3"]Some text here that will be included in tab content[/tab][/tabs]
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.

Columns

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

  • size : 1 – 12 (grid)
  • screen : xs / sm / md / lg (grid)
  • margin : 1 / 0
[row][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][col size="4" screen="sm"] Some content here, other shortcodes can be included [/col][/row]
1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/2
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/3
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.
1/4
Phasellus vulputate ac dui aliquet dapibus. Suspendisse ut vestibulum tellus, sed gravida arcu. Aliquam erat volutpat. Donec sit amet eleifend tortor.

Pricing Table – example 1

This shortcode allows you to display Pricing Table.

Parameters

  • size: width in PX or %
  • price_up
  • price_middle
  • price_down
  • title
  • subtitle
  • button_link: URL with http://
  • button_text
[pe_price_table][pe_price_table_box size="50%"  price_up="as low as" price_middle="19.85" price_down="month" title="DSL Internet" subtitle="Step up to incredible DSL cable internet" button_link="http://www.pixelemu.com" button_text="I'm Interested"]<ul><li>Lorem ipsum dolor sit amet</li><li>Morbi rhoncus diam quis augue</li><li>Proin non finibus diam</li><li>Pellentesque varius</li><li>Vivamus quis leo</li><li>Donec ut elit maximus</li></ul>[/pe_price_table_box][pe_price_table_box size="50%" price_up="as low as" price_middle="14.85" price_down="month" title="DSL Internet" subtitle="Step up to incredible DSL cable internet" button_link="http://www.pixelemu.com" button_text="I'm Interested"]<ul><li>Lorem ipsum dolor sit amet</li><li>Morbi rhoncus diam quis augue</li><li>Proin non finibus diam</li><li>Pellentesque varius</li><li>Vivamus quis leo</li><li>Donec ut elit maximus</li></ul>[/pe_price_table_box][/pe_price_table]


as low as19.85month
DSL Internet
Step up to incredible DSL cable internet

  • Lorem ipsum dolor sit amet
  • Morbi rhoncus diam quis augue
  • Proin non finibus diam
  • Pellentesque varius
  • Vivamus quis leo
  • Donec ut elit maximus

I'm Interested
as low as14.85month
DSL Internet
Step up to incredible DSL cable internet

  • Lorem ipsum dolor sit amet
  • Morbi rhoncus diam quis augue
  • Proin non finibus diam
  • Pellentesque varius
  • Vivamus quis leo
  • Donec ut elit maximus

I'm Interested

Pricing Table - example 2

This shortcode allows you to display Pricing Table.

Parameters

  • title
  • size: width in PX or %
  • service_title
  • service_price
[pricing_table title="Service 1" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Service 2" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table][pricing_table title="Service 3" size="33%"][service_item service_title="Lorem ipsum dolor" service_price="$39"][service_item service_title="Donec lobortis quam" service_price="$45"][service_item service_title="Pellentesque habitant" service_price="$68"][service_item service_title="In a facilisis augue" service_price="$28"][service_item service_title="Aenean et placerat erat" service_price="$55"][service_item service_title="Nam neque massa" service_price="$78"][/pricing_table]
Service 1
Lorem ipsum dolor$39
Donec lobortis quam$45
Pellentesque habitant$68
In a facilisis augue$28
Aenean et placerat erat$55
Nam neque massa$78
Service 2
Lorem ipsum dolor$39
Donec lobortis quam$45
Pellentesque habitant$68
In a facilisis augue$28
Aenean et placerat erat$55
Nam neque massa$78
Service 3
Lorem ipsum dolor$39
Donec lobortis quam$45
Pellentesque habitant$68
In a facilisis augue$28
Aenean et placerat erat$55
Nam neque massa$78

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 : enable / disable
[pe_map address="New York City" latitude="51.519011" longitude="-0.116958" height="400px" width="100%" zoom="16" enablescrollwheel="false" disablecontrols="false"]
You must provide valid address or coordinates (1)

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"]Our clinic description in 3 words:[/headline]

Our clinic description in 3 words:reliabilityexperienceeffectiveness

Speed

This shortcode allows you to display internet speed in a cool way.

Parameters

  • up
  • middle
  • down
[speed_icon up="Up to" middle="250" down="Mbps"]
Up to250Mbps
Back to top
Close Offcanvas Sidebar

Archive

Neueste Beiträge

Neueste Kommentare

    Kategorien

    Meta

    Assign widgets on offcanvas sidebar position to make them visible in this area.