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
[code][anibox effect=”sadie” background=”http://placehold.it/480×360″ fontcolor=”#000000″ width=”480″ height=”360″ link=”#” title=”Example Title Alternative” 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 Alternative” 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 Alternative” 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 Alternative” subtitle=”Lorem ipsum dolor sit amet.”][/code]
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][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]
[/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]
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
- 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]
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 : 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]
LOREM
-
Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet
LOREM
-
Lorem ipsum dolor sit amet | Consectetur adipiscing elit | Lorem ipsum dolor sit amet
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]