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.
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 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="#000000" width="480" height="360" link="#" title="Example Title" subtitle="Lorem ipsum dolor sit amet."]
Testimonial
[testimonial class="right" title="bill gates" subtitle="famous visionary"]Your custom text here[/testimonial]
[testimonial class=”right” title=”bill gates” subtitle=”famous visionary”]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.[/testimonial]
[testimonial title="steven tyler" subtitle="famous singer"]Your custom text here[/testimonial]
[testimonial title=”steven tyler” subtitle=”famous singer”]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.[/testimonial]
Video Gallery
[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
[gallery modal="enable" size="full" columns="3" ids="1716, 1715, 1710, 1721, 1723, 1720" 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”.
[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]
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”.
[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]
[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]
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”.
[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]
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]
Pricing Table
This shortcode allows you to display Pricing Table.
[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]
Google Map
This shortcode allows you to display Google Map.
[pe_map address="New York City" latitude="51.519011" longitude="-0.116958" height="400px" width="100%" zoom="16" enablescrollwheel="false" disablecontrols="false"]
Headline
This shortcode allows you to display headline with effect.
[headline subtitle="reliability, experience, effectiveness"]Our clinic description in 3 words:[/headline]