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
- titletag: choose HTML tag for a title: h1, h2, h3, h4, h5, h6, p, span (default: h2)
- 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” titletag=”h2″ subtitle=”Lorem ipsum dolor sit amet.”][/code]
Example 2
[code][anibox effect=”goliath” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title” subtitle=”Lorem ipsum dolor sit amet.”][/code]
Example 3
[code][anibox effect=”julia” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title” subtitle=”Lorem ipsum dolor sit amet.”][/code]
Example 4
[code][anibox effect=”marley” background=”http://placehold.it/480×360″ fontcolor=”#ffffff” width=”480″ height=”360″ link=”#” title=”Example Title” subtitle=”Lorem ipsum dolor sit amet.”][/code]
Testimonial
Parameters
- title
- subtitle
- class : custom css class (eg. right)
[testimonial class=”right” title=”bill gates” subtitle=”famous visionary”]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]
[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
Parameters
- id : ID of video
- web : youtube / vimeo
- fs : 1 / 0
- size : 1 – 12 (grid)
- alt : alternative text showed if browser can’t display video correctly
[code][row][pevideo id=”Hq8SzbapPkA” web=”youtube” fs=”1″ size=”4″ alt=”sample alt text”][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=”1757, 1758, 1759, 1760, 1761, 1762″ 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][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]
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][tabs][tab title=”Tab 1″ status=”active”] [i]Sed fringilla purus…[/i] [/tab][tab title=”Tab 2″] [i]Maecenas laoreet, ligula…[/i] [/tab][tab title=”Tab 3″] [i]Pellentesque sodales elit…[/i] [/tab][/tabs][/code]
[code][tabs class=”pe-clean”][tab title=”Tab 1″ status=”active”] [i]Sed fringilla purus…[/i] [/tab][tab title=”Tab 2″] [i]Maecenas laoreet, ligula…[/i] [/tab][tab title=”Tab 3″] [i]Pellentesque sodales elit…[/i] [/tab][/tabs][/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 : 1 / 0
- 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]
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
- size : width in PX or %
- head : true / false (table heading display)
[code]
[table size=”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]
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 %
- height: PX or %
- enablescrollwheel: true / false
- disablecontrols: ture / false
- zoom : 0 – 23
- tooltip : enable / disable
[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 Czcionki 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]